※当ブログではアフィリエイト広告を利用しています。
GoogleではjQueryなどの広く使われているライブラリをホストする「Google Hosted Libraries」というサービスを提供しています。
サービスを利用することでメリットがたくさんあるのですが、万が一Googleのサービスからファイルを読み込めなかったときに自サイトのjQueryを読み込む処理（フォールバック）をWordPressで実装しようとしたときに試行錯誤したので、採用した方法とその理由をメモします。
Google Hosted Librariesについて
Googleが提供するCDN(コンテンツデリバリネットワーク)から、jQueryやPrototypeなど広く使われているライブラリのファイルを自サイトで利用できます。例としてjQueryは以下のようなコードで読み込むことができます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Google Hosted Librariesを利用するメリット
主に以下のようなメリットがあります。
- 自サイトに置いてあるファイルを読み込むよりも通信速度が早い
- 他サイトで同じ種類・バージョンのファイルを既に読み込んでいる場合、再度ファイルをダウンロードしなくともブラウザキャッシュからの利用が期待できる
- 同一ホストへのブラウザの同時接続数制限を緩和し、ファイルの並列ダウンロード数を増やせる
参考:Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 –
Google Hosted Librariesを利用するデメリット
逆に以下のようなデメリットも存在します。
- 万が一サービスが落ちていたらファイルが読み込めない（Googleより自サイトが落ちる可能性のほうが高いですが・・）
- インターネットに接続できる状況でないとファイルが読み込めない
WordPressでのGoogle Hosted LibrariesのjQuery利用方法
WordPressでGoogle Hosted LibrariesのjQueryを読み込むにはfunctions.phpに以下の処理を加える必要があります。
wp_deregister_scriptであらかじめ登録されているjQueryを解除wp_register_scriptでGoogle CDNのjQueryを登録wp_enqueue_scriptで登録し直したjQueryをスクリプト読み込みキューに加える
またヘッダー部分でスクリプトを読み込むとページのレンダリング速度に多少影響が出ることから、当サイトではフッター部分でスクリプトファイルを読み込むようにしています。functions.phpの詳細なコードは後述します。
フォールバックについて
Google Hosted Librariesからファイルが読み込めなかった場合に自サイトのファイルを読み込む処理（フォールバック）を加えておくのが好ましいようです。
例えばjQueryを読み込むときは、Googleからのスクリプトファイル読み込みコードの直後に下記2行目のようなフォールバック処理を追加します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="./js/jquery-1.9.1.min.js"><\/script>');
参考:jQueryをCDNで読み込む(フォールバックについても)
WordPressでのjQuery読み込みフォールバック方法と問題点
フォールバック処理はGoogle CDNからのjQuery読み込み処理の直後に記述するのが好ましいですが、前述のフォールバック処理はインラインJavaScript(HTMLに直接記述)となっています。
しかしWordPressではwp_enqueue_scriptでのスクリプト読み込みの直後の行にインラインJavaScriptを記述する方法が見当たりませんでした。
テーマのheader.phpまたはfooter.phpに直接インラインJavaScriptを記述する方法も考えましたが、もしjQueryに依存するスクリプトファイルをプラグイン等によって読み込んだ場合、以下の条件が重なるとプラグインが正しく動作しないことがあります。
- CDNからのスクリプト読み込みに失敗
- フォールバックでの自サイトからのjQueryよりも先にプラグイン等のスクリプトが実行される
採用した方法と理由
下記の参考サイトで紹介されている方法を自サイト用に改変し、WordPressで使用しているテーマのfunctions.phpに以下のコードを追加しました。
//管理画面以外であれば自身で指定したjQueryを読み込む
if(!is_admin()){
function load_external_jQuery() {
wp_deregister_script( 'jquery' ); //あらかじめ登録されているjQueryを登録解除する
$url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'; //チェックするGoogle CNDのURL
$test_url = @fopen($url,'r'); //Google CDNが利用可能かチェックする
if( $test_url !== false ) {
//Google CDNが利用可能であればGoogle Hosted LibrariesのjQueryを登録する
wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array(), NULL , true);
}
else{
//Google CDNが利用不可であればローカルのjQueryを登録する
$local_url = get_template_directory_uri() . "/js/jquery-1.9.1.min.js";
wp_register_script('jquery', $local_url, array(), NULL , true);
}
wp_enqueue_script('jquery'); //登録し直したjQueryを読み込む
}
add_action('wp_enqueue_scripts', 'load_external_jQuery');
}
参考:Load jQuery from Google AJAX Libraries API in WordPress with “fallback script” -Stack Overflow
上記コードを加えることでWordPressフッター部分に以下の動作を加えることができます。
- Google CDNからjQueryが読み込める場合はそのまま読み込む
- Google CDNからjQueryが読み込めない場合は自サイトに設置したjQueryを読み込む
上記コードを採用した理由は以下の通りです。
- Google CDNと自サイト両方が落ちていない限り確実にフッター部分でjQueryスクリプトを読み込むことができる
- jQueryに依存しているプラグインの利用に影響がない
- PHPで処理するためインラインJavaScriptでのフォールバック処理が必要ない
おわりに
GoogleのCDNが利用不能となる可能性は考える必要がないくらい低いとは思いますが、万が一のことが気になってしまったので今回のような処理を加えてみました。
WordPressの作法と実現したいことを両立させるにはまだまだ勉強が足りないと感じました。
