用途
新着
履歴
言語

  • GoogleAppsScript
  • Git

CDNの使用例

CDNの使用例
CDNの使用例
CDNを使うときのコードのサンプルを紹介します。

CDNとはContent Delivery Network略で、簡単に言うとユーザのブラウザにいち早くコンテンツを届くよう準備してくれるネットワークのこと。

何がいいかというとみんながよく使う共通ライブラリなどをあらかじめホスティングしてくれているサービスなどがあって、その恩恵を受けることができる。

例えば、jQueryなどJacaScriptのライブラリだが、Googleさんがサーバにおいてくれており、以下のように読み込むことができる。

Google

いろんなバージョンが完備されていて以下のように設置することが可能。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

ほかにもデータを図形にする3D.jsなどもおいてある。

詳しくはこちら

UNPKG

最近よく見かけるUNPKGもCDNの一つで、npmのいろんなファイルを配信してくれる。

こちらもjQueryがおいてあり、「常に最新版」の取得も可能。

常に最新版
<script src="https://unpkg.com/jquery"></script>

バージョンを指定
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>

UNPKGはreactも配信しているが特徴。

開発モード
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

製品モード
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

unpkg.comについて、詳しくはこちら

cdnjs

cdnjsにもjQueryはもちろん、3000以上のライブラリがおいてある。

babel.jsなど専門的なものもおいてあるのが特徴。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>

cdnjsについて、詳しくはこちら


補足情報だが、scriptタグのcrossorigin属性について調べてみた。

別のドメインを使用するサイトに静的メディアへのエラーログ出力ができるようにするとのこと。

window.onerror = function (message, file, line, col, error) {
  return true;
};

このような記述をすることで、アプリケーション全体のエラーを検知することができるらしい。

今度実行して記事化したいと思います。

2019-07-31 07:51:15
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2019 kipure
Top