■ 開発ハンドブック
応用編1
基礎編では、モバイルウィジェットの紹介から仕様概要、開発環境の簡単な紹介までを行いました。この応用編では、サンプルとしてRSSリーダーウィジェット作成の流れを紹介します。いくつかソースコードを抜き出してポイントの説明も行ってみたいと思います。■RSSリーダー作成
今回私たちが作成したRSSリーダーウィジェットは以下のような機能を持つものです。1.WEB上の外部サイトよりRSS(RSS2.0)を取得する
2.通常画面(待機画面)では未読記事(item)の件数を表示する
3.通常画面をクリックすると最大画面(Flash)に遷移し、記事タイトル一覧を表示する
4.一覧中のタイトルをクリックすると記事内容を表示し、その記事を既読扱いにする
その他の機能としては、以下のような代表的なウィジェットの機能を実装しています。
a.通常表示←→最大表示遷移
待機状態の通常画面と、最大画面のFlash表示を画面遷移する動作です。
b.定期更新イベントハンドル動作
ウィジェットエンジンより定期的に呼び出されるイベントを掴まえて、RSSの再読み込み->表示更新を行う動作です。
c.Flashとjsの通信処理および連係動作
Flash、JavaScriptよりRSSを取得する動作、およびJavaScript-Flash間でデータをやり取りする動作です。ExternalInterface、SetVariableはサポートされないため、SWFObject.addVariable、getURLを使用します。
d.待ち受け画面復帰イベントハンドル動作
音声着信やメール着信からの復帰などのイベントを制御する動作です。b.と同様、RSS新着件数の更新を実装しています。
e.プリファレンスデータの読み書き
ウィジェットエンジンより提供されているデータ保存のAPIを使用する機能です。SharedObjectはサポートされていないため、ウィジェット固有データの永続化にはこのAPIを使用します。
■ウィジェットの基本構成
それでは早速RSSリーダーウィジェットを作成してゆきます。RSSリーダーウィジェットの最終的なディレクトリ構成は以下のようになります。上の構成の中で、ウィジェットとして動作するために必須となるリソースは
config.xml
index.html
の2つだけです。この2つのファイルだけはルートディレクトリ直下に存在する必要があります。
その他のリソースについては、自由にディレクトリを作成して配置してかまいません。各リソースはルートディレクトリからの相対パスでアクセスすることができます。
■プロジェクトの作成(開発用ディレクトリ構成)
今回はAptanaで開発を行います。エミュレータで動作確認をするため以下のような構成をとりました。Aptanaで作成したプロジェクトは以下のような構成です。
[画像クリックで拡大表示]
コーディングからエミュレータでの実行までの流れは以下のようになります。
1.「src」配下に設定ファイル、ソースファイル(html、javascript、flaファイルなど)を作成
2.「bin」ディレクトリに必要なリソースを抽出
3.エミュレータ実行用のディレクトリ「deploy」に「ウィジェット名」ディレクトリを作成し、「bin」配下をコピー
4.エミュレータを起動してdeploy/RssReaderSWidgetディレクトリを読み込んでウィジェットファイル(.wgt)作成
5.エミュレート
「src」ディレクトリ配下にソースファイル、リソース等を作成してゆきます。
最終的に、エミュレータの機能を使ってウィジェットファイル(.wgt)としてリソースを纏め上げるのですが、その際にはflaファイルなど不要になるファイルも存在します。そのため、「src」の下でコーディングを行い、バッチファイルを作って必要なリソースを「bin」ディレクトリに抽出->deployする構成になっています。
今回はAptana、Adobe Flash CS3を使用したためこのような構成としましたが、Flashを使用しない、エディタのみを使ってウィジェット作成する、といった場合にはもっとシンプルな構成をとることもできます。
■設定ファイル
まず設定ファイルを作成します。今回のRSSリーダウィジェットの設定ファイルは以下のようになります。主な項目の意味は次のようになります。
タグ:<widget id=””>
説明:ウィジェットコンテンツの識別文字列。64byte以内
タグ:<widget version=””>
説明:ウィジェットコンテンツのバージョン
タグ:<widget width=””height=””>
説明:通常表示時のウィジェットのサイズ(px指定)
タグ:<name>
説明:ウィジェット名。ウィジェット一覧画面などで表示される。64byte以内
タグ:<icon src=" ">
説明:アイコン。ウィジェット一覧画面などで表示される。ウィジェットルートディレクトリからの相対パス
タグ:<description>
説明:ウィジェットコンテンツの説明。128byte以内
タグ:<access network=" ">
説明:通信する場合trueを指定
タグ:<wakeupclass>
説明:省電力動作時の定期起動の間隔。1から5の値を設定。5の場合最短で60分間隔で自動的にウィジェットが起動される
タグ:<netaccess host=" " port=" " />
説明:通信する場合の通信先ホストとポート
その他にもさまざまな設定ができますが、動作させるのに必須となる項目はそれほど多くありません。



