SHOEISHA iD

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

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

Adobe Developer Connection(AD)

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

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

Flash Builder 4.5を使用したモバイル向け開発ワークフローの合理化

 Adobe Flex 4.5 SDKのモバイル向け開発機能を基にして、Flash Builder 4.5は、従来のActionScriptおよびFlexの開発ワークフローをモバイル向け開発にも対応するように拡張し、プロジェクト作成から完成したアプリケーションのパッケージ化までをサポートします。

モバイルプロジェクトの管理

 Flash Builder 4.5は、ActionScriptモバイルプロジェクトとFlexモバイルプロジェクトという2種類の新しいプロジェクトタイプを導入しています。ActionScriptモバイルプロジェクトを作成すると、完全に白紙の状態からスタートし純粋なActionScriptコードでアプリケーションを開発できます。反対に、Flexモバイルプロジェクトを作成すると、これまで紹介してきたモバイル機能を搭載したFlexフレームワークの他にも、デザインモードやFlash Builder 4で導入されたデータ通信機能など、Flexに関連するFlash Builderの機能も利用できます。

 プロジェクトの作成時に、ターゲットとするモバイルプラットフォームを指定できます。デフォルトでは、サポートされる全てのプラットフォーム(Android、 iOS、 BlackBerry Tablet OS)がターゲットになります。

 デスクトップ/Webアプリケーションやモバイルアプリケーションなど、マルチスクリーン対応のアプリケーションを作成する場合、一般的なプロジェクト構造は、デスクトップまたはWebのUIを開発する通常のFlexプロジェクトまたはActionScriptプロジェクト、モバイルのUIを開発するモバイル向けFlexプロジェクトまたはActionScriptプロジェクト、そして2つのアプリケーション間で共有するモデルやデータアクセスコードを含むライブラリプロジェクトで構成されます。

ビューの設計

 モバイル向けFlexプロジェクトで使用するデザインモードは2つの方法で拡張されています。まず、デザインツールバー(図3を参照)には、異なる画面サイズや縦横比でビューのコンテンツがどのように表示されるかをプレビューできるコントロールが追加されました。Preferences(環境設定)/Flash Builder/Device Configurations(デバイス設定)を選択し、様々なデバイス設定を自分で追加できます。

図3. モバイルデバイスの設定用に提供されているデザインモードのコントロール
図3. モバイルデバイスの設定用に提供されているデザインモードのコントロール

 ViewNavigatorApplicationをベースにしたプロジェクトでViewを編集する場合、全体的なアプリケーション構造に沿ってViewのコンテンツが表示されます。例えば、Viewの上部にActionBarがあり、ActionBarにはそのViewに対応したコンテンツが配置されています。特定のView向けにActionBarをカスタマイズする場合、他のコンテナと同じようにActionBarにコントロールをドラッグ&ドロップします。図4は、ActionBarの右端にあるactionContentエリアにボタンをドロップしているところです。

図4. デザインモードでActionBarにボタンをドロップするところ
図4. デザインモードでActionBarにボタンをドロップするところ

 また、デザインモードは、アプリケーションでピクセル密度のエフェクトを正しくプレビューします。例えば、applicationDPIが160に設定されたアプリケーションがあり、240 DPI用に設定されたプレビューデバイスを選択した場合、デザインモードはアプリケーションを1.5xに拡大して表示します。

デスクトップ上でもデバイス上でもできるアプリケーションの実行とデバッグ

 アプリケーションのテストやデバッグを行う場合には、2つの選択肢があります。テストとデバッグを簡単に実施したいときには、AIR Debug Launcher(ADL)を使用して、デスクトップ上でアプリケーションを起動し、デバッグします。もっと厳密に行いたいときには、実際のデバイス上で直接アプリケーションを起動し、デバッグします。どちらの場合も、ブレークポイントの設定、Variables(変数)パネルやExpressions(式)パネルを使用したアプリケーションのステートの検証など、Flash Builderのすべてのデバッグ機能を使用できます。

 デバイス上で実行またはデバッグする場合、注意しなければならない重要な点がいくつかあります。

  • アプリケーションがデータにアクセスする場合、WiFiまたは携帯電話ネットワーク経由でデバイスからアクセスできるサーバーにデータサービスを必ずデプロイする必要があります。デスクトップ上でローカルホストに対してアプリケーションをテストしている場合、デバイスの「ローカルホスト」はそのデバイス自体となるので、デバイス上では動作しません。
  • 実際のiOSデバイス上でモバイルプロジェクトを実行、デバッグ、またはデプロイするには、Appleからプロビジョニングプロファイルおよび証明書を入手する必要があります。また、iTunesを使用しているデバイス上で手動でアプリケーションをデプロイし、そのデバイス自体で起動する必要があります。
  • プロファイリングは、現在デバイスに対応していません。デスクトップ限定の機能です。

デプロイメントに合わせたアプリケーションのパッケージ化

 アプリケーションが完成し配信準備が整ったら、デスクトップアプリケーションやWebアプリケーションをデプロイするときと同じように、エクスポート/リリースビルドのプロセスを使用します。この場合の大きな違いは、モバイルプロジェクトのリリースビルドを書き出す際、Flash Builderが.airファイルではなくネイティブインストーラーとしてビルドをパッケージ化する点です。例えば、Androidの場合は、ネイティブのAndroidアプリケーションパッケージと同じような.apkファイルを生成します。これにより、上述のように、各プラットフォームのネイティブアプリケーションと同じ方法で、AIRベースのアプリケーションを配信したり、販売したりできるようになります。

 Androidの場合、AIRランタイムをインストールしていないユーザーは、最初にAIRアプリケーションを実行する際、Android MarketからAIRランタイムをダウンロードしてインストールするよう促されます。iOSとBlackBerry Tablet OSではこの手順は不要です。iOSではランタイムがアプリケーションと一緒にパッケージされます。BlackBerry Tablet OSではOSにAIRランタイムが組み込まれています。

 対象となるプラットフォームごとにアプリケーションの配布用のパッケージ作成方法は異なります。

次のステップ

 Flex SDKとFlash Builderがモバイル向けの開発に対応できるようになりました。

 Flash Builder 4.5とFlex 4.5 SDKを使って魅力的なモバイルアプリケーションを構築してみてください。以下は、製品をすぐに使い始める上で役立つリソースです。

 また、製品に関するご質問やフィードバックもお寄せください。

 この記事は、Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported Licenseのもと提供しています。

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

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

もっと読む

この記事の著者

Narciso Jaramillo(Narciso Jaramillo)

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング