Flash Builderで始めるAndroidアプリ開発“超”入門Flashでできる! Androidアプリ制作入門(4)(2/3 ページ)

» 2011年07月11日 00時00分 公開
[有川榮一AKABANA/クラスメソッド株式会社]

[アプリケーションテンプレート]タブ

 モバイルプロジェクトの各テンプレートの詳細は下記の3つがあります。

【1】空白

 「空白」は、モバイル機能を使わないアプリを作る際に使用するテンプレートです。従来のFlexベースのAIRアプリを開発するような感覚で開発できます。「空白」では、特別に設定する項目はありません。

 ウィザードを完了させると、下記のようなメインアプリのMXMLが生成されます。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark">
</s:Application>

【2】ビューベースアプリケーション

 「ビューベースアプリケーション」は、モバイル機能を使ったアプリを作る際に使用するテンプレートです。Flex 4.5のモバイル機能の1つである画面遷移フレームワークを利用できます。

 画面遷移フレームワークは、「ビュー」と呼ばれる画面と、画面遷移を管理する機能を持つ「ビューナビゲーター」で構成されます。ビューベースアプリケーションの設定では、最初に表示されるビューのタイトルを[基本ビュータイトル]に入力します。

図7 「ビューベースアプリケーション」の設定 図7 「ビューベースアプリケーション」の設定

 ウィザードを完了させると、下記のようなメインアプリのMXMLと最初のビューが生成されます。

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:s="library://ns.adobe.com/flex/spark"
                            firstView="views.HomeView">
</s:ViewNavigatorApplication>

【3】タブ付きアプリケーション

 「タブ付きアプリケーション」は、前述のビューナビゲーターをタブで複数管理できる「タブナビゲーター」を持ったテンプレートです。タブナビゲーターは、ビューナビゲーターの数だけタブを表示します。このタブを操作して切り替えることによって、ビューナビゲーターの表示/非表示を切り替えられます。

 タブ付きアプリケーションの設定では、タブを作成できます。

図8 タブを3つ作成 図8 タブを3つ作成

 ウィザードを完了させると下記のようなメインアプリのMXMLと各タブナビゲーターの最初のビューが生成されます。

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                  xmlns:s="library://ns.adobe.com/flex/spark"> 
  <s:ViewNavigator label="Tab1" width="100%" height="100%" firstView="views.Tab1View"/>
  <s:ViewNavigator label="Tab2" width="100%" height="100%" firstView="views.Tab2View"/>
  <s:ViewNavigator label="Tab3" width="100%" height="100%" firstView="views.Tab3View"/>
</s:TabbedViewNavigatorApplication>

[権限]タブ

 次に、[権限]タブを選択します。ここでは、プラットフォームごとの権限設定ができます。

 今回は、プラットフォームが[Google Android]の場合で説明します。ここではAndroidアプリに対してセキュリティまたはプライバシー関連機能を使用するための権限を付与できます。

図9 [Google Android]の権限設定 図9 [Google Android]の権限設定

 また、このウィザードでは、Android固有の設定はできませんが、以下の記事を参考にすると、カスタムURIスキームの設定やアプリのインストール場所などを変更できます。


アプリケーションの設定

 次に、下段にある[アプリケーションの設定]でアプリの動作について設定できます。

図10 [アプリケーションの設定] 図10 [アプリケーションの設定]

自動的に方向を変更

 モバイルデバイスの縦横方向の向きに対して、アプリの傾きを自動的に変更します。設定するとアプリケーション記述子に設定されます。

  <initialWindow>
    <autoOrients>true</autoOrients>
  </initialWindow>

フルスクリーン対応

 アプリをフルスクリーンにします。設定するとアプリケーション記述子に設定されます。

  <initialWindow>
    <fullScreen>true</fullScreen>
  </initialWindow>

画面密度に合わせてアプリのサイズを自動変更

 モバイルデバイスの画面密度(DPI、dot per inch)を指定して、コンポーネントを自動的にサイズ変更できます。選択できるDPIは[160][240][320]の3種類です。設定すると、要素の「applicationDPI」属性に設定されます。

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication
…… applicationDPI="240">
</s:ViewNavigatorApplication>

Androidアプリの画面作成

 Flexモバイルプロジェクトを作成する際にアプリケーションテンプレートを「ビューベースアプリケーション」「タブ付アプリケーション」にした場合は、画面遷移フレームワークを使用して容易に画面遷移が実装できます。

[MXMLコンポーネント]を新規作成

 まずは、画面を作ってみましょう。画面を追加したいFlexモバイルプロジェクトを選択して、[ファイル]→[新規]→[MXMLコンポーネント]を選びます。そうすると[新規MXMLコンポーネント]ウィザードが開始されます。

図11 [ファイル]→[新規]→[MXMLコンポーネント] 図11 [ファイル]→[新規]→[MXMLコンポーネント]

 [新規MXMLコンポーネント]ウィザードでは、パッケージと名前を適宜入力して、レイアウトを選択します。そして、ベースがspark.components.View(以後、Viewコンポーネント)を選んでいることを確認します。画面を作るためには、Viewコンポーネントを必ずベースに指定します。

図12 [新規MXMLコンポーネント]ウィザード 図12 [新規MXMLコンポーネント]ウィザード

 次ページでは引き続き、Flexモバイルプロジェクトをウィザードで作成していきます。さまざまなコンポーネントを配置してみます。さらに、画面を遷移させ、画面間でデータのやりとりをさせた後、Flexの機能を使ったさまざまな画面デザイン方法についても触れます。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。