書いてみたもの

mach3/google-spreadsheet.php @ GitHub

Google Spreadsheet Client for PHP. This requires “google/apiclient” package.

導入方法

Composer で導入出来ます。

{
    "require": {
        "mach3/google-spreadsheet": "*"
    }
}

Composer を使わない場合は Github からソースをダウンロードしますが、 その場合は、google/google-api-php-client に依存していますのでそちらも一緒に導入します。

<?php

// Composer の場合
require "vendor/autoload.php";

// ソースを直接ダウンロードした場合
require "the/path/to/google/apiclient/src/Google/autoload.php";
require "the/path/to/google-spreadsheet/src/autoload.php";

使い方

今までの例と同様に鍵ファイルを使用して認証をしますので、 Google Developper Console で鍵ファイルを生成しておきましょう。

認証してスプレッドシートを開く

シートを開いた時点でシート内のデータは取得されています。 なお、シートの1行目はヘッダ行としてフィールド名を連ねるようにしてください。

// 鍵ファイルでクライアントを初期化
$client = Google_Spreadsheet::getClient("the/path/to/key.json");
// スプレッドシートのIDでファイルを取得
$file = $client->file("XXXxxxXXXXxxxXXXX");
// シートのタイトルでシートを取得
$sheet = $file->sheet("Sheet1");

var_dump($sheet->items);

条件で行を選択する

クロージャまたは配列で条件を指定してリストを取得します。

// クロージャ
$items = $sheet->select(function($row){
    return $row["email"] === "foo@example.com";
});
// 配列
$items = $sheet->select(array(
    "id" => 23
));
// 条件がない場合は全部返ってきます
$items = $sheet->select();

行を追加する

シートに新しい行を追加します。

$sheet->insert(array(
    "name" => "Bob",
    "age" => 23,
    "email" => "bob@example.com"
));

セルの値を変更する

行番号と列番号（またはフィールド名）を指定して値を変更します。

// 8行目の"name"の値を"Tom"に変更します
$sheet->update(8, "name", "Tom");

// 8行目の2カラム目を"50"に変更します
$sheet->update(8, 2, 50);

キャッシュを保存する

サーバ上にファイルとしてキャッシュを保存する事ができます。

$client->config(array(
    "cache" => true,
    "cache_dir" => "cache",
    "cache_expires" => 3600
));

データを最新の情報に更新する

// キャッシュを無視したい場合は引数にTRUEを渡します
$sheet->fetch(true);

どこで使えるのか

スプレッドシートをお手軽な簡易データベースとして使うことが出来ますが、 毎度リクエストを飛ばす関係でパフォーマンスはどうしても落ちてしまいます。 また、データを丸ごと引っ張って来ているので大きなデータを扱うのには全く適していません。

• サーバーの都合でデータベースが使用出来ない
• データベースを使うほどのものではない
• エクセルライクなインターフェースで簡単にコンテンツを更新したい！

といったようなニーズにお応えする物でしょうか。 簡単なアンケート集計等にも使えるかもしれませんね。

まとめ

スプレッドシートについてはひとまずこれでやりきった感がありますね。 もっと便利なAPIの使い方があるかもしれないので、 都度ライブラリは改善していきたいと思っています。

良い使い道がある事を祈って。

軽いおさらい

前回は Google Developper Console で鍵ファイルを取得し、 それを使って認証してアクセストークンを取得、 APIにリクエストを投げてスプレッドシートの情報を引っ張るところまでやりました。

以降のコードは下記の変数が宣言されている前提で書かれています。

$accessToken; // アクセストークン文字列
$listfeed; // listfeedのURL
$cellsfeed; // cellsfeedのURL

シートのデータを取得する（listfeed）

listfeed はテーブルの内容を一行ずつまとめて出力する形式です。 セルの住所（A1, C6等）に特に興味がなく、とりあえず一覧用のデータが欲しい場合はこちらの形式が便利ですね。

先ほど取得しておいた “listfeed” のURLへ、同じ要領でリクエストを投げてみます。

$request = new Google_Http_Request(
    $listfeed . "?alt=json",
    "GET",
    array("Authorization" => "Bearer {$accessToken}")
);
$data = json_decode($curl->executeRequest($request)[0]);

例えば次のようなシートを読み込んだ場合…

次のようなデータが返されます。

{
    "feed": {
        "entry": [
            {
                "title": {
                    "type": "text",
                    "$t": "john"
                },
                "content": "age:26, email:john@example.com"
                "gsx$name": {"$t": "John"},
                "gsx$age": {"$t": "26"},
                "gsx$email": {"$t": "john@example.com"}
            }
        ]
    }
}

“title” は1カラム目の情報が、“content” は2カラム以降の情報が “key:value, key:value” の形式で格納されますが、 とりあえずこれらは無視して、“gsx$” の接頭辞が付いている物だけを見ていけば十分でしょう。 接頭辞が邪魔で扱いづらい場合は加工してあげましょう。

// データ加工の例
function _parse_listfeed ($entries){
    $list = array();
    foreach($entries as $entry){
        $item = array();
        foreach($entry as $key => $value){
            if(preg_match('/^gsx\$(.+)$/', $key, $m)){
                $item[$m[1]] = $value->{"\$t"};
            }
        }
        array_push($list, $item);
    }
    return $list;
}

$list = _parse_listfeed($data->feed->entry);

結果をJSONではなくXMLで取得した場合、gsx名前空間の要素を取得するのが少々面倒になります。

cf) PHPでXMLの名前空間つきタグを読み込む色々 – Mach3.laBlog

シートのデータを取得する（cellsfeed）

cellsfeed は、セルの値を1つずつ出力してくれる形式です。 listfeed のように一行ずつエントリーとしてまとめたい場合には加工が必要ですが、 行・列番号を取得しておきたい場合などにはこちらを使うと良いでしょう。

$request = new Google_Http_Request(
    $cellsfeed . "?alt=json",
    "GET",
    array("Authorization" => "Bearer {$accessToken}")
);
$data = json_decode($curl->executeRequest($request)[0]);

結果は次のようなデータが返されます。

{
    "feed": {
        "entry": [
            {
                "title": {
                    "type": "text",
                    "$t": "A1"
                },
                "content": {
                    "type": "text",
                    "$t": "name"
                }
            }
        ]
    }
}

“title” にはセルの住所、“content” にはその値が格納されています。 このエントリーが入力されているセルの数だけ羅列されます。

例えば、（あまり賢い選択とは言えませんが）このデータをリスト形式に整理してみましょう。

// データ加工の例
function _parse_cellsfeed ($entries){
    $fields = array();
    $list = array();

    foreach($entries as $entry){
        preg_match("/^([A-Z]+)(\d+)$/", $entry->title->{"\$t"}, $m);
        $content = $entry->content->{"\$t"};
        $r = (int) $m[2];
        $c = $m[1];

        if($r === 1){
            $fields[$c] = $content;
            continue;
        }
        if(array_key_exists($c, $fields)){
            $list[$r] = is_array($list[$r]) ? $list[$r] : array();
            $list[$r][$fields[$c]] = $content;
        }
    }

    return $list;
}

$list = _parse_cellsfeed($data->feed->entry);

シートに新しいデータを追加する

読み込みの次は、データの書き込みをしてみましょう。 listfeed のURLにXMLの本文付きでPOSTすると、新しい行が追加されます。

既存のテーブルに次のようなデータを追加してみましょう。

本文の形式は “application/atom+xml” になります。 listfeed の読み込みの際に使用した gsx名前空間を活用して本文を作成しましょう。

$postBody = <<<EOS
<entry xmlns="http://www.w3.org/2005/Atom" xmlns:gsx="http://schemas.google.com/spreadsheets/2006/extended">
    <gsx:name>Tom</gsx:name>
    <gsx:age>32</gsx:age>
    <gsx:email>tom@example.com</gsx:email>
</entry>
EOS;

作成した本文と Content-Type ヘッダを付加してリクエストを投げます。

$request = new Google_Http_Request(
    $listfeed
    "POST",
    array(
        "Authorization" => "Bearer {$accessToken}",
        "Content-Type" => "application/atom+xml"
    ),
    $postBody
);

$res = $curl->executeRequest($request);

成功するとシートの最後の行にデータが追加されます。

<, > を含む値を扱う際、そのまま入力するとXMLの文法が不正になりますので、 htmlspecialchars 等を使って特殊文字を変換してあげると良いでしょう。

行・列番号を指定してセルの値を更新する

行単位ではなく、セル単位で値を変更する場合には cellsfeed を使用します。 データの追加と同じく、XMLの本文を作成してPOSTします。

$postBody = <<<EOS
<entry xmlns="http://www.w3.org/2005/Atom" xmlns:gs="http://schemas.google.com/spreadsheets/2006">
    <gs:cell row="3" col="2" inputValue="33"/>
</entry>
EOS;

使用する名前空間は gs になります。ここでは、「3行目の2列目の値を”33″に変更」しています。

$request = new Google_Http_Request(
    $cellsfeed,
    "POST",
    array(
        "Authorization" => "Bearer {$accessToken}",
        "Content-Type" => "application/atom+xml"
    ),
    $postBody
);

$res = $curl->executeRequest($request);

成功するとスプレッドシートのセルの内容が書き換えられます。こちらも値の特殊文字の変換はお忘れなきよう。

めんどくさいですか？

毎度こんな事をしているのは些か面倒なので、 この辺の処理を簡略化したライブラリを書いてみました。 次回はその紹介となります。

下準備

まず必要な物をまとめます。

1. サービスアカウントの鍵ファイル
2. 1のアカウントに編集権限を与えたスプレッドシート
3. Google製のクライアント（PHP）

サービスアカウントの鍵ファイル

1. Google Developper Console でプロジェクトを作成します。
2. 「認証情報」→「認証情報の追加」から「サービスアカウント」を選択
3. 鍵ファイルをJSON形式で取得します。

このファイルは認証情報が記載されている大変重要なファイルなので、 サーバー上に設置する際には公開される状態にしないように配慮しましょう。

新規スプレッドシートの作成

1. Google Drive で新しいスプレッドシートを作成します。
2. 前工程の鍵ファイル内の「client_email」のメールアドレスに「編集者」の権限を与えます
3. アドレスバーからスプレッドシートのIDをコピーしておきます

google/apiclient のインストール

ここでは認証に google-api-php-client を使用します。

Google APIs Client Library for PHP
The Google API Client Library enables you to work with Google APIs such as Google+, Drive, or YouTube on your server.

Composer でインストールするか、直接ソースをダウンロードするかお好みでどうぞ。

Composer の場合

require "vendor/autoload.php";

直接ダウンロードして設置した場合

require "the/path/to/google-api-php-client/src/Google/autoload.php";

認証してアクセストークンを取得する

APIにリクエストを投げるにはアクセストークンが必要なので、 まずはこれを取得します。

// クライアントを新たに生成
$client = new Google_Client();
$client->setApplicationName("DemoApp");
// 証明書を生成して
$credentials = $client->loadServiceAccountJson("./keys.json", array(
    Google_Service_Drive::DRIVE
));
// クライアントに読ませる
$client->setAssertionCredentials($credentials);

// アクセストークンをリフレッシュする
$client->getAuth()->refreshTokenWithAssertion();
// アクセストークンを取得
$accessTokenJson = $client->getAccessToken();
$accessToken = json_decode($accessTokenJson)->access_token;

本来ならばこのアクセストークンはセッションに保存して再利用するのですが、 ここでは例をシンプルにするためにそのくだりは省いています。

スプレッドシートファイルの情報を取得する

google/apiclientにスプレッドシートを色々触れるAPIが用意されていればよかったのですが、 ちょっと見当たらなかったので、Google_Http_Request と Google_IO_Curl を使って直接リクエストを飛ばします。

$sheet_id = "XXXxxxXX-XXXxxxxxXXXXXX";
$request = new Google_Http_Request(
    "https://spreadsheets.google.com/feeds/worksheets/{$sheet_id}/private/full?alt=json",
    "GET",
    array("Authorization" => "Bearer {$accessToken}")
);
$curl = new Google_IO_Curl($client);
$res = $curl->executeRequest($request);

$data = json_decode($res[0]);

URLに alt=json パラメータを付加しておくことでJSONでレスポンスが返ってくるので、デコードしましょう。 （デフォルトではAtomなのですが、PHPでは少々扱いづらい為JSONにしています）

かなり多くの情報が格納されているので目が回りそうですが、 スプレッドシートAPIでは共通して、概ね必要な情報は “feed” オブジェクト内の “entry” の中に入っています。

"entry": [
    {
        "id": {...},
        "category": {...},
        "title": {...},
        "content": {...},
        "link": {...},
        ...
    }
]

こんな感じの構造になっていて、 “entry” の中にはそのスプレッドシートに含まれるシートの数だけオブジェクトが連ねてあります。 ここで肝になるのは “link” の部分で、それぞれのシートを読み書きする際にリクエストを飛ばすエンドポイントURLが記されています。

"link": [
    {
        "rel": "http://schemas.google.com/spreadsheets/2006#listfeed",
        "type": "application/atom+xml",
        "href": "https://spreadsheets.google.com/feeds/list/XXXxxxXX-XXXxxxxxXXXXXX/od6/private/full"
    },
    {
        "rel": "http://schemas.google.com/spreadsheets/2006#cellsfeed",
        "type": "application/atom+xml",
        "href": "https://spreadsheets.google.com/feeds/cells/XXXxxxXX-XXXxxxxxXXXXXX/od6/private/full"
    },
    ...
]

読み書きに必要な “listfeed” と “cellsfeed” を変数等に格納しておきましょう。

続きは次回

今回はスプレッドシートの情報を取得する所までこぎつけました。 次回はいよいよ実際に読み書きの処理を行ってみます。

新しくなった Google スプレッドシート

今までは個人設定をいじる事で旧バージョンのスプレッドシートを使い続ける事ができたのですが、 先日からそのオプションが設定画面から消えていて、特別な方法をとらないと旧バージョンのスプレッドシートを新規作成出来なくなりました。 （すでに作成したスプレッドシートは変更されない様です）

刷新された Google スプレッドシートにどのような素晴らしい機能が追加されたかは未だあまり把握していませんが、 現状で確かな事は、旧バージョンで使えたRSSやJSONでの公開APIが実装されていないという事です。 今後実装されるかどうかはわかりません。

以前書いたGhostsheetはそれらの公開APIを利用した物だったので、新しいスプレッドシートでは使用する事ができません。

2014/11/20 追記

現在ではAPIが整備された様で、新しいスプレッドシートでも旧Ghostsheetが正常に動作する事を確認しました。
Googleスプレッドシートを簡易DBとして利用する -　PHP+Ajax編

Ghostsheet も新しくしました

とはいえ、pubhtml（Webページの公開）APIは利用可能なので、それをスクレイピングしてデータ化する物を新たに書きました。 全く別物になったのでリポジトリも改めています。

• mach3/ghostsheet2 @ GitHub

簡単な使い方

以前と同様に、スプレッドシートを作成して「Webに公開」します。

一行目のヘッダ部分でデータの型を指定する事が出来ます。 上記にある integer、bool の他に、float、json が利用出来ます。 省略時は string になります。

そしてスプレッドシートのキーをメモしておきます。スプレッドシートのキーはURLの下記太文字の箇所になります。

https://docs.google.com/spreadsheets/d/00X_xxxXX_0xXxxXx00XXXxx-xxXXxX0-XxXxXx0XxxX/edit#gid=0

このキーをそのまま引数にしてメソッドの呼び出しをします。

<?php

require "the/path/to/ghostsheet/phplib/Ghostsheet.php";

$gs = new Ghostsheet();
$gs->config("cache_dir", "./cache");
$data = $gs->load("00X_xxxXX_0xXxxXx00XXXxx-xxXXxX0-XxXxXx0XxxX");
var_dump($data);

結果は連想配列で返され、”sheets” の中に各シートのデータが格納されるようになっています。

array(3) {
  ["title"]=>
  string(4) "My Spreadsheet"
  ["key"]=>
  string(44) "00X_xxxXX_0xXxxXx00XXXxx-xxXXxX0-XxXxXx0XxxX"
  ["sheets"]=>
  array(2) { ... }
}

旧版との大きな違い

旧版ではスプレッドシートに含まれるシート名で引くためには複数回リクエストしなければなりませんでしたが、 pubhtmlでは全てのシートがひとつのWebページで公開される為、一回のリクエストで済みます。 あまり大量のデータになると辛そうですが、そういった大きなデータでは利用すべきではないと思うので、 結果的には効率が良くなったと言えそうです。

メソッドの使い分け

Ghostsheet にはデータを取得する為に4つのメソッドがあります。

• load
  • キャッシュファイルが期限切れでなければそれを使用
  • そうでなければリモートから最新のデータを取得し、キャッシュファイルを更新
• cache
  • キャッシュの生死に関わらずキャッシュのデータを返す
• fetch
  • キャッシュの生死に関わらずリモートからデータを取得
  • キャッシュの更新は行わない
• update
  • キャッシュの生死に関わらずリモートからデータを取得
  • キャッシュの更新を行う

一見すると load で良さそうですが、その場合、キャッシュの期限が切れるたびにレスポンスが遅くなるタイミングが出てきてしまいます。 対策としてはデータの取得は常にキャッシュから行い、非同期で load を呼び出すのがレスポンスに優しそうです。

（おまけ） Gruntタスク

おまけ機能としてGruntタスクをつけておきました。 スプレッドシートのデータを引っ張ってJSONファイルとしてローカルに保存するだけの簡単な物です。 シートのデータを元に静的サイトをジェネレートしたい場合などに使えたり、使えなかったり。

grunt.initConfig({
    ghostsheet: {
        dev: {
            files: {
                "./data/mydata.json": "00X_xxxXX_0xXxxXx00XXXxx-xxXXxX0-XxXxXx0XxxX"
            }
        }
    }
});

grunt.loadNpmTasks("ghostsheet2");

まとめ

わりと力技なパースなので、できれば用意されたAPIを使いたい気持ちもありますが…

ちなみに一応旧版でも新規作成する方法は残されていて、下記指定のURLにアクセスするだけで可能です。 旧版のデータが残されている以上、当面は使えそうです。

• https://g.co/oldsheets

cf) 新しい Google スプレッドシートについて – ドキュメント エディタ ヘルプ

1. やりたい事
2. 書いてみたもの
3. 基本的な使い方
4. Ajaxで利用する
5. JSONPで利用する
6. その他オプション・機能など
7. 必ず気をつけなければならないこと
8. まとめ : Googleスプレッドシートの活用について

「新しくなったスプレッドシートと簡易データベース化」でGhostsheetが使えなくなったと書きましたが、新スプレッドシートでもAPIが整備された様で、2014年11月20日現在では正常に動作する事を確認しています。但し、スクリーンショット類は古い物なのでご注意ください。（スプレッドシートIDの取得はURLを参照されるのが良いでしょう）

やりたい事

• Googleスプレッドシートからデータを利用して展開したい
• データは分かりやすい形に加工しておきたい
• 直接JSONで読めるけど、毎回読みに行くのは非効率なのでなんとかしたい
• スプレッドシートがメンテ中の時も対応したい

つまり、サーバ上に加工したデータをキャッシュとして保存しておけば良いわけですね。

書いてみたもの

Ghostsheet by mach3

今回はPHPで書いてみました。こんな感じにはたらきます。

1. 渡されたIDを頼りにスプレッドシートをJSONで読み込んできます
2. 加工したデータをキャッシュに保存し、返します
3. 二回目以降のリクエストは、キャッシュの期限内であればキャッシュから返します
4. キャッシュが期限切れならば再度リモートから読み込んできます

基本的な使い方

1. スプレッドシートを作る

Googleドライブ で、簡易DBにするスプレッドシートを作成します。 一行目はフィールドのキーで構成されるヘッダ行にします。これらのキーを元にデータは加工されます。

キーの末尾に書かれている :integer 等の文字は、値の型です。 これを指定しておくと、データを加工する際に値をその型にキャストするように頑張ってくれます。 省略時の初期設定は”string”です。 “integer”, “boolean”, “float”等が使用できるほか、”array” ではカンマで区切った配列が、 “json” ではJSON文字列としてパースされた結果が格納されます。

2. スプレッドシートを公開 & IDを取得する

「ファイル」→「ウェブに公開」でシートの公開設定ができます。

1. 「公開開始」ボタンを押して公開します
2. 「公開データへのリンクを取得」で「RSS」を選択します。

すると、次のようなURLが表示されるので、

https://spreadsheets.google.com/feeds/list/XXxxxxXXXxxxXx/od6/public/basic?alt=rss

太文字の “XXxxxxXXXxxxXx/od6” にあたる部分をコピーします。 これはこの後スプレッドシートのIDとして使用されます。

3. Ghostsheetで読み込む

Ghostsheet.php を任意の場所に設置してrequireし、初期化してスプレッドシートを読み込みます。

require "Ghostsheet.php";

$gs = new Ghostsheet();

// キャッシュ用のディレクトリを設定しておきます
// config() で配列を渡すこともできます
$gs->set("cacheDir", "./gscache/");

$mySpreadsheetId = "XXxxxxXXXxxxXx/od6";
$data = $gs->load($mySpreadsheetId); // $dataに加工されたデータが格納されます

あとは、読み込まれたデータを好きな様に料理してください。

Ajaxで利用する

Ghostsheetには、Ajaxで簡単に利用する為の ajax() メソッドが用意されています。 ajax() は引数の配列（省略時のデフォルトは $_GET）を使用して処理し、JSON形式でレスポンスを返します。

ajax.php

require "Ghostsheet.php";

$gs = new Ghostsheet();
$gs->set("cacheDir", "./gscache/");
$gs->ajax();

jQueryによる読み込み例

$.getJSON("ajax.php", {
    id : "XXxxxxXXXxxxXx/od6"
})
.then(function(data){
    console.log(data.items);
});

JSONPで利用する

Ajax同様にJSONPでレスポンスを返すことも出来ます。 あまりおすすめできる機能ではないので、初期設定では無効化されています。

require "Ghostsheet.php";

$gs = new Ghostsheet();
$gs->config(array(
    "cacheDir" => "./gscache",
    "jsonp" => true // JSONP機能を有効に
));
$gs->ajax();

受け取るidのホワイトリストを作ったり、 キャッシュディレクトリを非公開にするなどの対策をして使用した方が良いかな、と思います。

その他のオプション・機能など

ざっくりとしか書いてませんが、APIドキュメントをどうぞ。

Ghostsheet : API Doc

必ず気をつけなければならないこと

Googleスプレッドシートを簡易的なCMSとして使用する上で、気をつければならないこと。

非公開情報は載せない

「Webで公開」機能を利用しないと使えないライブラリなので、 そのスプレッドシートの内容は全て公開されてしまいます。

共有設定に気をつけて

第三者が編集できるような状態にしない。 クライアントと共有したい場合は、限定公開でユーザーを決め打ちしましょう。

「変更が加えられると自動的に再公開する」のチェックはオフに

編集途中の状態で公開されて恥ずかしい思いをする可能性があります。 自動公開ではなく、編集が終わったら都度「今すぐ再公開」ボタンを押すようにしましょう。

まとめ : Googleスプレッドシートの活用について

私は、優秀なクローンでも出ない限り、テーブルの編集でGoogleスプレッドシートの右に出るサービスは無いと思っています。 そして、WYSIWIGではなくテーブルでの管理をしたいWebコンテンツというのも多くあるでしょう。 例えば、

• お店のメニュー表
• 製品リスト
• 詳細画面の要らないニュースリスト
• その他リストコンテンツ

などなど。このようなデータコレクション的なコンテンツは、 CMSでがんばって実装したりするよりはテーブルで管理出来たほうが メンテナンスの効率も良いと感じるのです。

また、WordPressはわからないけどExcelならいつもつかってるからわかるよ！ というWeb担当者も多くいらっしゃると思います。 （専任の枠を割けずに総務の方が兼任しているようなケースでは特に）

そんなわけで、私はこのお題を執拗に探求しているのであります。

書いてみたもの

SpreadSheetLoader

mach3/js-spreadsheetloader via GitHub

• スプレッドシートのJSONを読み込みます
• 読み込んだデータを整理します
• jQuery 1.7+ が必要です

簡単な使い方

1. URLを取得

まず前編の記事を参考にしてURLを取得してきましょう。
形式は「Atom」または「RSS」の、「セル」を選択してください。
こんな感じのURLですね。

https://spreadsheets.google.com/feeds/cells/**********/***/public/basic

2. 読み込む

まずはインスタンスを初期化し、URLを渡し、読み込みます。

// 1. インスタンス初期化
var myloader = new SpreadSheetLoader( [your_url] );

// 2. readyイベントハンドラを登録
myloader.on("ready", function(){
    var data = this.getData();
});

// 3. load()
myloader.load();

1. コンストラクタの引数にURLを渡して初期化します。
   
   URLは後からsetUrl()で渡すことも出来ます。
2. on()でreadyイベントへのハンドラを設定します。
   
   readyイベントは、スプレッドシートが読み込まれ、データが整理された時点で発火します。
3. load()で読み込み開始

3. データを利用する

readyイベントハンドラの中では、自由にデータを利用する事ができます。
あとは煮るなり焼くなり。
データの利用の仕方は…

データを取得する

整理されたデータを取得して利用する為には、幾つかの方法が用意されています。

getData() : Array

データがまるごと配列で返されます。

myloader.on("ready", function(){
    var data = this.getData();
    console.log(data[3]); // 4番目のデータ
});

getItem(condition) : Array

条件に合うデータのみを配列で返します。
条件はオブジェクトで渡します。

myloader.on("ready", function(){
    var myItems = this.getItem({color:"red", price:800}); // 色がredで、価格が800の物を抽出
});

each(callback)

データに対して繰り返し処理を行います。（中身はjQuery.fn.eachです）

myloader.on("ready", function(){
    var total = 0;
    this.each(function(){
      total += this.price;
    });
    console.log( "Total price:", total ); // 全データのpriceの合計
});

試してみる

ソース

例えば、こんな表を読み込んでみます。

デモ

まとめ

前記事の通り、使える場面というのはわりと限られてそうではありますが、
何かの折に使ってみようかなと思っております。

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カラム目をタイトルとし、行を一つのコンテンツとして出力。

「セル」

内容を含むセルを全て順番に出力していきます。

例

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

「リスト」の場合は次のように出力されます。
行ごとに「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のアカウント名が思いっきり出力されます。
気になる場合は専用のアカウントを使うか、
開発が終わったら担当者のアカウントに移譲した方が良いでしょう。

後半へ

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