連載
» 2013年08月26日 18時30分 UPDATE

無料でCreative Cloudを使い倒せ(10):Toolkit for CreateJSによるFlashのHTML5書き出し (2/2)

[廣畑大雅,taiga.jp, クラスメソッド株式会社]
前のページへ 1|2       

書き出したHTML+JavaScriptをEdge Code CCで編集

 書き出したHTML+JavaScriptを「Adobe Edge Code CC」で編集します。Edge Code CCを起動したら「File」メニュー → 「Open Folder…」を選択します(図7)。

07.png 図7:「File」メニュー → 「Open Folder…」

 Toolkit for CreateJSでのパブリッシュ設定で指定した出力先フォルダを選択します。表示されたHTML、JavaScriptをそれぞれ選択すると下記のような状態になります(図8)。

08.png 図8:Edge Code CCにToolkit for CreateJSが書き出したフォルダを参照させる

Edge Code CCでJavaScriptのソースを見る

 Flashのシンボルがどのように書き出されたかを知るためにEdge Code CCは大変便利です。実際に書き出されたHTML内のJavaScriptのコードに着目してみます。

exportRoot = new lib.≪FLAファイル名≫();

 HTMLを書き出した場合、上記のようなコードが見つかると思いますが、Edge Code CC上でFLAファイル名上でマウスを右クリックすると、メニューが表示され、「Quick Edit」を選択することで、表示されたHTML内に書き出された別のJSファイルが展開されることに気付くはずです(図910)。

09.png 図9:Edge Code CCのQuick Edit機能
10.png 図10:別ファイルが真下に展開される

 この機能のすごい所は、別ソースファイルを展開したときに該当ブロックのみ表示するという点です。一見複雑に見えるJavaScriptのソースもEdge Code CCの機能を使えば、内部構造が比較的簡単に理解でき、さらにライブプレビュー機能を利用することによって簡単にリモートデバッグすることができます。後は、書き出されたJavaScriptのソースを編集すれば完成です(図11)。

 どのように編集したかはサンプルをご覧ください。

 皆さんも一度、Flash Professional CCの体験版をダウンロードして、試してみてはいかがでしょうか。

11.png 図11:Edge Code CC のライブプレビュー機能によるリモートデバッグ
taiga_hirohata.png

廣畑大雅 プロフィール

taiga.jp

フリーランス エンジニア/アーキテクト

クラスメソッド株式会社 プリンシパル

Adobe Community Professional


「無料でCreative Cloudを使い倒せ」バックナンバー
前のページへ 1|2       

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。