[JS]ウェブページにGitHubのリポジトリを簡単に埋め込めるスクリプト -Repo.js

ほんの一行のスクリプトを記述するだけで、GitHubのリポジトリをあなたのウェブページに埋め込めるjQueryのプラグインを紹介します。

Repo.js -GitHub

[ad#ad-2]

• Repo.jsのデモ
• Repo.jsの使い方

Repo.jsのデモ

デモでは3つ埋め込んだものがあります。

Rope.js: Basic Embed

リストの各項目をクリックすると、GitHubと同様にスライドします。

Rope.js: Basic Embed

[ad#ad-2]

GitHubは自分のものだけでなく、別のuserを指定することもできます。
下記は、html5-boilerplateです。

Rope.js: Basic Embed (with a hawt repo)

Repo.jsの使い方

実装は3ステップです。

Step 1: 外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="repo.min.js"></script>

Step 2: HTML

GitHubのリポジトリを配置する領域をdiv要素で記述します。

<div id="repo"></div>

Step 3: JavaScript

jQueryのセレクタで指定し、GitHubのuserとnameを指定します。

<script>
jQuery(function($){
	$('#repo').repo({ user: 'darcyclarke', name: 'Repo.js' });
});
</script>

ブランチを指定することもできます。

<script>
jQuery(function($){
	$('body').repo({ user: 'jquery', name: 'jquery', branch: 'strip_iife' });
});
</script>