検索
連載

開発者視点で見る、あのドデカい「iPhone 6／6 Plus」：ものになるモノ、ならないモノ（58）（2/2 ページ）

開発者は新iPhoneの画面サイズに合わせ、UI全てを作り直さないといけないの？ アプリ開発者でもある筆者が、その現状を調べてみた。

Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

1つのデザインでiPhoneとiPadに柔軟に対応する

　最新のiOS 8とXcode 6からは、少ないリソースで多種多様な端末への対応できるよう、新たに「Adaptive UI」と呼ばれるフレームワークが取り入れられている。これは、各種画面解像度はもちろん、iPhoneとiPadという異なる端末まで1つのレイアウト定義（ストーリーボードの設定）と共通のロジックコードだけで自動対応しようというものだ。

　例を示そう。図3は、今回の原稿のために、アップフロンティア（http://www.up-frontier.jp）が運営するiOS/Androidエンジニアのための技術情報サイト「ギャップロ」（http://www.gaprot.jp）が用意してくれたXcodeの簡単なサンプルプロジェクトのストーリーボード画面のキャプチャだ。この1つのストーリーボードを定義するだけで、各種iOS端末の画面に対応したコンポーネントの配置を実現することができる。従来であれば、最低でもiPhone用、iPad用とストーリーボードを分ける必要があった。


図3　Xcodeのストーリーボード画面

　これをiOS Simulatorでビルドして各端末の見え方を比較してみよう。図4は、iPhone 5sのポートレイトとランドスケープのぞれぞれのシミュレーター画面だ。見慣れたTable Viewのリストの中に画像のサムネイルが表示されている。サムネイルのどれかをタップするとImage Viewの画面に遷移し、大きな画像が表示される。


図4　iPhone 5sサイズのシミュレーター画面。ポートレイトとランドスケープ

　一方、同じプロジェクトをiPhone 6 Plusでシミュレートしたのが、図5だ。図5左は、iPhone5sと同一の通常のリスト表示されているが、注目したいのは図5右だ。iPadのようなSplit Viewで表示され、左にサムネイルのリスト、右には大きな画像が表示されている。1つのストーリーボードを定義しただけだが、端末やその向きごとに定義された「Size Classes」により、自動的に表示方法を切り分けているのだ。

　図6は、iPad Airをシミュレートした画面だが、このようにポートレイト、ランドスケープ共に、Split View表示される。


図5　iPhone 6 Plusサイズのシミュレーター画面。ポートレイトとランドスケープ

図6　iPad Airサイズのシミュレーター画面

アップフロンティア チーフソフトウェアエンジニア 小林雄一氏

　「従来は、iPhoneではこう表示、iPadではこう表示とコーディングで切り分ける必要があったところも、多くはXcode側で吸収してくれるので、各種iOS端末への対応が省力化できる」（アップフロンティアの小林雄一チーフソフトウェアエンジニア）という。また、「iPhoneとiPadで表示するコンポーネントやレイアウトを部分的に変えるといったことも可能」（同社 星川進ソフトウェアエンジニアリーダー）なので、端末ごとに柔軟性をもたせた画面デザインもできるそうだ。

　もう1つ例を示そう。画像画面に表示されているゴミ箱をタップすると、iPhoneでは、お馴染みのアクションシート（図7）が表示され、iPadでは、ポップオーバーが表示される（図8）。これも該当する部分に1個所だけ「削除する」「キャンセル」というアクションを促すコードを記述しているだけなのだが、フレームワークの側でアクションシートとポップオーバーを切り分けて表示してくれているのだ。


図7　iPhoneでの削除動作。アクションシートが表示される

図8　iPadでの削除動作。ポップオーバーが表示される

アップフロンティア ソフトウェアエンジニアリーダー 星川進氏

　ただ、全てのアプリにおいてこのような方法論での省力化が可能かというと、残念ながらそれはないそうだ。例えば、Auto Layoutなどはパーツをどう配置するかという機能なので「ゲームなど1枚のビューを描画して展開したり、OpenGLで構築されたアプリなどは関係ない」（笠谷氏）という。また、アップフロンティアの小林、星川両氏も「Adaptive UIは、なるべく少ない手順で効率よくマルチデバイス対応できるという部分を追求した結果だが、画面をひとつ作成すれば全ての端末に自動的に最適化してくれるというものではない。そういう作り方も可能なのだろうが、現実的ではない」と口をそろえる。

実際に筆者の制作したPocket Organ C3B3やSuper Manetron（図9、10）にしても、画面上に表示される各パーツのリアル寸法やマージンを試行錯誤しながら決めた経緯がある。楽器をシミュレートした没入型アプリの場合は、画面のデザインをワンストップ化して全ての端末サイズに対応しようというのは、やはり無理があるのだ。


図9　Pocket Organ C3B3の画面

図10　Super Manetronの画面

　というわけで、秋の夜長にシコシコとiPhone 6／6 Plusへのネイティブ対応を進める日々が続きそうだ。一ユーザーとしては、多用なiOS端末の登場は楽しみが増えるのだが、開発者目線でいうと、画面サイズの多様化は、iPhone 6／6 Plusで打ち止めにしてほしいというのは勝手過ぎるだろうか。

「ものになるモノ、ならないモノ」バックナンバー

著者プロフィール

山崎潤一郎

音楽制作業に従事しインディレーベルを主宰する傍ら、IT系のライターもこなす。大手出版社とのコラボ作品で街歩き用iPhoneアプリ「東京今昔散歩」「スカイツリー今昔散歩」のプロデューサー。また、ヴィンテージ鍵盤楽器アプリ「Super Manetron」「Pocket Organ C3B3」の開発者でもある。音楽趣味はプログレ。近著に、「コストをかけずにお客さまがドンドン集まる！LINE@でお店をPRする方法」（KADOKAWA中経出版刊）がある。TwitterID: yamasaki9999


前のページへ | 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る