ash | サーバ構築 | Linux | ホームページ作成 | プログラム | その他

ホームページ・ナビシステムについて

ホームページ・ナビシステムの概要

　ホームページ・ナビシステムとは、ホームページを順次表示し、それに対するコメントと、アニメーションによる会話での解説を行います。 任意のページを、指定した順序に表示できるます。 外部のサーバのページに対してコメントを付けることもできますが、著作権などには注意してください。
　いろいろなプレゼンテーションや、教育システムなどに応用できます。 プログラムの知識がなくても、データ定義だけで、簡単にカスタマイズすることができます。
　IE3.0やNetscape2.1でも動作するJavaScriptバージョンと、IE5.0専用のXMLバージョンがあります。 ただし、XMLバージョンは、現在開発中です。

ホームページ・ナビシステムの画面構成

　ホームページ・ナビシステムは以下の画面の組み合わせでできています。 各画面は、フレームに別れています。

ロゴ表示画面


ホームページ表示画面
セリフ画面


キャラクタ画面


コメント画面
ロゴ表示画面
システムのロゴや、会社のロゴなどを表示する領域です。
「次へ」と「前へ」のボタンで、ホームページを移動できます。
ホームページ表示画面
ナビゲーションするホームページを表示する領域です。
セリフ画面
会話形式でホームページの説明をするための領域です。
左のキャラクタと右のキャラクタ用の吹き出しがあります。
キャラクタ画面
GIFアニメなどで、楽しく演出するためのキャラクタ表示領域です。
ホームページ領域に近い、右側に解説者を配置するのが一般的です。
コメント画面
画面の下に、ホームページについてのコメントを表示する領域です。
タイトルと内容の２行で表示します。
ホームページ領域と同時に切り替わります。

ホームページ・ナビシステムのサンプル

　ASHのXMLチュートリアルをホームページ・ナビシステムで作成してみました。
　ナビゲーションしているホームページは、ASHのXMLについてのコンテンツです。
　「次へ」ボタンを押すと、次画面になります。 別ウィンドウを開きますので、終了時は、ウィンドウを閉じてください。

ホームページ・ナビシステムの設定方法

　設定ファイルは、サンプルのHTMLテンプレートにデータ定義を追加するだけです。 以下に、その設定方法を説明します。
　ソースで、//の後ろはコメントとなります。 文字列は、''か""で囲む必要があります。
　トップページは、template_main.htmを複写して作成します。
　ナビゲーションファイルは、説明するホームページ毎に作成します。 トップページのナビゲーションファイルの設定では、それらのファイルのURLを指定します。 この順序で、ホームページを表示していきます。

template_main.htm
// ナビゲーションファイルの設定
// 個別設定開始−−−−−−−−−−−−−−−−−−−−−−−−−−−
navis[0] = "";
navis[1] = "";
navis[2] = "";
navis[3] = "";
// 個別設定終了−−−−−−−−−−−−−−−−−−−−−−−−−−−

　次に、template_navi.htmlを複写して、ナビゲーション対象となるページの設定を行います。 参照ページURLと、コメントタイトルと、コメント文字列を指定できます。 コメントは、タイトル1行＋文字列1行の合計2行です。

template_navi.htm
    // ナビゲーションページ情報の設定
    //   top.url:      参照ページURL
    //   top.title:    コメントタイトル
    //   top.comment:  コメント文字列
    // 個別設定開始−−−−−−−−−−−−−−−−−−−−−−−−−−−
    top.url     = '';
    top.title   = '';
    top.comment = '';
    // 個別設定終了−−−−−−−−−−−−−−−−−−−−−−−−−−−

　最後に、説明用の会話内容を設定します。
　話者は、2人ですので、左(l)か右(r)を指定し、そのセリフは、会話メッセージ文字列に指定します。
　会話時間は、ミリ秒で指定します。 会話時間を0とすると、会話は終了します。 従って、最後の会話時間を0以外の数字を入れると、会話をループさせることができます。

template_navi.htm
    // 会話の設定
    //   top.speaks[]: 話者(l:left, r:right)
    //   top.mesgs[]:  会話メッセージ文字列
    //   top.times[]:  会話時間(ミリ秒)
    // 個別設定開始−−−−−−−−−−−−−−−−−−−−−−−−−−−
    top.speaks[0] = 'r';
    top.mesgs[0]  = '';
    top.times[0]  = 4000;

    top.speaks[1] = 'l';
    top.mesgs[1]  = '';
    top.times[1]  = 3000;

    top.speaks[2] = 'r';
    top.mesgs[2]  = '';
    top.times[2]  = 3000;

    top.speaks[3] = 'l';
    top.mesgs[3]  = '';
    top.times[3]  = 20000;
    // 個別設定終了−−−−−−−−−−−−−−−−−−−−−−−−−−−

　会話しているキャラクタの画像データを変更したい場合は、imgタグの中のファイル名を変更します。 キャラクタの画像データは、キャラクタ設定資料の動画集の中から、好きなものを選べます。
　画像ファイルの設定を変数で設定していないのは、Internet Explorer 3.0や、Netscape 2.0でも動作するように設計されているためです。 現在、制作中のXMLバージョンでは、Imageオブジェクトを利用して、セリフ単位で画像を切り替えれるようになる予定です。

template_navi.htm
<img src="img/doc_00.gif" align="right" hspace=5>
<img src="img/nan_00.gif" align="left" hspace=5>

キャラクタ設定資料

著作権について

　ASHのホームページにある、プログラムおよび画像データの著作権は、すべてASHにあります。
　プログラムや画像データの利用や改造は、非商用、商用にかかわらず自由ですが、利用される場合は、ASHへのリンク、ASHに対するカンパ、ASHに対する仕事の依頼などをお願いします。
　領収証が必要に場合は、アッシュ有限会社で発行させていただきます。

[ASHのホームページへ]
Copyright (C)1998-1999 ASH multimedia lab.
mail : wmaster@ash.or.jp