Top > Pc > Top / 早わかり操作法 / マウス追いネコ

« haik印刷 | Top | まぐまぐフォーム »

マウスカーソル追いかけニャンコを設置したい

　Ishizuさんが公開されていたマウスカーソル追いかけニャンコ（H19年1月現在非公開）はとっても可愛いです。このホームページで、マウスを追いかけてくるネコです。
　これを設置したいと思い、いろいろやってみましたがなかなかうまくいきません。試行錯誤してやっと設置できましたので、これの設置についてメモしておきます。

なんとピクセルの単位指定が無いだけだった

　ネコがその場で動かず向きだけを変える最大の原因は、なんとピクセルの単位指定がないだけでした。
　ソースのページの144行目あたり

NX += NDX;
NY += NDY;
　if (NN4) {
　　document.layers.jsneko.moveTo(NX-16,NY-35)+"px";
　}
　if (IE4) {
　　document.all["jsneko"].style.left = NX - 16+"px";
　　document.all["jsneko"].style.top = NY - 35+"px";
　}
　if (NN6) {
　　document.getElementById("jsneko").style.left = NX - 16+"px";
　　document.getElementById("jsneko").style.top = NY - 35+"px";
　}
} // else end

の黄色マーカー部分のように「+"px"」がないことでした。

　なお、このホームページの上記の部分をそのままプログラムに貼り付けてもうまく動作しないはずです。
　原因はホームページ表示用に全角のスペースを使っているからです。もし上記をそのままコピーしたいなら、全角のスペース、つまり「　」をエディタか何かで必ず半角スペース「 」に置き換えてから使ってくださいね。
　以下のソースも全て、また基本的にこのホームページのソースは全てそのような注意が必要です。人間が見る分には、全角スペースと、半角スペース２個分とは、全く同じなのですが、機械にとっては大違いなようで。

XHTMLの文書型宣言が不動の鍵

　このスクリプトがQuick Homepage Maker（QHM）で動かなかったのは、htmlファイルの最初のところで、

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

と宣言していたことでした。
　試しにこの記述を消してしまったページを作ってみると、この文書型宣言が動かなかった原因であることが分かります。
　でも、Quick Homepage Makerはシステムとして作ってあるので、この記述を外してしまっては、他のどこに支障が出てくるか分かりません。
　たかが面白半分にネコを走らせるために、本来の内容表示に支障が出ては本末転倒なので、それでは何をどう書き換えれば良いかということで探し当てたのが上記のような結論でした。

ところがInternet Explorerはただでは終わらない

　これでやっと設置できたと喜んだのも束の間、Google ChromeやOperaなどではうまくいくのに、なんとInternet Explorerだけ、ページのスクロールに全く反応せず、ネコがあらぬところで寝てしまいます。
　はてどうしたものかですが、これもやっとネットに答えを見つけました。
　スクロールに反応しないのも、やはり上記の文書型宣言が原因で、このように宣言をしていると、Internet Explorerでは標準準拠モードになり、document.body.scrollTop（scroll系他） が無効になるそうです。
　対策としてこの場合は、document.documentElement.scrollTopを使うのだそうです。
　JavaScriptの解説本を読んでも、ネットでかなりあちこち調べても、そこまで突っ込んで書いてあるものなんて、ほとんどありません。それで本に大枚をはたき、ネットをさまよいさまよい、「それでも動かない、動かない」と、見当違いなところを右往左往しながら、どつぼに嵌ま（はま）っていくことになるのでした。
　10日間ほど、ヘロヘロになりながらここまでやっとたどり着いてみると、「様々な環境に適応するプログラムを作らなければならないソフト屋の仕事って、たいへんだなあ」とつくづく思います。
　閑話休題（かんわきゅうだい、余計な話は置いといて）プログラムの改造点を説明します。

Internet Explorer画面のスクロールを感知するために

　100行目付近

document.onmousemove=GetM;
function GetM(e) {
　if (NN4 || NN6) {
　　MX = e.pageX;
　　MY = e.pageY;
　}
　if (IE4) {
　　MX=document.body.scrollLeft+event.clientX;
　　MY=document.body.scrollTop+event.clientY;
　}
}

のマーカー部分に直接、参照ページの対策コードを埋め込んでもいいのですが、それでは挿入があまりにも長くなって、何をやっているのかわかりにくくなります。そこで、ieiti()という関数をひとつ作って、このマーカー部分に関数を埋め込むことにしました。

　if (IE4) {
　　ieiti();
　}

　追いかけネコのソースコードの最後(// -->の前)に、以下の関数を付け加えます。黄色のマーカー部分を、参考にしたページのソースから書き換えただけです。

function ieiti(){
　if( undefined !== window.ActiveXObject ){ // IE判別
　　var __base__scroll__;
　　if( document.compatMode=='CSS1Compat' ){ // モード判別
　　　　__base__scroll__ = document.documentElement;
　　　　// マウス座標イベント取得
　　　　document.onmousemove = function(e){
　　　　　　MX = __base__scroll__.scrollLeft + event.clientX;
　　　　　　MY = __base__scroll__.scrollTop + event.clientY;
　　　　};
　　}
　　else{
　　　　// マウス座標イベント取得
　　　　document.onmousemove = function(e){
　　　　　　MX = document.body.scrollLeft + event.clientX;
　　　　　　MY = document.body.scrollTop + event.clientY;
　　　　};
　　}
　}
　else{
　　// マウス座標イベント取得
　　document.onmousemove = function(e){
　　　　MX = e.pageX;
　　　　MY = e.pageY;
　　};
　}
}

　上記全てが必要なのか、それとももっと省くことができるのか、私には判断ができませんので、面倒くさいことは考えず、少々冗長でも教えてもらったソースのままにしてあります。

起動も関数に組み込んでしまおう

　追いかけマウスの説明では、「組込み頁のbodyタグの中に、onload="nekostart()"を追加して下さい」とあります。

< body onLoad="nekostart()">

　しかし、これをするには、別ファイルのpukiwiki.skin.phpを書換えないといけません。
　javascriptのソース内に書き込んでしまうと同じような動きをする関数があるようなので、この関数も追いかけマウスのソースの最後に追加して、bodyタグの記述を省略してしまいましょう。

window.onload = function() {
　nekostart();
}

せっかくだからXHTML対応の記述にしておこう

　せっかくですから、28行目のあたりをXHTML対応の記述にしておきましょう。

//Internet Explorer 4.0以上、Netscape6.0以上のとき
if (IE4 || NN6) {
　document.write('<DIV ID="jsneko" STYLE="position:absolute\;width:32\;height:32\;z-index:7\;left:0\;top:0">');
　document.write('<img src='+fld2+'mati2.gif width=32 height=32 name="nyan"></DIV>');
}
//Netscape Navigator 4.0以上のとき
if (NN4) {
　document.write('<layer name="jsneko" top=0 left=0 z-index=7>');
　document.write("<img src="+fld2+"mati2.gif width=32 height=32></layer>");
}

　このプログラムが動かない理由を最初このあたりがXHTML対応の記述になっていないからではないかと疑っていた箇所です。どこまで必要か、私の書き換えが果たして正しいのかどうか自信がありませんが、一応書き換えておきましょう。

  • 要素と属性名は小文字　　DIV→div　STYLE→style
  • 属性値は常に引用符で囲む　width=32→width="32"　など
  • 空要素の末尾は　半角スペース+/>→<img=" " />
  • name属性とid属性を併用する

//Internet Explorer 4.0以上、Netscape6.0以上のとき
if (IE4 || NN6) {
　document.write('<div id="jsneko" style="position:absolute\;width:32\;height:32\;z-index:7\;left:0\;top:0">' );
　document.write('<img src="'+fld2+'mati2.gif" width="32" height="32" name="nyan" id="nyan" /></div>' );
}
//Netscape Navigator 4.0以上のとき
if (NN4) {
　document.write('<layer name="jsneko" top=0 left=0 z-index=7>' );
　document.write('<img src="'+fld2+'mati2.gif" width="32" height="32" /></layer>' );
}

スクリプトやスタイルはCDATAセクションとする

　ここまでのところで、JavaScriptの本体部分の改造は終わりました。
　これをどこに置くかです。

<script type="text/javascript">
<!--
　　JavaScriptのコード
&color(,yellow){//-->''
</script>

　上のマーカーの内側、省略したJavaScriptのコード部分だけを別ファイル（○○.js）としてサーバーにアップロードし、Quick Homepage Makerの「設定>サイト情報の設定>その他のタグ」に、ここで作成した外部スクリプトを呼び出す記述をするのが一つの手です。
　その方が、ページのソースコードが汚くならないため、SEOの観点からも望ましいように思います。
　しかし、そのためには外部ファイルを別にFFFTPなどでサーバーにアップロードしなければならないので、それがいやなら、Quick Homepage Makerの「設定>サイト情報の設定>その他のタグ」に、JavaScriptのコード全部を記述してしまいます。
　そのためには、もう一箇所書き直しておかないといけません。
　XHTMLに対応させて。上のマーカー部分を下の様に変えましょう。

<script type="text/javascript">
//<![CDATA[
　　JavaScriptのコード
//]]>
</script>

外部ファイルを呼び出す方法

<script type="text/javascript" src="https://*****/NEKO_TORA.js"></script>

　Quick Homepage Makerの「設定>サイト情報の設定>その他のタグ」にこのような記述をして、外部スクリプトを呼び出します。

バージョンによってはまだ動かない

　一応設置方法が分かったので、さらに他のページにも色々やってみたところ、上記のようにソース全体を「設定>サイト情報の設定>その他のタグ」に貼り付けるやりかたでは、Quick Homepage Makerの新しいバージョン4.85では動くものの、古いバージョン4.05では動きませんでした。

　この場合は唯一、JavaScriptを外部ファイル化して、起動命令の記述を、「設定>サイト情報の設定>その他のタグ」に貼り付けた場合だけはうまく動いているようです。
　古いバージョンで動かない原因を探っても意味がないので、これ以上の探求はしないこととします。

理屈抜きで設置するだけなら、簡単

　一番簡単なのは、このホームページのページソースを表示し、その最初の方からさらに、NEKO_TORA.js のJavaScriptを表示させて、それをダウンロードしてしまうことです。
　ブラウザで表示の際には、文字コードがUTF-8でないと、2バイト文字が文字化けしてしまいますが、ダウンロードしたものは正常に表示されます。
　ただし、そのままでは私のサーバーの画像データを読みに行ってしまうので、画像を自分のサーバー内に用意して、それを表示するように設定の変更を必ずお願いします。
　読み込みファイルの変更は、8行目「fld2 = 」の値を変更します。
　このファイルは、圧縮をかけているので、圧縮されたJavascriptやcssを元に戻してくれるPretty Diff などのWebサービスを使って、圧縮をもとに戻すと、プログラム内容がよくわかります。

画像をサーバーにアップロード

　画像をコピーする位置は、間違えないようにしましょう。
　Quick Homepage Makerを設置したファルダに、画像が入っているフォルダごとコピーします。例えば

　Quick Homepage Makerのフォルダ/NEKO_YELLOW

で、「NEKO_TORA」配下にネコの画像が入ります。

選択したネコ（動物）によってソースが変わるところは、

9行目　　c2=' **(NEKO_TORA)**';

17行目　fld=c2.indexOf("NEKO");

27行目　fld2=c2.substring(fld,fld+9)+"/";

　選択したネコ（動物）によってソースが変わるところは、上記だけだと思います。
　9行目によって、サーバー内にネコの画像を収納するフォルダ名を設定しています。
　フォルダの名前の長さによって、27行目の数字が変わっているのです。
　17行目のようになっている場合、フォルダ名は必ずNEKO（半角大文字）で始まる名前にしましょう。全く別のフォルダ名にするなら、ここのとこをフォルダ名の始まりの数文字にします
　名前を気にしないなら、私が使っているスクリプトはNEKO_TORAですから、この名前のフォルダをサーバーに作り、画像ファイルをそこにすべてコピーすれば、ファイル名は一緒にしてあるようなので、ほかの動物を選んでも大丈夫です。
　スクリプトを変更する必要もありません。

画像設置場所を指定する

　このスクリプトの本来の仕様でも、Quick Homepage Makerで使う分には、それほど不便ではないかもしれません。Quick Homepage Makerはファイルをすべて設置したフォルダに吐き出すからです。
　でも、他ソフトなどで、ルート以外にも、フォルダごとにファイルを設置するようなホームページを作ろうとした場合などは、同じ画像ファイルを、フォルダごとにすべてコピーしていかなければならないので、わずらわしいことこの上ありません。
　やっぱりこのような場合は、画像を設置する場所を任意に書き換えられるほうが望ましいです。
　そのためには、27行目に指定したいフォルダを直接指定します。

27行目 fld2="./NEKO_TORA/"

　この場合、フォルダ名はなんでもかまいません。絶対参照でも、jsファイルからの相対参照でも大丈夫です。
　9行目、17行目の記述は無意味になりますが、下のほうで著作権表示改変のチェックをしているので、削除してしまうとエラーになります。
　書き換えた箇所は、重要な初期設定項目ですから、27行目に書くよりも、27行目はコメントアウトして、初期設定のところにまとめて書くようにするほうが、分かりやすいでしょう。

//****初期設定*************************************************
nkspd = 250; //ねこの速さ：小さいほど速いが、５０以上が望ましい。
fld2="https://www.neko01.com/pc/haik/NEKO_YELLOW/";
　// 画像設置フォルダの場所
　// 場所を指定したので27行コメントアウト　17行は消さない
//***********************************************************
fld=c2.indexOf("NEKO");


　// fld2=c2.substring(fld,fld+9)+"/";

編集するのには微妙なところで結構邪魔かも

　今こうやって長い文章を一生懸命書いている時には、微妙なところで、このネコ、結構邪魔になります。半角の文字をマーカーで範囲指定する時などに。
　表示させて、普通に読む分には、結構和ませてくれるのですが。

　でも、どこまでもゆっくり追いかけてきてくれるこのニャンコ、かわゆいねえ。

スクリプトがきちんと設置されていれば、画像はなくても四角が動く

　なお参考までに、スクリプトがきちんと設置されていれば、画像はなくても、空白の四角がマウスを追いかけて動いてきます。
　ネコは表示されているのに、画像が変わらないとか、その場で向きだけを変えるとかいうことであれば、画像の設置は良好で、スクリプトのどこかにまだ問題があるということです。
　

HEAD に複数のJavaScriptがインクルードされている場合

　<HEAD>に、マウス追いかけネコ以外のJavaScriptがインクルードされている場合、プログラムの始動がうまくいかないことがあります。
　window.onloadが別のプログラムにも設定してあった場合、上書きされてしまうため、後からインクルードした内容しか実行されないからのようです。
　または、<body>タグに別のonLoadファイルが指定してあるかもしれません。
　この場合は、マウス追いかけネコの設置説明どおり、

<body onLoad="*********;nekostart()">

　pukiwiki.skin.phpの< body>タグを書換えます。既に*********という関数が指定してある場合は、上記のように「;」で区切って続けます。
　pukiwiki.skin.phpの編集については、PHP編集をご覧ください。

スクリプト貼り付けで動かなくなったら

　「設定>サイト情報の設定>その他のタグ」に直接スクリプトをはりつけると、head部分にスクリプトを貼り付けることになるので、不完全なスクリプトを貼り付けた場合、もしかしたら、ホームページがうまく表示できなくなってしまう場合があるかもしれません。
　かく言う私が、テスト用にコメント出力するようにスクリプトに細工をしたところ、ホームページの画面がまったくでなくなり、編集できなくなって困ったことがありました。
　「Quick Homepage Makerの設定ファイルだけ編集できれば、スクリプト部分を消して、元に戻すことができるのに」と思って調べてみると、qhm.ini.phpというファイルがそれにあたるようです。
　Ver4.7以前は、pukiwiki.ini.phpだったようです。
　これで、誤起動の元となるスクリプトを削除してしまえば元に戻るはずです。変数の指定がどこまでかよく確認してから削除しましょう。
　普段は設定などすべてQuick Homepage Makerからできるようになっていますが、いざという場合にはこういう荒療治も知っていると役に立ちます。

WordPressで使う

　上で作ったJavaScriptの外部ファイルは、WordPressなど他のCMSでも簡単に使えます。
　使い方についてはWordPressのページの方で紹介しました。

画像入手先

　以前は「ロゴ＆バナー無料自動作成：AUTO LOGO（オートロゴ）」で、スクリプト以外にも、このスクリプト用にたくさんの画像を配布してくれていましたが、現在無くなってしまったので、画像を現在公開しているのは、「マウスストーカー４■画像■　追いかけニャンコ」の「トラねこ」（このページでも表示しているネコ）だけになっています。

参考文献

『ウィキペディア（Wikipedia） Neko (ソフトウェア)』
『oneko-2.0 の 版権について』

« haik印刷 | Top | まぐまぐフォーム »