WebAnimator Plus / Go で制作したHTML5アニメーションは、ホームページ・ビルダーを使用してWebサイト上に公開することができます。
- 本ページの情報は、ホームページ・ビルダー21を例に記載しています。異なるバージョンのホームページ・ビルダーの場合、機能や名称が異なる場合がありますのでご了承ください。
- ホームページ・ビルダーの操作については、ホームページ・ビルダーのマニュアル等をご覧ください。
本ページでは、WebAnimator Plus / Go でアニメーションを制作/書き出し可能なお客様を対象に記載しております。
WebAnimator Plus / Go の基本的な操作等については、オンラインヘルプをご覧ください。
目次
出力ファイル
WebAnimator Plus / Go で制作したアニメーションは、HTML5形式で書き出す(出力する)ことができます。
制作したアニメーションをHTML5形式で書き出すと、HTMLファイルとリソースファイルが作成されます。HTMLファイルとリソースファイルを公開先サーバーにアップロードすることで、Webブラウザでアニメーションを閲覧できるようになります。
sampleというプロジェクトをHTML5形式で書き出すと、以下のファイルとフォルダが作成されます。
- sample.html
このファイルを、書き出したアニメーションの「HTMLファイル」と呼びます。 -
sample_resources フォルダ
このフォルダを「リソースフォルダ」と呼びます。
また、このフォルダ内にはアニメーション再生に必要なファイルが複数含まれており、これらを総称して「リソースファイル」と呼びます。
書き出したアニメーションをそのまま公開する
WebAnimator Plus / Go で出力したアニメーションをそのまま(出力された直後の状態で)公開する場合、出力されたHTMLファイルとリソースフォルダをWebサーバーにアップロードすればWebブラウザで閲覧できるようになります。以下の手順を実行してください。
ファイルのアップロード
ホームページ・ビルダー(SPまたはクラシック)を起動し、メインメニューの「ツール」>「ファイル転送ツールの起動」を選択する
表示されたファイル転送ツールで、公開したい公開先サーバーに接続する
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サイトに組み込む場合、ホームページ・ビルダー上でプレビューできるように、まずはリソースフォルダを編集し、公開先サーバーにアップロードします。
-
リソースフォルダをアップロードする場所を決め、URLをメモする
この時点ではまだリソースフォルダはアップロードしなくて結構です。例えば以下のような場合
公開予定の「サイトのURL」 http://yourdomain.com リソースフォルダのアップロード先 「サイトのURL」のルートディレクトリ アップロードするリソースフォルダ名 sample_resources アップロードしたリソースフォルダのURLは
http://yourdomain.com/sample_resources
となります。「サイトのURL」のルートディレクトリ以下の任意のサブディレクトリにアップロードする場合、URLは
http://yourdomain.com/任意のサブディレクトリ名/sample_resources
となります。このリソースフォルダのアップロード先URLをメモしておいてください。(以後、このURLを「リソースフォルダ アップロード先URL」と記載します。)
- リソースフォルダ内のWA_SCRIPT.jsを、メモ帳などの任意のテキストエディタ等で開く
テキストエディタで開いた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
に書き換え、保存してください。- ホームページ・ビルダー(SPまたはクラシック)を起動し、メインメニューの「ツール」>「ファイル転送ツールの起動」を選択する
編集・保存したWA_SCRIPT.jsを含むリソースフォルダを、手順1で決めたアップロード先にアップロードする
※HTMLファイルのアップロードは必要ありません。
アニメーション組み込みの準備
アニメーションを、ホームページ・ビルダーで制作した「サイト」に組み込むために、必要なHTMLコードを準備します。
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>
<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>
<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サイトのどちらでも同じ手順となります。
- ホームページ・ビルダー SPを起動し、アニメーションを掲載したいサイトを開く
ホームページ・ビルダー SP画面左側の「パーツ一覧」から「HTMLソース(Youtube、アフィリエイト)」を選択し、アニメーションを掲載したい場所に「htmlソース」をドラッグ&ドロップする
※ 必要に応じて、追加した「htmlソース」パーツの位置やサイズを調整してください。
追加した「htmlソース」の歯車アイコン(パーツのプロパティ)をクリックし「パーツのプロパティ」画面を開く
「編集」をクリックし「HTMLソースの編集」画面を開く
「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 の「プレビュー」機能により、アニメーションが再生されるかを確認する
※「編集画面」ではアニメーションは再生されません。「プレビュー」を実行してアニメーションをご覧ください。
※「プレビュー」画面ではアニメーションが正常に表示されない場合があります。この場合、公開先サイトに公開し、アニメーションが再生されるかをお試しください。- 通常のホームページ・ビルダー SP の公開手順にしたがって、サイトを公開する
ホームページ・ビルダー クラシックの場合
フルCSSとWordPressのどちらのサイトでも同じ手順となります。
- ホームページ・ビルダー クラシック を起動し、アニメーションを掲載したいサイトを開く
- アニメーションを掲載したいページを開く
- 「ページ編集」画面で、アニメーションを追加したい場所を選択し、「HTML ソース」画面または「ページ/ソース」画面を開く
表示された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>
を貼り付けてください。
ホームページ・ビルダー クラシック の「プレビュー」機能により、アニメーションが再生されるかを確認する
※「編集画面」ではアニメーションは再生されません。「プレビュー」を実行してアニメーションをご覧ください。
※「プレビュー」画面ではアニメーションが正常に表示されない場合があります。この場合、公開先サイトに公開し、アニメーションが再生されるかをお試しください。- 通常のホームページ・ビルダー クラシック の公開手順にしたがって、サイトを公開する