2/13に執り行なわれたYokohama.jsでしゃべらせて頂いたお題です。
資料等はjsdo.itにて公開していますが、ブログにも軽くまとめておきます。

ざっくりとした話はスライドで

要するに、Googleスプレッドシートで作ったデータを元に、
更新管理する仕組みをYahoo!Pipesを経由してやってみよう！という試みです。

メリット

1. CMSはわからないけどExcelはわかるよ！という方が幸せになる
2. 導入コスト/学習コストが安くて幸せ
3. 表計算UIの方が更新しやすいコンテンツで幸せになれる

特に、3番目。
tableを使って表現したい物などはWordpressやMovableTypeでは更新しづらいですね。
それならGoogleスプレッドシートのUIを利用して…と思った次第です。

デメリット

1. アウトプットがちょっと不安定
2. リアルタイム性に欠ける

恐らくPipes内のキャッシュの問題だと思うのですが、
外部リソースを更新してもすぐに反映されるわけではなく、数分のタイムラグがあるようです。

デモ＆ソースコード

GoogleDocs + Yahoo!Pipes – jsdo.it – Share JavaScript, HTML5 and CSS

かいつまんで説明など。
基本的にJSONPでYahooPipesの出力をとってきてるだけです。

$.ajax({
    url : pipeUrl,
    dataType : "jsonp",
    jsonp : "_callback", // "callback"じゃないよ！
    success : function( data ){ ... }
});

注意点としては、JSONP用のコールバックのパラメータが、
jQueryデフォルトの「callback」ではなく、「_callback」だという点。
successパラメータの関数の中身で、受け取ったデータを元にHTMLを生成します。

// アイテム数が0だった場合の処理
if( !data.count ){
    $("<p>").addClass("caution")
    .text("おや？Yahoo!Pipesさんの機嫌が悪いようです…")
    .hide().appendTo( container ).fadeIn();
    return;
}

successの中でこんな箇所がありますが、
Yahoo!Pipesさんは機嫌がわるいと空のデータを渡してきてくれるので、そんな時用の処理。
この不安定さはちょっと課題ですね…。

まとめ

スライドにもありますが、実際のところサーバサイドで処理すべき場面が多いと思います。
JavaScriptで書いたのは「Yokohama.js」のお題だったので。

Pipesさんの機嫌に左右されまくった実験でしたが、
この不安定さは書き方で改善出来るのだろうか…などと思案中です。

（リソースまとめ）

• プレゼンテーションスライド
• スプレッドシート
• パイプ
• DEMO(jsdo.it)