■ＩＮＤＥＸ　■あにめちっく・めぐみちゃん講座　■ＨＰマスコット　■まじかる☆うお～く　■声優さんを募集します！　
■コーヒーちょうだい！　■ＶＢのお部屋　■まのんのＣＧアトリエ　■おすすめリンク　■更新の経歴　■プロフィール

■ＨＰマスコット開発リファレンス

１．開発ツール紹介
２．プロフィール設定画面
 ３．エディター画面　
 ４．起動時の設定画面　
 ５．画像設定画面　
 ６．挨拶設定画面　
 ７．プログラム自動生成　
 ８．オプション　
 ９．完成時の画面　
 １０．完成したＨＰマスコット　
 １１．アップロード
 １２．高速ネットワーク更新　
 １３．Ｎｅｔｓｃａｐｅ６対応　
 １４．バージョンアップ履歴　
 １５．開発リファレンス ←現在ここ
１６．トラブルシューティング
 １７．ＷｅｂＡＩ３系
 １８．ＣＧＩオペレーション

　ＨＰマスコットはＪａｖａｓｃｒｉｐｔと呼ばれるＷｅｂ言語で作成されています。
　開発ツールを使用すればＪａｖａｓｃｒｉｐｔを知らなくてもマスコットを作成することが可能です。
　しかし、勉強のためもっとＨＰマスコットの動作について知りたいという方はこちらを
　参照してみてください。

　改造編（ＷＡＶファイル再生）ver0.3220.2編　new
　改造編（ＷＡＶファイル再生）ver0.3060編

■基本事項。

■ファイル形式

　ＨＰマスコットの動作に必要なファイルは基本的にマスコットの動作を記述した
　ＨＴＭＬファイル１つです。というわけでとても単純です。
　ＨＴＭＬファイルの中身はテキストファイルになっています。
　メモ帳やワードパッドなどで編集することが出来ます。

　ＨＴＭＬファイル内にはマスコットの画像はどこどこにある、ＢＧＭはこれを使用する
　・・・等の情報が書かれています。　また、マスコットの動作を決定するＪａｖａｓｃｒｉｐｔは
　このＨＴＭＬファイルの中に記述されています。ブラウザーがこのファイルを読み込むと
　ブラウザー上でＨＰマスコットのプログラムが実行されます。

　☆ＨＰマスコットの扱うファイル形式は主に次の通りです。

　　マスコット本体・・・ＨＴＭＬファイル。
　　画像・・・ＪＰＧ、ＰＮＧ、ＧＩＦ、ＢＭＰ。
　　ＢＧＭ・・・ＭＩＤＩ、ＡＵ、その他多数。
　　音声・・・ＷＡＶ等。　

■動作環境

　現行のＨＰマスコットはＪａｖａｓｃｒｉｐｔ１．３で作成されています。
　ブラウザーが対応していればＷｉｎｄｏｗｓでもＭａｃでも動作します。
　インターネットエクスプローラー４、５、５．０１、５．５、６及び
　ネットスケープ６以降で動作します。ネットスケープ４Ｘ系は未対応です。

■動作確認
　
　ＨＰマスコットを作成するときは、まずインターネットに接続していない状態で動作の確認を
　行います。これをローカル環境での動作と呼びます。

　☆ローカル環境でＨＰマスコットの動作を確認。

　　エクスプローラーでＨＴＭＬファイルをダブルクリックします。
　　ＨＰマスコットの開発ツールを持っている場合はファイルを開く－ＨＴＭＬファイルで
　　読み込んだ後、プレビューボタンを押して下さい。
　　ランチャーでＨＰマスコットのＨＴＭＬファイルを登録すれば動作確認が容易になります。
　　ローカル環境で動かなければインターネット環境でも動作しません。

　　ローカル環境で動作しない原因の殆どはＪａｖａｓｃｒｉｐｔのプログラムの文法上の間違いです。
　　プログラムを見直してもやっぱりなぜか動作しない・・・という場合は作者に泣きついてください。
　　ローカル環境で動作させる場合、マスコットのＨＴＭＬファイル、画像、ＢＧＭのファイルは
　　全て同じフォルダ内にある必要があります。

　ローカル環境でＨＰマスコットが動作したらインターネットに接続して動作の確認を行います。
　これをインターネット環境での動作確認と呼びます。

　☆インターネット環境でＨＰマスコットの動作を確認。

　　インターネットでＨＰマスコットを動作させるには必要なファイルをお持ちのＨＰにアップロードしておく
　　必要があります。ローカルで問題なく動作すればインターネット環境でも動作するはずです。

■書式

　☆タグ

　ブラウザーはタグと呼ばれる<HTML>・・・</HTML>のような
　文節を一区切りとしてそこに何が書かれているかを解釈しています。

　☆ＨＴＭＬファイルの基本構造

　　<HTML>
　　<HEAD>
　　<TITLE>めぐみちゃん</TITLE>
　　</HEAD>
　　<BODY>
　　<SCRIPT LANGUAGE="JAVASCRIPT">

　　ここにＪａｖａｓｃｒｉｐｔを書く。

　　</SCRIPT>
　　</BODY>
　　</HTML>

　☆<HTML>・・・</HTML>タグ

　　ＨＴＭＬの開始と終了を表します。

　☆<TITLE>・・・</TITLE>タグ

　　タグ中にマスコットの名前を書きます。
　　ブラウザーのお気に入りに登録したとき名前が表示されるようになります。

　☆<SCRIPT LANGUAGE="JAVASCRIPT">・・・</SCRIPT>タグ

　　Ｊａｖａｓｃｒｉｐｔを書きます。ＨＰマスコット本体の動作はここに書かれています。

■Ｊａｖａｓｃｒｉｐｔ

　☆規則
　
　　文末には；（セミコロン）をいれる。無いとエラー表示が出る。

　　注釈の表示は//（ダブルスラッシュ）以降に書く。
　　以降書いてある内容は無視される。

　　数行にわたる注釈は/*・・・*/で囲って書く。
　　/*
　
　　ポケモンゲットだぜ！！　　
　
　　*/

　☆変数　

　　数値型、文字列型、ブーリアン型、オブジェクト型があります。
　　ＨＰマスコットでは主に数値型と文字列型を使用しています。

　　数値型（倍精度実数）
　　NowStoryNo = 15;

　　文字列型
　　var MascotName = "めぐみちゃん";
　　文字列は”（ダブルクオーテーション）でくくる。

　　’（シングルクオーテーション）でもよい。
　　 Youbi = '月';

　　オブジェクト型
　　day = new Date();

　☆配列

　　多数の変数を１つの配列に格納して使用することが出来ます。
　　Ａｒｒａｙオブジェクトと呼んでいます。

　　KyounoWadai = new Array(30);
　　今日の話題用の変数を０・・・３０まで用意します。
　
　　KyounoWadai[2] = '松茸は愛知県でも採ることができるんですよ・・・・';
　　今日の話題の配列要素２に文字列を代入。要素は[]でくくります。

　☆式と演算子

　　Ｊａｖａｓｃｒｉｐｔでは算術演算子、等価比較演算子、比較演算子、論理演算子
　　シフト演算子、代入演算子などがあります。
　　ＨＰマスコットでは主に算術演算子、等価比較演算子をしようしています。
　　
　　算術演算子
　　 n2 = n2Max + 1;

　　n1 = ++n1;//変数n１の値を１増やす。

　　等価比較演算子
　　式の値を評価し、ｔｒｕｅもしくはｆａｌｓｅのブーリアン値を戻す演算子です。

　　 if (k2==0){
　　　Hyouzyou(KyounoHyouzyou[n1]);
　　　MascotNowHyouzyouNo = KyounoHyouzyou[n1];
　　}

　☆制御構造

　　ＨＰマスコットにはビジュアルベーシックやＣ言語のようなプログラム制御構造を
　　持たせることが出来ます。

　　（Ａ）　ｉｆ文　　もし・・・ＸＸだったらあれこれを実行せよ。

　　 if (sawattakaisuu > 2){
　　　　alert('あ、危ない！これ以上は危険です・・・\n彼女の必殺技がくるかもしれませんよ！・・・');
　　　　sawattakaisuu = 0;
　　　　goHome();
　　}

　　（Ｂ）　ｉｆ・・・ｅｌｓｅ文　もし・・・ＸＸだったらこれを実行せよ。でなけりゃあれを実行せよ。

　　if (confirm("女子高生めぐみちゃんを起動します☆\nNowLoading...")){
　　} else {
　　　　window.location.href="http://www2s.biglobe.ne.jp/~manon/";
　　}

　　（Ｃ）　ｓｗｉｔｃｈ文　この場合はあれをせよ。あの場合はこれをせよ。別の場合はこれこれをせよ。

　　　function MascotAction(ActionMode,Operation,Option){

　　　　switch (ActionMode){

　　　　case '':
　　　　break;

　　　　case 'GetStatus'://マスコットのステータスを取得します
　　　　break;

　　　　case 'chgBlinkMarker'://点滅マーカーを変更します
　　　　break;

　　　　case 'chgKimezerifu'://マスコットの決め台詞を変更します
　　　　break　
　　　｝

　（Ｄ）　ｆｏｒ文　ある条件式がみたされるまで繰り返し処理をさせます。

　　 for (intLoopNo = 0; intLoopNo < 29; intLoopNo++) {
　　　AnimeImage[intLoopNo] = new Image();
　　}

　（Ｅ）　ｗｈｉｌｅ文　ある条件を満たしている間はこれを実行せよ。

　　　ｗｈｉｌｅ（条件式）ステートメント；

　　　現行のＨＰマスコットでは使用していません。

■改造編

■起動時などに音声再生させる。（ＩＥのみ）ｖｅｒ０．３２２０．２編

　基本的にはどの会話上でも音声再生可能ですがここでは
　比較的簡単に追加する方法を書きます。
　時刻に応じてＷＡＶファイルを再生します。

　１．あにめちっくめぐみちゃん用の音声データ集をダウンロードする。
　　　挨拶や、きゃ～等のＷＡＶが入っているので共通で使用することが出来ます。
　　　ＨＰマスコットとして公開する場合は、声優さんに使用許可をもらっておきます。
　　　ｗａｖファイルは開発ツールのフォルダにコピーしておきます。

　２．ｖｅｒ０．３２２０．２で生成した下記の関数中のｘｘｘ．ｗａｖを書き換えます。

//挨拶でwavファイルを再生する関数(IE系)
function voicePlayAisatu(){
　if (document.all){
　　acDate=new Date();
　　myHour=acDate.getHours();

　if (myHour > 5 && myHour <= 10){
　　//朝の台詞
　　mySound.src = 'xxx.wav';
　} else if (myHour > 10 && myHour <= 16){
　　//昼の台詞
　　mySound.src = 'xxx.wav';
　} else if (myHour > 16 && myHour <= 24){
　　//午後の台詞
　　mySound.src = 'xxx.wav';
　} else if (myHour >= 0 && myHour <= 5){
　　//深夜の台詞
　　mySound.src = 'xxx.wav';
　}
　}
}

//触ったときしゃべらせる関数・・・搭載推奨。（爆）
function voicePlayTouch(){
　if (document.all){
　　mySound.src = 'xxx.wav';//きゃ～えっち！もう最低～・・とか。
　}
}

■起動時などに音声再生させる。（ＩＥのみ）ｖｅｒ０．３０６０編

　基本的にはどの会話上でも音声再生可能ですがここでは
　比較的簡単に追加する方法を書きます。
　時刻に応じてＷＡＶファイルを再生します。

　１．あにめちっくめぐみちゃん用の音声データ集をダウンロードする。
　　　ＨＰマスコットとして公開する場合は、声優さんに使用許可をもらっておきます。

　２．ＨＰマスコットの最後の方に下記の部分へタグを３行追加します。

<div id="MascotCounter" style="position: absolute; top: 490; left: 400; width: 300; height: 120">

</div>
<div id="BGMcontrol" style="visibility:hidden;position: absolute; top: 18; left: 0; width: 200; height: 138">
<bgsound src="" id = "mySound">
</div>
</FORM>
<FORM name="mailform" method="post" enctype="text/plain" action="mailto:manon@mua.biglobe.ne.jp">
<div id="Resu" style="visibility:hidden;position: absolute; top: 20; left: 0; width: 200; height: 138">
<p><textarea rows="5" name="fromVisitor" cols="40" style="position: absolute; width: 505; font-size: 9pt; letter-spacing: -1pt; left: 0; top: 54; height: 250; text-align: left">...</textarea></p>
</div>
</FORM>
</BODY></HTML>

　３．ＷＡＶ再生用の関数を追加します。

　　場所は関数と関数のあいだのどこでもＯＫです。
　//ｘｘ関数
　この辺にカット＆ペーストする。メモ帳などを使ってください。
　//xx関数

　追加する関数
　ＷＡＶファイルの設定は自由に変更できます。

//マスコットをしゃべらせる関数
function soundPlay(){
　if (document.all){
　acDate=new Date();
　myHour=acDate.getHours();

　if (myHour > 5 && myHour <= 8){
　　　// strTimeMessage = 'おはようございます・・・';
　　　mySound.src = "ruriho-ayabashi01.wav";
　} else if (myHour > 8 && myHour <= 11){
　　　// strTimeMessage = 'もうすぐお昼ですね・・・';
　　　mySound.src = "ruriho-ayabashi02.wav";
　} else if (myHour > 11 && myHour <= 14){
　　　// strTimeMessage = '午後になりました・・・';
　　　mySound.src = "ruriho-ayabashi02.wav";
　} else if (myHour > 14 && myHour <= 17){
　　　// strTimeMessage = 'もうすぐ、夕方ですね・・・';
　　　mySound.src = "ruriho-ayabashi02.wav";
　} else if (myHour > 17 && myHour <= 20){
　　　// strTimeMessage = 'こんばんは、今お帰りですか？・・・';
　　　mySound.src = "ruriho-ayabashi03.wav";
　} else if (myHour > 20 && myHour <= 23){
　　　// strTimeMessage = '夜遅くまでお疲れさまです・・・';
　　　mySound.src = "ruriho-ayabashi04.wav";
　} else if (myHour >= 0 && myHour <= 5){
　　　// strTimeMessage = '深夜のご訪問ですね・・・';
　　　mySound.src = "ruriho-ayabashi04.wav";
　} else {

　}

}
}

　４．ダウンロード経過表示関数に下記の一行を追加します。

//ダウンロード経過表示関数
intDownNo = 0;
function DisplayDownLoadFileSize(){
　var intLoopNo;
　FileSize = FileSize + intFileSize[GazouFileNo];
　document.f1.S2.value = 'DownLoad...' + FileSize + '/' + FileSizeTotal + 'KB';

　if (GazouFileNo == 0){
　　ClipMascotImage(1);
　　soundPlay();
　} else {
　　tm = setTimeout('DisplayDownLoadFileSize()',200);
　　GazouFileNo = GazouFileNo - 1;
　}
}

５．完成。プレビューボタンを押して起動してみてください。
　　ローカル環境で動作している場合は開発ツールのフォルダ内に
　　ＷＡＶファイルをコピーしておく必要があります。

■ＷｅｂＡＩについて。

　　ＨＰマスコット３で使用している２つの通信機能（ＷｅｂＡＩ）についてコメントします。

　１．ＪＳファイル。
　　ＨＰマスコットはタグ中に以下のファイルを設定することでＷｅｂ上にあるプログラムをどこからでも
　　ダウンロードして使用することが出来ます。

　　記述例）
　　<SCRIPT SRC='http://www2s.biglobe.ne.jp/~manon/webai1.js'></SCRIPT>
　　 <SCRIPT SRC='http://www2s.biglobe.ne.jp/~manon/webai2.js'></SCRIPT>

　　ＪＳファイルとはＪａｖａｓｃｒｉｐｔで使用できる外部ファイルのことです。
　　中身はテキストデータ（関数のライブラリ）です。
　　これらのファイルを共通で使用しているＨＰマスコットは一方のサイトでＪＳファイルが
　　書き換えられると他方のサイトのＨＰマスコットにも動作が反映されます。
　　ＨＰマスコットの投稿機能はこれを使用しています。
　　訪問者から投稿されると内容に従ってＪａｖａｓｃｒｉｐｔを自動生成しＪＳファイルをオーバーライトします。
　　スクリプトの自動生成にはＣＧＩを使用しています。

　２．Ｓｅｎｄ　ＤａｔａとＧｅｔＳｅｎｄＤａｔａ関数
　　Ｗｅｂで一般的に使われるのはこちらだと思います。
　　リンク先ＵＲＬに？以降に文字列を追加してやるとリンク先ＵＲＬでそれらの文字列を受信することが出来ます。
　　ＨＰマスコット３はこの辺まで実装するつもりでした。ようやく出来たというところ・・（＾＾；
　　応用はまだこれからです。

　　記述例）
　　strSendString = "reader_type2.htm?http://www2s.biglobe.ne.jp/~manon/&めぐみちゃんの休日
　　この例では？以降の文字列を２つ送信しています。文字列は＆で区切ってやります。
　　受信側では文字列を取得し、加工する関数を実装します。
　　現行のＷｅｂ版めぐみちゃんは投稿元サイト名やＵＲＬなどのデータを送信しています。

　　文字列の取得と加工）
　　function getSendData(){
　　　var strgetData = unescape(location.search).substr(1,9999);//文字列の取得
　　　var mozi = "&";
　　　var strSplitData = strgetData.split(mozi);//&で区切った文字列を分割します。
　　　Hyouzyou(strSplitData[3]);
　　　getURL(strSplitData[1]);
　　　document.fromVisitor.CharactorName.value = strSplitData[2];
　　　document.fromVisitor.strSiteURL.value = strSplitData[0];
　　　document.fromVisitor.strFileName.value = strSplitData[3];
　}

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　→進む