背景

先日Qiitaに投稿されたちょっとしたHTMLはGitHub Gistに置いてbl.ocks.orgで表示するのがお手軽ですという記事をはてブ経由で知りました。
自分はもっと前からbl.ocks.orgを知っていましたが、結構なブクマが付いていたので驚きでした。（ホントは悔しかったｗ。内容は自分にとってもへーって感じですごいなぁ色々調べてるなぁと後からこっそり見て感じましたｗ）

ちょうどこれと同時期に@Phiさんがログイン不要! 気軽にプログラミングを始められるWebエディタ『runstant』作りましたを投稿されました。

初めは、この2つは自分の中ではリンクせず、むしろ、gistを使ったbl.ocks.orgだと、gistを編集してから反映されるまでのタイムラグが当時気になり、トライ＆エラーなスタイルでの開発に向かないから、runstant推しって感じでした。

gistをJSONPで取得できた

Gist外部埋め込みHTMLをJSONPで受け取るなる投稿を見つけました。

gistとrunstantが繋がった

そんな訳で、runstantはいつでもどこでも簡単に使えるので、gistの上げた、HTML,CSS,JavaScriptをrunstantで動かすツールを作ってみました。

成果物

色々と不具合ありそうなので、以下のGist経由で試して下さい。

• kjunichi / gist2runstant4Chrome.md

コマンドラインツールも鋭意作成中

近々、前述のツールを応用して、引数にgistのurl指定を実装したところですが、
現状は、ローカルファイルのrunstantでの実行のみです。

Atom.ioやEmacs,viなど好みのエディタでrunstantが使えるようになります。（runstantのコンセプトと合わない気も。。）

• kjunichi/runstant-cli

あとがき

それにしても、CSSは未だに自由に扱えません。まぁ、JavaScriptが自由に扱えたりするわけでもありませんが。

gist2runstantはFirefox上で主に開発して当初はXPathでJSONPで取得したJSONからコードを取り出そうとしていたのですが、Chromeでは、XPathで取得する箇所でエラーになり、これに対応するために、正規表現で取得するようにしてます。なので、Firefoxでも動きます。

関連記事

• JSONPでGitHubのGistからHTMLやJavaScriptのコードを取り出した