1. hnakamur

    Posted

    hnakamur
Changes in title
+ちょっとしたHTMLはGitHub Gistに置いてbl.ocks.orgで表示するのがお手軽です
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,48 @@
+# はじめに
+
+JavaScriptを含んだHTMLを表示するのにGitHubでレポジトリを作って[GitHub Pages]( https://pages.github.com/ )を作るという手もありますが、ちょっとしたHTMLだと、わざわざレポジトリ作るのも面倒です。
+
+FirefoxのBugzillaを見ていたら、[984796 – SVG path getTotalLength returns large incorrect number]( https://bugzilla.mozilla.org/show_bug.cgi?id=984796#c14 )でたまたま見つけた [bl.ocks.org - about]( http://bl.ocks.org/ )が便利だったので紹介します。
+
+# 使い方
+
+1. ```index.html``` というファイル名でGistを作成します。
+2. あとは、GistのURLの ```https://gist.github.com``` を ```http://bl.ocks.org``` に置き換えてアクセスすれば表示されます。
+
+[bl.ocks.org - about]( http://bl.ocks.org/ )に上げられている https://gist.github.com/mbostock/1353700 という例だと http://bl.ocks.org/mbostock/1353700 になります。
+
+Gistのタイトルの下にHTMLの内容が表示されて、その下にHTMLのソースが表示されます。こんな感じです。
+
+![Epicyclic Gearing.png](https://qiita-image-store.s3.amazonaws.com/0/3227/e677801c-cfe0-c0d7-7adb-1afb1549d02d.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](https://qiita-image-store.s3.amazonaws.com/0/3227/3b1dce4f-59bf-ea5b-1513-73fe45027d2a.png)
+
+## index.htmlに加えてJavaScriptファイルも利用可能
+
+[bl.ocks.org - about]( http://bl.ocks.org/ )の説明によると、Gistにindex.html以外にファイルを追加してindex.htmlから相対パスで参照すれば利用可能とのことです。
+
+## block一覧のリンクとGistのリンク
+
+http://bl.ocks.org/mbostock/raw/1353700/ のページ最下部の左に
+[mbostock](http://bl.ocks.org/mbostock)’s block [#1353700](https://gist.github.com/mbostock/1353700)という表示があり、
+アカウント名の部分がblock一覧へのリンク、Gist IDの部分がGistへのリンクになっています。
+
+## block一覧用のサムネイル画像
+
+[bl.ocks.org - about]( http://bl.ocks.org/ )には説明がないのですが、[mbostockさんのブロック一覧]( http://bl.ocks.org/mbostock )と[そのうち1つのGist]( https://gist.github.com/mbostock/c1c0426d50ca8a9f4c97 )を見ると ```thumbnail.png``` というファイル名でサムネイル画像を置いておけばブロック一覧で表示されるようです。
+# まとめ
+ファイル数が多い場合はGitHubでレポジトリを作って[GitHub Pages]( https://pages.github.com/ )を作るほうが管理しやすいと思いますが、ファイル数が少ないちょっとしたサンプルなら、Gistに置いてbl.ocks.orgでアクセスする方法が便利そうです。