Mach3.laBlog

GoogleスプレッドシートとYahooPipesで簡易CMSを作る

この記事は賞味期限切れです。(更新から1年が経過しています)

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

GoogleスプレッドシートとYahooPipesで簡易CMSを作る

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

要するに、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;
}

まとめ

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

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


(リソースまとめ)

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

スプレッドシートでサイトを更新してみるよ « OhayoThanksd41d8cd98f00b204e9800998ecf8427e