Gist を使って記事にコードを埋め込む (続き)

今日気付いたことだが、前回書いた Gist を利用する方法には少し問題があった。

この方法ではコードを表示するために script 要素を使う。以下のようなタグとして記事の HTML 中に埋まることになる。

(Gist を使ったコードの埋め込み用 script タグ)
<script src="http://gist.github.com/524290.js?file=embed_code.rb"></script>

Safari などのブラウザで見る限り、これで問題はないが、RSS リーダーでは問題になる。実際、Google Reader で前回の記事を見ていて、Gist からの埋め込みコードが表示されないことに気付いたのだ。Safari で RSS フィードを表示させた場合や JavaScript を無効にした状態も同様。試してはいないが、JavaScript をサポートしないブラウザも同じはず。

外部サービスを利用する以上、そして JavaScript を使う以上、これは避けられない問題だ。便利さを求めると、何かを犠牲にしなければならない。

とはいえ、何も表示されないのはイヤな感じなので、せめて Gist の該当コードのページへのリンクを noscript を使って表示させてみることを考えた。試してみたところ、Google Reader では noscript 部分が表示された。iPhone アプリの「MobileRSS Free」でも OK。Safari で JavaScript を無効にした場合も noscript 部分の内容が表示される。ただし、Safari に RSS フィードを表示させた場合はダメだった。noscript が無視される。RSS リーダーによっては noscript を無視するものもあるってことだ。

以下が noscript を付けたサンプル。JavaScript が有効なブラウザなら Gist からのコードの表示が、無効あるいはサポートなしのブラウザなら Gist のページへのリンクが見えるはず。

	require 'cgi'
	source = ARGV.shift
	exit if ! source
	def header(name)
	h = '<pre class="code"><code>' + "(#{File.basename(name)})"
	puts h
	end
	def footer
	puts '</code></pre>'
	end
	def scale(n)
	Math::log10(n).floor + 1
	end
	count = 1
	lines = IO.readlines(source)
	format = "%#{scale(lines.length)}d"
	header(source)
	lines.each do |code|
	code = CGI::escapeHTML(code.chomp)
	numbering = format % count
	STDOUT.puts "#{numbering}: #{code}"
	count += 1
	end
	footer

view raw embed_code.rb hosted with ❤ by GitHub

具体的には、以下のように記述してある。

(Gist を使ったコードの埋め込み用 script タグ、noscript 付き)
<script src="http://gist.github.com/524290.js?file=embed_code.rb"></script>
<noscript><div>→ <a href="http://gist.github.com/524290">embed_code.rb</a></div></noscript>

noscript 部分を手で書くことになり少し手間が増えるが、それでもコードそのものを整形して埋め込むよりは簡単だ。

関連リンク

• Gist (Github)
• noscript要素 XHTML HTML辞典 (World Wide Web Guide)
• Google Reader
(Google)
• MobileRSS Free (App Store へのリンク)

関連記事

• Gist を使って記事にコードを埋め込む