もの凄く便利な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」です。
・ NPMに登録されている膨大なパッケージをCDNとして利用することが出来る
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
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');
}
});
以上がunpkgの紹介でした。
unpkgはnpmにホスティングされているパッケージを母体としているので、利用出来るコンテンツ数が多いのが魅力です。
本番環境での利用は推薦されていませんが、プロジェクトで使うか検討したい時、
codepen等のオンラインエディタで使用する時には 非常に役立つサービスです。
気になった人はゼヒ×2 チェックしてみてください！
本家サービスページ : UNPKG
