PR

iPadで稼働するアプリケーションへの発展

2010年5月31日(月)
新居 雅行

スプリットビューによる新しいユーザーインタフェース

前回までに紹介したアプリケーションをiPad向けに移植した結果は以下の図の通りです。 iPad向けのアプリケーションのプロジェクトはこちらからダウンロードしてください。 なお、サーバー側では適切にMySQLとPHPによるバックエンドが稼働している必要があります。 これらは、第3回の記事を参照してください。

ここでは、iPadに特有の「スプリットビュー」を使っています。 ランドスケープ(横長)で表示しているときには、左右に分割してそれぞれのビューが表示されます。 このとき、左側はリストで、右側は左側で選択した項目の詳細を表示するといったユーザーインタフェースを構築します。

ポートレート(縦長)の場合には異なる表示をします。ランドスケープのときにあった左側のビューが見えなくなり、 右側の詳細ビューだけになります。そして、ツールバーにあるボタンをタップすると、 「ポップオーバー」と呼ばれるこれも新しい表示形態で、見えなくなった左側にあった一覧表示ができるようになります。

iPadのスプリットビューはランドスケープとポートレートで違う見せ方ができる
図2-1:iPadのスプリットビューはランドスケープとポートレートで違う見せ方ができる(クリックで拡大)

これがスプリットビューの特徴であり、画面サイズが広くなったiPadでは標準的に使われるようになるでしょう。 一見すると複雑そうに見えるかもしれませんが、フレームワーク側でかなり多くのことをまかなえるので、 スプリットビュー自体の管理はそれほど大変ではありません。

また、iPhoneと同様にナビゲーションによる遷移するユーザー・インタフェースも作成できますので、 それぞれのビューを切り替える場合には、iPhoneと同様に、ナビゲーションを使うというのも1つの手段です。

サンプル・アプリケーションでは、右側のビューのリストにある項目をタップすると、 ポップオーバーで新規登録のための画面を出します(図2-2)。 結果的に、iPhoneだと遷移する3つの画面が、iPadでは1つの画面でまかなえるようになります。 もちろん、常にこのような構成がベストとは限りませんが、見かけは大いに変わるという結果になります。

iPhoneでの3画面遷移がiPadでは1画面に集約できる

図2-2:iPhoneでの3画面遷移がiPadでは1画面に集約できる(クリックで拡大)

スプリットビューの実現方法

スプリットビューを実現するには、UISplitViewControllerというクラスを使います。 これに対応するビューはなく、UIViewControllerと組み合わせたビューや、 UITableViewControllerと組み合わせたリストなどといっしょに稼働させます。

XIBファイル内については、UISplitViewControllerクラスのインスタンスがメインに据えられ、 その中には2つのビューコントローラを設定できます。詳細は実際のプログラムを参照してもらうとして、 もう少しシンプルなサンプルが欲しい方は、プロジェクトを作るときのテンプレートとして 「Split View-based Application」を指定して作ったプログラムを参照すると良いでしょう。

非常に単純に言えば、UISplitViewControllerクラスのインスタンスの中に、 左右のビューに相当するビューコントローラを差し込んでおくことで、自動的に表示されます。

それぞれのビューコントローラは、まずは画面の回転を受け入れるように、 UIViewControllerのメソッド「shouldAutorotateToInterfaceOrientation:」のオーバーライドを行います。 後はそれぞれのビューでの表示作業がきちんとできるように行います。

2つのビューはもともと見えているので、左側を選択したときに右側が更新されるように、何らかの手だては必要です。 右側のビューのコントローラで更新要求を受け付けるためのメソッドなどを定義するというのが1つの方法でしょう。 サンプルプログラムのBookingListViewControllerクラスにある「loadCurrentData」というメソッドはその手法です。

このサンプルプログラムは左側の一覧したデータで選択したレコードなど、 ビューの間で選択したデータがうまく受け渡るようにする作業はもともとRentalDBクラスに組み込んであります。 その仕組みはそのまま使えることになります。

フリーランスのトレーナー、コンサルタント、プログラマー、ライター。MacやiPhoneを中心としたトレーニング、FileMaker、 Access、MySQLを軸にしたWeb系の開発などが主な業務。iPhoneアプリ「郵便番号検索」を開発し、App Store開設初日に掲載される。Apple認定トレーナー、Apple認定システムアドミニストレータ、Microsoft認定トレーナー、 FileMaker認定デベロッパー。著書に「iPhoneアプリケーションプログラミング」など。京都工芸繊維大学大学院修了。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています