GistのHTMLを直接表示する方法

  • 13
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

ちょっとしたコードをシェアするのにGistは便利ですが、HTMLとしてそのままブラウザに表示したり、JSONとして利用するには少々難があります。レスポンスヘッダのContent-Typetext/plain固定なので、Rawデータにアクセスしてもソース表示に。(↓スクリーンショット)

Screenshot

Gistを中継するサービス

HTMLの共有ではjsfiddle.netjsdo.itが人気ですが、HEAD要素内の変更ができず、モバイル向けのサンプル表示には向きません。例えば、<meta name="viewport" content="user-scalable=no">とかが出来ません。なんとかならないかなと思っていたところ、良さそうなサービスが2つほどありました。どちらも機能はだいたい同じです。

raw.githack.com.png

githackの使い方

githackを例に説明すると、特定のGistのURLについてドメイン部分をgithubusercontentからgithackに書き換えるだけです。拡張子に従って適切なContent-Typeで送出してくれます。

https://gist.githubusercontent.com/cognitom/xxxx/raw/yyyy/index.html
https://gist.githack.com/cognitom/xxxx/raw/yyyy/index.html

一応、まとめておきます。こんな感じ(↓)ですね。

アクセス先 見え方 Content-Type
Gistのパーマリンク 普段のGistのページ n/a
GistのRawデータ ソース表示 text/plain
githack経由 Web表示 text/html

というわけで、無事、ブラウザで表示できました。

Screenshot

Gistのほか、GitHub, Bitbucketに対応しているのも嬉しいところです。

githackの仕組み

ちなみに、このgithackですが、サービスのソースコードがGitHubで公開されています。といっても、中身はnginx.confproxy.confだけ。要はnginxそのもの転送サービスですね。