Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
489
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

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

はじめに

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でアクセスする方法が便利そうです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
489
Help us understand the problem. What are the problem?