携帯電話向けコンテンツでフラッシュを使うには。
エヌ・ティ・ティ・ドコモが505シリーズからフラッシュに対応するようになって以来、多くの端末でフラッシュの再生が可能になりました。
但し、その際に幾つかの制限があります。
ここでは、その制限について解説します。
- 個人的にはフラッシュはアクセシビリティの見地から余りいいものとは思いません。利用するのであれば、後方互換性やアクセシビリティに最大限に配慮してコンテンツ作りをしましょう。
フラッシュを使う上で注意すべき事。
フラッシュはHTMLと違い、標準的なウェブ技術とは言えません。
従って、フラッシュを導入するのであれば、対応出来ない環境の事を常に配慮してコンテンツ作りを行って下さい。
例えば、PC向けのウェブコンテンツには良くこのようなものが見られますが、いずれも絶対にやってはいけない事と言えます。
- すべてのコンテンツがフラッシュで表現されている
- フラッシュに対応していない環境では致命的です。
このようなコンテンツの場合、非対応環境への配慮のつもりか、アドビ社のサイトへリンクするアイコンを下の方に出している事が多いのですが、こんなのは非対応環境への配慮とは絶対に言えません。
特に携帯電話の場合、PCなど非携帯環境と違ってプラグインをダウンロードしろと言う訳にもいかず、このような方法では見るなと言われるのと同義です。
- 非携帯環境でも例えばドリームキャストなどのゲーム機では対応するプラグインが入手不可能となる場合があります。その意味でも携帯端末だけの問題とは言えません。
- メニューがフラッシュになっていて代替となるテキストメニューが無い
- メニューをフラッシュで作る事の是非はともかく、フラッシュが使えない場合に何も出来ないのはやはり致命的です。
せめて代替となるテキストメニューを用意しておきましょう。
- 重要な情報がフラッシュでしか用意されていない
- フラッシュが表示出来ない環境では情報が取得出来ません。
ウェブコンテンツの目的を考えるとこれもやはり致命的です。
重要な情報はテキストでの代替コンテンツでも見られるようにしましょう。
また、作品としてフラッシュを公開する場合、これもある意味重要な情報となるので、個人的にはせめてその中の数コマくらいを非対応環境で見られるようにしておくといいのではないかと思われます。
また、トップページを開くとフラッシュのデモが行われてそれからメニューが開かれると言うのもありますが、これも携帯端末には不適切です。
いずれにしても、フラッシュが表示出来ない環境に配慮する事は大鉄則と言えるでしょう。
埋め込めるフラッシュ。
埋め込めるフラッシュは携帯電話の制約を考慮した縮小された仕様フラッシュ・ライト(Flash Lite)に基づいたものとなります。
PC向けのフラッシュ作成ツールでも作成は可能ですが、以下の制約があります。
- 規格としてはヴァージョン 4の仕様に準じます
- 現在のフラッシュの仕様は既にヴァージョン 9にまで達しておりますが(平成18年12月15日現在)、携帯電話向けのフラッシュはヴァージョン 4レヴェルとなります。
- ここではヴァージョンに関しては詳しくは書きません。
- 容量は端末依存です
- 例えばドコモの旧型機(505/506シリーズ)では20キロバイト以内となります。
現行機ではどの端末も100キロバイトは可能になります。
- フラッシュの圧縮などは出来ません。
フラッシュの再生モード。
また、携帯電話ではどのキャリアも二種類の再生モードを持ちます。
- 実際にはソフトバンクにはもう一つの再生モードもありますが、これはダウンロードしたフラッシュを直接開くときのモードであり、ウェブでは使えません。
- 同様のモードは他のキャリアにもありますが、ウェブでは利用出来ないので書かれていないだけです。
実際の埋め込み方。
実際にフラッシュを埋め込むには、以下のようにします。
インライン再生モードの場合。
インライン再生モードでは、<object>要素で埋め込めます。
- 携帯電話では<embed>要素での埋め込みは出来ません。
キャリアに依って属性が一部異なりますが、以下のように記述すれば問題は無いでしょう。
<object type="application/x-shockwave-flash" width="横幅" height="高さ" data="フラッシュへのURI">(パラメータを与える<param>要素) (フラッシュ非対応環境への代替コンテンツ)</object>
再生出来ない環境への配慮。
フラッシュをサポートしていない旧型端末では当然ながらフラッシュを再生する事は出来ません。
一応<object>要素内に代替コンテンツを記述する事は可能のようです。
- <object>要素を認識しない旧型端末では開始・終了タグが無視されて内容となる代替コンテンツが表示出来るでしょう。
ただ、フラッシュの仕様の関係で表示出来ないと言う場合には、代替コンテンツも表示されないという事態も予想出来ます。
- 正直な話、<object>要素については実装が正しくないユーザエージェントが多いのが実情です。
PCとの互換性。
PCとの互換性ですが、以下のようになります。
- インターネットエクスプローラ
- ウィンドウズ版インターネットエクスプローラとは互換性はありません。
ウィンドウズ版インターネットエクスプローラでは全く異なる方法でフラッシュプレーヤを起動するからです。
マッキントッシュ版では<embed>要素で無いと起動しないとの事で、やはり互換性は無いようです。
- もじら系(ファイヤーフォックスなど)
- オペラ
- いずれも、携帯電話と全く同じ記述で埋め込みが出来ます。
- 旧式のユーザエージェント
- ネットスケープ 4.xではこの記述で埋め込みが可能ですが、3.x以前ではこの記述での埋め込みは出来ません。
従って、<object>要素の内容として書かれた代替コンテンツが扱われる事になるでしょう。
インライン再生モードに於いて注意すべき事。(平成18年12月16日)
- 一本のHTML文書に入れられるフラッシュは、最大一つとなります。
- 二つ以上入れられる端末もあるにはあるのですが、そのような端末は少ないようです。
- 二つ以上入れた場合、二つ目以降が表示出来ないなどの不具合が予想されます。
インタラクティヴ再生モードの場合。
インタラクティヴ再生モードの場合、幾つかの方法がありますが、各キャリアで共通に使える方法は唯一つ、直接当該フラッシュにリンクする事です。
- しかし、この方法ではフラッシュに対応していない環境ではリソースの取り込み時に何らかのトラブルが予想されます。
エヌ・ティ・ティ・ドコモでは、非対応環境へも配慮した記述法を用意してはいるのですが、あいにく他のキャリアにはそのような方法が用意されておりません。
エヌ・ティ・ティ・ドコモが採用している互換性を考慮したインタラクティヴ再生法。
エヌ・ティ・ティ・ドコモが採用しているインタラクティヴ再生モードを実現する方法は、以下の通りです。
- インタラクティヴ再生したいフラッシュを埋め込む<object>要素に
declare="declare"属性を与え、またid属性でIDを与える。 - 当該フラッシュへのアンカーとなる<a>要素には、
iswf="#与えたID"属性を与え、href属性の値はフラッシュに対応しない端末向けの代替コンテンツへのURIを与える。
- 勿論、当該フラッシュへの直接リンクでもインタラクティヴ再生は可能ですが、対応していない環境でもそのまま当該フラッシュを取り込もうとしてしまいます。
- また、直接リンクする方法と違い、<param>要素でパラメータを与える事も可能になります(直接リンクする場合、パラメータは全てデフォルト値扱いとなります)。
具体的には以下のようになるでしょう。
<object id="FLASH1" declare="declare" type="application/x-shockwave-flash" data="flash.swf"><param name="loop" value="on" /><param name="quiality" value="high" /></object>…<a iswf="#FLASH1" href="alternate.html">フラッシュ(非対応端末では静止画像)を見る</a>
ここでは、
- フラッシュは
flash.swf - 代替コンテンツは
alternate.html - フラッシュへのID
FLASH1
としております。
この方法は、他のキャリアでは利用出来ず、従って他キャリアではフラッシュが使えるか否かに拘らず代替コンテンツへのリンクとなるでしょう。
- また、初めのところで書いた<object>要素がインラインで埋め込まれてしまう事も予想されます。
- <object>要素の仕様にはdeclare属性が定義されておりますが、実装されているかどうかは分からないからです。
インタラクティヴ再生モードに於ける私見。(平成18年12月16日 更新)
インタラクティヴ再生モードの場合、非対応環境への配慮などの問題が付き纏います。
この点を完全に克服するには、リンク先にフラッシュではなく、機種を判別してフラッシュに対応していたらフラッシュを、対応していない端末には代替コンテンツを配信するウェブプログラム(CGIなど)へのURIを指定するのが一番現実的かと思われます。
- しらぎくさいと実験室内の小さな Perl スクリプト集に perl で書いたフラッシュ対応携帯電話判別スクリプトを載せておりますので、参考にして下さい。(平成18年12月16日)