jQuery、migrate、easing に CDN を使って Webサイトを高速化!フォールバックも忘れずに!

CDN を利用することで、Webサイトの負荷を軽減し、Webサイトの表示高速化することができます。ここではフォールバックを考慮して jQuery、migrate、easing に CDN を使うためのサンプルコードを提示します。よろしければコピペしてご利用ください。なお、サンプルコードでは jQuery 1.10.2、migrate 1.2.1、easing 1.3 を読み込んでいます。

フォールバックを考慮して CDN を使うためのサンプルコード

さっそくサンプルコードを提示します。
jQuery、migrate、easing に CDN を使い、
万一 CDN でファイルが取得できない場合に、
自分のサーバから同ファイルを取得します。


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>window.jQuery.migrateWarnings || document.write('<script src="js/vendor/jquery-migrate-1.2.1.min.js"><\/script>')</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>window.jQuery.easing.def || document.write('<script src="js/vendor/jquery.easing.1.3.js"><\/script>')</script>

落ちないサーバは無い

コンテンツデリバリネットワーク
(CDN, Contents Delivery Network)
を活用することで Webサーバの負荷を軽減したり、
Webサイトの表示を高速化することができます。

ですから、Webサイトで使用する
jQuery、migrate、easing などに
CDN を利用している方も多いと思います。

Google だって Amazon だって落ちます。
ですから、CDN に障害が発生したときに備えて
フォールバックを考えておくと吉です。

jQuery の CDN と フォールバックの
サンプルコードは良く見かけるのですが、
migrate と easing ではあまり見かけないので
コピペできるようなサンプルコードを書きました。

時代にあわせて

サンプルコードでは以下を読み込んでいます。

  • jQuery 1.10.2
  • migrate 1.2.1
  • easing 1.3

これは時代にあわせてより適切なバージョンに変更してご利用ください。

急激に後方互換性をなくすと色々と不具合が目立ちます。
migrate を使うと jQuery に後方互換性を
持たせることができます。

また、jQuery Plugin や animate で
アニメーションを使用していれば easing
も多用されているのではないかと思います。

使用頻度の高そうな jQuery、migrate、easing の
3つについて、フォールバックを考慮して CDN を
使うためのサンプルコードをご紹介しました。
お役に立てば幸いです。

ところで

Apple は最新 OS を無料で配布するかわりに
それ以外のセキュリティアップデートを
静かに打ち切るようになっています。

Microsoft は Windows 7, 8.1 ユーザが (期間限定で)
Windows 10 に無料アップグレードできると発表しました。

IE は自動アップデートとなり、
そのセキュリティアップデートは 2016年1月12日以降、
各 OS における最新バージョンに限定されます。

最新の OS 上で最新のブラウザを使うことが標準とされ、
古いものをそのまま維持することの方が特別になりつつあります。

イントラネットを除くと、2017年には
IE 10 より古いブラウザの利用者は殆どいなくなります。
また、IE 11 からは ユーザエージェントの MSIE では判別できません。
IE (Internet Explorer) 11 は Trident/7. で判別する
ユーザエージェントから MSIE が消えた IE 11 の判別方法

IE 独特の振る舞いに対して、IE かそれ以外かで分岐がある場合、
これからの2年間で手直しをする必要があるかもしれませんのでお忘れなく。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*