Mach3.laBlog

GoogleスプレッドシートをJSONPで利用する（前編）

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

以前Yahoo! pipesで似たような事をやりましたが、
どうやらGoogleスプレッドシートそのものがJSON出力に対応していたので、
それをJSから利用してみようという試みです。

GoogleスプレッドシートをJSONPで利用する（前編）

  1. URLの取得
  2. 「リスト」と「セル」
  3. JSONPしてみる
  4. どんな時に使えそうか
  5. デメリットなど
  6. 後半へ

URLの取得

現在の「新しいスプレッドシート」では「公開データのリンクを取得」のUIがありませんが、APIは一応整備されていてJSONPでも利用できます。
URL: https://spreadsheets.google.com/feeds/list/[A]/[B]/public/basic?alt=json
[A]にはスプレッドシートID、[B]にはワークシートIDが入ります。

まずは対象となるスプレッドシートをJSONで出力する事からスタート。
現時点でJSONは選択肢には出てこないので、ちょっと自分で書き換える必要があります。

  1. 「ファイル」→「ウェブに一般公開」→「公開開始」で公開する。
  2. 「公開データへのリンクを取得 」で「RSS」を選択する。
  3. 末尾の「alt=rss」を「alt=json」に変更してコピー。

コピーしたらアドレスバーに入力して内容をチェックしてみましょう。

「リスト」と「セル」

「リスト」と「セル」

「公開データへのリンクを取得」では、「リスト」と「セル」というラジオボタンがありますが、
これはデータ出力の方法を設定する物です。

「リスト」
データの1カラム目をタイトルとし、行を一つのコンテンツとして出力。
「セル」
内容を含むセルを全て順番に出力していきます。

例

例えば、次のようなテーブルの場合。

id name content
1 hoge this is hoge

「リスト」の場合は次のように出力されます。
行ごとに「entry」がある感じですね。

{
    "version": "1.0",
    "encoding": "UTF-8",
    ...
    "feed": {
        ...
        "entry": [{
            ...
            "title": {
                "type": "text",
                "$t": "1"
            },
            "content": {
                "type": "text",
                "$t": "name: hoge, content: this is hoge"
            }
        }]
    }
}

一方「セル」の場合は、内容を含むセル毎にentryを出力します。
現在地はtitleの「A1」「B1」「A2」などで取得できる他、
id属性にあるURLの末尾にRC方式で記載されています。

https://spreadsheets.google.com/feeds/cells/[document_id]/od6/public/basic/R1C3

{
    "version": "1.0",
    "encoding": "UTF-8",
    ...
    "feed": {
        "entry": [
            {
                ...
                "title": {
                        "type": "text",
                        "$t": "A1"
                },
                "content": {
                        "type": "text",
                        "$t": "id"
                }
            }, 
            {
                ...
                "title": {
                        "type": "text",
                        "$t": "B1"
                },
                "content": {
                        "type": "text",
                        "$t": "name"
                }
            }, 
            /* セルの分繰り返し */
        ]
    }
}

どっちがいいの？

一見すると「リスト」の方が扱いやすそうなのですが、
「リスト」は区切り文字に使用される「,」および「:」がセルの内容に含まれていても、
エスケープ等はしてくれないのでパースが少々厄介になります。

つまり、セル内容に区切り文字を含む可能性がある場合は
「セル」方式を整理して利用した方が安全そうです。

JSONPしてみる

jQueryを使ってJSONPで取得してみます。
コールバック用のパラメータは「callback」なのでデフォルトでOK。

var url = "[your_url]";

$.ajax({
    url : url,
    dataType : "jsonp",
    success : function(data, status){
        $.each(data.feed.entry, function(i, item){
            console.log(item);
        });
    }
});

渡されたオブジェクトをdataとして、data.feed.entryと辿ると各アイテムが取得できます。

どんな時につかえそうか

CMSは数あれど、ニュース記事や静的なページは編集出来ても、
表形式の内容の編集には基本的には向いていません。
また、「MTやWordPressはわからないけどExcelなら使えるよ！」
という方も、一般企業のWeb担当さんにはいらっしゃるかもしれません。

例えば、

  • お店のメニュー
  • ショップリスト
  • スライダーの画像リスト

といったコンテンツをクライアントが更新担当する場合は導入検討の余地がありそうですね。
表形式は、ページというより簡易データベースとして活躍しそうです。

私は先日、JavaScriptから商品リストを読み込みたい案件があり、
定期的にメンテナンスもある関係上管理しやすくする為、導入してみました。

デメリットなど

アクセシビリティの問題

JavaScriptでの出力となると、当然アクセシビリティの問題が生じます。
そこらへんが気になる性格のコンテンツにはあまり適切な手法ではないと思います。
それでも導入したい場合はクライアント側のJavaScriptではなくサーバサイドでの処理、
且つキャッシュの保持等を検討した方が良いかもしれません。

オーナー情報に注意

出力結果を見るとわかりますが、gmailのアカウント名が思いっきり出力されます。
気になる場合は専用のアカウントを使うか、
開発が終わったら担当者のアカウントに移譲した方が良いでしょう。

後半へ

後半は、これを単純化するライブラリを書いてみたので、そのご紹介です。

コメント

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

CAPTCHA

*