37signalsのWriteboardとGoogle Ajax Feed APIでブログにワンショットのWikiを設置する

加藤です。

ブログや通常のウェブサイトの中で1ページだけWikiが欲しくなる場面があります。例えば何かのリストをつくっていて、訪問してきた人に項目を追加してもらいたい時とか。

そんな時に気軽に使えるサービスとして、37signals の Writeboardがオススメなのですが、いちいちWriteboardのサイトに行かないと内容が見れないのはちょっと不便です。そこで、Google AJAX Feed API を使ってブログページに埋め込むようにしてみました。以下、その手順です。

まず、Writeboardのトップページで必要事項を入力してWikiページを作成します。必要事項は上から順に、ページのタイトル、パスワード、メールアドレスです。パスワードはあとで他の人に編集してもらう場合にも同じものを使うことになります。

入力内容を送信するとページの編集画面に移動して、すぐに編集を開始することができます。同時にページのURLやパスワードを含んだメールが自動送信されてくるので念のため保存しておくと良いでしょう。

Writeboardのテキストフォーマットは Textileです。例えば、リンク集をつくるのであれば、下のように書くことができます。

また、Writeboardで保存したページの内容はRSSフィードで取得することができます。このフィードのURLをあとで利用するので、ページの下部にあるRSSアイコンからリンクするURLを控えておいてください。

次に Google AJAX Feed APIのサインアップページでAPI keyを取得します。Google AJAX Feed APIは別ドメインのフィード情報を取得できるJavascriptのAPIです。サインアップに必要な情報は使用するサイトのURLだけなので、下の画面のように自分のブログのURLを入れて「Generate API Key」で送信します。

サインアップをおこなうと、次のページでAPI keyやサンプルコードが表示されますので、こちらも忘れずに控えておくようにしてください。

以上で準備が完了しました。Writeboardの内容を取り込みたいページ内で下のようなコードを記述すると、指定された箇所にRSSフィードから取得した本文が表示されるようになります。Javascriptコードを埋め込むので、ブログの本文内に追加する場合は、改行などが変換されないようHTMLで記述するモードを選択するようにしてください。

<script type="text/javascript" src="http://www.google.com/jsapi?key=所得したAPI key"></script>
<script type="text/javascript">
google.load("feeds", "1");

function initialize() {
    var now = "" + new Date().getTime();
    var feed = new google.feeds.Feed("WriteboardのRSSフィードのURL" + "?" + now.substring(0, now.length - 5));
    feed.load(function(result) {
        if (!result.error) {
            var container = document.getElementById("feed");
            var entry = result.feed.entries[0];
            container.innerHTML = entry.content;
        }
    });
}

google.setOnLoadCallback(initialize);
</script>


<h2>Wiki埋め込みサンプル</h2>

<div id="feed">ここがWriteboardの内容で書き換えられます</div>

フィードURLの後ろにパラメータを追加しているのは、Google AJAX Feed APIのキャッシュ期間が長いので、それを強制的にリフレッシュするためです。上の例では100秒ごとに更新されるようになります。

他の人にも編集してもらうには、そのWriteboardのURLとパスワードをページに記述しておくと良いでしょう。スパムやイタズラが不安な場合はメーリングリストで通知するとかしてください。また、万が一スクリプトを書き込まれても、Writeboardが実体参照に置き換えてくれるのでXSSなどは大丈夫なはずです（でも自己責任でお願いします）。

実際にページ内に埋め込んだサンプルをこの下に設置してみました。このWriteboardのURLはhttp://123.writeboard.com/fe51f623e166acfe3パスワードは""です。誰でも書き込めますので、よろしければお試しください。