Google Swiffyを試してみました。【1.使い方~単純なアニメ変換】

こちらのブログに移行している間にGoogleからGoogle Swiffyという実験サービスがリリースされたので試してみました。

Google Swiffy

紹介記事

詳しくは以下のところで取り上げられているのでご覧ください。

FLASHをHTML5に変換できるGoogle swiffy公開、iPhoneやiPadにも対応 – GIGAZINE
Google、FlashをHTML5に変換するツール「Swiffy」を公開 iOSにも対応
グーグル、FlashをHTML5に自動変換できるツール「Google swiffy」を公開 – MdN Design Interactive

つまりどういうこと?

このサービスはFlashのSWFファイルをHTML5に変換するツールで、出来上がったファイルは本来FLASHが表示されないiPhoneやiPadのSafariでも表示できるということです。
まだ実験段階のようですが素晴らしいサービスですね。さすがに、完全に変換できるとは思いませんが、Googleだけにサイトの説明文をGoogle翻訳に突っ込んでみると以下のように説明されています。

というわけで試してみましょう。

Swiffy converts Flash SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player (such as iPhones and iPads).
Swiffy currently supports a subset of SWF 8 and ActionScript 2.0, and the output works in all Webkit browsers such as Chrome and Mobile Safari. If possible, exporting your Flash animation as a SWF 5 file might give better results.

【Google翻訳】Swiffyは、Flashプレイヤー(例えばiPhoneやiPadのような)ことなく、デバイス上のFlashコンテンツを再利用できるように、HTML5には、Flash SWFファイルを変換します。
Swiffyは現在、SWF 8とActionScript 2.0のサブセットをサポートしており、出力はChromeとモバイルSafariなどのようなすべてのWebkitブラウザで動作します。可能であれば、SWF 5ファイルとしてFlashアニメーションをエクスポートすると、より良い結果となる可能性があります。

ということで、Flash8をサポートとうたっていますが、もし無理そうだったらFlash5のアニメにするとうまく行くかも?といったことが書かれています。いろいろ試してみたところ、私のFlash8相当の携帯FLASH(FlashLite2.0)の複雑なデータはうまく行かなかったので、今回は単純なアニメーションを試してみます。

今回のサンプル

今回が以下のファイルを試してみます。
[SWF]https://www.1ft-seabass.jp/memo/archives/google_swiffy_001/google_swiffy_001.swf,200,200[/SWF]
ダウンロード:google_swiffy_001.zip
中身は星のMCをただただ回すサンプルです。

使い方

使い方は非常にシンプルでGoogle Swiffyにアクセスすると以下のような画面が表示されます。

画面


ファイル選択→アップロード

今回はgoogle_swiffy_001.swfをファイルを選択し、Upload and convertボタンを押します。


変換完了

すぐに変換されて以下のように変換結果が表示されます。
FlashとHTMLが並べて表示されますがこの程度なら30fpsでくるくる回っても遜色ないように見えます。すてきですね!

また、画面下のほうの今回の場合はgoogle_swiffy_001.htmlというURLからもアクセスできるのですが、2010/7現在では変換後15分だけ保管されその後は消えていってしまうので、どこか別のところに設置したい場合は、すぐにファイルはリンクから保存しておきます。

実際のHTML5変換結果

というわけで実際に変換したファイルです。

HTML5

別ページで開く

FLASH
[SWF]https://www.1ft-seabass.jp/memo/archives/google_swiffy_001/google_swiffy_001.swf,200,200[/SWF]

ほとんど同じように動いています!

おわりに

ソースを見てみるとSWFを解析変換したJSONデータを展開しSVGで描画されているようです。

なにより実際にiPhoneでみるとちゃんと表示されるので感動します。

この記事で面白そうとおもったら是非試してみてくださいね。