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

WebAnimator Plus / Go で制作したHTML5アニメーションは、ホームページ・ビルダーを使用してWebサイト上に公開することができます。

  • 本ページの情報は、ホームページ・ビルダー21を例に記載しています。異なるバージョンのホームページ・ビルダーの場合、機能や名称が異なる場合がありますのでご了承ください。
  • ホームページ・ビルダーの操作については、ホームページ・ビルダーのマニュアル等をご覧ください。

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

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

目次

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

出力ファイル

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

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

例えば

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

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

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

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

ファイルのアップロード

  1. ホームページ・ビルダー（SPまたはクラシック）を起動し、メインメニューの「ツール」>「ファイル転送ツールの起動」を選択する

  2. 表示されたファイル転送ツールで、公開したい公開先サーバーに接続する

    ホームページ・ビルダー ファイル転送ツール

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

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

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

Webブラウザで確認する

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

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

例えば

以下のような場合

公開予定の「サイトのURL」http://yourdomain.com
HTMLファイル/リソースフォルダのアップロード先「サイトのURL」のルートディレクトリ
アップロードしたHTMLファイルのファイル名sample.html

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

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

例えば

以下のような場合

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

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

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

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

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

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

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

    以下のような場合

    公開予定の「サイトのURL」http://yourdomain.com
    リソースフォルダのアップロード先「サイトのURL」のルートディレクトリ
    アップロードするリソースフォルダ名 sample_resources

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

    「サイトのURL」のルートディレクトリ以下の任意のサブディレクトリにアップロードする場合、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. ホームページ・ビルダー（SPまたはクラシック）を起動し、メインメニューの「ツール」>「ファイル転送ツールの起動」を選択する

    5. ホームページ・ビルダー ファイル転送ツール

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

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

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

アニメーションを、ホームページ・ビルダーで制作した「サイト」に組み込むために、必要な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>
    に変更します。

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

「ホームページ・ビルダーで作成した既存のWebサイト」に「WebAnimator Plus / Go のアニメーション」を組み込む場合、SP と クラシック で手順が異なります。

ご使用中のソフトの手順をご覧ください。

ホームページ・ビルダー SP の場合

通常サイトとWordPressサイトのどちらでも同じ手順となります。

  1. ホームページ・ビルダー SPを起動し、アニメーションを掲載したいサイトを開く

  2. ホームページ・ビルダー SP画面左側の「パーツ一覧」から「HTMLソース（Youtube、アフィリエイト）」を選択し、アニメーションを掲載したい場所に「htmlソース」をドラッグ＆ドロップする

    ※ 必要に応じて、追加した「htmlソース」パーツの位置やサイズを調整してください。

    ホームページ・ビルダー パーツ

  3. 追加した「htmlソース」の歯車アイコン（パーツのプロパティ）をクリックし「パーツのプロパティ」画面を開く

    ホームページ・ビルダー SP HTMLソース

  4. 「編集」をクリックし「HTMLソースの編集」画面を開く

    ホームページ・ビルダー SP パーツのプロパティ

  5. 「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>

    を貼り付けてください。

    ホームページ・ビルダー SP HTML編集

  6. ホームページ・ビルダー SP の「プレビュー」機能により、アニメーションが再生されるかを確認する

    ※「編集画面」ではアニメーションは再生されません。「プレビュー」を実行してアニメーションをご覧ください。
    ※「プレビュー」画面ではアニメーションが正常に表示されない場合があります。この場合、公開先サイトに公開し、アニメーションが再生されるかをお試しください。
  7. 通常のホームページ・ビルダー SP の公開手順にしたがって、サイトを公開する

ホームページ・ビルダー クラシックの場合

フルCSSとWordPressのどちらのサイトでも同じ手順となります。

  1. ホームページ・ビルダー クラシック を起動し、アニメーションを掲載したいサイトを開く
  2. アニメーションを掲載したいページを開く
  3. 「ページ編集」画面で、アニメーションを追加したい場所を選択し、「HTML ソース」画面または「ページ/ソース」画面を開く

  4. 表示されたHTMLソース内に、本ページ「アニメーション組み込みの準備」欄の手順2と手順3のコードを貼り付ける

    例えば

    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>

    を貼り付けてください。

    ホームページ・ビルダー クラシック

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

    ※「編集画面」ではアニメーションは再生されません。「プレビュー」を実行してアニメーションをご覧ください。
    ※「プレビュー」画面ではアニメーションが正常に表示されない場合があります。この場合、公開先サイトに公開し、アニメーションが再生されるかをお試しください。
  6. 通常のホームページ・ビルダー クラシック の公開手順にしたがって、サイトを公開する