SQLの窓 イラストAC フリー素材

2015年01月10日

JavaScript : ブックマークレットの作り方


<a href="javascript:var%20mylib=document.createElement('script');if(!window.NAME){mylib.setAttribute('src','URL');mylib.setAttribute('charset','shift_jis');document.body.appendChild(mylib);(function(){if(window.NAME){NAME.init();}else{setTimeout(arguments.callee);}})();}else{NAME.init();}void(mylib);"
onclick='
	alert('ブックマークバーにドロップして下さい(IEではお気に入りバー/右クリックからも可)'); 
	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) { 
		event.returnValue = false; 
	} 
	event.preventDefault(); 
	event.stopPropagation();
'
>ブックマークレットのスケルトン</a>

▼ JavaScript 部分を整形したもの
var mylib = document.createElement('script');
if (!window.NAME) {
    mylib.setAttribute('src', 'URL');
    mylib.setAttribute('charset', 'shift_jis');
    document.body.appendChild(mylib); 
    (function() {
        if (window.NAME) {
            NAME.init();
        } else {
            setTimeout(arguments.callee);
        }
    })();
} else {
    NAME.init();
}
void(mylib);

arguments.callee は無名関数自身なので、window.NAME がロードされるまで呼び続けられます。ロード済みの場合は、読み込まれた外部ライブラリの NAME.init(); が実行されます。ブックマークレットの二度目の実行では、既に読み込まれた外部ライブラリより実行されます

void(mylib); で、void の引数に mylib を使っているのに深い意味はありません。void(0) でもかまいません。最後に void(0) が無いと、画面が壊れてしまうから付加するのが通常です( alert 等のウインドウ処理が最後にある場合は付加しなくても動作します。)

▼ 外部スクリプト部分
if (!window.NAME) {
(
function() {
	window.NAME = 
	{
		// プロパティ
		version: 1.01
		,
		// メソッド
		init : function( ) {
			/* ここに処理を書きます */
			alert("この alert はテスト用です");
		}
	};
}
)();
}


仕込み方にもいくつかあって、ウインドウ開ける方法もありますし、IFRAME で埋め込んで配置する方法もあります。この方法は、ページの一部分を一回だけ JavaScript で変更してしまう比較的基本的な方法です。

要するに、スクリプトタグを BODY 要素の最後に追加して、そのスクリプトタグに外部の js ファイルを読み込ませてその中の処理を呼び出すものです。自分で一から書くと結構面倒で、専門知識も多く知っていないとなかなか完成まで時間がかかりますが、スケルトンを使うと必要最低限のコード追加と環境整備で実装環境を作る事ができます。

このスケルトンで注意するのは、呼び出す js ファイルは SHIFT_JIS で書くというところです(Window 環境では普通に作成する SHIFT_JIS になってしまうので)。これは、呼び出す方の記述で charset="shift_jis" を書いているからです。UTF-8 にしたい場合は、href 内のその記述部分も変更する必要があります。

後、一般的なデバッグで気を付けるのは、変更してアップロードする毎にキャッシュを削除する事です( 面倒ですけど、結局効率アップになります )。さらに、JavaScript の動的コンテンツは、ソースを単純に表示しても見る事ができないので、開発者ツールで結果を確認する必要もあります。

ブックマークレットは、表示されているページと同じセキュリティで参照されるのでたいていの事ができます。主な目的は、エンドユーザーの操作レベルでの効率を上げる事です。IE 拡張メニューや Firefox の拡張と似ていますが、後者は厳密にはセキュリティの壁があります。そのかわり、後者は OS のローカル情報にアクセスできるメリットがあります。


元来、サービス運営側はサーバーのシステムの管理上なかなかエンドユーザーの利便性にまで手をだせないものです。通常、少しの変更が多くのユーザに影響するので、慎重にならざるを得ません。ですから、この手のプラグイン的なツールは、エンドユーザ側で提案すべきものであり、サービスを提供する側とエンドユーザが、お互い利益を得るような形態が望まれます。


【JavaScriptの最新記事】
posted by at 2015-01-10 16:32 | JavaScript | このブログの読者になる | 更新情報をチェックする


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX