gihyo.jp » DEVELOPER STAGE » 連載 » 目指せ!iPhoneアプリ開発エキスパート » 第6回 画面とパーツの調整

目指せ!iPhoneアプリ開発エキスパート

第6回 画面とパーツの調整

今回はCocoa Touchが持つ画面遷移機能について,仕組みと実際のプログラミングについて解説します。

画面構成を考える

Viewとコントローラ

Cocoa Touchでは,1つのアプリの中で複数の画面を遷移させるための仕組みがいくつか提供されています。リストから項目を選択すると右側から次の画面が現れたり,下に並べたタブから画面を選択させたりと,その使い方もさまざまです。Cocoa Touchではこれら1つ1つの画面を「View」と呼んでいます。

ViewはすでにInterface Builderで使ったことがあります。Viewという名前のついたウィンドウにパーツを配置して画面を作ったのを思い出してください。それこそがまさにViewの実体です。

Viewを作っただけでは,画面は出るもののアプリとしては何の役にも立ちませんでした。そこで,アウトレットやアクションを作成し,プログラムに接続してアクションの中身を書くことによって,Viewに配置されたパーツの情報を取得したり,パーツに情報を書き込んだりできるようになりました。このように,Viewに対して何らかの操作を加える仕組みを実現するプログラムのことを「コントローラ」と呼びます。さらにこの場合はViewのためのコントローラなので「ViewController」と呼ばれます。アクションの中身を記述したファイルもそのような名前になっていました。そしてInterface BuilderにおいてこのViewControllerを表しているのが,アウトレットやアクションを作成した「File's Owner」に相当します。

Viewとコントローラの関係

Viewとコントローラの関係

このように,Viewに操作を加えるためにはそれに対応したコントローラが必要になります。複数のViewを扱うためには,多くの場合その分のコントローラが必要となるでしょう。

まずは1つの画面で

複数の画面を扱う際には,Cocoa Touchの仕組みをうまく使うことでスムーズに画面を遷移させることができます。しかしながら,どの画面にどの機能を配置するのか,またどのような順番で画面を遷移させるかは,アプリ開発者が自ら決定しなければなりません。場合によっては,目的の機能になかなかたどり着けなくなったり,いま自分がどこにいるのかわからなくなったりと,使い勝手の悪いアプリになってしまうこともあります。

そこで,まだアプリ設計に慣れていない間は,1つのViewでアプリを作ることをお勧めします。Xcodeのテンプレートをそのまま使うことができるうえ,一画面でアプリの機能を把握することができ,作りやすさと使いやすさをうまく両立できます。機能が多くなってきたら,画面を分けるかわりに思い切ってアプリを分けてしまいましょう。

パーツの調整

自動調整機能の活用

iPhoneやiPod touchを使ったことがある方なら,スタイラスを使わずとも指だけでそれなりに意図した操作をすることができることを既に体験していらっしゃることでしょう。これにはタッチパネルの性能よりも,それぞれのアプリが指で操作するのに最適な画面作りを心がけている部分が大きく貢献していると言えます。

青い点線で最適な位置を決定

青い点線で最適な位置を決定

Interface Builderでパーツを配置する際に,画面上に青い点線が表示されることがあります。これは,パーツの位置を決めるにあたって,より最適な位置を教えてくれる機能です。たとえば,画面の上下左右に確保すべき余白の大きさや,他のパーツとの間隔などを適宜点線で表示し,そこに吸い付くように配置してくれます。この青い点線に従ってパーツを配置していくことで,ある程度ととのった画面構成を作ることができます。この自動調整機能をうまく活用し,操作しやすい画面を作ることを心がけましょう。

パーツは使いやすいサイズに

パーツのサイズは,パーツを選択した状態で表示される水色の丸い部分をドラッグすることで調整できます。小さすぎるパーツは操作性を落とす原因となります。前述の自動調整機能で表示される青い点線を参考にしながら,1つ1つのパーツができるだけ操作しやすい大きさとなるように,うまく調整していきましょう。

著者プロフィール

皮(かわ)

1980年宮崎県生まれ。納豆好き。

アイフォーンの皮:http://mixi.jp/view_community.pl?id=3531790

コメント

  • iphoneで指定した画像をサムネイルで表示するアプリ

    iphoneで指定した画像をサムネイルでどうするれば表示するのですか?アプリ作りたいのです

    Commented : #1  ダンバ (2009/07/24, 17:55)

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

2010年版SEO体得講座

本連載では,いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて,最新トレンドからすぐに使えるTipsまでを紹介します。

小型Linuxサーバの最高峰 OpenBlockS 600活用指南

搭載メモリの増加,CPUクロックの向上など,あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から,活用するためのさまざまなノウハウを紹介していきます。

はじめMath! Javaでコンピュータ数学

プログラミング言語入門者向けに,知っていると役立つ数学的トピックスを紹介します。簡単な演習問題と解説で,即活用できる知識を目指します。

教科書には載っていない ネットワークエンジニアの実践技術

ネットワークエンジニア,インフラエンジニアのトラブル対応には,時には「教科書通りにいかない」テクニックが必要となります。資格試験では得られないこうした実践的な技術について,実例を元に紹介します。

Googleケータイ,世に現る

2008年9月,Googleが中心となって開発されている「Android」を採用した携帯電話「T-Mobile G1」が発表されました。本連載ではT-Mobile G1を中心にGoogleケータイに迫ります。

モバゲーオープンプラットフォームに挑戦!――面白法人カヤック流モバゲーオープンプラットフォーム企画と開発のイロハ

2010年1月にリリースとなったモバゲーオープンプラットフォーム。その制作企業であるカヤックが,アイデアを企画に落とし込み,開発までのノウハウを紹介します。

プロトタイピングツールSketchFlowを用いた,Silverlightアプリ開発

SketchFlowプロトタイプ作成からアプリケーション開発までをExpression Blend 3を使って実践的に解説します。

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス

最近のコメント