アクセシビリティ
デベロッパーリソース
岡田昇三氏

岡田 昇三氏

http://hi-posi.jp/

作成日:
2009年8月5日
ユーザレベル:
すべて
製品:
Flash

Flash Lite入門講座 第2回 Flash Liteの再生環境から見た注意点

本連載の第1回目では、「日本におけるFlash Liteの仕様」について解説しました。第2回目では、「待ち受け時計を作る」をテーマに解説する予定でしが、前回の反響が大きかったため急遽予定を変更して、仕様面に関してもう少し解説しておきたいと思います。今回は「Flash Liteの再生環境」についてです。

日本の携帯電話の場合、Flash Liteコンテンツは「ブラウザ」「画面メモ」「データフォルダ」「待ち受け」「着Flash」「デコアニメ」「着せ替えメニュー」など様々な箇所で再生できます。実は、再生環境によって、Flash Liteで利用できる機能に違いがあります。例えば、ブラウザではキー操作に反応するインタラクティブコンテンツを再生できますが、待ち受けではキー操作は無効となります。

Flash Liteコンテンツを制作する際には、前回解説したキャリアごとの技術仕様に加えて、再生環境における機能的制約も考慮する必要があります。おそらく、みなさんが案件として手掛けているのは、「携帯Flashサイト」、デジタルインセンティブとしての「待ち受けFlash」が多いのではないでしょうか。それぞれ、「携帯Flashサイト→ブラウザでの再生」、「待ち受けFlash→待ち受けでの再生」となります。今回は、これらに関連する再生環境について、解説したいと思います。

ブラウザでの再生

「ブラウザでの再生」には、「インライン再生」と「インタラクティブ再生」の2種類の再生形式があります。

インライン再生とは

インライン再生とは、HTML/XHTMLページ内にバナーのような形でFlash Liteコンテンツを再生する形式です。インライン再生の場合、キー操作は無効になり、一切の通信ができません。この再生方式は、インタラクティブなものを見せるというよりもアニメーションを見せるために使用する場合が多く、PCサイトでのGIFバナーをイメージするとわかりやすいでしょう。

インライン再生のイメージ図

インライン再生のイメージ図

インライン再生を行うには、HTML/XHTMLページ内にobjectタグを使って埋め込みます。objectタグでは、以下の属性やパラメータを使って再生や配布形態を制御できます。キャリアごとに若干の違いがあるので注意して下さい。

タグ キャリア 属性 属性値 用途
object 3社共通 data url Flash Liteコンテンツのある場所 (URL) を指定します。
type content-type MIMEタイプを指定します
Flash Liteの場合"application/x-shockwave-flash"を記述します。
width length SWFの横幅を指定します。%単位で指定すると、キャリアごとに表示が異なるので、通常はpx単位で指定します。
height length SWFの縦幅を指定します。%単位で指定すると、キャリアごとに表示が異なるので、通常はpx単位で指定します。
au、SoftBank copyright yes , no データ保存可能 (no) 、不可能 (yes) を指定します。
param 3社共通 name
value
name="loop"
value="true , false , on , off"
ループ再生の連続再生 (true,on) 、一回再生 (false,off) を指定します。 docomoの場合はon/off 、auやSoftBankの場合はtrue/falseを使用します。
docomo、SoftBank name="quality"
value="high , medium , low"
再生のクオリティを操作します。
docomoのみ name="bgcolor"
value="ColorName , ColorCode"
SWFの背景色を指定します。

インライン再生時のobjectタグで使用できる属性やパラメータ

widthとheightを指定する際に、%単位を使用するとキャリアごとに表示が異なるため、通常はpx単位で指定します。例えば、以下のように記述します。

<object data="hoge.swf" type="application/x-shockwave-flash" width="100" height="100">
    <param name="bgcolor" value="#FFFFFF">
    <param name="loop" value="on">
    <param name="quality" value="high">
</object>

インライン再生用コンテンツの制作上の注意点

携帯電話では、ページの容量に制約があります。ページを構成するすべての要素の容量の合計が、100KB以内となるように収める必要があります。SWFの表示のタイミングは、HTML、JPEGやGIFなどの画像を表示した後、一番最後となります。そのため、あまり大きい容量のSWFをインライン表示させることは避けた方が賢明です。また、SWFの再生に端末のメモリを多く消費するようになると、ページのスクロールが遅くなる場合があるので注意が必要です。

SWFをリンクバナーとして表示させたい場合は、上記のようなobjectタグをaタグで囲むことで、SWFをクリックさせることができます。

インタラクティブ再生とは

インタラクティブ再生とは、SWFを直接ブラウザで再生する形式です。仕様はキャリアごとに違います。詳しくは、「第1回 日本のFlash Liteの仕様」を見て下さい。

インタラクティブ再生のイメージ図

インタラクティブ再生のイメージ図

通常、インタラクティブ再生をさせる場合は、www.adobe.com/hoge.swfのようにSWFを直リンクで指定します。なお、再生や配布形態を制御したい場合は、インライン再生のようにobjectタグを使用します。

インタラクティブ再生用コンテンツの制作上の注意点

インタラクティブ再生用コンテンツでは、SWFのステージサイズに注意が必要です。SWFが端末の画面サイズより大きい場合、大きい辺に合わせ自動的に拡大縮小が行われてしまい、意図した形で表示できなくなります。そのため、適切なサイズでコンテンツを用意する必要があります。詳細については、後述。

SWFのサイズが大きい場合、端末の画面サイズに合わせて縮小される

SWFのサイズが大きい場合、端末の画面サイズに合わせて縮小される

画面メモ

画面メモとは、ブラウザで表示されているページを“端末に保存する”機能です。ローカルに保存され、ネットに繋がっていなくてもいつでも保存したページを見ることができます。docomoやauでは「画面メモ」、SoftBankでは「お気に入り」と呼ばれています。

インタラクティブ再生、インライン再生、どちらの場合も保存不可と設定していない限り、ユーザーは画面メモ機能でコンテンツを保存することができます。画面メモ内でのコンテンツ動作は、ブラウザで表示した場合と同じ動作になります。なお、docomoのFlash Lite3.1対応機種の場合のみ、フレームスクリプトで呼び出した外部ファイルも一緒に保存されます。その際、画面メモ内で再生する場合、一緒に保存した外部ファイルが利用されるので、改めて外部に呼び出しをかけることはありません。

待ち受けでの再生

「待ち受けでの再生」の場合、ネットなどを通じて取得したSWFをいったんローカル(データBOX/データフォルダ)に保存し、それを待ち受け画面に設定して表示します。同じSWFを再生するとしても、データフォルダ内と待ち受け表示時では利用できる機能が違います。

待ち受けでの再生時の注意点

待ち受けでの再生は、他の再生環境より制約が多いので、コンテンツを作成する際に注意が必要です。3キャリア共通で言えることですが、キー操作を受け付けません。つまり、待ち受けからは外部への通信が一切できません。例えば、天気やニュースの情報を外部から読み込んだりすることができません。サウンドやバイブは無視されます。

制約の多い待ち受け再生ですが、次項で説明するように、データBOX/データフォルダ内での再生環境と連携することで、コンテンツを拡張していくことが可能です。

データBOX/データフォルダでの再生

データBOX/データフォルダ内の場合、docomoではキー操作を受付ませんが、auやSoftBankではキー操作が可能です。なお、キー操作により通信が発生するコンテンツの場合、画面上にアラートが表示されますが、通信もできます。

また、docomoのiモードブラウザ2.0端末、auのFlash Lite2.0以降の機種、SoftBankのFlash Lite2.0以降の一部の機種では、データBOX/データフォルダ内でSherdObjectも使用することが可能です。例えば、データフォルダ内でSWFを操作し、その結果をSherdObjectに保存、待ち受け画面ではSherdObjectを読み込むといった仕組みを作れば、「たまごっち」のような育成ゲームの制作も可能になります。他にも、サーバにアクセスさせて、サーバからの読み込み結果も保存させてもいいでしょう。

画面サイズとコンテンツサイズ

「ブラウザ」「画面メモ」「待ち受け」「データフォルダ」の再生環境について、その特徴を解説してきました。いずれの場合にも、注意しなければならないことがあります。それは、コンテンツサイズです。では、これらの再生環境において再生される場合、適切なコンテンツサイズとはいくつでしょうか?

待ち受けでの再生の場合、240×320ピクセル、もしくは240×400ピクセルで制作するのが一般的です。

では、ブラウザでの再生の場合、特に勝手にリサイズされてしまうインタラクティブ再生の場合はどうでしょうか? 最も理想的な方法は、サーバ側ですべての機種の画面サイズに対応したSWFを生成し、SWF内のコンテンツもそのサイズに合わせて動的にレイアウトさせる方法だと思います。しかし、そのような方法は使えない場合がほとんどですし、個人での制作ではそこまでする必要はないと思います。

一般的に、画面サイズの設定は「240×240ピクセル」と言われています。縦横比が同じなので、拡大縮小も同じ比率で行われるのでほぼ同じデザインでコンテンツを表示できることになります。ただ、最近の端末は画面サイズが大きく、240×240ピクセルでは少し小さいかもしれません。

240×240ピクセルのコンテンツをWQVGA端末(240×400ピクセル)で表示した場合

240×240ピクセルのコンテンツをWQVGA端末(240×400ピクセル)で表示した場合

また、auのドキュメント(KDDI 携帯電話用 Flash Lite 1.1 CDK)には「縦幅266ピクセルを推奨」とあります。しかし、ここではシェアの過半数を占めるdocomo端末を基準に適切なコンテンツサイズを探ってみたいと思います。なお、前回も書きましたが、キャリアによる機種の普及率は発表されておりません。筆者の経験上から普及率が高いと思われる703i/903iシリーズ以降の機種を対象に調べてみました。調査の方法は、3つのサイズ(240×240ピクセル、240×260ピクセル、240×320ピクセル)のコンテンツを用意し、どれが再生できるかを当てはめていきます。

※この画面サイズは、筆者がいくつかのプロジェクトで使用しているサイズです。どのサイズで用意するかは、読者自身が決定してください。ここでは暫定的に3つの画面サイズでお話していきます。

703i 903iシリーズ

機種名 ブラウザサイズ バージョン 240 x 240 240 x 260 240 x 320
SH903i 240 x 320 1.1
P903i 240 x 270 1.1 -
N903i 240 x 270 1.1 - -
D903i 230 x 320 1.1 -
F903i 230 x 240 1.1 - -
SO903i 240 x 368 1.1
D903iTV 230 x 320 1.1 -
F903iX 230 x 240 1.1 - -
P903iTV 240 x 350 1.1
SH903iTV 240 x 320 1.1
F903iBSC 230 x 240 1.1 - -
P903iX 240 x 270 1.1 -
SO903iTV 240 x 368 1.1
N703iD 240 x 270 1.1 -
F703i 230 x 240 1.1 - -
P703i 240 x 270 1.1 -
D703i 230 x 240 1.1 - -
SH703i 240 x 240 1.1 - -
P703iμ 240 x 270 1.1 -
N703iμ 240 x 270 1.1 -
SO703i 240 x 368 1.1
TTL     100% 67% 29%

704i 904iシリーズ

機種名 ブラウザサイズ バージョン 240 x 240 240 x 260 240 x 320
SH904i 240 x 320 1.1
N904i 240 x 352 1.1
F904i 240 x 240 1.1 - -
D904i 240 x 320 1.1
P904i 240 x 350 1.1
SO704i 240 x 368 1.1
F704i 230 x 240 1.1 - -
N704iμ 240 x 270 1.1 -
SH704i 240 x 320 1.1
P704iμ 240 x 270 1.1 -
P704i 240 x 270 1.1 -
D704i 230 x 240 1.1 - -
L704i 240 x 280 1.1 -
TTL     100% 77% 46%

705i 905iシリーズ

機種名 ブラウザサイズ バージョン 240 x 240 240 x 260 240 x 320
D905i 240 x 320 3.0
SH905i 240 x 352 3.0
P905i 240 x 350 3.0
SO905i 240 x 368 3.0
F905i 240 x 352 3.0
N905i 240 x 320 3.0
N905iμ 240 x 320 3.0
N905iBiz 240 x 320 3.0
SH905iTV 240 x 320 3.0
SO905iCS 240 x 368 3.0
F905iBiz 240 x 352 3.0
P905iTV 240 x 350 3.0
F801i 240 x 352 1.1
F705i 240 x 352 1.1
P705i 240 x 350 3.0
D705iμ 240 x 240 1.1 - -
D705i 240 x 320 1.1
N705i 240 x 320 3.0
L705i 240 x 280 1.1 -
N705iμ 240 x 320 3.0
SH705i 240 x 320 1.1
SH705iII 240 x 320 1.1
P705iμ 240 x 350 3.0
SO705i 240 x 320 3.0
L705iX 240 x 280 1.1 -
P705iCL 240 x 350 3.0
TTL     100% 96% 88%

調査結果を見ると、もちろん240×240ピクセルはすべての機種が対応しているので、機種によっては上下に余白が見えることを前提にデザインすれば問題ないとも言えます。705i/905i以降をターゲットとする場合、240×320ピクセルでもほとんどの機種が対応しています。筆者の経験上、必ずしも240×240ピクセルで作る必要はなく、240×260ピクセルで制作してもほぼ問題ないと言えます。これは絶対ではありませんが、一つの指標として参考にして下さい。

MEMO:
現在、703i/903iシリーズ(06年末~07年初頭発売)、704i/904iシリーズ(07年夏発売)のユーザーが機種変更をし始めています。おそらく、来年くらいには、705iシリーズ(Flash Lite3.0)を含むFlash Lite2.0でコンテンツを制作してもいいかもしれません。ただし、前回説明した通り、日本の端末ではFlash Lite1.1と2.0では特にできることは変わらないので、ユーザーにとってのメリットはほとんど無いと言えます。

まとめ

画面サイズは非常に難しい問題です。予算とデザインとの兼ね合いなので、一概に「これ!」という答えがない、というのが現状だと思います。

そしてこの連載は次回、いよいよコンテンツ制作に進みます。この2回まではFlashを起動する前の「事始め」ですので、次はFlashを起動させて、携帯電話特有の機能「FScommand2」を使って待ち受けを制作します。

関連情報

著者について

岡田 昇三氏

http://hi-posi.jp/

ワイノット株式会社、楽天株式会社、フリーランス活動を経て、2009年より株式会社hi-posi代表。「nike 6.0 mobile」「ナイキ モバロンドール」「H&M mobile」「ケートラ」「bascule helmets!」などに携わる。