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 のページへのリンクが見えるはず。

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

(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 を使って記事にコードを埋め込む