H2+ Goes On

外部サイトのリンクを別タブで開く方法のエントリで紹介したjQueryは、自分でコンテンツを管理しているサイト中でなければ使えません。これをなんとかブックマークレットにして、他のサイトでも使えるようにはできないものかと考えてみました。

閲覧しているサイトが必ずしもjQueryを使っているとは限りませんので、jQueryをブックマークレット中で使えるようにするためには、必要に応じてjQueryをロードしなければなりません。

jQueryを動的にロードするブックマークレットというとjQuerifyが有名ですね。検索すると改良版がいろいろ出てきますが、それらを参考にしながら作ってみました。

まずは、プレーンなコードです。

if (!window.jQuery) {
  (function(s) {
    s.src = 'http://jquery.com/src/jquery-latest.js';
    document.getElementsByTagName('body')[0].appendChild(s);
  })(document.createElement('script'));
}

余分なスペースやセミコロン、括弧などを消していって、コードをブックマークレット化すると…

javascript:(function(){if(!window.jQuery)(function(s){s.src='http://jquery.com/src/jquery-latest.js';document.getElementsByTagName('body')[0].appendChild(s)})(document.createElement('script'))})();void(0)

できあがったブックマークレットがこちら： Embed jQuery

続いて、リンクを別タブで開くようにするためのコードです。
まず、前回のエントリで紹介したjQueryをおさらいしておきましょう。

$(function() {
    $("a:not([href^='<?php echo get_settings('home'); ?>'])").attr("target", "_blank");
});

上記のコードは、WordPress内に直接コーディングしたPHPなので、実際にブラウザが受信するjQueryに置き換えます。

$(function() {
    $("a:not([href^='http://h2plus.biz/blog/'])").attr("target", "_blank");
});

自分の運営するサイトであれば、ベースになるURL（http://h2plus.biz/blog/）をハードコーディングできますが、ブックマークレットとして汎用的に使えるように改良します。リンク先のURLには、以下の４パターンが考えられますね。

1. 外部サイト – 例： http://www.google.co.jp/path/file
2. 自サイト（絶対URL表記） – 例： http://h2plus.biz/path/file
3. 自サイト（絶対パス表記） – 例： /path/file
4. 自サイト（相対パス表記） – 例： path/file | ./path/file | ../path/file

このうち「1. 外部サイト」だけに絞り込むようなセレクタを作ります。

$("a[href^='http://']:not([href^='http://"+location.hostname+"'])").attr("target", "_blank");

セレクタの前半部分（[href^='http://']）で、「1. 外部サイト」と「2. 自サイト（絶対URL表記）」の２つに絞り込まれます。さらに、閲覧中のページのホスト名を使って自サイトを除外するという段取りです。

あとはブックマークレット化するだけ。

javascript:(function(){$("a[href^='http://']:not([href^='http://"+location.hostname+"'])").attr('target','_blank')})();void(0)

できあがったブックマークレットがこちら： Another Tab

この２つのブックマークレットを１つにまとめられないかと試行錯誤しましたが、うまくいきませんでした。閲覧しているサイトでjQueryが使われているかどうかなんて気にしないので、結局のところ２クリックしなければならない。検索エンジンの結果ならば、毎リンクを「右クリック＆別タブで開く」する手間は省けるだろうが…。

関連するエントリ

• リンクの隣に「はてなブックマーク数」を表示する方法
• 外部サイトのリンクを別タブで開く方法
• HTMLタグを生成するだけjQueryプラグイン
• 共有サーバーにPEARをインストールする方法
• サイト内にFlashムービーを埋め込む方法（公開編）