code up

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScriptとCSSのCDN

CDNとは、『Contents Delivery Network』の略で、本来は画像・動画などの変更の少ないコンテンツを都度自社のサーバーからダウンロードさせるのではなく、キャッシュサーバーでキャッシュし、しかもユーザーに近い位置のキャッシュサーバーにアクセスするようにすることで通信負荷を軽減させるためのネットワークを指す。

そういった目的として有名なところではakamaiなどが昔から企業のWebサイトでも利用されている。

ただ、akamaiのせいでサイトが重く感じることもある。というのはCDNに速度向上という過度な期待は禁物で速度に限って言えば、ページ構成によっては、DNSへのLookupで遅く感じたり、Keep-Aliveがある元サーバーの方が早かったりする。CDNとは、あくまで自分のサーバーへの負荷を軽減しページ表示に関わるボトルネックを分散する、ということが主たる目的である。

と話がそれたが、今回はYahoo! CDN, Google CDNによるcssおよびjavascriptの配置についての話題。

Webサイトを構築する際、jQueryやYUI3などをダウンロードしてプロジェクトに配置するのではなく、CDNにあるコンテンツの参照を追加すれば、プロジェクトに配置(ダウンロード・保存)する手間も省け、デプロイするアプリケーションのサイズも若干減ることとなる(超微量)。ユーザーのリクエストもそれらのURLについてはCDNのサーバーを参照しにいくため、自分のサーバーへの負荷が軽減する。

JavaScriptというとクロスドメインの問題があるが、クロスドメインの問題はJavaScriptをダウンロードしたサーバーではなく(よくこのような説明があるが)、そのJavaScriptを読み込んでいるXHTMLやHTMLをダウンロードしたサーバーとの通信のみにAjax通信が制限されるというものである。従って、自分のサーバーとだけ通信するのであれば、CDNによってクロスドメイン問題が引き起こされるという心配はない。

* もちろん他サーバーへの通信は制限されているため(自分のサーバーのJavaScriptを読み込んだ時と同様)、他サーバーにリクエストを送りたい場合は、サーバーサイドでバイパスしたりJSONPなどを使って対処する必要がある。

私がよく参照しているCDNを紹介する。

CSS

YUI CSS Components (YUIのダウンロード(この記事の時点の最新版: 3.4.1 2011/09/27))

YUIとはYahoo! User Inerface Libraryの略で、Yahoo!が提供するJavaScriptとCSSのライブラリ集(BSDライセンス)。

私はJavaScriptは使わず、CSSのみいつも拝借している。

YUIをCDN経由で利用する場合、Google CDNYahoo! CDNのふたつの選択肢があり、それぞれ一長一短あるが、大きな違いはSSLのサポートの有無である。仕事ではSSLサイトを扱うことも多いためGoogle CDNを使っているが、このブログではYahoo! CDNを利用している(理由はGoogle CDNは最新版ではないため)。

Google CDN
  • SSLをサポートしている
  • バージョン省略URLがある
    https://ajax.googleapis.com/ajax/libs/yui/3/build/cssreset/reset.css → 3系の最新版を表示(Googleが3.4.1をホスティングするようになったら、3.4.1が表示)
    https://ajax.googleapis.com/ajax/libs/yui/3.3/build/cssreset/reset.css → 3.3系の最新版を表示(Googleが3.4.1をホスティングしても3.3.xの最新版が表示)
  • バージョンが古い(最新が3.4.1なのに対して、ホスティングされてるのは3.3.0)
  • CSS合成サービスが利用できない
Yahoo! CDN

YUI CSS - Google CDN

YUI CSS - Yahoo! CDN

* YUI Configuratorで作成

* -context系のcssは、yui3-cssreset等限られたclass以下で適用されるようにするためのものである。全体に適用されても構わなければ、-contextが付いていないものを利用する。

* 読み込む順番について明記されていないが、cssreset/cssfonts/cssbase/cssgridsとした。(resetとfontsが基礎的なCSSで、baseとgridsは補助的なCSSなため)

JavaScript

JavaScriptについては、jQueryをメインで利用している、というかそれ以外はほとんど知らない。jQueryはGoogle CDNで参照できる他、Microsoftも利用できる(詳しくはCDN Catalogを参照)。

jQuery CDNにもホスティングされているので、こちらを利用することもできる。(jQuery CDNYahoo! CDNと同様SSLサポートなし、バージョン省略URL非対応)

このブログではGoogle CDNを参照している。

jQuery - Google CDN

* バージョン省略の機能を使っているので、この記事の時点では1.7.1をダウンロードすることになる。

jQuery UI - Google CDN

テーマ毎のCSS

上記baseテーマの他、black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vaderを指定することが可能(1.8.16現在)。

jQueryやjQuery UIの最新のテーマやバージョンについてはjQuery CDNで確認することができる。

関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。