ケータイFlashをHTMLページ上でインライン再生させるには

By ookura - 09/05/24 - このエントリをはてなブックマークに追加このエントリをYahoo!ブックマークに追加このエントリをdel.icio.usに追加このエントリをFC2ブックマークに追加

これまでインタラクティブ再生メインで説明してきましたが、今回はインライン再生について説明します。
→参照:「ケータイFlashの概要について」
 
 

実行例

実行例はこちらからご確認下さい。

URLをメールで送る
http://ookura.tanikaze.com/Sample/post3535/
 
 

インライン再生とは

Flashをサイトに使用する場合、インラインモードとインタラクティブモードの2つの再生モードがあります。
 
それぞれの違いは以下の通りです。
・インラインモード
 ・PCサイト同様にHTML内にタグを記述し、ページの一部としてFlashを表示させます。
 ・HTMLタグで指定したサイズで表示されます。
 ・キー操作が受け取れません。
 ・HTMLサイトのパーツとしての用途で使用することになります。
 
・インタラクティブモード
 ・直接SWFファイルにアクセスします。
 ・端末画面に合わせて縦横比固定で自動的に拡大・縮小されます。
 ・キー操作が有効になります。
 ・フルFlashサイトやゲームとしての用途で使用することになります。
 
今回説明するインライン再生はサイトのロゴやバナー用途で使用されることが多いです。
 
GIFバナーの代わりに使用できますが、1ページに複数配置しないほうがよいですし、非対応端末を考慮して判別する必要がありますのであまり多用できるものではありません。
 
 

Flash作成時の注意点

普通は多くの端末で再生できるようにパブリッシュバージョンはFlash Lite1.1にします。
 
サイズは埋め込む先のHTMLページのサイズも含めて100KB未満になるようにします。
 
キーイベントを受け付けないことを前提に作成します。
getURLも使用できないのでリンクしたい場合は別にaタグで用意します。
 
ステージサイズ
インタラクティブ再生のように自動的に拡大・縮小されません。
バナーやロゴとして使用するのであればFlash対応端末のほとんどで問題なく表示できるサイズが望ましいでしょう。
 
フレームレート
FlashLite1.1コンテンツでの適切なフレームレートは10~15fpsと言われていますので、デフォルトの12fps程度でよいかと思われます。
あまり高くしすぎるとスムーズに表示できない端末があります。
 
 

HTMLへの記述方法

以下のように記述します。

<object data="/scripts/sample/3535/sample3535.swf" type="application/x-shockwave-flash" width="180" height="90">
  <param name="bgcolor" value="#000000">
  <param name="loop" value="on">
  <param name="quality" value="high">
</object>

 
各パラメータの指定は以下の通りです。
▼objectタグ
data
 SWFファイルのURLを指定します。相対パスでも絶対パスでも指定可能です。
 
type
SWFファイルのMimeTypeを示す文字列「application/x-shockwave-flash」を設定します。
 
width
 横サイズをピクセル値の数値で指定します。
 
height
 縦サイズをピクセル値の数値で指定します。
 
▼paramタグ
bgcolor
 背景色をカラーコードまたはカラーネームで指定します。
 bodyタグでの背景色指定やFlashで指定した背景色よりも優先されます。
 カラーコード例:#000000
 カラーネーム例:red
 
loop
 連続でループ再生するかどうかを「on」「off」で指定します。
 ※「true」「false」での指定はDoCoMoの505iシリーズ、506iシリーズ及びSoftbankでサポートされていません。
 
quality
 再生画質を「high」「medium」「low」のどれかで指定します。
 ※auではサポートされていません。
 
 

備考

端末によっては1ページ内に複数のSWFファイルを埋め込むことも可能ですが、複数表示に対応していない端末もありますので一つだけにしておいた方がよいでしょう。
 
本サンプルでは実装していませんが、埋め込むFlashのパブリッシュバージョンに対応していない端末やFlash非対応端末の場合は機種を自動判別して代替画像を出力するようにしておきましょう。
 
 

参考URL

コンテンツの配信と再生 – サービス・機能 – NTTドコモ
http://www.nttdocomo.co.jp/service/imode/make/content/flash/usage/
 
KDDI au- 制作 – インライン再生
http://www.au.kddi.com/ezfactory/mm/flash03-04.html
 
KDDI au- Flashコンテンツ – 技術情報
http://www.au.kddi.com/ezfactory/mm/flash04-01.html
 
Softbank Mobile MOBILE CREATIONウェブコンテンツ開発ガイド[メディア編]
http://creation.mb.softbank.jp/doc_tool/web_doc_tool.html
→PDFで提供されています。ダウンロードには会員登録が必要になります。
 
Flash Liteの仕様(フラッシュ- swf) – ファイルサイズ、再生方法、ダウンロード、拡張子、Content-Type – 携帯サイト・モバイル [ドコモ(iモード)-au(EZweb)-ソフトバンク(ヤフーケータイ)]
http://memorva.jp/memo/mobile/flash_lite.php
 
ネクストシステム:技術情報 – 携帯Flash作成講座 – 入門講座 – 公開
http://www.next-system.com/mobileflash_02j.html
 
携帯電話向けコンテンツでフラッシュを使うには – 携帯電話向けコンテンツの書き方
http://www.marguerite.jp/Nihongo/WWW/Mobile/Flash.html
 
 

関連ページ

ケータイFlash関連の記事一覧