Edited at

GitHub上のファイルをCDNとして参照する


RawGitは、2019年10月に、サービスを終了するとのことです。

https://rawgit.com/


RawGit is now in a sunset phase and will soon shut down. It's been a fun five years, but all things must end.

GitHub repositories that served content through RawGit within the last month will continue to be served until at least October of 2019. URLs for other repositories are no longer being served.

If you're currently using RawGit, please stop using it as soon as you can.




はじめに

サンプルを作成するのに、JavaScriptのライブラリをダウンロードしたり、Bowerなどを利用してインストールしたり、というのは、多少面倒さを感じるところだ。

サンプルぐらいであれば、CDN(Content Delivery Network)を利用して参照したい。


  • CDNとは?


    • Content Delivery Network のことで、ファイルなどのWebコンテンツを配信するために最適化されたネットワークのこと。有名なライブラリだと、インターネットで公開されており、JavaScrptやCSSファイルをダウンロードしなくても、読み込むだけで利用できるようになっていたたりする。

    • jQueryだと、以下のように記述するヤツ。



  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

しかしながら、GitHub上のファイルは、インターネットで公開されていても、テキストとして読み込まれるため、直接URLを指定してもJavaScriptやCSSとしては利用できない。


GitHub上のファイルをCDN化するサービス『RawGit』

RawGit』というサービスを利用すると、GitHub上のファイルのURLを指定するだけで、CDN化してくれる。

rawgit.png

例えば、Canvasを利用するグラフィックライブラリのPaper.jsを指定すると、以下のようになる。

対象
URL

GitHub上のファイル
https://github.com/paperjs/paper.js/blob/develop/dist/paper-full.min.js

RawGit(dev/testing)
https://rawgit.com/paperjs/paper.js/develop/dist/paper-full.min.js

RawGit(production)
https://cdn.rawgit.com/paperjs/paper.js/develop/dist/paper-full.min.js

最近、JavaScriptでサンプル実装する場合は、もっぱらRawGitを利用するようになった。

プロダクション環境に利用するかどうかは利用者の判断に依るところだと思うが、サンプルレベルであれば、HTMLファイル単体で公開もできるようにもなるので、非常に便利ではなかろうか。


その他のCDNサービス

数百のライブラリが、CDNで利用できるように登録されている。

比較メジャーなライブラリであれば、こちらで公開されている可能性が高い。


  1. jsDelivr

  2. cdnjs.com