1. ホーム
2. デベロッパーセンター
3. モバイル&デバイスデベロッパーセンター

モバイル&デバイスデベロッパーセンター

『NYC Traffic』: Flash Lite のダイナミックコンテンツを作成するためのベストプラクティス

Justin Everett-Church

Adobe

WAP (ワイアレスアプリケーションプロトコル) ベースのアプリケーションを使用した経験をお持ちの皆さんは、携帯電話での web 体験におけるユーザーインタラクションの遅さにがっかりされたのではないでしょうか。WAP ベースのアプリケーションは遅くて、さえないものが多く、一般的に価値を見出せないと思われています。しかし、WAP ベースのアプリケーションに、Macromedia Flash Lite 1.1 でのインターネットアクセスを追加することでと、視覚的にリッチなコネクション型のアプリケーションを作成することができます。直感的で速い使用感を得られ、さらに電話機のネットワーク使用量を最小限に抑えることも可能になります。

Flash Lite 1.1 の可能性を追求するために、マンハッタンの主要交差点のリアルタイム JPEG イメージを表示する交通状況モニターを構築することにしました。これを選んだのは、Flash 4 の時代からダイナミックに作成された SWF ファイルを扱ってしてみたいと願っていたのですが、一度もやったことがなかったためです。交通状況モニターを完成すると、これを Flash Lite Content Contest* に出品しました。そして、この作品が大賞を頂いたことは、特に他のエントリ作品のクオリティの高さを思えば、まさに光栄の至りです。

この記事では、ダイナミックコンテンツによって効率的でインパクトのある Macromedia Flash アプリケーションを作成するためのテクニックを紹介しています。また、Flash Lite 対応携帯デバイスにデプロイするためのダイナミックな SWF ムービーを作成するにあって、検討すべきいくつかの問題にも触れています。

この記事に必要なもの

この記事を最大限に利用するには、次のソフトウェアとハードウェアが必要です。

Macromedia Flash MX 2004

• トライアル
• 購入

Macromedia Flash Lite 1.1 コンテンツ開発キット

• Macromedia Flash Lite 1.1 CDK をダウンロード

この記事のために必要な予備知識

この記事は、Flash Lite での多少の経験と Flash 4 シンタックスに関する実際的な知識を有した、経験豊かな Flash デベロッパーを対象にしています。

Flash Lite 1.1 によるダイナミックコンテンツの使用

様々な目的のためにインターネットに接続することを可能にする Flash Lite アプリケーションが次から次へと登場しています。プログラムによって可能になり得ることは無限ですが、多くのコネクション型アプリケーションの基本的な目的は、煎じ詰めれば次の 3 つになります。すなわち、リアルタイム情報のダウンロード、ユーザーデータ (フォーム) のアップロード、モジュラーダウンロードです。

リアルタイム情報のダウンロードは、Flash Lite 1.1 で可能になるもっとも画期的なことに挙げられます。前もって SWF ムービーにプログラムしておくことが不可能であった情報をロードする能力があれば、どのアプリケーションの柔軟性やパワーも非常に強化されることになります。今や、私は Flash Lite アプリケーションを使って交通状況を確認し、天気予報を見て、最新ニュースを知り、さらにテレビ番組をチェックしさえしています。

本当に役に立つ最新の情報を提供するためには、その情報は各ユーザーにとって意味がある、カスタマイズされたものでなければなりません。Flash Lite 1.1 では、ダイナミックデータをリクエストするプロセスで、サーバーにコンテンツをアップロードすることもできます。これまでに私がおもしろいと思ったアプリケーションには、フライト状況や web の検索、あるいはチャットクライアントによる友人とのコミュニケーションさえ可能にする Flash ファイルがありました。

リッチなコンテンツや体験を実現するために可能になり得るわくわくするようなことについて考える一方で、携帯デバイスには従来のデスクトップコンピュータにはないいくつかの制約があることを思い出すことも必要です。もっともよく問題にされていることは、携帯電話のはるかに小さなストレージ容量と制限のある帯域幅です。Flash Lite 1.1 では、従来の Flash 環境で使用されてきたテクニックの一部を使用することで、この両方の問題による影響を最小限にすることができます。

コネクション型アプリケーションのサンプル

Flash の場合と同様に、Flash Lite には強力なデベロッパーコミュニティがあり、熱心なデベロッパーたちが自作のアプリケーションや経験を公表し、共有し合っています。Flash Lite コンテンツを見つけるための素晴らしいリソースは、Macromedia Flash Lite Exchange* です。多種多様なデータをロード可能なコネクション型アプリケーションの次のいくつかの例をご覧ください。

図 1 は Guiseppe Tabi 氏作成の『iShop Pro-US』アプリケーションと Jochen Geiger 氏による『VFB Soccer』です。『iShop Pro-US*』 は、amazon.com からの価格とレビューを引き出す、使いやすい比較ショッピングアプリケーションです。『VfB Soccer*』 アプリケーションは、Jochen の好きなサッカーチーム VfB シュツットガルトについての最新情報と今後のイベントのすべてを表示しています。

図 1: 『iShop Pro-US』 (左) と VfB Soccer (右)

図 2 は、私が作成した『NYC Traffic』アプリケーションと Fasils Iqbal 氏による 『Chat MX*』です。『NYC Traffic*』はマンハッタン中の交差点のリアルタイムイメージを表示します。『Chat MX*』は、自分のキャラクタを選んでメッセージを送信できる Flash Lite グループチャットクライアントです。

図 2: 『NYC Traffic』 (左) と『Chat MX』 (右)

使用できるコンテンツフォーマット

Flash Lite によって可能になり得ることをご理解いただけたところで、次に Flash Lite にロード可能なコンテンツタイプについて理解する必要があります。既存の Flash アプリケーションにはテキストベースの変数と SWF ファイルをロードできます。正確に言えば、変数をストリングとして定義する URL がエンコードされたテキストファイルを特定タイムライン内にロードでき、Flash Lite か Flash 4 のどちらかに書き出されたものであれば、別の SWF もロードすることができる、ということになります。ロードした SWF ムービーはアプリケーション内でムービークリップのように機能します。変数のロードと SWF ファイルのロードのために記述されるコードは次のようになります (次のセクションでより詳細な例を示します)。

//load variables onto the root timeline
loadVariables(http://justin.everett-church.com/mobile/variables.txt, "/")
//load a swf into Level 1
loadMovieNum("http://justin.everett-church.com/mobile/sample.swf", 1)

これは、柔軟性とデータフォーマットに関してデスクトップコンピュータの Flash Player で可能なことに比べると貧弱かもしれませんが、少し工夫することで、テキストや SWF ファイルをロードすることによりほとんどすべてのことが可能になります。

サーバーサイドでは、自分でスクリプトを記述して、XML またはその他のテキストベースのデータを URL エンコーディングに変換することが可能です。私のアプリケーションでは、サーバーサイドの様々なの SWF 生成スクリプトの 1 つを使って、JPEG イメージファイルを Flash 4 SWF ファイルに トランスコード して携帯電話機にダウンロードしました。オーディオやビデオを Flash ファイルにトランスコードすることができるアプリケーションさえあります。

フォーマットについてのこの説明は、非常に高いレベルのものですが、心配しないでください。次のセクションでは、各データフォーマットと Flash Lite 対応携帯電話機からインターネットに接続することの特別な性質について詳しく解説します。

リモートコンテンツへの接続

コンテンツを携帯電話にダウンロードする前に、もう一手順踏まなければなりません。電話機でアクティブな GPRS 接続を確立することが必要です。一般的に言えば、SWF ファイルがその時点で接続されていない場合、ユーザーは OS レベルのメニューからアクセスポイントを選択する必要があるということになります。このメニューは、接続が確立されていない場合に表示されます (図 3)。このプロセスでは、Flash の他のどのバージョンにおいてより、ユーザーのネットワークステータスについて詳細な情報を得ることができます

図 3: データをロードする関数を呼び出すと、アクセスポイントを選択するようプロンプトが表示されます。

各電話機は異なる性能を持つため、ネットワーク接続にあたっては電話機のネットワーク接続能力を確認する必要があります。新しい _capLoadData プロパティを使用して、これを行うことができます。このプロパティの値が 1 の場合、その電話機はネットワークに接続しています。そうでない場合は、いかに上手にプログラムの品質を下げるかについて検討し、インターネットに接続できないということに対処する必要があります。残念ながら、現在インターネットに接続できません、というメッセージがユーザーに表示されることが普通です。

また、fscommand2 getNetworkRequestStatus() を使った最後のリクエストについてのより詳細な情報は、どの時点においても得ることができます。返されたステータスは、-1 から 10 のいずれかで、各値が異なるネットワーク状態、つまり結果を表しています。ステータスコードと簡単なシンタックスの完全なリストについては、Flash Lite CDK から PDF 形式で入手可能な『Flash Lite 1.1 Authoring Guidelines』 のページ 41 と 42 をご覧ください。

コネクション型アプリケーションを構築する場合には、次の接続上の問題を頭に入れておきます。

• アイドル接続はタイムアウトする。

  SWF ファイルがインターネットとの通信を行っていない場合、数秒後にインターネットへの接続はシャットダウンされます。接続がタイムアウトした後にもう一度再接続する必要がある場合、ユーザーはアクセスポイントを再度選択することが必要です。

• 同時接続の数を制限する。

  同じフレームで複数の接続を開こうとする場合、最初の接続だけが行われます。また、一度にあまりに多数の接続を行うと (フレームごとに 1 つの接続であっても)、電話機の接続確立の能力を超えることになります。

• 他にも多数のデータプランがある。

  GPRS データアクセスは非常に高くつく場合があります。送信するデータの最適化に最大の努力を払い、必要な場合だけ接続するようにします。高帯域幅のアプリケーションを作成しているのであれば、このアプリケーションでは相当量のデータを送信する可能性があることをユーザーに知らせるポイントを 1 つ以上検討します。

テキストのロード

上述の接続プロセスは、インターネットからリモートデータにアクセスしようとする場合、それが変数であろうとムービーデータであろうと常に自動的に起こります。リモートテキストにアクセスするには、ロードされたデータを指定するタイムラインと任意のレベルのどちらに格納するのかによって、loadVariables または loadVariablesNum のいずれかを使用します。Flash IDE のドキュメントでこれらのコマンドのシンタックスについての説明を読むか、Flash Lite CDK に提供されている例を参照してください。

サーバー上のテキストが loadVariables によって読み取られるためには、URLエンコード される必要があります。URL エンコーディングはデータを順番に並べるための方法で、キーと値は等号で分けられ、各キー / 値ペアはアンパサンド記号 (&) によって分けられます。また、いくつかの特殊文字は後ろに 2 キャラクタコードが続くパーセント記号に変換されます。これは、非常に一般的なエンコーディングの形式で、大量の情報を渡す非常に長い URL によく見られます。(詳細については、 テクニカルノート 14143: URL エンコーディング : テキストファイルからの特殊文字の読み込み* を参照してください。)

以下は、http://justin.everett-church.com/mobile/variables.txt の内容です。このファイルには、4 つの変数とそのエスケープされた値が含まれています。

"name=Justin+Everett-Church"site=http%3A%2F%2Fjustin%2Eeverett%2Dchurch%2Ecom"company=Yahoo%21"done=1

FLA ファイルで、ルートタイムラインのフレーム 1 に次のコードを追加します。

loadVariables(http://justin.everett-church.com/mobile/variables.txt, "/")

ご自分でこれを試される場合は、ロードされた変数を示すためのテキストフィールドもルートに表示されることを確認してください。Flash で自由にこれをテストしてください。加えて、必ず携帯電話でこれをテストし、ロードプロセスの状態を確認するようにしてください。

データがロードされたことを確認するには、他に 2 つの方法があります。 fscommand2 を使って、getNetworkRequestStatus() をチェックしてステータスを確認するか、あるいは、変数ストリームの終わりに変数を含め、その変数のための適切なタイムラインを確認します。この方法は、他の方法より格段に簡単であると思います。たとえば、変数 done=1 または eof=1 を使用します。こうすることで、変数の値を確認して、「1」に等しい場合はデータがロードされたことがわかります。そうでない場合、ステータスをチェックし、ファイル検出で何の問題もなかったかを確認します。

サーバーからロードされている変数の 1 つを見るには、Flash Lite CDK で [Connection Detection] をチェックします。

SWF ファイルのロード

外部 SWF ファイルをロードするプロセスは、変数のロードの場合とほとんど同じです。SWF ファイルをロードするためのコマンドは loadMovie と loadMovieNum で、ここでもタイムラインにロードするか (前者) レベルにロードするか (後者) で使い分けされます。SWF ファイルをロードするための唯一の要件は、Flash Lite、Flash 4、あるいはこれら以前のファイルとしてフォーマットすることです。

ロードしようとするファイルがこれらより新しい SWF ファイルであるか、あるいは完全に不適切なファイルタイプの場合、デスクトップの場合のように Flash がこれに対して無反応で処理することはありません。無効なデータをロードしようとすると、ユーザーには OS レベルのポップアップアラートが報告されます。Flash IDE を使って loadMovie のために記述されたいくつかの機能は、Flash Player と Flash Lite Player のより最近のバージョンのためのものです。たとえば、JPEG ファイルは Flash Lite を使って直接ロードすることはできません。JPEG ファイルをロードしようとすると、無効なコンテンツの警告を受け取ることになります (図 4 を参照)。

図 4: Flash Player 7 のために書き出された SWF ファイルをロードしようとすると、タイプ 3 エラーを受け取ります。

電話機でこのエラーを見るには、FLA ファイルのルートタイムラインに次のコード行を追加します。

loadMovieNum("http://justin.everett-church.com/mobile/invalid.swf", 1)

デスクトップコンピュータの場合にはコンテンツが正しくロードされることに留意してください。電話機からファイルをロードしようとする場合にのみロードは失敗します。

ロードが完了したとき loadMovie コマンドのターゲットが常にステージ上にあるようにしてください。特定のフレーム上にのみ存在するムービークリップに SWF ファイルをロードし、サーバーが応答した場合、ターゲットムービーが存在しないとエラーが起こります。このエラーを回避するためには、ターゲットが常にステージ上にあるようにしますが、_visible プロパティを使うことで必要に応じて見えないようにできます。

SWF ファイルが Flash Lite にロードされたことを確認するには、いつでもネットワークリクエストステータスを使用できます。しかし、私の場合、既存のプロパティの _framesloaded と _totatframes を使用しています。2 つの値が等しいとき、ファイルはロードされています。

SWF ファイルの Flash Lite への ダイナミックなロードを実行してみるには、私の『NYC Traffic』から取り出した次のサンプルコードを見てください。ルートタイムラインのフレーム 1 のコードにこのコードを置くだけです。

loadMovieNum("http://gizmo.everett.org/cam/flashimg.php?image=/cctv26.jpg&cacheBust=" + random(100000), 1)

このコードは、適切にフォーマットされているものであればどの SWF ファイルのためにも正常に実行されますが、この場合、URL はタイムズスクエアの現時点でのイメージを取得する PHP ページを指しています。Flash に関する限り、サーバー上の静止 SWF ファイルとダイナミックに生成された SWF ファイルでは何の違いもありません。私は、URL の最後にキャッシュを無効にするランダムナンバーを追加しました。こうすることで、イメージを呼び出す度に、URL が少しだけ異なることになります。呼び出される度 SWF ファイルのポイントは異なっているはずなので、このようにしています。

これで、SWF ファイル生成作業は、サーバーですべて完了しました。このアプリケーションのためには、Stefan Schﾃｼﾃ殕er 氏の FlashWriter Toolkit の修正版を使用しています。オリジナルバージョンは彼のサイト Bronson Beta* から入手できます。この PHP ファイルは、SWF ファイルで JPEG ファイルをラップしますが、イメージを回転させたり、そのサイズを変更したりすることはありません。このアプリケーションの完全バージョンで、変更はレイアウトに適用されます。

Flash Lite 1.1 を使ってより優れたユーザーインタラクションを実現

Flash Lite は、容易なアニメーション、レイアウト、デザインのための能力を持ち、あっと言わせるような要素をもたらす点において素晴らしいツールです。さらに、携帯電話でのユーザーによるコンテンツとのインタラクションのやり方においても様々な改善をもたらします。WAP アプリケーションと Flash Lite アプリケーションを平行して作成してみると、パフォーマンスとインタラクションにおいて Flash に様々なメリットがあることがわかります。

Flash Lite はとにかくうまくいく

Flash Lite コンテンツは、WAP ブラウザ、Bluetooth、IR、または USB ケーブルを使って送信されます。何によって送信されるかにかかわらず、ユーザーはワンクリックするだけでアプリケーションを利用できます。ブラウザに行き、ブックマークを見つけ、サーバー応答を待たなくても、便利な第 1 ページ目の画面に到着できます。この "とにかくうまくいく" という要素は、Flash Lite のコンテンツ表示能力に関するユーザーのコメントでよく耳にすることの 1 つです。

Flash Lite は待ち時間を減らす

WAP アプリケーションについての私の大きな不満の 1 つは、送信するものを常に待っている状態にあると感じることです。一度クリックしては待ち、またクリックして今度はちょっと長めに待ちます。一方、Flash アプリケーションはもっとインテリジェントに動作します。Flash Lite では、すべてのインタラクションがサーバーアクセスを必要とせずに、クライアント側の Flash アプリケーションがユーザーに必要とされるすべての情報を要求します。別の "ページ" や他の構成テクニックもシミュレーションすることもでできます。

重要な点は、HTML を次から次へとダウンロードする度に、何をすべきかについてサーバーに尋ねることなく、アプリケーションがすべてのロジックを自分で行うということです。サーバーから有益な結果を得るために必要なすべての情報がある場合に限って接続を行います。複雑なフォームでは、サーバーとの接続の 10 往復分を節約できることになります。ユーザーが移動中に情報を取得する場合、待ち時間は実に重要な問題になります。

Flash Lite はオンデマンドダウンロードを可能にする

Flash Lite は興味深い位置にあります。インストールされたアプリケーションのすべての利点を持ち、同時にダイナミックコンテンツの使用で簡単に能力を拡張することもできます。携帯電話では、デスクトップコンピュータの場合よりストレージが差し迫った問題になります。このため、できるだけ軽量の初期ダウンロードを作成することが非常に重要です。Flash Lite 1.1 を使えば、アプリケーションが実行される度に必要な情報を持つベースファイルを簡単に作成でき、残りはランタイムにユーザーが情報をリクエストした際にロードすることが可能です。

認識すべきは、Flash Lite 1.1 ではどのタイプの持続データも格納できないという点です。次回アプリケーションを使用する際に利用できる情報を、ユーザーがカスタマイズまたは入力できるようにしたい場合は、そのデータをサーバーにアップロードするか、サードパーティのソリューションを使用する必要があります。

アプリケーションをセグメントに分割することで、制約のある帯域幅リソースに見合った軽量な初期ファイルを作成し、必要なときに必要なセグメントだけをユーザーに送信することができます。

これからの作業

この短い概要によって、コネクション型 Flash Lite アプリケーションをご自分で作成する意欲を掻き立てられたのであれば幸いです。これで、Flash Lite 対応携帯電話にダイナミックコンテンツをロードするために利用できるテクニックやフォーマットについてご理解いただけたはずです。次のステップとして、Flash Lite CDK でダイナミックコンテンツを作成するための見本ファイルをご覧ください。また、Flash Lite Exchange* と Flash サポートの各フォーラム* も必ずのぞいてみてください。

イメージやその他のメディアを Flash ファイルにトランスコードしてダイナミックなロードを行いたい場合は、actionscript.org によるコンバータのリストをご覧ください。とりあえず、スタンドアローンアプリケーションでダウンロードする静止 SWF ファイルの作成からとお考えかもしれません。その後自信がついたたら、是非、サーバーサイドのコンバータに挑戦してください。

著者について