tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>＼(＾o＾)／

githubのjavascriptやcssをrawgit使ってCDN経由ぽく読み込んで使ってみるテスト for jsfiddle

javascript css github jsFiddle

はじめに

ちょっとしたwebアプリやjsfiddleでのjsやcssの外部ファイル読み込みに
githubにあげたjsとかをそのまま使いたいときの方法メモです

  • こんなイメージ
<body>
<h1>あいうえお</h1>
<script src="http://githubにあげたjavascriptファイル.js"></script>
</body>

注意

あくまでもお試しでCDNっぽく使うだけに留めましょう！
本番とかで使ってはダメ！

ながれ

わかりやすいしココに載せやすいのでjsfiddleで使う場合を想定

  1. githubにリポジトリ作る(jsやcssの)
  2. RawGit使ってURL
  3. jsfiddleで使ってみる

1. 適当にjsやcss作ってgithubにあげる

これは単純にあげるだけなのでリンク集的に書いて終わりにします

githubについて＆登録とか
github使う

そしてgithubにあげたサンプルがこちら
https://github.com/tweeeety/rawgit-sample

こちらに置いた
sample.jsをscriptタグで読み込めるようにしてみます

2. RawGit開いてURL変換

RawGitとは

githubやgistファイルにおいてあるrawsorceのContext-Typeを適切な形に変換して配信できるヤツ
※説明がつたなくすみません汗

肝心のサイトはこちらです
→RawGit

オペレーションとしてはgithubからです

github

f:id:tweeeety:20140813200024p:plain

  • ファイルを選択

f:id:tweeeety:20140813200031p:plain

  • URLをコピー

f:id:tweeeety:20140813200037p:plain

RawGit
  • RawGitを開く

http://rawgit.com/
Paste a GitHub raw file or gist URL hereにコピーしたURLを貼り付け

f:id:tweeeety:20140813200047p:plain

  • DevelopmentのURLを使う
    ↑で貼り付けるとDevelopmentにCDN URL的なのが生成されるのでそのURLを使います

f:id:tweeeety:20140813200053p:plain

3. jsfiddleで使ってみる

jsfiddleについての詳しい説明ははぶきます

使ってみた結果

そしてやってみた結果はこれ
HTMLタブを見るとscriptタグで追加しているのがわかるかと思います

External Resourcesに追加する場合
  • External Resources開いて、RawGitでできたCDN URLを貼り付けて＋で追加

f:id:tweeeety:20140813200057p:plain

まとめ

ちょっと試すくらいには良さそうですね！＼(＾o＾)／