ブックマークレット

アドレスバー部分に以下の文字を入力しEnterキーをたたいて下さい。

javascript:alert("Hello, World!");

「Hello, World!」と書かれたダイアログが表示されたと思います。これがブックマークレット(Bookmarklet)です。

ブックマークレットとは、スクリプト言語で記述された小さなプログラムをURLの代わりに設定することにより実行する機能もしくはプログラムのことを指します。

ブックマークレットの実行は、主に以下のパターンが挙げられます。

Webブラウザのアドレスバーに入力しての実行
HTMLのリンク(aタグのhref属性)に記述し、リンククリック時に実行
ブックマークとして登録し、ブックマークを呼び出しての実行

※Wikipediaには「たいていの場合、ウェブブラウザのブックマークに登録して利用することからこの名称となった」と書いてありました。

使用可能なスクリプト言語はブラウザによって異なります。

JavaScriptは多くのブラウザでサポートしており、ブックマークレットの事実上の標準言語となっています。「ブックマークレット＝JavaScript(だけ)」かのような記述をしているサイトも多数ありますが、これは事実とは異なります。

メジャーなブラウザの新しいバージョンでは、ブックマークレットにJavaScriptが使用できますが、マイナーなブラウザやメジャーでも過去のバージョンの中には対応していないものもあるかもしれません。ちなみにIEではVBScriptも使用できます。

ブックマークレット・サンプル集

ウインドウサイズを調節する

javascript:resizeTo(700, 900);

テスト実施時に、複数の日にまたがりテストを行う際や複数のマシンで行なうときに、画面キャプチャのサイズを合わせたい場合などに有効。

ユーザIDとパスワードを入力しログインボタンを押下

※見易さを考慮して改行しています。

javascript: document.getElementsByName('userId')[0].value = 'hoge';
document.getElementsByName('password')[0].value = 'huga';
document.getElementsByName('loginButton')[0].click(); void(0);

上記同じ内容を、コピペして使いやすいよう1行で記述しました。

javascript: document.getElementsByName('userId')[0].value = 'hoge'; document.getElementsByName('password')[0].value = 'huga'; document.getElementsByName('loginButton')[0].click(); void(0);

※現在「'userId', 'password', 'loginButton'」となっている個所は対象の画面にあわせ適宜変えてください。

Selectリストの選択

入力プロンプトに入力した値に部分一致する最初の項目を選択します。

※見易さを考慮して改行しています。

javascript:var name = prompt('name', 'hoge');
var e = document.getElementById('assignee');
var targetIndex = 0;
for (var i = 0; e.options.length > i; i++) {
	if (e.options[i].value.match(name) || e.options[i].text.match(name)) {
		targetIndex = i; break;
	}
};
e.selectedIndex = targetIndex; void(0);

上記同じ内容を、コピペして使いやすいよう1行で記述しました。

javascript:var name = prompt('name', 'hoge'); var e = document.getElementById('assignee'); var targetIndex = 0; for (var i = 0; e.options.length > i; i++) { if (e.options[i].value.match(name) || e.options[i].text.match(name)) { targetIndex = i; break; } }; e.selectedIndex = targetIndex; void(0);

※現在「'assignee'」となっている個所は対象の画面にあわせ適宜変えてください。

チェックボックスの状態の変更

チェックボックスの状態を変更します。

// 全てのチェックを入れる
javascript:var nl = document.getElementsByTagName('input'); for (var i = 0; i < nl.length; i ++) { var e = nl[i]; if (e.type == 'checkbox') { e.checked = true; } } void(0);

// 全てのチェックをはずす
javascript:var nl = document.getElementsByTagName('input'); for (var i = 0; i < nl.length; i ++) { var e = nl[i]; if (e.type == 'checkbox') { e.checked = false; } } void(0);

// すべてのチェックを反転する
javascript:var nl = document.getElementsByTagName('input'); for (var i = 0; i < nl.length; i ++) { var e = nl[i]; if (e.type == 'checkbox') { e.checked = !e.checked; } } void(0);

※画面上のすべてのチェックボックスを変更してしまうので気をつけてください

nofollow属性がついたリンクを強調表示

※見易さを考慮して改行しています。

javascript: (function() {
	var links = document.getElementsByTagName('a');
	for (var i = 0; links.length > i; i++) {
		var theLink = links[i];
		if (theLink.getAttribute('rel') == 'nofollow') {
			theLink.style.backgroundColor = 'red';
			theLink.style.color = 'white';
			theLink.style.fontWeight = 'bold';
			theLink.style.textDecoration = 'none';
		}
	}
})();

上記同じ内容を、コピペして使いやすいよう1行で記述しました。

javascript: (function() {var links = document.getElementsByTagName('a'); for (var i = 0; links.length > i; i++) {var theLink = links[i]; if (theLink.getAttribute('rel') == 'nofollow') {theLink.style.backgroundColor = 'red'; theLink.style.color = 'white'; theLink.style.fontWeight = 'bold'; theLink.style.textDecoration = 'none'; }}})();

※このブックマークレットは下記のサイト様から拝借しました。

JAVASCRIPT::BOOKMARKLET

「nofollow属性の強調表示」以外にも有用なブックマークレットを豊富に紹介しています。

	このサイトを検索