本記事では、Flash Builder 4.5を使って、SlashdotサイトのRSSを読み込むモバイルアプリを構築する方法を解説します。解説においては、Flash Builder "Burrito" と、下記2つのFlash Builderプロジェクトを含むサンプルデータを利用します。

サンプルファイル:SlashdotRSSReaderProjects.zip (240KB)

  • SlashdotRSSReaderAssets.fxp
    モバイル向けRSSリーダーの作成に必要なアイコンや他のアセットが用意されたスタータープロジェクトです。ソースコードは用意されていません。
  • RSSReader_completed.fxp
    チュートリアルに沿って完成させたプロジェクトです。ソースコードを参照する際に利用してください。

※本記事は、Adobeエバンジェリストチームにより提供されています。記事所有者(SlashdotやAdobeを含む)の著作権を侵害しない限り、記事の再利用・改変や、概ねの目的に対して使用することができます。例えば、モバイル開発をテーマとした教育現場において、この記事を教材として利用することもできます。

プロジェクトとサービスコールのセットアップ

最初のセクションでは、モバイルAIRアプリを構成する様々なコンポーネントと、下記作業の方法について説明します。

  • 新規モバイルプロジェクトのセットアップ
  • 様々なビューにおける、プロジェクトのテスト
  • リモートデータ接続のセットアップ、RSS(XML形式)の解析、解析結果とビジュアルコンポーネントとのバインド
  • サービスコールの戻り値の型の設定

Flash Builder 4.5(コードネーム「Burrito」)は、モバイル向けFlexアプリの開発に適した、作業効率の良いIDEだと言えるでしょう。モバイル向けFlexアプリはそもそもAIRアプリですし、Flash Builderには特にAndroid OS用アプリを構築する上で役立つ新機能が用意されています。図1は、あるモバイルFlexアプリにおけるリソースを、Flash Builderのパッケージエクスプローラーで表示したところです。いくつかのコンポーネントを使って構築しているのがわかります。

それでは、モバイル向けRSSリーダーを作成するために、プロジェクトとサービスコールのセットアップを行いましょう。下記の作業には、8~10分かかります。

  1. ブラウザでhttp://rss.slashdot.org/Slashdot/slashdotにアクセスします。表示されたRSSフィードのソースを見ると、RSSのフォーマットで記述されていることがわかります。

    Note:Internet Explorerでうまくいかない場合は、他のブラウザで試してみてください。
  2. ブラウザウインドウからこのURLをコピーします。
  3. Flash Builder "Burrito"のメニューから「ファイル>新規>Flexモバイルプロジェクト」を選び、開いた[新規Flexモバイルプロジェクト]ウインドウの[プロジェクト名]に「RSSReader」と入力します。[次へ>]ボタンをクリックして、[終了]ボタンをクリックします。すると、Flash Builderがプロジェクト内に自動で2つの新規ファイル(RSSReader.mxmlと_RSSReader.mxml)を作成し、そのファイルが開いた状態になります。

    Note:自動で作成されるファイルのソースコード内容が、Flash Builderのビルドや環境設定によって異なることがあります。例えば、もしRSSReader.mxmlのルート要素が<components:MobileApplication>となっている場合は、<s:MobileApplication>と変更して下さい。同様に、ビューのファイルのルート要素が<components:View>となっている場合は、<s:View>と変更して下さい。

    分かり易くするために、_RSSReader.mxmlのファイル名をFlash Builder のリファクタリング機能を使ってRSSReaderHome.mxmlとリネームします。パッケージエクスプローラのツリー構造からviewsパッケージの下にある_RSSReader.mxmlを選択し、右クリックで表示されるメニューから[名前を変更]を選択します。クラスの名前を変更ダイアログが表示されるので、新規の名前に「RSSReaderHome」と入力して、OKを押します。
  4. データサービスのセットアップを開始するために、RSSReaderHome.mxmlを開いて、メニューから「データ>XMLに接続」を選んで下さい。
  5. [データとサービスに接続…]ダイアログ内の[XMLソース]欄では[URL]を選択し、[URL]欄にはステップ1のSlashdotのURLをペーストして、[呼び出し]ボタンをクリックします。
  1. Flash Builderが内部でサービスの解析を行います。解析後、[ノードを選択]欄で[item]を選び、[配列ですか?]にチェックを入れます。そして、[サービス詳細]欄のサービスやパッケージの名前が図2のようになっているか確認してください。
  2. [終了]ボタンをクリックします。
  3. Flash Builderがサービスを作成したら、メニューから「ウィンドウ>ビューの表示>データとサービス」を選んで[データとサービス]ビューを開きます。新規に作成されたgetData()関数を選択して、右クリックのメニューから[戻り値の型を設定]を選びます。
  1. [戻り値の型を設定]ダイアログでは、[サンプルデータから戻り値の型を自動検出]が選択されていることを確認し、[次へ>]ボタンをクリックします。
  2. 次の画面では、[パラメーターを含む完全なURLを入力して取得]を選択し、[取得するURL]欄にSlashdotのURLをペーストして、[次へ>]ボタンをクリックします。
  1. 次の画面では、[作成する新規データ型の名前を入力]を選んで「Item」と入力し、[ルートを選択]欄で「Item」を選択します。

    Note:Slashdot以外のRSSフィードを使用している場合は、どのプロパティがルートノードとなるのかを確認し、それを選ぶ必要があります。

  1. [終了]ボタンをクリックします。
  2. [データとサービス]ビューに戻り、getData()関数を選択して、右クリックのメニューから[サービスの呼び出しを生成]を選びます。
  3. ソースビューにおいて、「top="0", left="0",right="0",bottom="0"」というプロパティでListコンポーネントを追加します。
  4. デザインビューからListコンポーネントを追加することもできます。追加したListコンポーネントを選択肢た状態で[プロパティ]タブを選び、[サイズと位置]欄の[制約]のところまでスクロールして、図6のように設定します。

このようにListコントロールに制約を設けることで、モバイル端末の表示モード(ランドスケープモードか、ポートレートモードか)を切り替えても、アプリは一貫した見た目を保つことができます。

  1. <list>要素に「labelField="title"」を付与して、<s:AsynchListView list="{getDataResult.lastResult}" /> を以下のように追加します。
<s:List left="0" right="0" top="0" bottom="0" labelField="title"> <s:AsyncListView list="{getDataResult.lastResult}" /> </s:List>

Note:AsyncListViewインスタンスのlistプロパティは、Listに表示されるデータを保持するもので、サービスコールからの戻り値がセットされます。ここではlastResultを使い、戻ってきたitemの数と一致するようにリストを拡張しています。

  1. ルート要素に、viewActivateイベントでgetData()を呼び出すように記述します。
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" … title="Home" viewActivate="getData()">
  1. デザインビューに切り替えて、Slashdotサイトの雰囲気に合わせ、[コンテンツの背景]を「#336666」に、[クロム]を「#666666」に変更します。
  2. では、アプリを実行してテストしてみましょう! パッケージエクスプローラーでプロジェクトを選択し、右クリックのメニューから「実行>モバイルアプリケーション」を選びます。初めて実行する際には、[実行構成]ダイアログが表示され、エミュレーター(デスクトップ)上で実行するか、デバイス上で実行するかを設定する必要があります。ここでは、ひとまずエミュレーター(デスクトップ)上で実行しておきます。

図7のアプリに読み込んだフィードリストの3つ目を見ると、エンティティ参照(&mdash;)がそのまま表示されてしまいます。これを避けるには、エンティティ参照を扱うコードを追加する必要があります。詳しくは次のセクションで説明します。

Listデータに対する処理

このセクションでは、下記作業の方法について説明します。

  • CollectionChangeイベントのイベントハンドラーのセットアップと、イベントの渡し
  • labelFunctionを使った特定の関数の呼び出し(ここでは、カスタムデータ型[Item[]] を受け取り、Stringを戻す関数)
  • 正規表現変数のセットアップ
  • String replace()メソッドを使って、エンティティ参照を別な文字列へ置き換え

下記の作業には、約10分かかります。

  1. RSSReaderHome.mxmlを開きます。
  2. ソースビューにし、Listコントロールに「id="myList"」を付与します。
  3. <s:AsynchListView>要素内にカーソルを配置し、collectionChangeイベントのイベントハンドラーを追加し、fixEntityReferences()関数を呼び出すようにします。collectionChangeイベントは、リストの値が変更されると発行されます。
<s:List id="myList" left="0" right="0" top="0" bottom="0" labelField="title"> <s:AsyncListView list="{getDataResult.lastResult}" collectionChange="fixEntityReferences(event)" /> </s:List>
  1. 次に <fx:Script>タグに以下のコードを追加して、イベントハンドラーを実装します。
import mx.events.CollectionEvent; import valueObjects.Item; protected function fixEntityReferences(event:CollectionEvent):void { myList.labelFunction = replaceEntity; function replaceEntity(item:Item):String { var p1:RegExp = /(&mdash;)/ig; //他のエンティティ参照も対象とする場合は、ここに追加してください var thisString:String = item.title.replace(p1, "-"); trace(thisString); return thisString; } }

このイベントハンドラー関数にはCollectionEvent型のイベントが渡され、myListにはラベルファンクションとしてreplaceEntity()関数を追加します。この関数には、Item型のオブジェクトが渡されます。(Item[] は、getData()サービスからの戻り値の配列です)。

replaceEntity()関数では、エンティティ参照(&mdash;)を検出するための正規表現変数「p1」を宣言しています。そしてString変数「thisString」を作成し、item.titleのreplace() メソッドを呼び出して、エンティティ参照(&mdash;)を「ダッシュ(-)」に置き換えています。最後に、新しいitemラベルとして反映されることになるthisStringを戻します。

  1. 再度アプリを実行してみてください。エンティティ参照(&mdash;)が表示されくなっているはずです。

Note:このセクションで紹介したエンティティ参照への対応手段は、簡易的な方法で、ベストな方法でありません。値オブジェクト(VO)内で対応する方が良いでしょう。

詳細ビューの追加

このセクションでは、ビューとViewNavigatorコンポーネントを扱う方法について説明します。ViewNavigatorコンポーネントは、ユーザーの操作に応じてアプリのビューを管理するためのものです。ここでは、RSSアイテムの詳細を表示する新しいビューを作成します。下記の作業には、約20分かかります。

  1. 新しいビューを追加するには、パッケージエクスプローラーのviewsパッケージを選んだ状態で、右クリックのメニューから「新規>MXMLコンポーネント」を選びます。表示された[新規MXMLコンポーネント]ウィンドウの[名前]欄に「DetailsView」を入力し、他の項目はデフォルト設定のままで[終了]ボタンをクリックします。
  2. RSSReaderHome.mxmlに戻り、ソースビューにして<s:List> 要素内の末尾にカーソルを配置し、「change」と入力します。すると、コンテンツアシスト機能によりchangeイベント部分がハイライト表示となるので、それを選択した状態で「Generate Change Handler」を選びます。これにより、イベントハンドラーが設定されます。

新規に作成されたchangeハンドラー関数により、新しいビューを追加するようにします。この新しいビューは、ユーザーがRSSのアイテムリストをクリックした際にその詳細ビューを表示するためのものです。Flexモバイルプロジェクトではビューがスタック機構となっており、ビューをpush(アイテムを最後に追加)したり、pop(最後のアイテムを削除)したりすることができます。

  1. リストのchangeイベントハンドラーのコードを以下のように変更します。
protected function myList_changeHandler(event:IndexChangeEvent):void { var RSSItem:Object = myList.dataProvider.getItemAt(event.newIndex); navigator.pushView(DetailsView, RSSItem); }

pushView()メソッドは2つのパラメーターを取ります。1つはpushしたいビュー、もう1つはそのビューに渡すデータオブジェクトです。ここでは、DetailsViewがpushしたいビューで、RSSItem変数がそのビューに渡すデータです。

  1. アプリを実行してみましょう。RSSのアイテムリストをクリックすると、詳細ビュー(現時点では空っぽ)が表示されます。

詳細ビューの設定

このセクションでは、ホームビューによって詳細ビューがpushされた際に渡されるデータオブジェクトへアクセスし、RSSのアイテムの各属性を表示する方法について説明します。

下記の作業には、約20分かかります。

  1. DetailsView.mxmlを開き、ソースビューにします。
  2. <fx:Script>ブロックを作成し、RSSアイテムのtitle/date/creator/link/descriptionを扱う変数を追加します。
<fx:Script> <![CDATA[ [Bindable] private var rtitle:String; [Bindable] private var rdate:String; [Bindable] private var rcreator:String; [Bindable] private var rlink:String; [Bindable] private var rdesc:String; ]]> </fx:Script>
  1. デザインビューに切り替えて、ホームビューと同様のカラーリングにします。Slashdotサイトの雰囲気に合わせ、[コンテンツの背景]を「#336666」に、[クロム]を「#666666」に変更します。
  2. ソースビューに切り替えて、ビューのコンテンツエリア(</fx:Declarations> タグの下)に以下のMXMLを追加します。
<s:BorderContainer top="0" bottom="0" left="0" right="0" backgroundColor="#336666"> <s:Label left="10" top="20" width="70" fontSize="18" text="Title:" textAlign="right"/> <s:Label left="90" right="20" top="15" height="45" backgroundColor="#FFFFFF" color="#666666" fontSize="18" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" text="{rtitle}"/> <s:Label left="10" top="75" width="70" fontSize="18" text="Date:" textAlign="right"/> <s:Label left="90" right="20" top="70" height="40" backgroundColor="#FEFDFD" color="#666666" fontSize="18" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" text="{rdate}"/> <s:Label left="10" top="125" width="70" fontSize="18" text="Creator:" textAlign="right"/> <s:Label left="90" right="20" top="120" height="40" backgroundColor="#FFFFFF" color="#666666" fontSize="18" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" text="{rcreator}"/> <s:Label left="10" top="175" width="70" fontSize="18" text="Link:" textAlign="right"/> <s:Label left="90" right="20" top="170" height="45" backgroundColor="#FFFFFF" color="#1C05FB" fontSize="18" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" text="{rlink}" textDecoration="underline" click="navigateToURL(new URLRequest(rlink))"/> <s:Label left="10" top="230" width="70" fontSize="18" text="Item:" textAlign="right"/> <s:Label left="90" right="20" top="225" bottom="304" color="#666666" backgroundColor="#FFFFFF" fontSize="18" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" text="{rdesc}" maxDisplayedLines="10" /> <s:Button left="50" right="50" bottom="101" label="Go see on Slashdot" click="navigateToURL(new URLRequest(rlink))"/> <s:Label left="15" right="15" bottom="23" fontSize="11" text="All trademarks and copyrights on this page are owned by their respective owners. Comments are owned by the Poster. The Rest © 1997-2010 Geeknet, Inc." textAlign="center" verticalAlign="middle"/> </s:BorderContainer>

このMXMLには、RSSアイテムの詳細を表示するラベル要素のほか、このRSSアイテムのURLを渡してブラウザで表示するためのボタンも含まれています。「click="navigateToURL(new URLRequest(rlink))".」が、その該当部分です。

  1. デザインビューに切り替えます。ポートレートモードで、コンポーネントがビュー内にキレイに収まっています。ランドスケープモードに変更しても、コンポーネントは新しいレイアウトでキレイに収まります。

RSSフィードのソースには、HTMLコードやエンティティ参照が含まれていることがよくあるので、アプリではこうした文字列を置換する必要があります。アーキテクチャの観点からすると、こうした置換処理はvalueObjectパッケージ内で扱うのが望ましいのですが、ここでは便宜上、ビュー内で行います。

  1. 新しくgetDetails() 関数を作成し、以下のコードを追加します。
import valueObjects.Item; private function getDetails():void { var p:RegExp = /(&mdash;)/ig; var h:RegExp = /<p(>|(\s*[^>]*>)).*?<\/p>/ig; var thisItem:Item = data as Item; rtitle = thisItem.title; rtitle = rtitle.replace(p, "-"); rdate = thisItem.dc_date; rcreator = thisItem.dc_creator rlink = thisItem.link; rdesc = thisItem.description; rdesc = rdesc.replace(h, ""); rdesc = rdesc.replace(p, "-"); }

「data」は、このビューに渡されたデータへの参照変数です。

RSSアイテムオブジェクトのtitle/dc_date/dc_creator/link/description属性は、変数を設定するのに使用しています。また、replace()を呼び出して正規表現を使い、RSSタイトルや説明に含まれるエンティティ参照を置換したり、説明に含まれるHTMLコードを削除しています。

  1. ルートの<s:View>要素に「viewActivate="getDetails()" 」を追加します。これにより、ビューがアクティブになった際にgetDetails()を呼び出します。ついでに、title属性の値(DetailsView)の"Details" と"View"間に半角スペースを入れておきましょう。
  2. アプリを実行してみましょう。RSSのアイテムをクリックして詳細ビューを表示させ、ボタンをクリックしてブラウザでSlashdotのサイトが表示されるか確認してください。

アーキテクチャ上のミスを修正

このセクションでは、モバイル開発に向けたベストプラクティスを紹介します。下記の作業には、約10分かかります。

エミュレーターでアプリを実行すると気づかないかもしれませんが、ホームビューが表示される度にRSSサービスの呼び出しを行っています。これでは、CPUサイクルやバッテリーの消費に繋がる上に、不要なデータ通信費がユーザーに発生してしまいます。言うまでもなく、この状態はアプリとして適切ではありません。

このアーキテクチャ上のミスをより理解するには、ネットワークモニターが役立つでしょう。

  1. Flash Builderのメニューから「ウィンドウ>ビューの表示>その他」を選んで[ビューの表示]ウィンドウを表示して、さらに「Flash Builder>ネットワークモニター」を選んで[ネットワークモニター]ビューを開きます。
  2. [モニターを有効にする]ボタンをクリックして、ネットワークモニターを有効にします(デフォルトでは無効となっています)。
  1. エミュレーターでアプリを実行して、ホームビューと詳細ビューの間を行き来しながら、ネットワークの呼び出しをチェックしてみください(エミュレーター上で詳細ビューからホームビューに戻るには、メニューから「Device > Back」を選ぶか、Control+Bを押して下さい)。

見て分かるように、ホームビューが表示される度にサービスの呼び出しが行われています。でも、これは簡単に修正することができます。

  1. RSSReaderHome.mxmlを開きます。
  2. 図14のように、ルート要素の「viewActivate="getData()"」を削除し、「destructionPolicy="none"」を追加します。ついでに、title属性の値を「Slashdot RSS」にしておきましょう。

destruction policyでは、ビューが削除された際にそのビューのナビゲーターを使用するかどうかのポリシーを定義します。"auto"と指定した場合、ビューがアクティブでない時は、ViewNavigatorコンポーネントがそのビューオブジェクトを破棄します。"none"と指定した場合、ビューはメモリにキャッシュされます。RSSフィードのように頻繁に更新されないようなアイテムの場合は、ユーザーが手動で更新するようにしておくか、ある一定期間ごとにリストを更新するようにしおく方が適切です。

そして、getData()を削除したので、アプリの起動時にgetData()を呼び出す必要があります。メインのアプリケーションファイルから呼び出すようにしましょう。

  1. RSSReader.mxmlを開きます。このファイルは、アプリへのメインのエントリーポイントで、プロジェクトのデフォルトパッケージ内にあります。パッケージエクスプローラーを見ると、そのファイルアイコンには青いドットと緑の三角が付いています。
  1. アプリのルート要素<s:MobileApplication>に「applicationComplete="getRSS()"」を追加します。これで、アプリが初期化されると、applicationCompleteイベントが送出され、getRSS()が呼び出されます。
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.RSSReaderHome" applicationComplete="getRSS()">
  1. 次に、RSSアイテムを取得するための最初のサービスコールを行う関数を作成します。そして、空の<fx:Declarations>を削除して、以下のコードを追加します。
<fx:Script> <![CDATA[ import views.RSSReaderHome; private function getRSS():void { Object(navigator.activeView).getData(); } ]]> </fx:Script>

最初のビューに使用されるのはviewsフォルダ内のRSSReaderHome.mxmlなので、上記のコードから直接RSSReaderHome.mxmlを参照し、そのファイル内のいかなるpublic関数も呼び出すことができます。

  1. RSSReaderHome.mxmlに戻り、以下のように、getData()関数のアクセス修飾子を「protected」から「public」に変更します。
//service call public function getData():void { getDataResult.token = slashdot.getData(); }

アプリを実行してみましょう。getData()が呼び出されているか、かつホームビューが表示される度に呼び出されてはいないかを確認してください。

手動更新機能を追加

ホームビューが表示される度にサービスコールが呼び出されないようにしたので、ユーザーが手動でRSSアイテムのリストを更新できる手段を提供する方が良いでしょう。このセクションでは、下記のについて説明します。

  • アクションコンテンツ
  • アプリから、ビューに含まれる関数を呼び出す方法
  • ボタンにアイコンを埋め込む方法

基本的にAndroid向けFlexモバイルアプリの開発には、「ナビゲーションコンテンツ」「タイトルコンテンツ」「アクションコンテンツ」「ビュー」という4つのメインエリアがあります(図16)。通常、アクションコンテンツは右側にあり、ここではリスト更新に使うアイコンを配置します。

  1. 更新アイコンとして、48×48ピクセル、透過背景のPNG画像を用意します。サンプルSlashdotRSSReaderAssets.fxpのiconsパッケージ内にあるrefresh48x48.pngとinfo48x48.pngを使います。
  2. アプリのsrcフォルダを選択して、右クリックのメニューから「新規>パッケージ」を選びます。[新規パッケージ]ウィンドウが開くので、[名前]欄に「icons」と入力して、[終了]ボタンをクリックします。このフォルダにアイコン画像を格納します。
  3. refresh48x48.pngとinfo48x48.pngを新しく作成したパッケージにコピーします。
  4. RSSReaderHome.mxmlを開いて、以下のコードを追加します。このコードは、ホームビューにアクションコンテンツエリアを追加し、その際に更新アイコンを埋め込んだボタンと一緒に追加するという内容です。
<s:actionContent> <s:Button icon="@Embed(source='icons/refresh48x48.png')" /> </s:actionContent>
  1. アプリを実行して、更新ボタンが表示されるか確認しましょう。
  1. ソースビューに戻り、以下の関数を追加します。
private function refreshList():void { Object(navigator.activeView).getData(); }
  1. ボタン宣言内に「click="refreshList()" 」を追加して、クリックイベントを検出し、新しく作成したrefreshList()関数を呼び出すようにします。
<s:actionContent> <s:Button icon="@Embed(source='icons/refresh48x48.png')" click="refreshList()"/> </s:actionContent>
  1. アプリを実行して、ネットワークモニターをチェックしてみてください。更新ボタンをクリックする度にサービスコールが呼び出されているはずです。

アプリを自動更新させるのではなく、更新ボタンを設置してユーザー主導にする、これこそベストプラクティスです。データをどのように取得したいか、バッテリーの残りはどれくらいかを知っているのはユーザー自身です。ユーザーがそれらをコントロールできるようにしておく方が良いでしょう。

情報ビューの追加

アーキテクチャができたところで、次はもう1つビューを追加して、アプリの情報を表示できるようにしましょう。情報ビューは比較的簡単に追加できます。コンテンツとしては、このアプリのソースコードを取得できる情報を掲載します(恩を次に繋いでいこう!)

下記の作業には、約8分かかります。

  1. まだの方は、info48x48.pngをプロジェクトのiconsパッケージにコピーしてください。
  2. このアイコンは、アプリのすべてのビューにおいて表示されている状態にする必要があります。そのため、アイコンをアプリのエントリーポイント(ここではRSSReader.mxml)に追加します。以下のコードを追加して、ボタンとクリックイベントハンドラーshowInfoView()を設定します(この関数はまだ記述していません)。
<s:actionContent> <s:Button icon="@Embed(source='icons/info48x48.png')" click="showInfoView()" /> </s:actionContent>
  1. 新しいビューを追加するには、パッケージエクスプローラーのviewsパッケージを選んだ状態で、右クリックのメニューから「新規>MXMLコンポーネント」を選びます。
  2. 表示された[新規MXMLコンポーネント]ウィンドウの[名前]欄に「InfoView」を入力します。[ベース]欄が「spark.components.view」となっていることを確認して、[終了]ボタンをクリックします。
  1. InfoView.mxmlを開いてソースビューにして、<s:View>要素のtitle属性を「"About RSS Reader"」に変更し、以下のコードを追加します。
<s:Label left="0" right="0" top="0" bottom="0" textAlign="center" paddingBottom="175" paddingLeft="40" paddingRight="40" paddingTop="30" backgroundColor="#336666" text="This application was built to demonstrate how easy it is to create mobile applications using Adobe Flash Builder and Adobe AIR. Slashdot was chosen as a site because it has complex RSS formats and offers an open feed for all to consume. Please consider supporting Slashdot! The source code for this application is freely available and can be found at http://technoracle.blogspot.com/2010/12/mobile-slashdot-rss-reader-tutorial.html."/> <s:Button left="50" right="50" bottom="140" label="Get Source Code" click="navigateToURL(new URLRequest('http://technoracle.blogspot.com/2010/12/mobile-slashdot-rss-reader-tutorial.html'));"/> <s:Label left="15" right="15" bottom="23" fontSize="11" text="All trademarks and copyrights on this page are owned by their respective owners. Comments are owned by the Poster. The Rest © 1997-2010 Geeknet, Inc." textAlign="center" verticalAlign="middle"/>

Note:テキストやnavigateToURLのリンク先は任意です。

  1. ホームビュー(RSSReaderHome.mxml)を開いて、 <fx:Script>ブロック内にshowInfo()関数を追加します。これは、ビューをpushするための関数です。
public function showInfo():void { navigator.pushView(InfoView); }
  1. 詳細ビュー(DetailsView.mxml)を開いて、同様に追加します。情報ビュー(InfoView.mxml)では、ユーザーが情報アイコンをクリックできないようにするので、showInfo()関数は必要ありません。
  2. アプリのエントリーポイント(RSSReader.mxml)を開いて、以下のshowInfoView()関数を追加します。これは、アクティブなビューからshowInfo()を呼び出す関数です。
private function showInfoView():void { Object(navigator.activeView).showInfo(); }

アプリを実行すると、2つの問題に気づくと思います。1つは、ホームビューにあるべき情報ボタンがないということ。もう1つは、情報ビューに無くてもよい情報ボタンが表示されていることです。

ホームビューに情報ボタンが表示されないのは、すでにこのビューに更新ボタン用の<s:actionContent> が記述されているからです。ビューの<s:actionContent> 要素は、RSSReader.mxmlの同要素を上書きします。

  1. ホームビューに情報ボタンを追加するには、RSSReaderHome.mxmlを開いて、<s:actionContent>要素に<s:Button icon="@Embed[source='icons/info48x48.png']" click="showInfo()" />を追加します。
<s:actionContent> <s:Button icon="@Embed(source='icons/refresh48x48.png')" click="refreshList()"/> <s:Button icon="@Embed(source='icons/info48x48.png')" click="showInfo()" /> </s:actionContent>

これにより、情報ボタンが追加され、クリックするとビューのshowInfo()関数が呼び出されるようになります。

  1. 情報ビューから情報ボタンを取り除くには、InfoView.mxmlを開いて空の<s:actionContent> 要素を追加します。
<s:actionContent> </s:actionContent>

Note:情報ボタンを実装する方法は他にもあります。例えば、メインアプリケーションファイルに含める代わりに、必要なビューごとに追加してもいいでしょう。プロジェクトによって、アプローチは異なると思います。しかし通常は、(ほぼ)すべてのビューにおいてボタンが必要となる場合、ここで紹介した方法で実装するのが合理的でしょう。

スプラッシュ画面の追加

このFlexモバイルアプリも完成間近です。最後に考慮することとして、いくつかのデバイスではアプリをロードするのに時間がかかります。スプラッシュ画面を用意すれは、ユーザーも何が起きているかわかるようになるでしょう。

このセクションでは、下記について説明します。

  • スプラッシュ画面とは。それを実装する理由
  • スプラッシュ画面を追加する方法

モバイルアプリでは常に、CPUとバッテリーを効率良く使用することが求められます。もしアプリの起動に時間がかかると、ユーザーに「このアプリは動作が遅いかも」という印象を与えかねません。アプリがユーザーのアクションに素早く反応していることを示す手段の1つとして、Viewを利用する方法があります(ここでいうViewとは、MVCパターンのViewのこと)。スプラッシュ画面の追加は、簡単にできます。アプリのメイン部分がロードされている間はスプラッシュ画面を表示して、メインアプリの初期化が完了したらスプラッシュ画面を消すようにします。

下記の作業には、約5分かかります。

  1. プロジェクトのsrcフォルダ内に新規パッケージを作成して、名前を「splash」と付けます。
  2. サンプルSlashdotRSSReaderAssets.fxpのsplashパッケージ内にあるsplashscreen.pngを作成したsplashパッケージにコピーします。

ユーザーがこのアプリをランドスケープモードで起動させるかもしれません。そのため、ポートレートモードだけで起動するように制限するか、縦横サイズを固定したスプラッシュ画面画像を用意すればいいでしょう(例えば、400×400ピクセル)。

  1. RSSReader.mxmlを開いて、アプリのルート <s:MobileApplication>要素に「splashScreenImage="@Embed('splash/splashscreen.png')" 」を追加します。
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.MainHome" applicationComplete="getRSS()" splashScreenImage="@Embed('splash/splashscreen.png')">
  1. アプリを実行してみましょう。アプリをロードする時間にスプラッシュ画面が表示されるはずです。

Android Market用にアプリをパッケージ

アプリの機能はすべて実装しました。Android Market用にパブリッシュを行いたいところですが、その前にいくつか作業が残っています。初めてAndroid Market用にアプリをパブリッシュするという方は、まずhttp://market.android.com/publish/signupでアカウントを取得してください。

登録後、アプリをパブリッシュする上での必要事項リストを見てください。これらの必要事項に従うことで、あなたのアプリはよりプロが作成したように見えるでしょうし、Android Marketでユーザーが見つけやすくなります。必要事項の中で最も重要なのはアイコンです。512×512ピクセルから16×16ピクセルと、複数のサイズのアイコンが必要となります。まずは一番大きなサイズのアイコンを作ってから、小さいサイズへとスケールダウンしていくといいでしょう。

ベースとなるアイコンを作成したら、以下のサイズのものを/src/iconsフォルダに保存して下さい。

  • icon32x32.png
  • icon36x36.png
  • icon48x48.png
  • icon72x72.png
  • icon128x128.png

オリジナルの512×512ピクセルPNG画像はAndroid Marketで必要となるので、ちゃんと保管しておいてください。なお、上記サイズのファイルは、サンプルSlashdotRSSReaderAssets.fxpの/src/iconsフォルダに用意してあります。

さらに、2033年10月22日以降まで有効なPKCS12電子証明書が必要です。驚いたかもしれませんが、この電子証明書を作成するのはそれほど難しくはありません。自分自身で電子証明書を作成する方法については、「Generating a PKCS12 certificate for Android Market」をご覧下さい。

以下の作業は、Android Marketにアプリを登録する方法です。

  1. プロジェクトのsrcフォルダ内にあるアプリケーション記述ファイルを選択します。ここではRSSReader-app.xmlがそのファイルです。このXMLファイルには、AIRアプリを特定/インストール/起動するためのパラメーターが記述されています。このファイルを少し修正する必要があります。
  1. ファイルを開く際にダブルクリックするとXMLエディタが起動してしまうので、右クリックのメニューから「アプリケーションから開く>テキストエディター」を選びます。
  2. アプリの有効名とバージョンを指定します。名前は25行目の<name> 要素を変更します。
  3. どのようなアプリかが分かる名前をつけます。例えば、「Slashdot RSS Monitor」といった感じです。Note:行数やコメントの内容が図と異なる場合があります。

次にアプリのバージョンを指定します。あなたが素晴らしいコーダーで、バグなんてないというのであれば、「バージョン1.0」でいいでしょう。30行目付近の<versionNumber>要素を変更します。

  1. 次に、アプリがPNGアイコンを認識できるようにします。109行目付近にある<image16x16>要素を探します。同じような要素が6つあります(※4つの場合もあります)。
  1. 各要素に適切なアイコンファイル名を挿入します。

アプリケーション記述ファイルでは、上記以外にも、説明や著作権などのアイテムを設定することができます。詳しくはAdobe AIRのドキュメントをご覧下さい。

  1. 変更を保存します。
  2. まだの方は、サンプルSlashdotRSSReaderAssets.fxpの/src/iconsフォルダから、必要なアイコンPNG画像をプロジェクトの/src/iconsフォルダにコピーしてください。
  3. パッケージエクスプローラーのプロジェクトを選択して、右クリックのメニューから「エクスポート」を選びます。
  4. [書き出し]ダイアログで「Flash Builder>リリースビルド」を選びます。
  1. [次へ>]ボタンをクリックします。
  2. 次の画面が表示されるので、目的のプロジェクトが選択されているかを確認し、その他の欄はデフォルトの状態のまま、[次へ>]ボタンをクリックします。
  1. 次の画面では、[証明書]欄で電子証明書を指定し、[パスワード]欄にそのパスワードを入力します。Android Marketの必要事項に沿った電子証明書を利用してください。自分自身で電子証明書を作成する方法については、「Generating a PKCS12 certificate for Android Market」をご覧下さい。
  2. [終了]ボタンをクリックします。

以上です! 図28の画面が表示されたら成功です。新しい*.apkファイルが作成されます。このファイルは、Google Androidデバイス用のネイティブインストーラーパッケージです。

おめでとうございます! これであなたもモバイルデベロッパーです!

さらに学習したい方へ

Flash Builderとこの記事で学習したテクニックを使って、今度は自分自身のモバイルアプリを開発することをおすすめします。

また、下記の Slashdot RSS Reader開発のビデオチュートリアルも参考になるでしょう。

Flexモバイル開発に関する下記の記事もご覧下さい。