2010-08-17

twitter より (2010-08-16)

Powered by twtr2src.

2010-08-16

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

関連リンク

関連記事

twitter より (2010-08-15)

  • 16:49  Snow Leopard カーネルの 64 bit モードでの起動、最近じゃぜんぜん話題にならなくなった。先日届いた iMac (Mid 2010; Quad-Core Core i5) が 64 bit モードで起動することを確認した。もちろん差は体感できない。
  • 17:20  「真逆」って言葉、辞書に載ってないね。「まぎゃく」って読む、普通に皆が使う言葉だと思ってたよ。「真逆 読み」でググってみると、どうやらここ数年でわいて出た言葉らしい。言葉って生き物なんだ、と改めて感じるわ。
  • 21:48  Google が出した本、"The Datacenter as a Computer" PDF で読める。先日、出た「Googleクラウドの核心」はこれの翻訳のようだ。 → http://bit.ly/5gkHY9
Powered by twtr2src.

2010-08-15

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

前回、コードをブログに載せる際、Github のようなリポジトリに登録してしまうのが手っ取り早いんだろう、と書いた。けど、ちょっと大袈裟な感じがする、とも。ググってみたところ、ちょうどぴったりのサービスを見つけた。Github が提供する Gist だ。

試しに、前回の記事に載せたコードを登録してみた。それを Gist 経由で貼り付けると、こうなる(↓)。

行番号が付かないのがちょっと残念だが、名前の通ったプログラミング言語なら文法に合わせた色付けもしてくれる。コード自体(「view raw」リンク)を取ることもできるから、ブラウザからコピーしてフィルタにかける手間もいらない。

サービスの利用に必要なのは Github へのユーザ登録。他は何も必要ない。

Gist の使い方はとても簡単。Gist のページを開いたら(→)、テキストエリアにコードをペーストし、ファイル名を入力(「name this file...」)、言語を選択したら、右下の「Create Public Gist」ボタンを押す。

登録が完了したら個別のページが開くので、コードリストの右上にある「embed」というリンクをクリックする。HTML に埋め込むための script 要素が表示されるので、コピーしてブログの記事にペーストする。

外部スクリプトだから、表示する時に一瞬引っかかるけれど、そこはしかたがない。見た目(フォントとか)をこちらで制御できないのが気になるところか。

今どきは、探せば大抵のことには、サービスが見つかるもんだね。

関連リンク

関連記事

twitter より (2010-08-14)

Powered by twtr2src.