ちょっとしたHTMLはGitHub Gistに置いてbl.ocks.orgで表示するのがお手軽です

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

はじめに

JavaScriptを含んだHTMLを表示するのにGitHubでレポジトリを作ってGitHub Pagesを作るという手もありますが、ちょっとしたHTMLだと、わざわざレポジトリ作るのも面倒です。

FirefoxのBugzillaを見ていたら、984796 – SVG path getTotalLength returns large incorrect numberでたまたま見つけた bl.ocks.org - aboutが便利だったので紹介します。

使い方

  1. index.html というファイル名でGistを作成します。
  2. あとは、GistのURLの https://gist.github.comhttp://bl.ocks.org に置き換えてアクセスすれば表示されます。

bl.ocks.org - aboutに上げられている https://gist.github.com/mbostock/1353700 という例だと http://bl.ocks.org/mbostock/1353700 になります。

Gistのタイトルの下にHTMLの内容が表示されて、その下にHTMLのソースが表示されます。こんな感じです。

Epicyclic Gearing.png

タイトルやHTMLソースを表示せずにHTMLだけを表示するURLもあります

https://gist.github.com/mbostock/1353700 で"Open in a new window."のリンクをたどると別ウィンドウでHTMLだけが表示されます。

この例だと
http://bl.ocks.org/mbostock/raw/1353700/
というURLになります。

つまり、
http://bl.ocks.org/{{GitHubのアカウント}}/raw/{{GistのID}}
のURLにアクセスすればHTMLだけを表示できます。

この例のスクリーンショットです。

bl.ocks.org mbostock raw 1353700 .png

index.htmlに加えてJavaScriptファイルも利用可能

bl.ocks.org - aboutの説明によると、Gistにindex.html以外にファイルを追加してindex.htmlから相対パスで参照すれば利用可能とのことです。

block一覧のリンクとGistのリンク

http://bl.ocks.org/mbostock/raw/1353700/ のページ最下部の左に
mbostock’s block #1353700という表示があり、
アカウント名の部分がblock一覧へのリンク、Gist IDの部分がGistへのリンクになっています。

block一覧用のサムネイル画像

bl.ocks.org - aboutには説明がないのですが、mbostockさんのブロック一覧そのうち1つのGistを見ると thumbnail.png というファイル名でサムネイル画像を置いておけばブロック一覧で表示されるようです。

まとめ

ファイル数が多い場合はGitHubでレポジトリを作ってGitHub Pagesを作るほうが管理しやすいと思いますが、ファイル数が少ないちょっとしたサンプルなら、Gistに置いてbl.ocks.orgでアクセスする方法が便利そうです。