@ PHP

Google Hosted Librariesを利用する

Google にホストされているライブラリから jQuery ファイルを読み込む方法を紹介します。

Google Hosted Libraries とは

Google Hosted Libraries では、さまざまなライブラリ(jQuery、jQuery UI、MooTools、Prototypeなど)を手早く簡単に利用できるようにライブラリファイルをホスティングしています。

Google Hosted Libraries を利用すれば、1行のコードでライブラリを読み込めます。

このような仕組みを、CDN といいます。CDN とは「Contents Delivery Network(コンテンツデリバリネットワーク)」または「Contents Distribution Network(コンテンツディストリビューションネットワーク)」のことで、コンテンツを配信するために最適化されたネットワークを指します。

jQuery を利用できる CDN は、Google、MicrosoftjQueryCDNJS、の4つがあります。

Google Hosted Libraries から jQuery ファイルを読み込む場合は、つぎのように記述します。

load_google.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<link rel="stylesheet" href="css/styles.css" />
</head>

<body>
  <h1>jQueryファイルの読み込み</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>

</html>


CDNを利用するメリット

  • 高性能なサーバ側での圧縮転送(gzip)機能に対応し、高速化が期待できる
  • 同じ URL からファイルを取得していれば、ユーザーのキャッシュ効果が期待できる
  • 自サーバに jQuery を置く必要がない

CDNを利用するデメリット

  • インターネットに繋がっていないローカル環境では使えない
  • CDN がなんらかのトラブルが起こった時使えない

CDNから読み込めない場合の代替手段(フォールバック)

CDN サービスが故障したり、なんらかのトラブルで使えなくなった時の代替手段を用意しておく場合にはつぎのように記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/3.1.1/jquery.min.js"><\/script>')
</script>