Loading [MathJax]/extensions/MathZoom.js

September 7, 2012

BloggerでGistのファイルをAPIで取得して表示させる

bl.ocks.org - mbostockみたいにGistにあるhtmlファイルを記事中に表示させたい.

Gists | GitHub APIを利用します.要jQuery.

例ではgist: 3347397のdescriptionをh1#120907_descriptionに,hello.htmlをiframe#120907_hello_htmlに表示させます.

foobar




以下をHTML編集モードで記述.


<h1 id="gist_120907_description" style="font-weight:300;">Loading...</h1>
<iframe id="gist_120907_hello_html" marginwidth="0" marginheight="0" scrolling="no" style="border:solid 1px #ccc; display:inline; margin:0px; position:static; width:400px; height:300px;"></iframe>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var id = '3347397';
var filename = 'hello.html';
$.ajax({
type: 'GET',
url: 'https://api.github.com/gists/' + id + '?callback=?',
dataType: 'jsonp',
success: function(data) {
var json = data.data;
$('#gist_120907_description').text(json["description"]);
$('#gist_120907_hello_html').attr('srcdoc', json["files"][filename]["content"]);
}
});
});
</script>


セキュリティに気を付けて…