SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

EDN CodeZine出張所(AD)

FireUIを使ってiPad/AndroidタブレットアプリとiPhone/AndroidフォンアプリのUIを並行開発してみる

RAD Studio XE7の新機能FireUIマルチデバイスデザイナを使う

  • X ポスト
  • このエントリーをはてなブックマークに追加

FireUIを利用してスマホアプリ向けに画面を調整する

スマホ向けUIにチューニング

 さて、同じアプリをiPhone 6に転送して実行してみると、やや画面の狭さが感じられます。これは画面のデザインがタブレット風になっているためです。

図13 iPhone 6上で動作している傾き表示アプリ(調整前)

 iPhone 6はスマホなので、スマホ風の画面になるようにFireUIを用いて調整してみましょう。

FireUIマルチデバイスデザイナ

 FireUIマルチデバイスデザイナには、「マスタ」という概念があります。UI設計は「マスタ」を継承するため、はじめに「マスタUI」を作成し、そのあとで、それぞれのデバイスごとの「差」だけを定義すれば、簡単にデバイスごとの最適化ができてしまいます。

 「マスタ」に対する修正は、マスタを継承したそれぞれのデバイス向けUIにも反映されるので、全体の修正は一箇所のみで済みます。しかも、どのUIも使用するコードは同じなので、例えば「ボタンをタップしたときの動作」は、画面上の位置や表示が違ったとしても共通なのです。

図14 それぞれのデバイス向けのUI設計はマスタを継承する

 今回のケースでは、傾きを表示するコードがそれに当たります。スマホ向けにUIをチューニングしても、コードを変えたりコピーしたりする必要はないのですね。

FireUIマルチデバイスデザイナを使う

 「ビュー」を「マスタ」から「iPhone 5.5 インチ」に切り替えます。そして、レイアウトを変更してラベルの配置を方眼紙のなかに配置しましょう。

図15 スマホの場合の画面デザインを変えたところ

 これをiPhoneで実行すると次のようになります。

図16 iPhone 6上で動作している傾き表示アプリ(調整後)

 タブレットではない、スマホらしい画面レイアウトになりました。

 Androidフォンについても同様の変更を加えましょう。再びFireUIマルチデバイスデザイナで、ビューを「Android 4 インチ スマートフォン」に切り替え、同様のレイアウト調整を行います。

 Androidフォンでも、どのように動くのかを見てみましょう。

図17 Androidフォン(Nexus 5)上で動作している傾き表示アプリ

 画面調整の結果が、Androidフォンにも反映されていますね。

まとめ

 このようにFireMonkeyによってマルチOSに対応し、そしてFireUIによって複数の画面サイズに対応できることがわかりました。特に、複数画面サイズをFireUIによってオブジェクト指向の継承のように差分編集できるのは魅力的ですね。マルチデバイス対応のネイティブアプリ開発において、RAD Studioはチェックしておくべき有力な候補であることがわかりました。

 さて、マルチデバイス対応のネイティブアプリで、しかも複数画面サイズに対応できることがわかったら、次はバックエンドとの通信が気になってくるところです。実は、バックエンドのデータに関する話題は、先日開催されたデベロッパーキャンプでお話ししているのです。最後にこのビデオを紹介して終わりにしましょう。

 

関連情報

 

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
EDN CodeZine出張所連載記事一覧

もっと読む

この記事の著者

EDN編集部(イーディーエヌ編集部)

エンバカデロ・デベロッパーネットワーク(EDN)は、ソフトウェア開発者とデータベース技術者のための技術情報サイトです。Delphi、C++Builderをはじめとする開発ツールやER/Studioなどのデータベースツールに関連する技術記事、ビデオなどを提供しています。EDN編集部は、EDN記事と連携...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8330 2014/12/04 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング