62
56

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-01-02

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
62
56
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
62
56

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?