GitHubを始める為に - その７.スニペットやライブラリの動作を試すなら jsbin

jsbin

前回までで以下３つのカテゴリに分けてGitHub関係の基礎的な事を学んできました。

• Git
• GitHub
• Gist

さて今回は少しGitHubの本筋とは逸れますが、前回の[その６.スニペットを管理しやすい GistBoxから引き続きスニペットの話題になります。

ネットや書籍で勉強していて得たスニペットをGistに保存する前に、どんな挙動をするプログラムなのか試してみたいですよね。

生のHTMLやCSS、JavaScriptならまだローカルで動かせそうなものですが、プリプロセッサで書かれたコードはそんなに簡単に試せません。そんな時に便利なWeb applicationのおはなしです。

jsbin

jsbinというサイトがあります。

主な仕様はFeature list - JS Bin Documentationに記載されているのですが、目立った特徴を以下にまとめます。

UI

以下のタブがあって、それぞれ表示/非表示が可能です。

• HTML
• JavaScript
• CSS
• Console
• Output

Live reload

このjsbinのサイト上のエディタでリアルタイムにコードの結果が反映されるだけでなく、ブログ等のサイトに貼られたシェア先でもコードを修正＆反映が即座に行えます。 これは、挙動理解にすごく良いですね。

Gist import

Gists: how to import a gist - JS Bin Documentation

Gistからのインポートも簡単です。
説明ページにも書いてある通り、GistのURLの一部を以下のように変更するだけです。

github -> jsbin

https://gist.github.com/remy/271333

↓

https://gist.jsbin.com/remy/271333

と、思ったのですが、実際に試してみると上手く行かず、

sadfsdfsafsdsdsadf

と表示されるのみ。

調べてみたら、同様の事象が起きていたみたいで、まだ解決してないのかな。。？

github.com

Gist export

Gists: how to export to a gist - JS Bin Documentation

Gistへのエクスポートは出来ました。

ここを選択して、

この様に匿名のGistが作成されるので、このままシェアするか、自分のGistに加えたければForkをしましょう。

Languages

利用できる言語は以下になります。