OTCHY.NET

タイトルの通りです。

特徴

• script タグ追加型の読み込み
• $ 関数として利用可能
• 該当ページですでに jQuery が読み込まれていればそれを利用
• jQuery スクリプト自体のアップは不要 (Gogole の CDN を利用)
• ローカルのキャッシュも多分有効 (CDN が適切なヘッダを返してれば)
• jQuery 読み込み完了を待ってから実行される

作成動機

Greasemonkey で jQuery を使う方法検索してみると、GM_xmlhttpRequest で読み込んで eval する方法と、script タグを追加する方法に大別されます。
前者の方がスマートなやり方ではあるのですが、スニペットとして貼り付けるにはいかんせんコードが長くなりがちなのと、jQuery が導入される名前空間の違いからか、jQuery がフル機能で利用出来ないといった制限があるようです。
そこで後者を選択しようと思ったのですが、検索で上位に来るスクリプトはいまいち洗練されていなくて、二重読み込みなどの問題が解決されていなかったりします。

で、自分で書く事にしました。
特に任意のサイトで動作させるスクリプトを書くような場合、元々のページに jQuery が導入済みでもそれに干渉しない、というのがウリでしょうか。

スクリプト

(function(d, func) {
    var check = function() {
        if (typeof unsafeWindow.jQuery == 'undefined') return false;
        func(unsafeWindow.jQuery); return true;
    }
    if (check()) return;
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js';
    d.getElementsByTagName('head')[0].appendChild(s);
    (function() {
        if (check()) return;
        setTimeout(arguments.callee, 100);
    })();
})(document, function($) {
    // ここにメインの処理を書く
    $('#button').click(function(){
        alert('clicked!');
    });
});

重たい処理は必要ないぞ、っていう場合はこちらも参考にどうぞ。
Greasemonkey スクリプトの冒頭に書く 5 行

Greasemonkey を書く時に頻繁に利用する関数をまとめたので、公開してみます。
外部の JavaScript ライブラリを読み込む方法を解説したサイトもありますが、そこまで大げさな機能が必要でもなく、軽く動作させたいときに便利です。
特に共通ライブラリを利用すると、Firefox 以外のブラウザの対応も無駄に読み込む事になるので、スマートじゃないなぁと思います。

WordPress のテーマファイルをちょこちょこいじって、外部向けリンク (正確には、target=”_blank” を付けたリンク) に、自動でアイコンが付くようにしてみました。
おそらく他のサイトなどでも紹介されているであろうテクニックですが、OTCHY.NET で採用した方法を簡単に説明してみます。

下記は、WordPress を前提として書いていますが、その他の CMS や通常のウェブサイトであっても、css や html、JavaScript が自由になるのであればどこでも設定可能です。

用意するもの

• jQuery
• WordPress のテーマを編集する知識
• ファイルをアップロードする知識

アイコン画像を用意する

任意のアイコン画像を用意して下さい。どんな背景であってもある程度見栄えをよくするためには、透過 GIF などが良いでしょう。
Otchy は、フリーで公開されているアイコンを少し修正して使いました。OTCHY.NET で使っているアイコンをそのまま持っていっても構いません。

JavaScript ファイルの準備

まず、jQuery の本体をダウンロードしてきて、jquery.js にリネームします。
リネームするかは任意ですが、将来のバージョンアップの際にファイルだけ差し替えれば済むように、リネームしておく事をお勧めします。

アイコン画像用のクラスを追加するスクリプトを common.js という名前で作成します。もちろんこのファイル名も任意です。

$(function() {
    $('a[target=_blank]').addClass('blank');
});

WordPress テーマの編集

アイコンを指定するためのスタイルを、CSS ファイルに追加します。
アイコン画像のファイル名やパスは任意ですが、画像ファイルのパスは css ファイルからの相対指定となる事に注意して下さい。
Otchy は同じテーマディレクトリの中に画像も一緒に置いています。

WordPress の場合、テーマごとのスタイルは、style.css となっているのでこのファイルに以下の記述を追加します。
padding-right の値は、使用するアイコン画像の横幅に合わせて適宜調整して下さい。

a.blank {
    background: url(images/blank.gif) no-repeat top right;
    padding-right: 14px;
}

次に、作成した JavaScript を読み込むための記述を追加します。
header.php を編集し、作成した 2 つの JavaScirpt ファイルにパスを通します。
js ファイルをアップロードした場所と整合性を取るように、script タグを追加して下さい。

Otchy の場合、js ファイルはドメイン直下の js ディレクトリに保存するため下記のような記述になります。

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/common.js"></script>

用意したファイルのアップロード

あとは、作成した各ファイルをアップロードすれば完了です。
追加した記述はわずか 9 行。これだけで、全てのページの外部リンクに自動でアイコンがつくようになります。

便宜上「外部リンク」という言葉を使っていますが、冒頭にも書いたように target=”_blank” となっているリンクが対象なので、外部サイトへリンクする際は、target=”_blank” とするのを忘れないようにして下さい。

うまく動いていないと思われる場合は、各種ファイルのパスの指定が間違っていないか再確認すると良いでしょう。

簡単な解説

大まかに言って、css でアイコンを指定する部分と、jQuery によって必要なクラスを追加する部分に分ける事が出来ます。

css による指定では、a タグの右側にアイコン画像分の幅を空け、アイコン画像は背景画像として右寄りに指定しているのがポイントです。

jQuery による指定では、html 内の a タグのうち、target=”_blank” となっているものを対象として、css で設定したクラスを追加しています。

これだけの処理を簡単に書く事が出来るのは、jQuery の力によるところが大きいですね。