Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
55
Help us understand the problem. What is going on with this article?
@takanorig

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

More than 1 year has passed since last update.

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
55
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
55
Help us understand the problem. What is going on with this article?