■ 開発ハンドブック
応用編2
■各画面の作成
では画面の作成に入っていきましょう。その前に、今回のウィジェットでの画面呼び出しの大まかな構成を図示します。
［画像クリックで拡大表示］
ウィジェットが起動されると、まず
index.html
がロードされます。これはファイル名固定で、ウィジェット内に必ず存在する必要があります。また、横画面表示に対応している機種の場合、
landscape.html
を用意しておけば、端末が横方向になった場合にこちらがロードされるため、縦横でレイアウトを変更することができます。（存在しない場合はindex.htmlがロードされます）
ロードされる画面サイズは設定ファイルの
で設定したサイズとなります。
index.htmlの役割は、ウィジェットエンジンからのイベントを受け取ってiframe内に通常表示画面（normal.html）、最大表示画面（maximize.html）を読み込むだけです。ですからHTMLは非常にシンプルになります。
■index.html
2つのスクリプトファイルを読み込んでいますが、それぞれ今回のRSSリーダー用に作成したスクリプトファイルです。common_util.jsでは簡単なログ表示系の関数などを定義しています。
widget_util.jsではinit()の中で使用しているUpftWidgetクラスが定義してありますが、これはウィジェットエンジンから提供されているAPIをラップしたクラスです。
今回作成したRSSウィジェットでは、画面が最大化されたときに端末の方向（縦・横）でロードするSWFファイルを変えたいので、body onloadで呼び出しているinit()の中で表示方向をローカル保存し、最大表示画面（maximize.html）で読み出すことにしました。
ウィジェットエンジンのAPIを使用して、ローカルデータ（プリファレンスデータ）にアクセスしている箇所を見てみましょう。UpftWidget.saveDataは以下のような実装になっています。
ここで
document.widget
というオブジェクトを使っていますが、これがウィジェットエンジンより提供されているオブジェクトです。Enhanced Scriptという位置づけで仕様が公開されています。
widgetオブジェクトは、ウィジェット特有のイベントハンドラの登録やイベント発行、プリファレンスデータと呼ばれるデータ保存領域へのアクセスなどを提供しています。よく使用するものとしては以下が挙げられます。
＜プリファレンスデータアクセス＞
widget.setPreferenceForKey(value,key)：プリファレンスデータ保存
widget.preferenceForKey(key) ：プリファレンスデータ取得
＜イベント発行＞
widget.restore：ウィンドウサイズを設定ファイルに記述したサイズに変更するイベント発行
widget.maximize ：ウィンドウサイズを最大表示に変更するイベント発行
＜イベントハンドラの登録＞
widget.onrestore：通常表示イベントハンドラ
widget.onmaximize ：最大表示イベントハンドラ
widget.onwakeup ：定期起動イベントハンドラ
続いてwidgetイベントハンドラの登録もこのwidgetオブジェクトに対して行います。
ウィジェットエンジンより通知される通常画面表示イベント（widget.onrestore）・最大画面表示イベント（widget.onmaximize）に応じて、iframeに読み込むHTMLを切り替えます。
ここまでの実装でウィジェット起動->通常画面表示までは動作しますが、まだ最大画面への遷移は行えません。
次に、通常画面で最大画面への遷移を実装しましょう。
■normal.html（通常画面）
通常画面では未読件数の表示、ユーザがクリックした際の最大画面への遷移を実装します。index.htmlと同じように、document.widgetオブジェクトを使います。
通常画面をクリックした場合の最大画面への遷移の実装はこれだけです。
表示されている通常画面をクリックするとmaximizeイベントが発行され、ウィジェットエンジンによりウィンドウサイズが最大化されます。
その後index.htmlで定義したwidget.onmaximizeイベントハンドラが呼び出され、iframeに最大画面（maximize.html）がロードされます。
<div id="div_unread_count" ></div>はRSSの未読件数を表示する領域です。
RSSの読み込みは最大画面（maximize.html）のSWFの中で行い、ユーザが記事内容を見たか否かに応じて、プリファレンスデータに未読件数を保存します。
通常画面では、init()処理の中でプリファレンスデータより未読件数を取得して表示します。
このほかにも、通常画面では一定間隔を置いたRSSフィードの更新チェック処理なども実装しています。
更新チェックのためのRSSフィードのロード・パースにはjkl-parsexml.jsというライブラリを使用させていただきました。
JKL.ParseXML／ajax通信処理ライブラリ
http://www.kawa.net/works/js/jkl/parsexml.html
このライブラリは軽量で、簡単にXMLHttpRequestオブジェクトを利用した非同期通信（Ajax）が実現できます。
ウィジェットではこのようにフリーのライブラリを使用することもできますが、今回は説明を省略したいと思います。
■maximize.html（最大画面）
最大画面では、プリファレンスデータより現在の表示方向（縦・横）を取得して、それぞれのSWFファイルをロードします。UpftWidget.init()の中では、widgetオブジェクトを使用して現在の表示方向を取得しています。
先ほどindex.htmlの中でプリファレンスデータに保存した値が取得できます。
SWFのロードにはSWFObjectライブラリを使用します。
SWFObject v1.5: Flash Player detection and embed
http://blog.deconcept.com/swfobject/
init.html経由でmaximize.htmlがロードされた場合は'portrait.swf'が、landscape.html経由の場合には'landscape.swf'がロードされるという動作になります。
また、ここではSWFに２つのパラメータを渡しています。
param1：既読itemのキーリスト
SWFで既読／未読の判定に使用します。プリファレンスデータより取得しています。プリファレンスデータへの保存は後述します。
param2：RSSフィードのURL
SWFで読み込むRSSのURLです。
今回のRSSリーダーウィジェットでは、SWF内で記事内容を表示した際に既読情報（既読itemキーリスト）を更新する必要があります。
先述のようにプリファレンスデータにキーリストを保存する必要があるのですが、実はSWFからウィジェットエンジンにアクセスするAPIは提供されていません。
そのため、｢ｃ．Flashとjsの通信処理および連係動作｣で軽く触れたように、getURLを利用してJavaScript経由でwidgetオブジェクトを利用することになります。
ActionScriptから呼び出したい関数をJavaScriptで用意しておくと、以下のようにJavaScriptにアクセスすることができます。
ここでひとつ気をつける必要があるのは、getURLを使ったJavaScriptの呼び出しは、JavaScriptの処理結果を受け取ることができないということです。
この点を念頭にJavaScript<->SWF間のデータフローを設計する必要があります。
ここまでの実装で起動から通常画面表示->最大画面表示->SWFロードがつながったことになります。
この先Flashでは受け取ったパラメータを基にRSSのロード、既読／未読チェック、一覧表示、記事内容表示等を実装することになります。Flashについては一般的なFlash作成の作法で実装できますのでここでは省略させていただきます。
ただし、動作環境が携帯端末なのでメモリリソースの使い方や処理性能に留意した実装が必要になるかと思います。
今回は縦・横レイアウト用にそれぞれportrait.swf、landscape.swfを作成しました。
それではエミュレータで実際に動作させてみましょう。
