--- title: JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 tags: flash swf2js JavaScript HTML5 canvas author: ienaga slide: false --- # JavaScript製FlashPlayer「swf2js」って? ある日、ある会社(~~Apple~~)の偉い人が言いました。 **「僕たちFlashサポートしないよ。」** そして、世はスマホ時代へ突入。 本当にFlashがサポートされないまま突入。。。 困る!! っということでJavaScript製FlashPlayerを作ってみました。 # 完成品 [swf2js/swf2js](https://github.com/swf2js/swf2js) # サンプル提供 GAMEDESIGNさんのサイトからご提供していただきました。 ありがとうございます! [GAMEDESIGN](http://www.gamedesign.jp/) ## 対応バージョン * FlashLite 1.x, 2.x, 3.x, 4.x * ActionScript 1.0, 2.0, 3.0 # 「swf2js」の使い方 * ベーシックな使い方 * 応用的な使い方 ## ベーシックな使い方 ```html:sample.html ``` 最初にswf2js.jsの本体を読み込む。 ```html:sample.html ``` 次にHTMLのBODY内にscriptを書き、再生したいswfのURLを swf2js.loadの第一引数にセットする。 ```html:sample.html ``` これでOK! ### 動作サンプル [サンプル](https://swf2js.com/sample/sample.html?lines.swf) iPhone、Androidで見れます:smile: ん?複数のswfを設置したい? できますよー:grin: ## 複数のswfを設置したい場合 ```html:sample.html
``` swf2js.loadの第二引数はoptionとして使用できます。 ``` { "tagId": string, } ``` object内にtagIdを追加し、値は設置したいタグのIDを入れます。 ```html:sample.html ``` タグを追加します。 ```html:sample.html
``` ### 複数設置した動作サンプル [サンプル](https://swf2js.com/sample/sample2.html) このように複数設置したい場合は、タグのIDで指定すれば複数のswfの設置が可能です。 # 応用的な使い方 * ちょっとだけJSでswfをコントロールしたい * がっつりJSで作りこみたい swf2jsではFlashのmethodをできるだけoverrideしたAPIを用意してます。 [APIリファレンス](https://swf2js.wordpress.com/api/) ## ちょっとだけJSでswfをコントロールしたい 例)flaファイルがなくなったけど、ちょっとだけJSでswfをコントロールしたい ```html:sample.html ``` ## がっつりJSで作りこみたい 例)サーバーにswfを設置してJSから読み込んで動的につくり込む ```html:sample.html ``` # 「swf2js」のメリット・デメリット ## メリット ### SWFファイルがそのまま使える 本来であれば、既存のflaファイルから 毎回HTML5Canvasで出力する必要があります。 swf2jsならswfをそのまま使用できるので HTMLのタグを書き換えるだけで改修が完了できます。 今までと変わらずスマートフォンでもブラウザでも swfが使えるのが一番のメリットです!! ### 既存ノウハウ、経験をそのまま活かせる 何十年と培った経験やノウハウやをそのままHTML5時代でも活かせます! ### 画面のリサイズ(マルチスクリーン対応) swfは画面の大きさに合わせて自動的にリサイズしてくれます。 swf2jsはこのリサイズ機能も実装しているので画面の大きさを気にしなくてもいいんです。 ### テキスト入力 swfだとお問い合わせフォームやタイピングゲームなどではテキスト入力できました。 swf2jsもテキスト入力をHTMLのtextareaを利用してこれを再現してます。 以外とこの機能がついてるJS製のPlayerはないんです! [サンプル](https://swf2js.com/sample/sample.html?yomi.swf) ## デメリット いろいろ、いい事を書きましたがデメリットもあります。 ### ~~ActionScript3が使えない~~ ~~現時点ではActionScript3は全くつかえません。~~ ~~来年の春くらいからActionScript3に取り掛かろうと思ってます。~~ ~~完成は未定です。。。~~ 2016/8/19(version 0.7)から対応開始しました :smile: ### 端末テストが少ない。 それは僕が持ってる端末が少ないからです。 Androidのメジャーなバグは回避してますが 端末固有のバグは網羅できてません。 # 終わりに Flash PRO CCがAnimte CCとなっても swfファイルはこれからも使用されていきます。 swf2jsはこれまで作ってきたswf資産と これから制作するswfを活用できる便利なツールになるよう 今後も開発を行っていくので是非ご注目ください。 ~~swf2jsでは再現できなかったswfを大募集しています。~~ ~~もちろんgithubでissuesやPull Requestも大歓迎です!!~~ 追記(2019/04/23) 「swf2js」は株式会社ソニックムーブにて 製品としてお問い合わせを受け付けております。 https://www.sonicmoov.com/ 伴い、GitHub版に関しては、一切のご返答を行なっておりません。 悪しからず、ご了承くださいませ:bow: