マウスカーソル位置の色情報取得ブックマークレット：Google AdSenseやAmazonアソシエイト等での色設定に苦労していませんか？ Part.2

Google AdSenceやAmazon アソシエイト等でのフォントカラーや背景色の指定は、貼り付けたいページの色に合わせたい所ですが、その色情報を調べる事に時間がかかる事がある。

それらの色情報を楽に取得するためにスクリプトを組んで動きを確認したのが、前回までの内容。

 

前回のスクリプトを実行するためには、プログラムソースに仕込むか、DHML Diver等の任意のサイト上でスクリプトを実行可能なツールを利用する手間がかかる。

今回は、その手間を省くためブックマークレット化した物を公開します。

 

ブックマークレットの説明は、Wikipedia等に書かれていますので参照して見て下さい。

「ブックマークレット - Wikipedia」
http://ja.wikipedia.org/wiki/%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88

ブックマークレット (Bookmarklet) とはJavaScriptで記述された小さなプログラムである。たいていの場合、ウェブブラウザのブックマークに登録して利用することからこの名称となった。 登録したブックマークをクリックして使用する。

 

マウスカーソル位置の色情報取得スクリプト実行イメージ

どのように実行できるかというと、次の様にブックマークに登録し調べたい時にクリックするだけ。

このイメージは、リンクバーの［色情報］ブックマークをクリックする事で前回と同じ内容のJavaScriptを実行し、マウスカーソル位置の色情報を取得している状況です。

この様に前回と比べて非常に簡単に実行できるようになっています。

 

マウスカーソル位置の色情報取得ブックマークレット

肝心のブックマークレットは次のリンク。 (※IE7で動作確認)

マウスカーソル位置の色情報取得ブックマークレット

 

マウスカーソル位置の色情報取得ブックマークレットのJavaScriptソース

一行で表す必要があるので、変数名等を短く変更。
何故かonmousemoveイベントの登録が上手く動かないのでattachEventを使用。
※一行です。

javascript:void document.body.attachEvent("onmousemove",function(){function ps(ost,sst){var ot=ost;while(ot.currentStyle[sst]=="transparent"){ot=ot.parentElement;if(ot==null)return "";};return ot.currentStyle[sst];};var oe=event.srcElement;var sh="";var ss="";sh+="tagName:"+oe.tagName;ss="color";sh+="n"+ss+":"+ps(oe,ss);ss="borderColor";sh+="n"+ss+":"+ps(oe,ss);ss="backgroundColor";sh+="n"+ss+":"+ps(oe,ss);oe.title=sh;});

 

マウスカーソル位置の色情報取得ブックマークレットの登録方法

登録方法は単に「マウスカーソル位置の色情報ブックマークレット」リンクをお気に入り登録すればよいだけです。

お奨めの登録方法の流れは次の通り。

1. 「マウスカーソル位置の色情報取得ブックマークレット」リンクを右クリックする。
   
   
2. "名前"を適当な長さに変更し、"作成先"にリンクを選択し［追加］ボタンをクリックする。
   
   
3. ［マウスカーソル位置の色情報取得ブックマークレット］リンクにお気に入りに登録され、リンクバーに表示されます。
   後は使いたいサイトで［マウスカーソル位置の色情報取得ブックマークレット］リンクをクリックするだけで動作します。
   
   ※そのままだと名前が非常に長いので適当に短くた方が使いやすいと思います。

 

後は時間があれば、データをクリップボードにコピーする機能やTitle属性以外の表示機能か、FireFox対応といった事を行ってみるかなぁ。
（FireFox対応は、このbookmarkletの肝となるattachEvent関数やeventオブジェクト、srcElement、プロパティ、currentStyleプロパティ等を全て置き換える必要がありそうなので、全て書き換える勢になりそうですが。。）

 

つつくかも・・