だいぶ前の話になってしまいましたが、以前にご紹介したコードなにがしが API を公開しました。これがなかなか至れり尽くせりで、コメントなども取得できる上に JSONP によるアクセスもサポートしています。これなら iGoogle に頼らずに JavaScript だけで投稿したソースなどの情報が取得できます。そこで、このコードなにがし API を利用した JavaScript ウィジェットを作ってみました。前述の記事中で公開した iGoogle ガジェットよりも高機能になっていますので、ぜひともご利用ください。

なにはともあれ、以下に実際のウィジェットを貼り付けておきます。

ほとんど見たまんまですが、特徴としては以下のような感じです。

• CGI などが不要で、Web ページにわずかな記述を追加するだけで利用できる。
• ソースコードだけでなく、詳細情報やコメント（最初の 10 件）も表示可能。
• それぞれの情報はタブで切り替えるので、場所をとらない。
• フォントやリンクのスタイルを親要素から引き継ぐ（カスタマイズも可能）。
• ソースの行数に合わせてウィジェットの高さが自動リサイズされる（サイズの固定も可能）。
• google-code-prettify による色分け表示に対応。
• このウィジェットをベースにした iGoogle ガジェットも用意。

以前の iGoogle ガジェットと比べて、 API を利用したことで表示できる情報が豊富になったこと、 IFRAME を使わないので表示スタイルなどをだいぶ自由にカスタマイズできることなどが主な利点ですね。

それでは、ウィジェットの使い方をご紹介します。なにげにいろいろと機能があるので、最初にウィジェットを表示するための最小限のコードを挙げて、その後に色分けや細かいカスタマイズの方法を見ていこうと思います。お付き合いくださいませ m(_ _)m

ということで、早速ウィジェットを Web ページに表示してみましょう。まずはウィジェットの JavaScript ファイルをページに読み込まなくてはなりません。 JavaScript ファイルは以下のリンクからダウンロードできます。

codenanigac.js (jsjuicer による圧縮版)
codenanigac-debug.js (非圧縮版)

上記どちらかのファイルをご自分の Web サーバーの適切な場所にアップロードし、以下のコードをページ内に記述してスクリプトを読み込みます（パスは適切に変更してください）。可能なら HEAD 内に記述するのが無難ですが、ウィジェットの表示位置より前であればどこでも大丈夫です。

<script type="text/javascript" src="codenanigac.js" charset="UTF-8"></script>

あとは、ウィジェットを表示したい場所で以下のように WebOSGoodies.CodeNanigaC.write メソッドを呼び出してください。

<script type="text/javascript">
  WebOSGoodies.CodeNanigaC.write(143);
</script>

引数は表示するソースコードの ID です。コードなにがしのページの以下の部分に表示されています。

まだ色分けなどが行われませんが、それ以外はだいたい問題なく表示されると思います。ただし、ページの文字コードが UTF-8 以外の場合は一部が文字化けする場合があるようです。その場合は、 codenanigac.js の文字コードをページに合わせて変更してください。 charset 属性を指定すれば良いだけの話でした（＾＾ゞ

ソースなどを表示するフォントや行間などは基本的に親要素の設定を引き継ぎます。したがって、たいていの場合はそのままでも違和感が出ることは少ないと思います。もしウィジェット内の表示を親要素とは違うものにしたい場合には、以下のように DIV でラップしてスタイルを変更すれば OK です。

<div style="font-size:12px; line-height:1.5;">
  <script type="text/javascript">
    WebOSGoodies.CodeNanigaC.write(143);
  </script>
</div>

詳細表示内のリンクなどのスタイルも親要素から引き継いでいます。これらを変更する場合は、外側の DIV に適当なクラスを設定して、スタイル指定すれば良いでしょう。

<style type="text/css">
  .codenanigac a { text-decoration: none; }
</style>
<div class="codenanigac">
  <script type="text/javascript">
    WebOSGoodies.CodeNanigaC.write(143);
  </script>
</div>

ただし、一部のフォントは都合により固定となっています。 !important 付きでスタイル指定することで無理やり変えることもできますが、いろいろと副作用があってお勧めできません（＾＾ゞ 必要に応じてご要望をいただければ、方法を考えます。

WebOSGoodies.CodeNanigaC.write メソッドの第 2 引数にはオブジェクトを指定でき、いくつかの設定変更が行えるようになっています。例えば、「詳細」と「コメント」タブを表示したくない場合は、以下のように呼び出せば OK です。

<script type="text/javascript">
  WebOSGoodies.CodeNanigaC.write(143, { showInfo:false, showComments:false });
</script>

こうすると、ソースコードのみの表示になり、タブも省略されます。その他、指定できるオプションには以下のものがあります。

*1 ウィジェット全体ではなく、タブの内容部分の高さになります。

これら以外にも変更したい項目などがありましたら、ご要望をいただければと思います。

ウィジェット内に表示されるソースコードは google-code-prettify を使って色分け表示できます。ただし iGoogle ガジェットと違ってライブラリを内包してはいませんので、別々に読み込む必要があります。以下、具体的な方法をご紹介します。

まずは google-code-prettify のダウンロードページからライブラリを取得します。通常は圧縮版 (prettify-small_日付.zip) ・非圧縮版 (prettify_日付.zip) のどちらでも使えるはずですが、圧縮版は場合によって機能しないことがあるようです（というか、このページでは動きませんでした ＾＾；）。非圧縮版を各自で圧縮して使うのが無難かもしれません。いずれにせよ、 .zip を展開して得られる "prettify.js" と "prettify.css" をご自分の Web サーバーにアップロードしておいてください。

次に、 HTML ページの HEAD 内に以下のように記述して、上記の 2 ファイルを読み込みます（パスは適切に変更してください）。

<style type="text/css" src="prettify.css"></style>
<script type="text/javascript" src="prettify.js"></script>

もし HEAD 内を変更できない場合は、以下のようにして BODY 内で読み込むことも可能です。

<style type="text/css">@import url("prettify.css");</style>
<script type="text/javascript" src="prettify.js"></script>

そして、 onload イベントで prettyPrint() 関数を呼び出せば色分けが行われるはずです。最も簡単な方法は、ページ内の適当な場所に以下の記述を挿入することです。

<script type="text/javascript">
  window.onload = function() { prettyPrint(); };
</script>

なお、 IE で色分け表示を行うと、ソース中の空行が削除されてしまうという不具合があります。これは IE の innerHTML のバグ（仕様？）によるもので、私の知る限り回避方法がありません。この不具合が気になる場合は、コンディショナルコメントで IE のときのみ色分けを抑制すると良いと思います。

<![if !IE]>
  <script type="text/javascript">
    window.onload = function() { prettyPrint(); };
  </script>
<![endif]>

記事先頭にあるウィジェットはあえて IE を弾いていませんので、 IE で色分けした際の表示をご確認いただけます。一見すると違いがわかりませんが、 Opera や Firefox の表示と比べると、ところどころで空行が抜けているはずです。

コードなにがしウィジェットの使い方は以上なのですが、ちょっと面倒ですかね（＾＾ゞ もっと簡単に貼り付けたいという方のために、 iGoogle ガジェットも用意しました。設定項目はかなりシンプルになっており、色分け表示も含めて簡単に利用できます（前述の理由により、 IE では色分けは機能しません）。

利用方法は、以下のリンク先のページで取得できる HTML コードを Web ページに貼り付けるだけです。

http://gmodules.com/ig/creator?synd=open&url=...

設定項目は基本的に前述のカスタマイズ項目のサブセットですので、とくに説明の必要はないと思います。ちょっとした Tips ですが、取得した HTML コードの "w=???" のパラメータを "w=auto" に変更すると、ガジェットの横幅が親要素の幅いっぱいにフィットします。覚えておくと便利ですよ。

なお、コードなにがしの紹介記事に掲載したガジェットとは完全に別物となっており、自動的に更新されるわけではありません。 API の制限で古いリビジョンのソースが取得できず、完全な上位互換がとれないためにこのような仕様となりました。ご了承くださいませ。

コードなにがしウィジェット（および iGoogle ガジェット）に関するご意見・ご要望・バグ報告には、以下の Google グループをご利用ください。 Google アカウントがあれば Web 上から投稿できますし、アカウントがなくてもメールで投稿できます。お気軽にどうぞ。

WebOS Goodiesに参加

メール アドレス:

このグループにアクセス

以上、本日はコードなにがしに投稿したソースコードを表示する Web ウィジェットをご紹介しました。コードなにがしには履歴管理機能などもあって、コードスニペットの管理には非常に便利です。 blog などにソースコードを掲載する際には、ウィジェットともどもぜひご活用ください！