JavaScriptサンプル

ソースコードの最後

2008-12-06T20:11:00.000+09:00

ソースコードの最後でload()をコールします。


cc_huu_tools_bp_20081024.load();

これで、初期化処理やブログパーツのhtml出力が行われます。

以上で「大好きマウスくん」のソースコード解説を終わります。
ありがとうございます。

言語コードを調整する関数

2008-12-05T17:10:00.000+09:00

つづいて、取得した言語コードを調整する関数です。
言語コードはたくさんありますが「大好きマウスくん」で対応しているのは、日本語、英語、中国語のみです。また、配布サイトは日本語と英語のみです。
そのため、他の言語コードを対応している言語コードに割り振る必要があります。
その割り振りを行う関数です。


cc_huu_tools_bp_20081024.adjustLang = function(orgLang, kind) {
　　var returnLang = 'en';

　　switch (kind) {
　　case 'widget':
　　　　switch (orgLang) {
　　　　　　case 'ja':
　　　　　　case 'zh':
　　　　　　　　returnLang = orgLang;
　　　　　　　　break;
　　　　}
　　　　break;
　　case 'site':
　　default:
　　　　switch (orgLang) {
　　　　　　case 'ja':
　　　　　　　　returnLang = orgLang;
　　　　　　　　break;
　　　　}
　　　　break;
　　}
　　return returnLang;
};

関数は以上です。

言語コード一覧

2008-12-04T16:08:00.000+09:00


af　　Afrikaans
sq　　Albanian
ar-sa　　Arabic(Saudi Arabia)
ar-iq　　Arabic(Iraq)
ar-eg　　Arabic(Egypt)
ar-ly　　Arabic(Libya)
ar-dz　　Arabic(Algeria)
ar-ma　　Arabic(Morocco)
ar-tn　　Arabic(Tunisia)
ar-om　　Arabic(Oman)
ar-ye　　Arabic(Yemen)
ar-sy　　Arabic(Syria)
ar-jo　　Arabic(Jordan)
ar-lb　　Arabic(Lebanon)
ar-kw　　Arabic(Kuwait)
ar-ae　　Arabic(U.A.E.)
ar-bh　　Arabic(Bahrain)
ar-qa　　Arabic(Qatar)
eu　　Basque
bg　　Bulgarian
be　　Belarusian
ca　　Catalan
zh-tw　　Chinese(Taiwan)
zh-cn　　Chinese(PRC)
zh-hk　　Chinese(Hong Kong)
zh-sg　　Chinese(Singapore)
hr　　Croatian
cs　　Czech
da　　Danish
nl　　Dutch(Standard)
nl-be　　Dutch(Belgian)
en　　English
en-us　　English(United States)
en-gb　　English(British)
en-au　　English(Australian)
en-ca　　English(Canadian)
en-nz　　English(New Zealand)
en-ie　　English(Ireland)
en-za　　English(South Africa)
en-jm　　English(Jamaica)
en　　English(Caribbean)
en-bz　　English(Belize)
en-tt　　English(Trinidad)
et　　Estonian
fo　　Faeroese
fa　　Farsi
fi　　Finnish
fr　　French(Standard)
fr-be　　French(Belgian)
fr-ca　　French(Canadian)
fr-ch　　French(Swiss)
fr-lu　　French(Luxembourg)
gd　　Gaelic(Scots)
gd-ie　　Gaelic(Irish)
de　　German(Standard)
de-ch　　German(Swiss)
de-at　　German(Austrian)
de-lu　　German(Luxembourg)
de-li　　German(Liechtenstein)
el　　Greek
he　　Hebrew
hi　　Hindi
hu　　Hungarian
is　　Icelandic
in　　Indonesian
it　　Italian(Standard)
it-ch　　Italian(Swiss)
ja　　Japanese
ko　　Korean
ko　　Korean(Johab)
lv　　Latvian
lt　　Lithuanian
mk　　Macedonian
ms　　Malaysian
mt　　Maltese
no　　Norwegian(Bokmal)
no　　Norwegian(Nynorsk)
pl　　Polish
pt-br　　Portuguese(Brazilian)
pt　　Portuguese(Standard)
rm　　Rhaeto-Romanic
ro　　Romanian
ro-mo　　Romanian(Moldavia)
ru　　Russian
ru-mo　　Russian(Moldavia)
sz　　Sami(Lappish)
sr　　Serbian(Cyrillic)
sr　　Serbian(Latin)
sk　　Slovak
sl　　Slovenian
sb　　Sorbian
es　　Spanish(Spain - Traditional Sort)
es-mx　　Spanish(Mexican)
es　　Spanish(Spain - Modern Sort)
es-gt　　Spanish(Guatemala)
es-cr　　Spanish(Costa Rica)
es-pa　　Spanish(Panama)
es-do　　Spanish(Dominican Republic)
es-ve　　Spanish(Venezuela)
es-co　　Spanish(Colombia)
es-pe　　Spanish(Peru)
es-ar　　Spanish(Argentina)
es-ec　　Spanish(Ecuador)
es-cl　　Spanish(Chile)
es-uy　　Spanish(Uruguay)
es-py　　Spanish(Paraguay)
es-bo　　Spanish(Bolivia)
es-sv　　Spanish(El Salvador)
es-hn　　Spanish(Honduras)
es-ni　　Spanish(Nicaragua)
es-pr　　Spanish(Puerto Rico)
sx　　Sutu
sv　　Swedish
sv-fi　　Swedish(Finland)
th　　Thai
ts　　Tsonga
tn　　Tswana
tr　　Turkish
uk　　Ukrainian
ur　　Urdu
ve　　Venda
vi　　Vietnamese
xh　　Xhosa
ji　　Yiddish
zu　　Zulu

ユーザが使用している言語を取得する関数

2008-12-03T19:06:00.002+09:00

つづいて、ユーザが使用している言語を取得する関数です。
ユーザが使用している言語は、ブラウザやOSの設定によって、変えられます。
それを取得して、説明画像を変えたり、Powered byのリンク先を変えたりしています。


cc_huu_tools_bp_20081024.browserLang = function(defaultLang) {

　　if (navigator.userLanguage) {
　　　　return navigator.userLanguage.substr(0,2);
　　} else if (navigator.browserLanguage) {
　　　　return navigator.browserLanguage.substr(0,2);
　　} else if (navigator.language) {
　　　　return navigator.language.substr(0,2);
　　} else {
　　　　return defaultLang;
　　}
};

ブラウザによって、取得方法が違うので、プロパティの有無を判別しつつ、ユーザの言語を取得します。
substr(0,2)で最初の2文字のみ利用します。

2点間の距離を計算する関数

2008-12-02T18:04:00.000+09:00

つづいて、2点間の距離を計算する関数です。


cc_huu_tools_bp_20081024.calcDistance = function(x1,y1,x2,y2) {
　　var a, b, d;

　　a = x1 - x2;
　　b = y1 - y2;
　　d = Math.sqrt(Math.pow(a,2) + Math.pow(b,2));

　　return d;
};

ピタゴラスの定理を利用して、距離を求めます。
ピタゴラスの定理は「直角三角形の直角を挟む2辺の2乗の和は斜辺の2乗に等しい」です。
なので、x座標の差の2乗とy座標の差の2乗を足した値のルートをとって、返します。

エレメントのx,y位置を取得する関数

2008-12-01T18:04:00.000+09:00

つづいて、エレメントのx,y位置を取得する関数です。


cc_huu_tools_bp_20081024.getX = function(e) {
　　var x = 0;
　　while(e) {
　　　　x += e.offsetLeft;
　　　　e = e.offsetParent;
　　}
　　return x;
};

cc_huu_tools_bp_20081024.getY = function(e) {
　　var y = 0;
　　while(e) {
　　　　y += e.offsetTop;
　　　　e = e.offsetParent;
　　}
　　return y;
};

順に親ノードをたどり、x,y位置を足し込んでいって、エレメントのx,y位置を計算します。

スクロール量取得関数

2008-11-30T18:02:00.000+09:00

以降は、共通関数群です。
まず、水平スクロール量を取得する関数です。
マウスカーソル位置を取得する際に使っています。


cc_huu_tools_bp_20081024.getHorizontalScroll = function() {
　　if (window.innerWidth) {
　　　　// All browsers but IE
　　　　return window.pageXOffset;
　　} else if (document.documentElement && document.documentElement.clientWidth) {
　　    // IE6 when there is a DOCTYPE
　　　　return document.documentElement.scrollLeft;
　　} else if (document.body.clientWidth) {
　　    // IE4, IE5, and IE6 without a DOCTYPE
　　　　return document.body.scrollLeft;
　　}
};

ブラウザやブラウザのバージョンによって、取得方法が違いますので、プロパティの有無で判断し、それぞれ適切なものを返します。

次は、垂直スクロール量を取得する関数です。


cc_huu_tools_bp_20081024.getVerticalScroll = function() {
　　if (window.innerWidth) {
　　　　// All browsers but IE
　　　　return window.pageYOffset;
　　} else if (document.documentElement && document.documentElement.clientWidth) {
　　    // IE6 when there is a DOCTYPE
　　　　return document.documentElement.scrollTop;
　　} else if (document.body.clientWidth) {
　　    // IE4, IE5, and IE6 without a DOCTYPE
　　　　return document.body.scrollTop;
　　}
};

こちらも、ブラウザやブラウザのバージョンによって、取得方法が違いますので、プロパティの有無で判断し、それぞれ適切なものを返します。

500ms割込処理

2008-11-29T18:00:00.000+09:00

つづいて、500ms割込処理です。
キャラクター画像は、マウスカーソルに向かって動いたり、止まったりします。
その制御を行います。


cc_huu_tools_bp_20081024.interrupt500ms = function() {

interrupt500msプロパティに500msの割込処理を行う関数リテラルを設定します。


　　var obj = cc_huu_tools_bp_20081024;

オブジェクト名が長いので、obj変数に入れて使用します。


　　if (obj.buttonEnableCnt > 0) {
　　　　obj.buttonEnableCnt--;
　　　　if (obj.buttonEnableCnt == 0) {
　　　　　　document.getElementById('clickButtonId').disabled = false;
　　　　}
　　}

この処理はStartボタンをエネーブルにするタイミングを計るための処理です。
キャラクター画像は、Startボタンクリック時にbodyの子ノードに変更されます。
ページがロード中にbodyの内容を変更すると、IEにおいて、エラーが発生するようです。
そのため、Startボタンがクリック可能になるのは、割込処理が動作し始めたあと、3秒たってからにしています。


　　if (!obj.buttonOnOffFlag) {
　　　　return;
　　}

Startボタンが押されていない状態では何もしません。


　　if (Math.random() < obj.move.probability) {
　　　　obj.command = 'move';
　　} else {
　　　　obj.command = 'stop';
　　}
};

一定の確率でobj.commandをmoveにしたりstopにしたりします。
50ms割込処理で、この情報を参照し、キャラクター画像を進めたり、止めたりしています。

以上が500ms割込処理です。

50ms割込処理

2008-11-28T16:58:00.000+09:00

つづいて50ms割込処理です。
ここでは、おもにキャラクターの画像を動かす処理を行います。


cc_huu_tools_bp_20081024.interrupt50ms = function() {

interrupt50msプロパティに50msの割込処理を行う関数リテラルを設定します。


　　var obj = cc_huu_tools_bp_20081024;

オブジェクト名が長いので、obj変数に入れて使用します。


　　if (!obj.buttonOnOffFlag) {
　　　　return;
　　}

Startボタンが押されていない状態では何もしません。


　　if (obj.command != 'move') {
　　　　return;
　　}

キャラクターを動かすモードでなければ、何もしません。
obj.commandは500msの割込処理で更新されます。


　　var x, y;

キャラクター画像の位置。


　　var tempX, tempY;

マウスカーソルとキャラクター画像の位置の差。


　　var angle;

キャラクター画像を動かす角度。


　　x = parseInt(obj.imageImg.style.left.replace('px',''));
　　y = parseInt(obj.imageImg.style.top.replace('px',''));

キャラクター画像のスタイルから現在位置を取得します。


　　tempX = obj.mousePosition.x;
　　tempY = obj.mousePosition.y;

マウスカーソルの位置を取得します。


　　tempX -= x + obj.imageSize.width / 2;
　　tempY -= y + obj.imageSize.height / 2;

マウスカーソルとキャラクター画像の中心との距離を計算します。


　　if (obj.calcDistance(0,0,tempX,tempY) < 4) {

距離が4ピクセル未満なら


　　　　obj.imageImg.style.left = obj.mousePosition.x - obj.imageSize.width / 2 + 'px';
　　　　obj.imageImg.style.top = obj.mousePosition.y - obj.imageSize.height / 2 + 'px';
　　　　return;
　　}

カーソルの位置にキャラクター画像の中心を合わせてリターンします。

距離が4ピクセル以上なら、以降の処理を行います。


　　angle = Math.atan2(tempX,tempY);
　　if (angle < 0) {
　　　　angle = Math.PI + (Math.PI + angle);
　　}

角度を計算します。
X,Y座標の角度を得るためには、Math.atan2メソッドを使用します。
そして、angleが負の場合は調整しています。
この4行は、多分間違えて書いてしまっています。正しくは、


　　angle = Math.atan2(tempY,tempX);

の1行でよいと思います。


　　x += obj.move.step * Math.sin(angle);
　　y += obj.move.step * Math.cos(angle);

角度と1回で進む最大ピクセルからx,y方向の進む量を計算し、現在の位置に足し込みます。


　　x = parseInt(x + 0.5);
　　y = parseInt(y + 0.5);

四捨五入します。


　　obj.imageImg.style.left = x + 'px';
　　obj.imageImg.style.top = y + 'px';
};

キャラクター画像のstyleにセットし、移動させます。

以上が50ms割込処理です。

Start/Stopボタンクリック時処理

2008-11-27T17:56:00.000+09:00

つづいて、Start/Stopボタンクリック時の処理です。


cc_huu_tools_bp_20081024.buttonClick = function() {

buttonClickプロパティにマウスムーブ時の処理を行う関数リテラルを設定します。


　　var obj = cc_huu_tools_bp_20081024;

オブジェクト名が長いので、obj変数に入れて使用します。


　　if (!obj.buttonOnOffFlag) {

このフラグは、キャラクター画像が動いている時にonになっていますので、ここは、Startボタンが押された時の処理です。


　　　　var x, y;

キャラクター画像の位置。


　　　　if (!obj.imageImg) {

キャラクター画像のエレメントが保存されているか。すなわち、最初にStartボタンが押された時の処理になります。


　　　　　　obj.imageImg = document.getElementById('imageImgId');
　　　　　　obj.explanationImg = document.getElementById('explanationImgId');
　　　　}

最初にStartボタンが押された時に、キャラクター画像と説明画像ののエレメントを保存します。


　　　　x = obj.getX(obj.imageImg);
　　　　y = obj.getY(obj.imageImg);

キャラクター画像のエレメントの位置を取得します。


　　　　if (!obj.parentNode) {
　　　　　　obj.parentNode = obj.imageImg.parentNode;
　　　　}

キャラクター画像の親ノードを保存します。キャラクター画像のエレメントは、動いている時はbodyの子ノードになり、止まっている時は、この親ノードの子ノードに戻します。そのため、ここで親ノードを保存しておきます。


　　　　document.getElementsByTagName('body')[0].appendChild(obj.imageImg);

キャラクター画像のエレメントをbodyの子ノードにします。

ここで問題があります。

キャラクター画像のエレメントをbodyの子ノードにしていますので、Startボタンクリック時にbodyの内容を変更することになります。ドキュメントのロードが完了していない場合、IEにおいて、bodyの内容を変更するとエラーが発生するようです。

そのため、Startボタンがクリック可能になるのは、割込処理が動作し始めたあと、3秒たってからにしています。これは、500ms割込処理で制御しています。

オライリーのJavaScript第5版には、割込処理はドキュメントの変更が可能になってからコールされるとの記述がありますが、IEに関しては駄目のようです。

現在のロジックでも、ドキュメントのロードの遅いページで、すばやくStartボタンをクリックすると、IEにおいてエラーが発生してしまいます。

どなたか、よい解決方法をご存知の方、ご教授いただけないでしょうか？

bodyの子ノードにしないという方法も試してみましたが、上位のノードでoverflow属性がhidden等に設定されていると、表示されなくなるという、別の問題が発生してしまいました。

悩ましいところです。


　　　　obj.imageImg.style.position = "absolute";

キャラクター画像のpositionを絶対位置指定にします。


　　　　obj.imageImg.style.left = x + 'px';
　　　　obj.imageImg.style.top = y + 'px';

先ほど、求めたキャラクター画像のx,yをセットします。


　　　　obj.buttonOnOffFlag = true;

buttonOnOffFlagをonにします。


　　　　obj.explanationImg.src = 
　　　　　　obj.explanationImageFileName2 + obj.lang.widget + obj.explanationImageFileExtension;

説明画像を動作中のものにします。言語コードによって画像が違うのでobj.lang.widgetを利用します。


　　　　document.getElementById('clickButtonId').innerHTML = obj.buttonName.stop;

ボタンの文字をStopに代えます。


　　} else {

ここからは、動作中にボタンが押された場合、すなわち、Stopボタンクリック時の処理です。


　　　　obj.imageImg.style.position = "relative";

positionを相対位置に戻します。


　　　　obj.imageImg.style.left = '';
　　　　obj.imageImg.style.top = '';

位置をクリアします。


　　　　obj.parentNode.insertBefore(
　　　　　　obj.imageImg, obj.explanationImg);

キャラクター画像のエレメントを説明画像の前に挿入します。


　　　　obj.buttonOnOffFlag = false;

buttonOnOffFlagをoffにします。


　　　　obj.explanationImg.src = 
　　　　　　obj.explanationImageFileName1 + obj.lang.widget + obj.explanationImageFileExtension;

説明画像を動作していない時のものにします。


　　　　document.getElementById('clickButtonId').innerHTML = obj.buttonName.start;
　　}
};

ボタンの文字をStartにします。
以上が、ボタンがクリックされた時の処理です。

マウスムーブイベントハンドラ

2008-11-26T18:46:00.000+09:00

つづいて、マウスムーブイベントハンドラ関数です。ロード時処理で登録したので、マウスが動くとこの関数がコールされます。


cc_huu_tools_bp_20081024.processMouseMove = function(e) {

processMouseMoveプロパティにマウスムーブ時の処理を行う関数リテラルを設定します。引数eにはEventオブジェクトが渡されますので、マウスカーソルの位置を特定できます。


　　var obj = cc_huu_tools_bp_20081024;

オブジェクト名が長いので、obj変数に入れて使用します。


　　if (!e) {
　　　　e = window.event;
　　}

IEの場合、他とイベントモデルが異なるため、Eventオブジェクトが渡されない場合もあります。その場合は、グローバルのEventoオブジェクトを参照します。attachEventで登録されたイベントハンドラにはEventオブジェクトが渡されますので、今回の場合、この処理はなくても大丈夫のはずです(未確認)。


　　obj.mousePosition.x = 
　　　　e.clientX + obj.getHorizontalScroll();
　　obj.mousePosition.y = 
　　　　e.clientY + obj.getVerticalScroll();
};

マウスカーソルの位置を保存します。EventオブジェクトのclientX,clientYは、ドキュメントのスクロール分が反映されてませんので、obj.getHorizontalScroll()とobj.getVerticalScroll()でスクロール分を計算し、反映させます。

以上が、マウスムーブイベントハンドラです。

ロード時の処理を行う関数

2008-11-25T22:32:00.010+09:00

つづいて、ロード時の処理を行う関数です。


cc_huu_tools_bp_20081024.load = function() {

loadプロパティにロード時の処理を行う関数リテラルを設定します。


　　var obj = cc_huu_tools_bp_20081024;

オブジェクト名が長いので、obj変数に入れて使用します。


　　var i;

カウンタです。


　　var imageUrl;

ユーザが指定したキャラクター画像のURLを格納します。


　　var language;

未使用。削除し忘れたようです。


　　obj.lang.widget = obj.adjustLang(obj.browserLang(obj.lang.widget), 'widget');

説明画像用の言語を取得。


　　obj.lang.site = obj.adjustLang(obj.browserLang(obj.lang.site), 'site');

Powered byリンク用の言語を取得。


　　for (i=0;i<document.getElementsByTagName("script").length;i++) {

ユーザが指定したキャラクター画像のURLを取得するために、ドキュメントのscriptタグ数分ループします。


　　　　if (document.getElementsByTagName("script")[i].src.indexOf(obj.url) >= 0) {

scriptタグが自分かどうか判定します。判定方法は自分のURLが含まれているかどうかです。


　　　　　　imageUrl = 
　　　　　　　　document.getElementsByTagName("script")[i].src.match(/\?image=(\S{0,200})/)[1];

scriptタグが自分のものなら、ユーザが指定したキャラクター画像のURLを取得します。matchメソッドで?image=以降の文字列を取得します。文字は最大200文字。matchメソッドが返す配列の0番目ではなく、1番目に?image=以降の文字列が格納されています。


　　　　　　if (imageUrl) {
　　　　　　　　obj.imageFileName = imageUrl;
　　　　　　}
　　　　}
　　}

ユーザ指定のキャラクター画像URLがありなら、初期値と差し替えます。


　　document.write('<ｉｍｇ src="' + obj.imageFileName + '" id="imageImgId" ');
　　document.write(' height="' + obj.imageSize.height + '" ');
　　document.write(' width="' + obj.imageSize.width + '" >');

キャラクター画像のhtmlを出力。


　　document.write('<ｉｍｇ src="' + obj.explanationImageFileName1 + 
　　　　obj.lang.widget + obj.explanationImageFileExtension + '" id="explanationImgId" ');
　　document.write(' height="' + obj.explanationSize.height + '" ');
　　document.write(' width="' + obj.explanationSize.width + '" >');
　　document.write('
');

説明画像のhtmlを出力。


　　switch (obj.lang.site) {
　　case 'ja':
　　　　document.write('<ａ href="' + obj.poweredBy + '" id="poweredByLinkId" target="_blank" >');
　　　　break;
　　default:
　　　　document.write('<ａ href="' + obj.poweredBy + obj.lang.site + '/" id="poweredByLinkId" target="_blank" >');
　　　　break;
　　}
　　document.write('Powered by Hida ');

Powered byのリンクのhtmlを出力。リンク先は配布ページ。言語コードでディレクトリを分けるようにしているが、日本語だけ特別なので、switch文を使用している。でもまだ、英語ページと日本語ページしかない。


　　document.write('<ｂｕｔｔｏｎ type="button" id="clickButtonId" disabled ');
　　document.write(' onclick="cc_huu_tools_bp_20081024.buttonClick()" >');
　　document.write(obj.buttonName.start + '');

ボタンのhtmlを出力。


　　document.getElementById('poweredByLinkId').style.fontSize = 'small';

Powered byリンクの文字をsmallに。


　　if (document.addEventListener) {
　　　　document.addEventListener('mousemove', obj.processMouseMove, false);
　　} else if (document.attachEvent) {
　　　　document.attachEvent('onmousemove', obj.processMouseMove);
　　}

マウスムーブイベントを受け取るために、イベントハンドラを登録。IEと他のブラウザではメソッドが異なるため、if文で分けています。attachEventがIE用です。


　　setInterval(obj.interrupt50ms,50);
　　setInterval(obj.interrupt500ms,500);
};

50ms割込処理と500ms割込処理を登録します。
これで、ロード時処理関数は終了です。

オブジェクトの作成とプロパティの初期化

2008-11-24T15:16:00.001+09:00

つづいて、ブログパーツ本体側のmouse.jsです。


var cc_huu_tools_bp_20081024 = {};

まず、全体を格納するオブジェクトを作成します。
変数名が長くなっているのは、他とかぶらないようにするためです。
平凡な名前をつけてしまうと、ブログ側のJavaScriptとかぶってしまう可能性があり、そうなった場合、都合が悪いためです。

また、全ての変数はこのオブジェクトのプロパティとします。これも他のスクリプトとかぶらないようにするためです。

以降、プロパティの初期化が続きます。


cc_huu_tools_bp_20081024.version = '1.2.0';

バージョン番号プロパティの作成です。


cc_huu_tools_bp_20081024.poweredBy = 'http://tools.huu.cc/mouse/';


cc_huu_tools_bp_20081024.url = 'http://tools.huu.cc/mouse/mouse.js?image=';

ブログパーツJavaScriptのURL。


cc_huu_tools_bp_20081024.imageFileName = 'http://tools.huu.cc/mouse/mouse.gif';

キャラクター画像のURL。


cc_huu_tools_bp_20081024.explanationImageFileName1 = 
 'http://tools.huu.cc/mouse/explanation1_';

動作前の説明画像のURLの拡張子を除いた部分。画像は、ユーザの国によって異なります。URLの拡張子の前には言語コードが入ります。


cc_huu_tools_bp_20081024.explanationImageFileName2 = 
 'http://tools.huu.cc/mouse/explanation2_';

動作中の説明画像のURLの拡張子を除いた部分。


cc_huu_tools_bp_20081024.explanationImageFileExtension = '.gif'

説明画像の拡張子。


cc_huu_tools_bp_20081024.mousePosition = {x: 0, y: 0};

マウスカーソルの位置を格納します。


cc_huu_tools_bp_20081024.imageImg;

キャラクターの画像のエレメントを格納します。


cc_huu_tools_bp_20081024.imageSize = {height: 64, width: 64};

キャラクター画像の大きさです。


cc_huu_tools_bp_20081024.explanationImg;

説明画像のエレメントを格納します。


cc_huu_tools_bp_20081024.explanationSize = {height: 64, width: 156};

説明画像の大きさです。


cc_huu_tools_bp_20081024.parentNode;

キャラクター画像の親ノードのエレメントを格納します。


cc_huu_tools_bp_20081024.buttonOnOffFlag = false;

ボタンがスタートなのかストップなのかを表します。
Startと表示されている時は、false。Stop時はtrueです。


cc_huu_tools_bp_20081024.buttonEnableCnt = 7;

ボタンがエネーブルになるまでのカウント数です。
500ms割込処理でカウントダウンされます。


cc_huu_tools_bp_20081024.buttonName = {start: 'Start', stop: 'Stop'};

ボタンの表示用名称です。


cc_huu_tools_bp_20081024.command = 'stop';

キャタクターを動かしたり、止めたりするのに使う、状態です。


cc_huu_tools_bp_20081024.move = {step: 4, probability:0.5};

stepは、キャラクターが1回で移動する最大ピクセル数。
probabilityは、キャラクターが移動する確率。


cc_huu_tools_bp_20081024.lang = {widget:'en', site: 'en'};

ユーザの言語コードを格納します。初期値は英語。
説明画像は、日本語、英語、中国語対応。Powered byのリンク先は日本語と英語。2種類ありますので、widgetとsiteと2つ持ちます。

ブログに設置する側のコード

2008-11-23T14:59:00.005+09:00

では、ソースコードを1行ずつ解説します。

まず、ブログに設置する側のコードです。
(表示の都合上、全角です)

<ｓｃｒｉｐｔ　ｔｙｐｅ="ｔｅｘｔ/ｊａｖａｓｃｒｉｐｔ"　ｓｒｃ="ｈｔｔｐ://ｔｏｏｌｓ.ｈｕｕ.ｃｃ/ｍｏｕｓｅ/ｍｏｕｓｅ.ｊｓ？ｉｍａｇｅ=">

JavaScriptでかかれていますのでtypeは"text/javascript"です。srcでJavaScriptのURLを指定します。
キャラクターの画像は差し替え可能ですので、?image=で画像のURLを受け取れるようにします。(差し替え時は?image=の後に画像のURLが入ります)

ソースコードと全体の構成

2008-11-22T15:01:00.006+09:00

大好きマウスくんとは、「大好きマウスくん」というキャラクターが、マウスカーソルを追いかけるというブログパーツです。
キャラクターの画像は差し替え可能です。

このブログのサイドバーの左上に設置しています。

詳しくはこちら→大好きマウスくん配布ページ
ソースコードはこちら→大好きマウスくんソースコード

このソースコードを順に説明していきます。

全体の構成はこうなっています。

・ブログパーツロード時処理…ブログパーツを表示させるためのhtml文を作成したり、割込処理の登録等、初期化処理を行います。
・マウスムーブ時処理…マウスカーソルが動いた時の処理を行います。
・ボタンクリック時処理…スタート/ストップボタン押下時の処理を行います。
・50ms割込処理…キャラクターの移動処理を行います。
・500ms割込処理…キャラクターの移動を許可したり、止めたりします。