Edge Animate入門 第4回：作成したコンテンツを既存のHTML内に表示する

本記事では、Adobe Edge Animate CC（以下、Edge Animate）で作成したコンテンツを、既存のHTML内に表示する方法を紹介します。

Edge Animate CC の体験版をダウンロード サンプルファイルをダウンロード

図1 Edge Animateコンテンツを既存のHTML内の任意の位置に表示することができます

既存のHTML内に表示する方法

1. コンテンツをパブリッシュする

まずは、Edge Animate側の準備です。ステージ上でオブジェクトが何もないところをクリックし、［プロパティ］パネルにステージ（Stage）のプロパティを表示します。

すると、［コンポジションクラス］欄に「EDGE-xxxxxx」というコンポジションクラス名が入力されています。この値は、Edge Animateによって、他のEdge Animateコンテンツと区別するために付けられたIDのようなものです。コンポジションクラス名は、任意の名前に変更することも可能です。ここでは 「EDGE-sample01」に変更します。

図2 ［プロパティ］パネルにステージ（Stage）のプロパティを表示して、コンポジションクラス名を確認します

コンポジションクラス名を確認／変更したら、［ファイル］メニュー→［パブリッシュ］を行います。すると、Edge Animateファイルと同じフォルダー内に「publish」フォルダーが作成され、その中の「web」フォルダー内にEdge Animateコンテンツのファイルが生成されます。

図3 パブリッシュで生成されたファイル群、そしてポイントとなるコード

標準的なEdge Animateコンテンツでは、1つの表示用HTMLファイルと、3つのJavaScriptファイルが書き出されます。このHTMLファイルを Dreamweaverrやテキストエディタなどで開いて、ソースコードを確認してみましょう。ここで注目するポイントは2つです。

Edge Animateコンテンツを既存のHTML内に表示する際には、この2つの部分をコピーして利用するのが簡単です。

2. 既存のHTML内に必要なコードをコピーする

続 いて、Edge Animateコンテンツを表示する側のHTMLファイルの準備です。まず、HTMLファイルと同じ階層に、パブリッシュされたファイルのうち、3つの JavaScriptファイルをコピーします。また、画像を使用している場合は、「images」フォルダーもコピーします。

図4 3つのJavaScriptファイルをコピーします

次に、HTMLファイルのhead要素内にコンテンツ準備部分を加え、Edge Animateコンテンツを表示したい部分に表示用div要素を加えれば完成です。

図5 head要素内にコンテンツ準備部分を加え、Edge Animateコンテンツを表示したい部分に表示用div要素を加えます（サンプル：sample1.an）

※なお、コンテンツ準備部分については、style要素部分は省いても構いません。これは、「読み込みが完了するまでEdge Animateコンテンツを非表示にしておく」ための記述です。

同一HTML上に複数のEdge Animateコンテンツを表示する

複数のEdge Animateコンテンツを同じHTMLファイル内に表示したい場合には、Edge Animateコンテンツにそれぞれ異なるコンポジションクラス名を付けた上で、パブリッシュします。

例 えば、2つのEdge Animateコンテンツに対して、それぞれ「Edge-sample01」「EDGE-sample02」というコンポジションクラス名を付け、パブ リッシュします。パブリッシュしたファイルのJavaScriptファイル（画像を使っている場合には「images」フォルダーも）を2つ分、コンテン ツを表示したいHTMLファイルと同じ階層にコピーします。

図6 2つ分の必要なファイル（JavaScriptやimagesフォルダー）をコピーします

HTMLファイルには、それぞれのEdge Animateコンテンツのコンテンツ準備部分と表示用div要素を追加します。このとき、表示用div要素は、そのままコピーをしてくるとid属性の値 がどちらも「Stage」となってしまいます。これは同じ値にならないように、適宜変更しましょう。

図7 必要なコードを追加します。このとき、表示用div要素のid属性は同じ値にならないように変更します（サンプル：sample2.an）