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

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

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

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

目次

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

出力ファイル

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

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

例えば

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

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

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

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

ファイルのアップロード

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

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

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

  3. WebAnimator Plus から書き出した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 で出力したアニメーションを既存のサイトに組み込んで公開する場合、以下の手順を実行してください。

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

アニメーションを既存の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. ホームページ・ビルダー ファイル転送ツール

  6. 編集・保存した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 のアニメーション」を組み込む場合、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 の公開手順にしたがって、サイトを公開する

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

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

  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. 通常のホームページ・ビルダー クラシック の公開手順にしたがって、サイトを公開する