スマホ向けFlashサイトを作るには? 第一回 準備編

このエントリーをはてなブックマークに追加

スマートフォン向けFlashサイトを作るには?』このテーマで、4回に分けて記事にしました。

内容は以下の4回です。

スマホ向けFlashサイトを作るには?第一回 準備編
スマホ向けFlashサイトを作るには?第二回 Flash編
スマホ向けFlashサイトを作るには?第三回 Swiffy編
スマホ向けFlashサイトを作るには?第四回 HTML編

まずは第一回目という事で「準備編」です!
何のツールを使って、どういう端末でチェックすればいいのかを書きました。

では、はじまりはじまり~

■スマートフォン向けのFlashサイトを作りたい!

スマートフォンのサイトを作る機会が増えてきました。HTMLとJavaScriptをちくちく書いて作るのも良いけど、Flasherとしては、やっぱりFlashを使ってスマートフォン向けのインタラクティブなコンテンツを作りたい!です。
アプリであれば、FlashからはiOS、Android共にアプリを書き出す事はできますが、ストアに並べるまでにそれなりに面倒で手間もかかります。さらにユーザーにDLして貰わなければならないので、ハードルが高いです。
ブラウザなら、アクセスしてもらうだけで見てもらえるので、気軽です。

まずは今スマートフォン向けFlashサイトを作るにあたって、どの様なツールが使えるのか?どんなデバイス向けに作ればいいのか、検証していきます。

■AndroidはFlashPlayerで再生!


モバイル向けのFlashPlayerの開発が終了になりましたが、Android OS4.0にはFlashPlayerがリリースされました。ですのでAndroid2.1~4まではFlashPlayerが対応する事になります。
Android OS4.0端末は、2011年12月現在、GALAXY NEXUSだけで普及にはまだ少し時間がかかると思います。

今のところ問題となるのはiOSでFlashコンテンツを再生するにはどうしたらいいか、という事です。ぶっちゃけiPhoneのブラウザでFlashコンテンツを動かしたい!という事です。

■iPhone用にはFlashをHTML5に変換する!


iOSではFlashPlayerがありません。ですので、FlashコンテンツをHTML5に変換する必要があります。
今はFlashコンテンツをHTML5に変換するサービスやプロダクトが色々リリースされています。
GoogleのSwiffyや、AdobeのWallabyが有名ですが、その他にも色々あります。
以下のブログで詳しく説明されています。

FlashをHTML形式に変換するツール6選
http://case-mobile-design.com/?p=706

スマートフォンのブラウザでのアニメーションに関するツールのメモ
http://d.hatena.ne.jp/ndruger/20111113/1321205098

hi-posiの場合は、ケータイ向けサイト、スマートフォン向けサイトの両方を同時に作る事が多いので、HTML5への変換後の安定性、素材や開発スピードも考慮して、GoogleのSwiffyを選択しました。
またSwiffyはベクターデータ(SVG)による描画ですので、解像度の大きいiPhone4/4Sでも画像が荒れる事がないので、その点でも安心です。

Swiffyの特徴については以前調べたこちらの記事をご覧ください。
Swiffyを調べてみた http://hi-posi.jp/?p=1084

■Swiffyの対応バージョン

Swiffyは、対応OSのバージョンは書かれていませんが、こちらで試したところ、
iOS4~対応していました。またAndroid4.0(GALAXY NEXUS)でも再生が可能でした。

表:SwiffyとFlashPlayerの対応OS

Swiffy FlashPlayer
iOS iOS4~
AndroidOS 4.0~ 2.1~4.0

表を見てもらえればわかるとおり、
現状はiPhoneはSwiffy、AndroidはFlashPlayerで開発すればいいかと思います。
仮にAndroid OS5.0の端末が出始めたらSwiffyをコンテンツを表示すれば良いのです。
きっとその頃には、もっといいツールがでているのはないかと思います。今はまだ過渡期ですので。

■開発時のテストデバイス

FlashLiteを開発されていた方はわかると思うのですが、ケータイでは普及状況を考えるとFlashLite1.1端末で動かなくてはいけなかった時代が長く続きました。
初期のFlashLite1.1端末は、とにかくメモリが無いしスピードもでないのですが、この初期のFlashLite1.1端末で動けば、最新の携帯ではほぼ問題なく動くという事になります。

ではここで、iOSデバイスの搭載メモリを見てみましょう。

表:iOS端末の搭載メモリ

OS メモリ 画面サイズ Swiffy
iPhone iOS3.13 128MB 320 x 480
iPhone3G iOS4.21 128MB 320 x 480
iPhone3GS iOS4.21 256MB 320 x 480
iPhone4 iOS4.21 512MB 640 x 960
iPhone4S iOS5.01 512MB 640 x 960
iPod touch 初代 iOS3.13 128MB 320 x 480 x
iPod touch 2世代 iOS4.21 128MB 320 x 480
iPod touch 3世代 iOS4.21 256MB 320 x 480
iPod touch 4世代 iOS4.21 256MB 640 x 960
iPad iOS4.21 256MB 1024×768
iPad2 iOS4.3 512MB 1024×768

iPhone3Gはメモリが128MBしかないくせにiOS4なので、Swiffyに対応してしまいます。
という事で、Swiffyコンテンツにとっての初期FlashLite1.1端末は何かというと、それはiPhone3Gという事になります(なんか色々なところから怒られそうですが、、、。)

iOSの端末毎のシェアがどのくらいか分かりませんが、iPhone3Gでどんなにスピードがでなくても、少なくともブラウザが落ちる、とう事は避けなければなりません。
iPhone3Gがなければ、同じメモリ128MBのiPod touch 第2世代を購入する事をお勧めします。ブラウザが落ちるか落ちないかを確認する為に。

iPhone3Gで動けば、Android(FlashPlayer)では問題なくサクサク動きます。
FlashPlayerスゴイ!
iPhone3Gはバルス!

■結論

という事で、結論です。

Androidの場合
Flashで開発する。
対応OSは2.1~4.0

Android5.0がでた時はSwiffyを表示させる。

iOSの場合
SWFをSwiffyでHTML5に変換する。
対応OSはiOS4~

検証は、
iPhone3G、第二世代iPodTouchで行う。

コンテンツによっては対象端末から外すという事も考えてもいいと思います。

となります。

では次にFlashを制作する際の設定はどうすればいいでしょうか?

スマホ向けFlashサイトを作るには? 第二回 Flash編

に続きます。

8 Comments

  1. […] スマホ向けFlashサイトを作るには?第一回 準備編 スマホ向けFlashサイトを作るには?第二回 Flash編 […]

  2. trick7 より:

    岡田さん
    こちらの連載、さっそく社内共有させていただきました。弊社エンジニア一同感涙の記事です。
    連載の完結、とても楽しみにしています。
    「いいね」ボタンでは伝わらない感謝をこめて!ありがとうございます!

  3. Leave a Reply より:

    AndroidのFlashはパフォーマンスが微妙なのと多解像度での対応が問題となりますが、そこのところはどのようにお考えですか?

  4. 岡田昇三 より:

    >寺井さん
    ありがとうございます!
    なんとか早く終わらせて気持ちのいい新年を迎えたいと思います^^

    >Leave a Replyさん
    パフォーマンスなのですが、
    今回はiOSはSwiffy、AndroidはFlashPlayerという組み合わせで、できるだけ1ソースで作るという目標にしているので、FlashPlayerのパフォーマンスを問うところまでは使えないと思っています。ですのでパフォーマンスについてはどちらかというとJavaScriptの実行スピードの方が心配です。

    また多解像度ですが、Swiffy、Flashどちらもベクターデータですので、
    その点は心配しておりません。

    という感じで考えております。。

  5. […] スマホ向けFlashサイトを作るには? 第一回 準備編 http://hi-posi.jp/?p=1217 コメント (RSS) […]

  6. […] 「スマホ向けFlashサイトを作るには?第一回/準備編」でご紹介しましたが、 iPhoneや一部のAndroid端末ではアドレスバーを上にあげないとコンテンツの縦サイズである416pxを確保できません。 […]

  7. […] スマホ向けFlashサイト(iOS含む)の作り方の記事を書きましたので、よろしければそちらもご覧ください。 スマホ向けFlashサイトを作るには? 第一回 準備編 http://hi-posi.jp/?p=1217 […]

  8. […] スマホ向けFlashサイトを作るには?目次 第一回 準備編 第二回 Flash編 第三回 Swiffy編 第四回 […]

Leave a Reply