もの凄く便利なCDNサービス「unpkg」の紹介です。

Webデベロッパーの人はCDN ( Content delivery network ) サービスを利用して
CSSやJavaScript、Webフォント等の静的ファイルを HTML上でURLを指定して取得する機会が多いと思います。

有名所のCDNサービスは Googleが提供している"Google Hosted Libraries"ですが、
使えるライブラリが 'jQuery', 'AngularJS'など、限られた物しか利用することが出来ません。

その他にも幾つかCDNサービスは展開されていますが、
使いたいライブラリが新しすぎたりすると ホスティングされてなかったりします。

" 試したいライブラリのREADMEファイルにCDNのURLが載っていない "

プロジェクトに導入する前に少し試したい

そんな時に便利なCDNサービスが「unpkg」です。
 

unpkgで出来ること

NPMに登録されている膨大なパッケージをCDNとして利用することが出来る
 

unpkgの使い方

unpkgの使い方は簡単で、'https://unpkg.com/パッケージ名/ファイル'という風に記述すれば、ファイルが取得できます。
また、パッケージ名の後に'@'を添えれば 取得したいバージョンも指定できます。

# 最新のバージョンを指定する場合 * 最新バージョンにリダイレクトされます
https://unpkg.com/パッケージ名/ファイル

# バージョンを指定する場合
https://unpkg.com/パッケージ名@バージョン/ファイル

# ディレクトリ構造がある場合
https://unpkg.com/パッケージ名@バージョン/ディレクトリ/ファイル


人気のCSSフレームワーク、Bootstrapを例に挙げると下記のようにするとライブラリが取得可能。
後は、HTMLタグのlinkタグならhref内にjsならsrc内にURLを指定すれば直ぐに使えます。
( * package.json内の "name" の値がパッケージ名になります )

# 最新のバージョンを指定する場合 * 執筆時点で3.3.7
https://unpkg.com/bootstrap/dist/css/bootstrap.min.css

# バージョンを指定する場合
https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css

* 取得したいバージョンやパッケージのファイル構造を調べたい時はGitHubのレポジトリページから調べたほうが良さそうです

webpack 等でbuildをしていたり、テンプレートエンジンを使っていてheadタグをパーシャルで分割、
そのような 安易にファイルやコードを追加出来ない環境時は、' loadjs ' と一緒に使うと便利そうです。

* 過去記事 : モダンWebブラウザをサポートした軽量なjs製ローダー「loadjs」

// Sweet Alertを使った例
loadjs([
      'https://unpkg.com/sweetalert@1.1.3/dist/sweetalert.css',
      'https://unpkg.com/sweetalert@1.1.3/dist/sweetalert.min.js'
      ], {
      success: function () {
        // sweet-alertの呼び出し
        swal('hello');
      }
});

 

Summary

以上がunpkgの紹介でした。

unpkgはnpmにホスティングされているパッケージを母体としているので、利用出来るコンテンツ数が多いのが魅力です。

本番環境での利用は推薦されていませんが、プロジェクトで使うか検討したい時、
codepen等のオンラインエディタで使用する時には 非常に役立つサービスです。

気になった人はゼヒ×2 チェックしてみてください!

本家サービスページ : UNPKG

 


Socialシェアボタン

スポンサーリンク