ブラウザのアドレスバーからJavaScriptのコードを実行する方法
javascriptスキームを使用することで、簡単にデバッグを行えます。
以下のようにブラウザのアドレスバーに入力し、Enterキーを押下することで実行できます。
javascript:alert( 'test' );
ブックマークレット (bookmarklet)
前述のようなコードをブックマークに登録することで、そのコードを簡単に実行できるようになります。これをブックマークレットと呼びます。
例えばGoogle翻訳ブラウザ ボタンでは、これを利用して閲覧中のページを簡単に翻訳する機能を提供しています。
ブックマークレットの登録
適当なページをブックマーク (お気に入り) に登録した後、そのプロパティからURLを書き換えます。
Internet Explorer
お気に入りのプロパティを表示し、[Web ドキュメント]タブのURLの欄にブックマークレットのコードを入力します。
しかし入力欄が小さいため、他で記述したコードをコピー＆ペーストで貼り付けるのが簡単です。ただし改行が認められないため、あらかじめコードを1行にまとめておく必要があります。
なお登録時に「プロトコル "javascript" には登録されたプログラムがありません。この対象を維持しますか?」と表示されますが、[はい]を選択することで問題なく登録できます。
Firefox
ブックマークのプロパティを表示し、URLの欄にブックマークレットのコードを入力します。
Firefoxでは貼り付け時に改行が自動で削除されるため、改行も含めて貼り付けできます。なお登録後にURLエンコードされるため、空白が[ %20 ]のように表示されます。
サンプルコード
ローカルとリモートの切り替え
ホスト名に応じてブラウザのURLを書き換えることで、ローカルとリモートの両方のページを簡単にチェックできます。
javascript:
var localhost = 'localhost';
var remotehost = 'example.com';
if( location.hostname == localhost )
{
location.hostname = remotehost;
}
else if( location.hostname == remotehost )
{
location.hostname = localhost;
}
else
{
alert( 'No Support' );
}
MSDNの日本語ページと英語ページの切り替え
MSDN (Microsoft Developer Network)の日本語ページでは、情報が不足していることが多々あります。そのような場合に、このブックマークレットで簡単に英語ページへ切り替えられます。また逆に、外国語の場合は日本語へ切り替えます。
javascript:
if( location.host == 'msdn.microsoft.com' )
{
if( location.pathname.indexOf( '/ja-jp' ) == 0 )
{
location.pathname = location.pathname.replace( /\/ja-jp/, '/en-us' );
}
else
{
location.pathname = location.pathname.replace( /\/[a-z][a-z]-[a-z][a-z]/, '/ja-jp' );
}
}
else
{
alert( 'No Support' );
}
ちなみにMSDN ワールドワイドを見るとわかるように、言語を表すURL部分は/言語コード-国コード/の書式となっています。
一般的な日本語ページと英語ページの切り替え
より汎用的には次のブックマークレットを使用します。このコードではURLに「/ja/」または「/ja-jp/」のような部分が含まれる場合、それぞれ「/en/」「/en-us/」に置換したページへ移動します。
javascript:
var pattern = /\/([a-z][a-z])(-[a-z][a-z])?\//;
var match;
if( match = location.pathname.match( pattern ) )
{
location.pathname = location.pathname.replace( pattern, match[ 1 ] == 'ja'?
( match[ 2 ]? '/en-us/':'/en/' ):( match[ 2 ]?' /ja-jp/':'/ja/' ) );
}
これをブックマークに登録するには、リンクをブックマークツールバーにドラッグしてください。
[ 日本語<->英語 ]