Flashでマルチデバイス向けのアプリを効率的に開発しよう　前編

スマートフォンをはじめとするモバイルデバイスが急激に増加しています。モバイルデバイスは、PCに比べて、より個人的な用途で利用されます。コンテンツ／アプリ提供者はそのニーズに合わせて、モバイルデバイスで動作するコンテンツ／アプリを提供する必要があります。一方、ユーザはモバイルデバイスであっても、PCと同じユーザエクスペリエンス（以下UX）を期待します。

様々なデバイスに対してコンテンツ／アプリを提供し続けるためには、開発者はそれぞれ違う開発環境に慣れる必要があり、コンテンツ提供者は新しいデバイスが増えれば増えるほど、開発リソースと開発にかかる工数を確保する必要があります。

Flash Platformは、こうしたマルチデバイス展開を行う上で、最適な選択肢といえます。Flash Platformを利用すると、1つの開発環境でPC／iPhone／Android／BlackBerry Playbook／TVなど様々なデバイス向けのコンテンツ／アプリを制作できます。つまり、新しいデバイスが登場した際、新規で開発リソースを追加せずとも、既存のFlashの開発リソースを利用することができます。コンテンツ／アプリの内容によっては、メインロジックはデバイスと関係なく再利用し、デバイス特有の機能だけを追加するだけでいいのです。

本記事では、PCとモバイルデバイスに対応した写真補正アプリを制作すると想定して、その設計から制作方法を解説します。2回に分け、前編では設計に関する内容を、後編では設計にもとづいたアプリの制作方法を取り上げます。

※なお本記事では、複数のデバイス向けにアプリを制作する際に必要なワークフローを中心に解説し、具体的なActionScriptのコードやアプリをApp StoreやAndroid Marketなどに登録する方法は省略します。ご了承ください。

アプリは、外部からの影響により大きく変化する動的な部分と、変化しない静的な部分に分けることができます。車を例にすると、見た目にはエンジン／タイヤ／車体フレームなどの部品で構成されており、これらは製造会社や車種によって違います。しかし、見た目が異なっても、車が動く原理、すなわち「エンジン　→　変速機　→　タイヤ」などの基本的な内容は同じです。車種により異なるエンジン／タイヤなどが動的な部分（追加する部分）、車が動く原理が静的な部分（再利用できる部分）になります。

Flashで複数のデバイス向けにアプリを制作する場合も、「再利用できる部分」と「追加する部分」を分けて考えることで、工数や開発リソースの節約が可能です。まずは、全てのデバイスで共通する、アプリ自体の用途や目的を整理しましょう。「写真を補正する」「P2Pでファイルを共有する」「動画を再生する」「SNSと連動する」といったレベルでの整理でよいでしょう。

アプリの内容を整理したら次に、より具体的な部分でデバイスにどのような機能が必要かを洗い出します。例えば、「写真補正のためにカメラを利用するか」「ファイルの共有のためにローカルへのアクセスが必要か」「音を録音するためにマイクを使用するか」といった感じです。

アプリの目的や概念が頭の中で整理できたら、それを可視化します。ここからは、PCとモバイルで使用できる写真補正アプリケーション「R-fotoMix」を開発するという想定で説明します。

開発環境と制作物の定義

開発環境と制作物は以下のように定義します。

機能の設計

次は、アプリの機能の設計です。R-fotoMixでは下記のような機能を考えてみました。

• 全体機能
  • 写真を補正する。
  • 補正した写真をローカルに保存する。
• 補正する写真を選択する方法
  • カメラ付きのデバイスの場合は、カメラで写真を撮影する。
  • ローカルに保存されている写真を利用する。
• 補正する方法
  • すでに用意されているプリセットで行う簡単補正。
  • Tone Curve（トーンカーブ）を利用したマニュアル補正。

ActionScriptで作業する際にもっとわかりやすくするため、さらに「再利用できる部分」と「追加する部分」に分けてみました。

レイアウトの設計

次は、デバイスごとの画面レイアウトを考えてみます。R-fotoMixの場合、デバイスの画面サイズを基準にして、異なるレイアウトにします。8インチを基準にして、スマートフォン向けとタブレット／PC向けに分けて、それぞれの画面に合わせたレイアウトを見せます。以下のワイヤフレームは、2種類のレイアウトをPortrait（縦長）とLandscape（横長）に分けたものです。

グラフィック要素の設計

モバイルアプリにおいて、グラフィック要素の仕様はコンテンツのパフォーマンスに大きく影響を与える可能性があります。R-fotoMixの場合、パフォーマンスに影響があるほどグラフィック要素は多くないですが、より良いパフォーマンスを目指して次のような処理を行います。

• 全体的なインターフェイスはActionScriptで作成してBitmapに変換。
• 各ボタンは、アイコン（Illustratorを使いベクター形式で作成してインポート）とラベル（静的テキストフィールドで生成）を子要素にしてSpriteを生成後、Bitmapに変換。
• 作成されたグラフィック要素はcatchAsBitmapでキャッシュ処理を行う。

※ボタンの背景はMouseOver／MouseOut／TouchOver／TouchOutなどの処理によって変化させたいので、今回はActionScriptで作成します。もちろん、各ボタンを用意して1枚の画像に作成してもかまいません。

設計についてはここまでです。後編では、ここで設計した内容をもとに、制作物の作成と書き出しの際に必要な内容を簡単なサンプルコードを交えて解説します。