WP で CDN の jQuery を使う:フォールバック対応 - 1

jQuery のロゴ

このページで解説する方法は古い方法です。ここで解説する問題を解決した新しい方法があります。

WP で CDN の jQuery を使う:フォールバック・キャッシュ対応 - 3

jQuery を CDN から読み込むように変更します。CDN(Contents Delivery Network) とは、 端的に言えば、外部のサーバからコンテンツやリソースを読み込む仕組みです。 あるいはコンテンツの置いてある外部のサーバの場所、を指します。

ユーザがより高速なサーバからリソースを読み込めるようにすることは重要です。 一方でサーバ側は、そのリソースのためにネットワーク帯域を消費しなくなります。

ここでは WordPress 標準の jQuery を読み込まず、Google(CDN) から jQuery を読み込むようにします。 さらに、Google から jQuery がダウンロードできない場合には、WordPress 標準の jQuery を読み込むようにします。

Hosted Libraries - Google Developers

WordPress で実現する方法

WordPress で実現するには次のようなコードを functions.php で実行します。 wp_enqueue_scripts アクションにフックして、CSS や JavaScript を出力する際に実行します。

function karakuri_scripts_styles()
{
    $jquery_cdn_url = 'http:\/\/ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';  
    $jquery_cdn_test = @fopen($jquery_cdn_url, "r");

    if($jquery_cdn_test)
    {
        wp_deregister_script('jquery');   
        wp_register_script('jquery', $jquery_cdn_url);
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'sample_scripts_styles');

処理の流れを大まかに解説すると次のようになります。(1) Google の CDN にアクセスできるか確認する。 (2-1) アクセスできるとき、標準で登録されている jQuery を取り除き、Google の CDN にある jQuery の URL を登録する。 (2-2) アクセスできないとき、何もせず標準で登録されている jQuery をそのまま使う。

重要な点は、WordPress は標準で jQuery を読み込む点にあります(実行環境によって異なります)。 wp_enqueue_script 関数は登録済みの jquery が存在し、 既にwp_enqueue_script 関数によってそれが追加されているとき、実行されません。 例えば、プラグインなどが jQuery を必要とするときに、jQuery を重複させないためなどに役に立っています。

登録済みの jQuery が存在するので、CDN から jQuery がダウンロードできないときは何もしません。 一方で CDN から jQuery がダウンロードできるとき、登録済みの jQuery を削除し、新たに jQuery を登録して追加します。

実行結果を確認する

実行結果は出力されるソースコードを確認すれば良いでしょう。(Google の) CDN から jQuery が読み込めるときは次のようになります。 (読みやすさのために改行しています。)

<script type='text/javascript'
        src='http:\/\/ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=4.2.2'>
</script>

フォールバックをテストするときは、URL を少しだけ変更して、意図的にアクセスできないようにすれば良いです。 自身のサーバに設置された WordPress 標準の jQuery が読み込まれているかどうかを確認します。

<script type='text/javascript'
        src='http:\/\/ドメイン/wp-includes/js/jquery/jquery.js?ver=1.11.2'>
</script>
<script type='text/javascript'
        src='http:\/\/ドメイン/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'>
</script>

Google の CDN にある jQuery のバージョン

URL http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js の 1 の部分は、jQuery のバージョン番号です。 jQuery のバージョン番号等は状況に応じて変更します。

Google の提供する CDN ではバージョン番号に、1 を指定するとき、jQuery 1.x.x の最新のバージョンがダウンロードされます。 また、例えば 1.7 を指定するとき、1.7.x の最新のバージョンがダウンロードされます。

jQuery 2.x 系は古いブラウザへの対応を取り止め、その分だけ高速に動作するようにしたものです。 具体的には IE8(Windows7標準) などへの対応を取り止めています。

また WordPress が標準で読み込む jquery-migrate.js は jQuery 1.9 の時点で廃止された古い関数や機能を再現するための JavaScript です。 古い jQuery を導入しなければならないシチュエーションでなければ読み込む必要もないでしょう。

ユーザエージェント(ブラウザ)で実行するべきかどうか

ここでのフォールバックの実装方法は、十分に実用的な方法ですが、真に良い方法であるかどうかは検討の余地があります。

ここで提案する方法では、@fopen 関数によって jQuery が CDN からダウンロードできるかどうかを確認しています。 したがってどんな状況であっても、サーバマシン (WordPress) は少なくとも1回 jQuery にアクセスします。

一方で、ユーザエージェントによってフォールバックを実現する場合には、 予めダウンロードしたキャッシュを利用して、ダウンロードを実行しない可能性があります。

一般には、次のように記述して、ユーザエージェント(ブラウザ)によるフォールバックを実現します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
window.jQuery || document.write(‘<script src="jquery-1.11.min.js"></script>’)
</script>

ユーザエージェントによってフォールバックを実現するためには、 wp_deregister_script および wp_dequeue_script 関数を使って標準の jQuery を完全に無効化し、 head 要素内などに直接 script 要素を記述します。

ただし、この処理を行ったとしても、プラグインによって jQuery が追加される可能性があります。 一般に、head 要素に直接スクリプトを記述することは WordPress では推奨されません。 wp_enqueue_script 関数は重複するスクリプトの読み込みを抑制しますが、head 要素に直接書かれたスクリプトは対処できません。

ユーザエージェントによって jQuery のフォールバックを実現するときは、プラグインなどの動作をすべて確認します。 使い方が限定された WordPress サイトを構築する場合などは導入を検討しても良いと思います。

ページのキャッシュによって起こる致命的な問題

WordPress が出力したページをキャッシュするような仕組み(プラグイン)を導入するとき、 現在は CDN にアクセスできないものの、ページをキャッシュした時点では CDN にアクセスできた、という状況が起きる可能性があります。 そのような状況になると、ユーザが jQuery をダウンロードする手段がなくなります。