ホームページV3を使用してアニメーションを公開する

WebAnimator Plus / Go （ウェブアニメータープラス） で制作したHTML5アニメーションは、ホームページV3を使用してWebサイト上に公開することができます。

  • ホームページV3の操作については、ホームページV3のマニュアル等をご覧ください。

  • 本ページでは、WebAnimator Plus / Go でアニメーションを制作/書き出し可能なお客様を対象に記載しております。

    WebAnimator Plus / Go の基本的な操作等については、オンラインヘルプをご覧ください。

目次

  1. 出力ファイル
  2. 書き出したアニメーションをそのまま公開する
    1. ファイルのアップロード
    2. Webブラウザで確認する
  3. 既存のWebサイトにアニメーションを組み込む
    1. リソースフォルダの編集とアップロード
    2. アニメーション組み込みの準備
    3. アニメーションを「サイト」に組み込む

出力ファイル

WebAnimator Plus / Go で制作したアニメーションは、HTML5形式で書き出す（出力する）ことができます。

制作したアニメーションをHTML5形式で書き出すと、HTMLファイルとリソースファイルが作成されます。HTMLファイルとリソースファイルを公開先サーバーにアップロードすることで、Webブラウザでアニメーションを閲覧できるようになります。

例えば

sampleというプロジェクトをHTML5形式で書き出すと、以下のファイルとフォルダが作成されます。

  • sample.html
    このファイルを、書き出したアニメーションの「HTMLファイル」と呼びます。
  • sample_resources フォルダ
    このフォルダを「リソースフォルダ」と呼びます。
    また、このフォルダ内にはアニメーション再生に必要なファイルが複数含まれており、これらを総称して「リソースファイル」と呼びます。

書き出したアニメーションをそのまま公開する

WebAnimator Plus / Go で出力したアニメーションをそのまま（出力された直後の状態で）公開する場合、出力されたHTMLファイルとリソースフォルダをFTPサーバーにアップロードすればWebブラウザで閲覧できるようになります。以下の手順を実行してください。

ファイルのアップロード

  1. ホームページV3を起動し、ホームページV3で制作したサイトを開く

  2. 画面左側の「サイト公開」タブを選択する

    ホームページV3 サイト公開

  3. 「FTP転送」画面で「転送するファイルを選択」をクリックする

    ホームページV3 FTP転送

  4. WebAnimator Plus / Go から書き出したHTMLファイルとリソースフォルダ（フォルダとフォルダ内のファイル全部）を、FTPサーバー上にアップロードする

    ホームページV3 アップロード

    ※ アップロード先は、公開先サーバーのルートディレクトリでも、サブディレクトリでもどちらでも結構です。
    ※ HTMLファイルとリソースフォルダは同じ場所（ディレクトリ内）にアップロードしてください。

以上でWebサイトへの公開は完了です。

Webブラウザで確認する

公開したアニメーションをWebブラウザで確認してみましょう。

HTMLファイルとリソースフォルダを、公開先の「ホームページアドレス」のルートディレクトリにアップロードした場合、Webブラウザでホームページアドレス/HTMLファイル名にアクセスすればアニメーションを見ることができます。

例えば

以下のような場合

ホームページアドレスhttp://yourdomain.com
HTMLファイル/リソースフォルダのアップロード先「FTPサーバー」のルートディレクトリ
アップロードしたHTMLファイルのファイル名sample.html

アップロードしたアニメーションのURLは
http://yourdomain.com/sample.html
となります。

「FTPサーバー」のルートディレクトリ以下に任意のディレクトリ（サブディレクトリ）を作成し、その中でアニメーションを公開することもできます。

例えば

以下のような場合

ホームページアドレスhttp://yourdomain.com
HTMLファイル/リソースフォルダのアップロード先 「FTPサーバー」のルートディレクトリに作成した「sub」ディレクトリ内
つまり、http://yourdomain.com/sub
アップロードしたHTMLファイルのファイル名sample.html

アップロードしたアニメーションのURLは
http://yourdomain.com/sub/sample.html
となります。

既存のサイトにアニメーションを組み込む

WebAnimator Plus / Go で出力したアニメーションを既存のサイトに組み込んで公開する場合、以下の手順を実行してください。

リソースフォルダの編集とアップロード

アニメーションを既存のWebサイトに組み込む場合、プレビューできるように、まずはリソースフォルダを編集し、FTPサーバーにアップロードします。

  1. リソースフォルダをアップロードする場所を決め、URLをメモする
    この時点ではまだリソースフォルダはアップロードしなくて結構です。
    例えば

    以下のような場合

    ホームページアドレスhttp://yourdomain.com
    リソースフォルダのアップロード先「FTPサーバー」のルートディレクトリ
    アップロードするリソースフォルダ名 sample_resources

    アップロードしたリソースフォルダのURLは
    http://yourdomain.com/sample_resources
    となります。

    「FTPサーバー」のルートディレクトリ以下の任意のサブディレクトリにアップロードする場合、URLは
    http://yourdomain.com/任意のサブディレクトリ名/sample_resources
    となります。

    このリソースフォルダのアップロード先URLをメモしておいてください。（以後、このURLを「リソースフォルダ アップロード先URL」と記載します。）

  2. リソースフォルダ内のWA_SCRIPT.jsを、メモ帳などの任意のテキストエディタ等で開く

  3. テキストエディタで開いたWA_SCRIPT.jsの中のリソースフォルダ名を、手順1でメモしたリソースフォルダ アップロード先URLに変更し、保存する

    ※リソースフォルダ名は、複数箇所に記載されています。WA_SCRIPT.js 内の全てのリソースフォルダ名を手順1のリソースフォルダ アップロード先URLに変更してください。
    例えば

    「sample_resources」というリソースフォルダを公開先ホームページアドレス「http://yourdomain.com」のルートディレクトリにアップロードする場合

    WA_SCRIPT.js 内の全てのsample_resourcesという記載を
    http://yourdomain.com/sample_resources
    に書き換え、保存してください。

  4. ホームページV3を起動し、ホームページV3で制作したサイトを開く

  5. 画面左側の「サイト公開」タブを選択する

    ホームページV3 サイト公開

  6. 「FTP転送」画面で「転送するファイルを選択」をクリックする

    ホームページV3 FTP転送

  7. 編集・保存したWA_SCRIPT.jsを含むリソースフォルダを、手順1で決めたアップロード先にアップロードする

    WebAnimator Plus / Go から書き出したHTMLファイルとリソースフォルダ（フォルダとフォルダ内のファイル全部）を、FTPサーバー上にアップロードする

    ホームページV3 アップロード

    ※ HTMLファイルのアップロードは必要ありません。

アニメーション組み込みの準備

アニメーションを、ホームページV3で制作した「サイト」に組み込むために、必要なHTMLコードを準備します。

  1. HTMLファイルを、メモ帳等のテキストエディタで開く

    例えば

    「sample」というプロジェクト書き出し後に作成されるHTMLファイル「sample.html」をテキストエディタで開くと、以下のようなコードが表示されます。

    <!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script type="text/javascript" charset="utf-8" src="sample_resources/jquery-1.7.min.js"></script>
  </head>
  <body>

    <div id="sampleStage" class="wascript">
        <script type="text/javascript" charset="utf-8" src="sample_resources/WA_SCRIPT.js"></script>
    </div>

  </body>
</html>

  2. <head></head>タグ内のscriptタグについて、リソースフォルダ名をリソースフォルダ アップロード先URLに変更します。

    例えば

    リソースフォルダ「sample_resources」を http://yourdomain.com/sample_resources にアップロードした場合

    <script type="text/javascript" charset="utf-8" src="sample_resources/jquery-1.7.min.js"></script>

    を

    <script type="text/javascript" charset="utf-8" src="http://yourdomain.com/sample_resources/jquery-1.7.min.js"></script>
    に変更します。

  3. <body></body>タグ内のdivタグについて、リソースフォルダ名をリソースフォルダ アップロード先URLに変更します。

    例えば

    リソースフォルダ「sample_resources」を http://yourdomain.com/sample_resources にアップロードした場合

    <div id="sampleStage" class="wascript">
  <script type="text/javascript" charset="utf-8" src="sample_resources/WA_SCRIPT.js"></script>
</div>

    を

    <div id="sampleStage" class="wascript">
  <script type="text/javascript" charset="utf-8" src="http://yourdomain.com/sample_resources/WA_SCRIPT.js"></script>
</div>
    に変更します。

アニメーションを「サイト」に組み込む

以下の手順で「ホームページV3で作成した既存のWebサイト」に「WebAnimator Plus / Go のアニメーション」を組み込みます。

  1. ホームページV3を起動し、アニメーションを掲載したいサイトを開く
  2. アニメーションを掲載したいページの編集画面を開く

  3. 「通常モード」で、アニメーションを挿入したい場所をクリックし、オブジェクト「その他」>「HTMLタグ」をクリックする

    ホームページV3 HTMLタグ

  4. 「HTMLタグの編集」画面の「編集」欄に、本ページ「アニメーション組み込みの準備」欄の手順2と手順3のコードを貼り付け「OK」をクリックする

    例えば

    http://yourdomain.com/のルートディレクトリにリソースフォルダsample_resourcesをアップロードした場合

    <script type="text/javascript" charset="utf-8" src="http://yourdomain.com/sample_resources/jquery-1.7.min.js"></script>

    と

    <div id="sampleStage" class="wascript">
  <script type="text/javascript" charset="utf-8" src="http://yourdomain.com/sample_resources/WA_SCRIPT.js"></script>
</div>

    を貼り付けてください。

    ホームページV3 HTML編集

  5. ホームページV3の「ブラウザプレビュー」機能により、アニメーションが再生されるかを確認する

    ※「編集画面」、「プレビュー」画面ではアニメーションは再生されません。「ブラウザプレビュー」を実行してアニメーションをご覧ください。
  6. 通常のホームページV3の公開手順にしたがって、サイトを公開する