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

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

この記事を読むのに必要な時間:およそ 3 分

今回は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)

コメントの記入