SHOEISHA iD

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

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

Adobe Developer Connection(AD)

Flex 4.5 SDKとFlash Builder 4.5を使用したモバイルアプリケーション開発

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

標準的なモバイルアプリケーションの構造

 モバイルデバイスで正常に動作させるために、コアコンポーネントのスキンを作成したり、コアコンポーネントを拡張したりしただけではありません。Flex 4.5では新しいアプリケーションコンポーネントのセットも提供されます。特にこれらのコンポーネントは、タッチスクリーン式スマートフォン用の標準デザインパターンを導入したアプリケーションを簡単に構築できるように設計されています。

 画面領域が限られているので、一般的にこうしたデバイスのアプリケーションは連続したビューの組み合わせで構成されています。それぞれのビューは1つのデータリストまたは1つのデータアイテムの詳細情報を表示します。ユーザーは、データアイテムやその他のコントロールをタップしてビュー間の切り替えを行い、戻る場合は画面のUIまたはハードウェアの「戻る」ボタンを使用します。また、画面のUIやメニューからその他のアクションを実行できます。図2は、このアプリケーションデザインパターンを示しています。

図2. タッチスクリーン式スマートフォン向けの標準的なアプリケーション構造
図2. タッチスクリーン式スマートフォン向けの標準的なアプリケーション構造

 Flexではこうしたパターンをサポートするため、次のコンポーネントが追加されました。

View

 Viewコンポーネントは、単一のUI画面を表示します。一般的には、ViewをベースにしてカスタムのMXMLコンポーネントまたはActionScriptコンポーネントを作成し、コンテンツ内に表示させたいコンポーネントを追加します。例えば、ショッピングカートのアプリケーションの場合には、対象となるアイテムとカテゴリのリストを表示するホームビューを提供することが考えられます。そこから、あるカテゴリをタップして、そのカテゴリ内のアイテムを表示する製品リストビューに移動します。次に、ある製品をタップして、その製品の情報を表示する製品詳細ビューに移動します。

 この場合、それぞれのViewには、該当するビューで表示されるデータを指定したdataプロパティが使用されています。ユーザーがアプリケーションを操作している間、Viewは相互にデータを受け渡します。さらに、dataプロパティを使用することによって、ViewNavigatorおよびViewNavigatorApplicationが、メモリにデータを保存したり、アプリケーションの実行後にデータを維持したりできるようになります(これについては後で説明します)。

 縦横方向に画面を回転させた場合、デフォルト設定によってViewは適切な縦横比に自動的に調整されます。このため、標準的なFlexレイアウトマネージャーを使用する場合は、デベロッパーサイドで細かく設定しなくても、アプリケーションの縦横比が自動的に変化します。詳細に制御したい場合は、Flexのステートメカニズムを利用して、縦方向ステートと横方向ステートの設定を行い、それぞれのステートでViewがどのように表示されるかを正確に指定できます。

ActionBar

 ActionBarは、アプリケーションの各Viewの上部に表示される標準的なヘッダーコンポーネントです。通常、タイトル部分と、現在のビューの更新や新しいアイテムの作成といったアクションを実行する1つ以上のボタンがあります。アプリケーション全体で維持されるコントロールをActionBarに追加したり、ビューごとにActionBarをカスタマイズしたりできます。例えば、アプリケーションのホーム画面のActionBarに検索ボックスを配置したりすることが可能です。

ViewMenu

 ViewMenuは、ユーザーがデバイス上のメニューボタンを押すと画面の下部に表示される標準コントロールです。任意のビューで、メニューアイテムのセットを含むviewMenuItemsプロパティを追加できます。それぞれのメニューアイテムでは、アイコン、ラベル、およびクリックハンドラーを指定します。ViewMenuは、それ自体の表示と非表示を管理し、メニューアイテムを適切にレイアウトします。

ViewNavigator

 ViewNavigatorは、スタックベースの履歴メカニズムを使用して、アプリケーションのActionBarおよびViewのセットを管理します。アプリケーションが起動すると、ViewNavigatorはfirstViewプロパティで指定したビューを表示します。次に、リストアイテムをタップするなどユーザーの操作に反応して新しいビューに切り替える場合にはpushView()を呼び出し、前のビューに戻る場合にはpopView()を呼び出します。Flexでは、ユーザーがアプリケーションを操作している間にコンテキストを維持できるように、最適化されたビュートランジションがそのまま使用できるようになっています。

 ViewNavigatorのデフォルトでは、メモリを節約するために、一度に1つのビューしかメモリに保存されません。ただし、表示済みのビューのデータはスタックに保存されるので、ユーザーが前のビューに戻っても適切なデータが再表示されます。

 標準的なViewNavigatorに加えて、TabbedViewNavigatorも提供されています。TabbedViewNavigatorを使用すると、下部のタブをタップして異なるビューのスタック間を切り替えることができます。

ViewNavigatorApplication

 ViewNavigatorApplicationは、こうした機能をすべて1つにまとめた便利なアプリケーションクラスです。ViewNavigatorApplicationをベースにアプリケーションを構築すると、自動的にViewNavigatorがビューの管理を行います。タブ付きアプリケーションには、類似のアプリケーションクラスであるTabbedViewNavigatorApplicationを使用できます。また、ViewNavigatorApplicationはハードウェアの「戻る」ボタンのデフォルトビヘイビアーを提供し、ViewNavigatorのpopView()メソッドにそれをマッピングします。デバイスの縦横比が変わった場合には、ViewNavigatorと現在のビューにその情報を受け渡して処理します。

 さらに、ViewNavigatorApplicationには、アプリケーションの終了時にそのビューステートとデータを保存する機能が搭載されています。このため、次にアプリケーションが起動したときに、前回と同じビューと閲覧履歴を復元できます。これによって、ユーザーにアプリケーションの中断をまったく意識させることがありません。OSがいつでもアプリケーションを中断または終了させる可能性があるので、モバイルデバイスでは特にこの点は重要になります。

 もちろん、標準的なSpark Applicationクラスを使用して一からアプリケーションを開発したり、Viewナビゲーションパターンを使わずに主なモバイルコンポーネントとスキンを活用したりしてもかまいません。例えば、タブレットアプリケーションを開発している場合は、小さなビューでアプリケーション全体を構築する必要はありません。タブレットは利用できる画面領域が広く、タブレットアプリケーションでは画面切り替えをそれほど必要としないからです。こうしたケースでは、ViewNavigatorApplicationを使用せずに、標準的なSpark Applicationで開発したいと考える人もいるでしょう。ただしその場合でも、モバイル用に最適化されたコンポーネントとスキンの利点を活かすために、モバイルテーマを使用してください。

次のページ
パフォーマンスの最適化

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

Narciso Jaramillo(Narciso Jaramillo)

 Narciso (nj) JaramilloはFlex製品ラインの製品デザインを統括しています(場合によってはコードを記述することもあります)。Jaramilloは1997年にDreamweaver 1.0のエンジニアとしてMacromediaに入社し、その後、数バージョンにわたって製品デザインと製品開発のリーダを務めてきました。また、Macromedia ContributeのデザインおよびUI開発でもリーダを務めるとともに、Macromedia製品の統一UIのデザインにも携わってきまし...

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング