rclick.js作成

rclick.js作成。

ウェブ閲覧上でマウスの右クリックするとブラウザによって
決められたメニューが開くことになっている。このメニューを
JavaScriptで作ることを考える。
せっかくだからライブラリ化する。即ち、どんなサイトでも使える
汎用性の高いjsファイルを作成する。
使い方の思念
適当なhtmlページから、今回作成するrclick.jsを関連付けさせる。
htmlからrclick.jsにて定義したopen関数を呼ぶ。この時引数として
ファイル名を文字列で取る。例えば"test.ini"とする。
別にtest.iniファイルを用意してメニューに関する粗方の情報を書
いておく。こうすれば複数のhtmlから同じメニューを簡単に作れる
かなーなんて。
メニューの情報を書く設定ファイルは次のようなテキストファイル
としよう。
menu{
	Googleを開く,window.open("_blank","http://www.google.co.jp/");
	前のページに戻る,history.back(-1)
}

info{
	color="black"
	s_color="black"
	bgcolor="#eeeeee"
	s_bgcolor="#cccccc"
}
menuブロック
menu{

}
にメニューの項目を上から書く。
「項目名,クリック時に実行するjavascriptステートメント」
を改行で区切って並べる。
infoブロックにはメニューの色等の設定を書く。

どう組むか
ライブラリ、は既に出来上がったhtmlに後から付け焼きしても
無事に動かなければいけない。恐れるべきはブラウザ毎に違う
挙動と、初歩的であるが変数が重ならないこと。後者について
は、特有すぎる変数名を一つ考えて、それをオブジェクトにす
ることである。できるだけ2つ以上作りたくはない。

rclick={
	open:function(fname){
	
	}
}
htmlの中で
rclick.open("test.ini");
という風に使う。open()ではfnameをファイル名として開き、
設定を正しく解釈する。

通常javascriptはブラウザのシステムを操作することは危険の
為できないが、次のようにすることでメニューを再現すること
ができる。

設定に従ったメニューを<div>で作成して、こいつのcss
スタイルをstyle="position:absolute"とすることでcssによって任意の座標に移動させることができる。
当然cssの値はjavascriptで操作できる。
初めは見えない位置(マイナスの座標)にしておき、右クリック
を押された時、通常のメニューを拒否し、こいつをマウスの座
標に移動させる。また適当なタイミングで見えない位置に移動
させる。これでメニューが再現できる。

じゃあ組むね。
まずファイルを開く、から。
JavaScriptが出来るファイル操作は厳密な意味では存在しない。
少し大雑把な意味で言えばGETレスポンスとPOSTレスポンスが
ある。適当なページ(ファイル)に(POSTではデータを送信して)
返答を待つのがGET,POSTレスポンスであり、特に工夫のしてない
ページにGETレスポンスをすると帰ってくるのはページのファイル
としてのデータである。例えば「こんにちわ」等と書かれただ
けのtxtファイルにGETすると「こんにちわ」と帰ってくる。
ただし、日本語を扱う場合はtxtファイルの文字コードをUTF-8に
する必要がある。
また送信されるファイルは同じサーバでなければいけない。(クロ
スドメインの禁制)

具体的にGETレスってどうすりゃいいかってーと。
var fname="test.ini";//開くファイル名
var con=new XMLHttpRequest();
con.open("GET",fname,false);
con.send(null);
var buf=con.responseText;//返答のテキスト
さてしかし2行目のXMLHttpRequest()はブラウザInternetExplorer
には存在しない。何でって言われても困る。しかしそれに相当する
ものがある。
ActiveXObject("Msxml2.XMLHTTP");
ActiveXObject("Microsoft.XMLHTTP");
上は新しいIE。下は古いIE。ね?迷惑でしょ?
ただし、使い方は同様にnewして.open()して.send()して
.responseTextを待てばいいだけ。

結局次のように書けばよい(一例)
var con;
try{
	con=new XMLHttpRequest();
}catch(e){
	try{
		con=new ActiveXObject("Msxml2.XMLHTTP");
		//alert("IEとか使ってるんですか~");
	}catch(e2){
		con=new ActiveXObject("Microsoft.XMLHTTP");
		//alert("これは珍しいIEですね~");
	}
}
xml.open("GET",fname,false);
xml.send(null);

var buf=con.responseText;


読み込んだ設定文章bufを解釈しよう。
文字列の操作で使うのは次。
var str="abcdef-abcde";

str.indexOf("bc");//文字列の変数strの先頭から引数"bc"に一致
					するのが何文字目か返す。見つからなかったら-1.
str.indexOf("bc",5);//今度は先頭からではなくて、第二引数の5文字目
					から探す。

str.split("-");//strから見付かる引数"-"を区切り文字と見なして
				それによって区切った文字列を順に要素とする配列を返す。
				引数を""にすると一文字ずつにするし、
				引数に何も書かないかnullにすると、区切らず一要素の配列にする。

str.replace("b","c");//strの"b"を"c"に置換した文字列を返す。
				但し置換は先頭から最初に見付かった一つだけ。
str.replace(/b/,"c");//"を/にすると全く意味が違う。正規表現なのだ。
str.replace(/b/g,"c");//見付かりうる"b"全てについて置換を行う。
str.replace(/[bd]/g,"c");//見付かりうる"b"又は"d"全てを置換する。

str.slice(3,5);//strの文字を最初から一文字ずつ0,1,2,3...と数えよう。
		第一引数a=3,第二b=5。
		aからbの一つ前までの文字列を切り取って返す。
str.slice(-3);//strの末尾の3文字を切り取って返す。

一杯書いたけど実は4つしか紹介してないという!

さあどうするかと言えば。
x=buf.indexOf("menu{");
y=buf.indexOf("}",x);//"menu{"の次の"}"を見つける。
buf1=buf.slice(x+4,y);//buf1にはmenu{と}に挟まれた間を切り取った
文章が入る。
さらに
menus=buf1.split("\r\n");
とすればmenusにはbuf1を一行ずつにした配列が入る。
なぜならば"\r\n"はWindowsの通常の環境で「改行」を示すから。
正確には「復帰(\r)」+「改行(\n)」ね。
ではMac、Linux等を無視するのか。うん。
(Macでは\r、Linuxでは\nだけ。だから/\r\n/gを"\n"に置換した後/\r/gを"\n"
に置換してsplit("\n")すれば一応解決。)

読み取った一行はさらに,で区切る。
あとは<div>ブロックのhtmlを文字列のして書こう。
というか貼り貼りしゆる。

はい、完成。
 -> rclick.js

2010/3/2 (c)Kero's Worlds