[超いまさら]もうつまづかないFlashLiteデザイン実装

年末はゲーム三昧... | Home | こいつは（文字通り）骨が折れるゼ...

2008
12/23
[超いまさら]もうつまづかないFlashLiteデザイン実装: CATEGORY:Flash,Webネタblog,Web・その他　TAG:Flash,携帯; MT復帰の際に過去の一部の記事で正常に表示できないものがあるようです。
閲覧数の多い記事から少しずつ直していこうと思いますがすべての記事の復旧は難しいと思います。
わざわざお越しの方には申し訳ありませんがご容赦ください。
今回はFlashLiteについてのお話。

携帯用Flashのコンテンツ制作を行うこと・・・に限った話ではありませんが、何も知らずにデザインを進めると実装時に色々と厄介なことになるリスクが高まります。

何事もデザインする前には必ず実装先の技術の仕様について多少は知っておく必要がありますので、調べたり制作したりしてみて気がついた基礎的なことを思いつくままに列挙してみたいと思います。
これで次からはつまづくことはなくなるかも？！
いや、どうだろう。

まず、というかいきなりですが、
FlashLite形式で作ったswfを携帯のブラウザで見せる方法には、HTML内に埋め込むPCでのおなじみの形式と、swfそのものにダイレクトにアクセスする方法の二種類があります。
一般的には"インライン再生"と"インタラクティブ再生"と呼ばれています。
（※docomoはインタラクティブ再生用のタグが別途用意されていますが縦横サイズなどの指定はできません。）

ここで気をつけておきたいのがインライン再生のときにはFlash内のキー操作を一切受付ないということと、swf自体の総容量・その他の仕様に著しい制限がある、ということです。

したがってインライン再生でできることというと、現状ですとアニメーションGIFのような使い方程度に限られることになります。

つまりインタラクションが必要なコンテンツは総じて"インタラクティブ再生"を選択する、ということになります。

ようやくここで本題に。
カンのよい方はすでにお気づきかもしれませんがswfを直接呼び出す"インタラクティブ再生"では制作時のFlashの縦横比率を保ったまま携帯のブラウザに対して100%表示しようとします。
（PCのブラウザでswfを直接見ていただくのと近い感じかな。
　scaleMode = "noScale";が指定されてないswfに限るけど。）

ということは、携帯の解像度や縦横のサイズの違いによってきれいに表示できない可能性がでてくるわけです。

下記の図を参照してください。
下記は、一般的な解像度QVGAサイズの横240pixel×高さ340pixel(高さは一概には言えませんが)のswfを高さの異なる2種類の携帯で表示したときの例です。
※矢印は余白を意味しています。

同じQVGAでもご覧の通りの表示となります。
特に左上のものは縦幅をおさめるために大きく縮小されてしまい、
場合によっては文字などがつぶれて閲覧に耐えれなくなってしまいます。

現行の携帯各キャリア、機種ごとに横幅はほぼ同じなのにもかかわらず縦サイズが大きく異なります。
現状のFlashLite開発でもっとも悩ましい要因は、個人的にはここではないかと思うくらいに非常に厄介な問題です。

なお、各キャリア、機種ごとのサイズの違いの詳しくは下記ページに掲載されていますのでご存じない方はデザイン前（設計前）には軽くチェックしてみることをお勧めします。ガッカリできること間違いなしです。

■docomo
http://www.nttdocomo.co.jp/service/imode/make/content/spec/screen_area/index.html
■au
http://www.au.kddi.com/ezfactory/tec/spec/new_win/ezkishu.html
■SoftBank
http://creation.mb.softbank.jp/terminal/?lup=y&cat=display

なお、補足の注意事項として上記ページの表中のサイズはブラウザサイズを参照するようにして下さい。携帯の解像度の縦横スペックとブラウザで表示できる縦横サイズは基本的に異なります。（縦横共に少し小さくなります。）

では、この悩ましい縦サイズ問題にどう対処するか、ですが、
一番良いのは言うまでもなく各キャリアごとに最適なサイズのswfを提供することですが、これにはお金と時間と精神的な余裕がないとなかなか現実的ではありません。

次にベターな方法としては、先ほどのキャリアごとの縦横サイズを斜め読みしたときにおおよそですが同解像度でも2パターンくらいの縦横比率であることが分かりますので、多少の余白は目をつぶって2種類（ショート・ロング版）のswfを作成するようにデザイン時からそのように設計する方法です。

さらに時間・お金がないときはショート版のみを用意する、という方法も考えられますが、先ほどの図のように下側に余白ができる機種のことも考えたデザインを行う必要があります。

また、番外編ですが最近のFlashLite2.0以降が扱える携帯ではFlash7程度の命令が使えますので、PHP等のプログラムでFlashの生成ロジック部分のみを担当させてキャリア・機種毎にジャストフィットなswfを生成させて、それぞれのムービークリップの位置関係などの微調整はアクションスクリプト側で制御してやればメンテナンス性も優れており、保守運用で掛る費用面などの懸念事項もクリアされるので条件がそろっていれば検討してみる価値はあるかもしれません。

少し話がそれましたが、つぎにファイル容量の制限について。
こちらは簡単です。

"100kbまでに抑えましょう。"

これだけです。

1つのswf内で様々なシーン展開があり、その都度色々な画像を表示するようなものになると100kbなんてあっという間です。
基本的にはベクトルベースで描画して"ここぞ"というところでビットマップ画像を置いてやるのがベターではないかと思います。
これについてはデザイナーだけでなく、お仕事の場合はお客さんにもその旨事前にお伝えし、ご理解いただかないと「もっときれいな画像を」とか、「もっと画像点数を増やして」等々の注文が来てから「できません」となるとやはり不満が溜まってしまうというものです。

逆に予めお伝えして納得いただいた上であれば、"ここぞ"の画像選定に注力していただけますし、理不尽な要望でブランディングイメージを損ねることも防げますよね。

また少し脱線気味ですが、100kbに収まっているからと言って限界ギリギリのswfばかりを用意するのも考えものです。
何せ携帯ですのでパケット代がかかるわけです。
（最近は定額制を導入されている方も多いかもしれませんが）
また、ネットのスピード自体も遅いため表示までに時間がかかってしまうことも予想されます。
（このあたりはモデムが大活躍していた時代を彷彿とさせられますね。）

他に注意事項は色々あったような気もしますが
疲れたので今日はこの辺で。

以上を踏まえてバリバリFlashLite作っちゃいなよ！
私のかわりに。