jsFiddleとGitHubを連携する : JavaScript

Tweet

Pocket

GitHubリポジトリをjsFiddleで表示するメモ。

下記にMooToolsを使う説明がある。
» Display Demo from GitHub Repository

本記事はjQueryを使う場合を書く。

GitHub

GitHubに下記のファイル構成でリポジトリを作成する。

example
  |-- Demo
  |    |-- demo.html
  |    |-- demo.js
  |    |-- demo.css
  | 
  |-- README

ファイル名はdemo.html/js/cssにする。ファイル名が異なるとうまく表示できない。

gitのDemoディレクトリのURL
https://github.com/ユーザー名/example/tree/master/Demo

jsFiddleの処理

作成したGitHubのファイルの実行は新規のjsFiddle画面でフレームワークを選択し下記のようなアドレスを直接入力する。

http://jsfiddle.net/gh/get/{framework}/{version}/{github_tree}/

jQuery 1.7.1を使う場合。

http://jsfiddle.net/gh/get/jquery/1.7.1/{github_tree}/

github_treeはDemoディレクトリのURLからhttps://github.com/を除いたもの。

jQuery 1.7.1を使った場合の流れ

1. jsFiddleの新規画面を開く
2. Choose FramewordでjQuery 1.7.1を選択
3. アドレスバーに下記のURLを直接入力
   http://jsfiddle.net/gh/get/jquery/1.7.1/ユーザー名/example/tree/master/Demo/

スクリプトはno wrap(head)で実行される。jsファイルでDOM構築後に実行するようにする。

jQuery(function($) {
    // 処理
});