3.0では、再生しているSWFコンテンツに他のSWFコンテンツを読み込むことができます。Canvasコンテンツには、決まったやり方がなく、JavaScriptコードの中身を確かめたうえで処理しなければなりません。本稿は、比較的単純なコンテンツを例にして、基本的な考え方についてご説明します。読み込みもとコンテンツのHTMLドキュメントに他のコンテンツのJavaScriptファイルを読み込む読み込みもとのコンテンツには、背景画像と位置決め用の空のムービークリップインスンタンスだけ置きました(図001)。コンテンツのHTMLドキュメントには、つぎのように<script>要素にCreateJSライブラリとJavaScriptファイルが読み込まれています。src="main.js"></script>図001■背景が置かれた読み込みもとコンテンツHTMLドキュメントの<script>要素における核となるスクリプトは、つぎのコード001に抜書きしたとおりです。ステージ(Stageオブジェクト)をつくる初期設定と、画像をプリロードする処理が加えられています。Canvas書き出しされたHTMLドキュメントは、つぎの抜書きのようにステージをつくったら、すぐにコンテンツの初期化を行っています。中身のアニメーション(ムービークリップ)はシェイプでつくられており(図002)、画像のプリロードが要らないからです。この処理を読み込みもとコンテンツのHTMLドキュメントに書き加えればよさそうに思えます。createjs.Stage(canvas);stage.addChild(exportRoot);}図002■読み込むコンテンツのアニメーションはムービークリップでつくられているそこで、つぎのように読み込みもとHTMLドキュメントの<script>要素に、読み込むコンテンツのJavaScriptファイルを定めると、それだけで背景画像さえ表示されなくなります。src="sub.js"></script>理由は、互いのJavaScriptファイルにあります。つぎの抜書きが読み込みもと(main.js)のJavaScriptコードです。4つの変数(lib、img、cjs、ss)については参照が納められているかどうか確かめたうえで、処理を進めています。ところが、変数libのプロパティpropertiesは、オブジェクトを新たに与えています。ss;読み込むコンテンツのJavaScriptファイル(sub.js)も、同じくつぎの抜書きのように変数libのプロパティpropertiesを上書きしています。そのため、読み込み画像を定めるプロパティ(manifest)が空になってしまったのです。ss;<script>要素の順番を変えればとりあえず解決はできます。ここでは読み込むコンテンツのJavaScriptファイルで、要らないコードを除くことにしました(コード002)。Canvasドキュメントをパブリッシュするたびに書き替えられてしまうことにご注意ください。ステージのマウスクリックで読み込んだコンテンツのムービークリップを動的に加える前掲コード002の修正で、ふたつのコンテンツのJavaScriptファイルは問題なく読み込まれました。これで、読み込んだコンテンツのムービークリップを動的に加えることができます。ステージでマウスクリックしたら、読み込んだムービークリップインスタンスを表示することにしましょう。そこで、読み込みもとのHTMLドキュメントに書かれたスクリプトは、以下のコード003のように手直しします。読み込みもとコンテンツには、位置決め用の空のムービークリップ(my_mc)が置かれています。そこで、メソッドContainer.getChildIndex()でその重ね順を調べ、Container.removeChild()によりインスタンスを除いたうえで、読み込んだインスタンスを同じ重ね順にContainer.addChildAt()で加えました。読み込んだインスタンス(my_mc)も、やはりコンテンツのメインタイムラインに置いてあります(前掲図002)。これで、読み込んだコンテンツのムービークリップインスタンスが、読み込みもとコンテンツのステージに表れます(図003)。<script>要素の動的な読み込みでムービークリップをローカルにつくる前掲コード002は対症療法的な手直しです。コンテンツによっては、他にも上書きされる変数やプロパティが出てくるかもしれません。読み込みもとのコードには影響を与えずに、JavaScriptファイルが読み込めるやり方はないでしょうか。ひとつ考えられるのは、<script>要素そのものをつぎのように動的につくって、そこに読み込んでしまうことです。この処理を関数本体の中に書けば、<script>要素の参照はローカル変数(script)に納められます。これなら、読み込みもとのグローバルな変数やそのプロパティを上書きすることはありません。"sub.js";そこで、前掲コード003を書き替え、ステージにマウスクリックしたときJavaScriptファイルも動的に読み込むことにします。読み込みもとコンテンツには背景画像に加えて、位置あわせのムービークリップインスタンス(my_mc)が置いてあります(図004)。stageClicked);}図004■読み込みもとのコンテンツに背景画像と位置あわせのムービークリップインスタンスが置かれている前述のとおり、<script>要素はステージにマウスクリックしたとき動的に生成し、そこにJavaScriptファイルを読み込みます(コード004)。そのロードが済んだら、ムービークリップインスタンスをつくります。ここで、ほしいのはムービークリップインスタンスだけで、それが置かれたメインタイムラインは要りません。ムービークリップのコンストラクタは変数libにシンボル名(pen_animation)で納められますので、new演算子で呼び出せばつくれます(前掲図002のシンボル名参照)。この場合、重ね順だけでなくxy座標も読み込みもとコンテンツの位置あわせのムービークリップ(place_holder)にもとづいて定めます。<script>要素の参照やイベントリスナーの後かたづけも忘れないようにしましょう。バージョン2015.2に合わせて改訂。