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担当者も多くいらっしゃると思います。 （専任の枠を割けずに総務の方が兼任しているようなケースでは特に）

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

HybridAuthとは

HybridAuth, Open Source Social Sign On PHP Library

HybridAuth enable developers to easily build social applications to engage websites vistors and customers on a social level by implementing social signin, social sharing, users profiles, friends list, activities stream, status updates and more.

WebサイトにOAuth認証を簡単に設置する為のPHPライブラリです。 Twitter、Facebook等をはじめとした様々なサービスに対応しています。 サポートされているサービスは、現時点で32。

また、CodeIgniterやCake、Zend等のFWはもちろん、 WordPressやJoomula等のCMSのプラグインとしても利用できます。

• II. Third-party Plugins | Download HybridAuth

HybridAuth と Opauth の違い

HybridAuthはOpauthと似たタイプのライブラリですが、 この2者で大きく異る点、というよりはHybridAuthのメリットを2つご紹介します。

1. 自由にカスタマイズ可能なURL
2. APIにアクセスするメソッド

自由にカスタマイズ可能なURL

Opauthは、ログインURLの一部にサービス名を含んでいないと正常に動きません。 URLの文字列から認証するサービスを判別する為です。 （ここらへん、前回の記事では説明不足でしたね。すみません。）

例えば、「http://www.example.com/login/twitter」ならtwitterの認証画面へ、 「http://www.example.com/login/facebook」ならFacebookの認証画面へ飛ぶわけですね。

一方HybridAuthには、そういった縛りはありません。 そのかわり、認証メソッドの引数にサービス名を渡す事になります。

APIにアクセスするメソッド

Opauthは認証するだけでしたが、HybridAuthは認証した後にAPIにアクセスしてgetしたりpostしたりできます。 これ一本で全部面倒見切れそうですね。

簡単な使い方

HybridAuthを hybirdauth/ ディレクトリに保存したと想定して、 次のようなファイル構成にしてみます。

login.php (ユーザーがアクセスするページ)
config.php (設定ファイル)
hybridauth/ (ダウンロードしたHybridAuthの構成ファイル)
├ config.php
├ index.php
├ install.php
└ Hybrid/

設定ファイルを作る

hybridauth/config.php を参考にして、config.phpを作って必要事項を明記しましょう。 ここでは、Twitterのログインに必要な物だけを記載しておきます。

<?php

return array(
    "base_url" => "http://localhost:8080/hybridauth/",
    "providers" => array(
        "Twitter" => array(
            "enabled" => true,
            "keys" => array(
                "key" => "[your app's consumer key]",
                "secret" => "[your app's consumer secret]"
            )
        )
    )
);

base_url

実際にOAuthのやり取りをしてくれるスクリプトを指します。 多くの場合HybridAuthをインストールしたディレクトリになります。

providers

認証したいサービスの設定を列挙していきます。 Twitterの場合は、作成したアプリケーションのconsumer keyとconsumer secretを記載します。

ログイン処理を書く

./login.php を用意して、ログイン処理を書いてみます。

<?php

// 設定ファイルを引数にして初期化する（配列でもOK）
$auth = new Hybrid_Auth( "./config.php" );

// 認証の実行（未認証の場合はここでリダイレクトされ、認証済みの場合はスルーされます）
$twitter = $auth->authenticate("Twitter");

// ↓ ここから認証済みの場合の処理
echo "<h1>認証されています！</h1>";

// ユーザー情報をまとめてくれる getUserProfile() メソッド
var_dump(
    $twitter->getUserProfile()
);

// APIにアクセスしてみる
var_dump(
    $twitter->api()->get("account/verify_credentials.json")
);

コメントの通りです。authenticateメソッドだけでほとんど余計な処理は省かれて、スッキリしていますね。

実際の動作としては、こんな感じみたいです。

1. ユーザーがlogin.phpにアクセス
2. hybridauth/index.php に移動、そこからサービスの認証画面へリダイレクト
3. 認証が済んだらトークンをセッションに保存して、再びユーザーが元いたlogin.phpに移動

base_url について

config.php で出て来た base_url ですが、少し補足しておきます。

要するにこの項目は、全ての認証処理を代理で行なってくれるイケてるしヤバい hybridauth/index.php にアクセスさせる為の物です。 もっと言えば、そこにアクセスしたユーザーに対して hybridauth/index.php に記述されている処理が走りさえすれば良いです。

ですので、上の例示では hybridauth/ ディレクトリが公開ディレクトリにある前提になっていますが、 そうでない場合（非公開ディレクトリになっていたり、フレームワークの都合上アクセス出来なくなっていたりする場合）、 アクセスさせるファイル内で hybridauth/index.php をインクルードしさえすれば動くはずです。

例えば、”base_url” を /auth.php 等として、該当ファイルを設置し、

require_once("/the/path/to/hybridauth/index.php");

等としておけば良いですね。

気になった事柄

公式の例示では、APIアクセスも、認証済みである事を前提としていました。

認証を使わず、アプリに割り振られたのアクセストークンを使ったAPIアクセスは可能なのか、が気になりました。
それをするならそういうライブラリを使えば良いのですが、一つで済むならそれが一番ですよね。
気が向いたら調べてみます。

Tumblrを弄る案件に初めて参加させて頂きましたが、
このサービスは他のブログサービスと異なり、
「最新の投稿」「タグ一覧」の出力機能を備えていない様子。
同機能を実現する為にはAPIへのアクセスを（複数回）行わなければならないのですが、
大変不便なので、それを代行するライブラリを書いてみました。

TumblrPosts

mach3’s js-tumblrposts.js at master – GitHub

Tumblrの記事を、API(/api/read/json/）を通して取得するクラスです。

簡単な使い方

ライブラリのロード

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.class.min.js"></script>
<script type="text/javascript" src="tumblrposts.js"></script>

先ず、必要なライブラリをロードします。
jQueryと、jquery.class.jsが必要です。
cf) jQueryでPrototype.js風のクラス定義をしてみる

初期化

var posts = new TumblrPost({
    domain:"example.tumblr.com",
    maxNum:300
});

初期化します。
引数のオブジェクトリテラルには、domain（対象となるTumblrのドメイン）と
maxNum（取得する最大記事数）を渡す事が出来ます。
両方共省略しても大抵問題は生じません。詳しくは後述。

イベント

次にイベントハンドラを設定します。

posts.bind( posts.EVENT_COMPLETE, function(e){
    var s = this;
    // getPosts() で投稿リストを取得
    // getTitleByPost() で投稿タイトルを取得
    $.each( this.getPosts(), function( i, post ){
        var title = s.getTitleByPost(post, 100),
            html = '<li><a href="{{url}}">{{title}}</a></li>'
            .replace( /{{url}}/, post.url )
            .replace( /{{title}}/, title );
        $(html).appendTo( $("ul#updated") );
    });
    // getTags() でタグリストを取得
    $.each( this.getTags(), function( i, tag ){
        var html = '<li><a href="/tagged/{{url}}">{{tagname}} ({{count}})</a></li>'
            .replace( /{{tagname}}/, tag.name )
            .replace( /{{count}}/, tag.count );
        $(html).appendTo( $("ul#tags") );
    });
});

記事のロードが完了すると“complete”（EVENT_COMPLETE）イベントが着火されます。
イベントハンドラ内でgetPosts()やgetTags()を呼ぶと、投稿/タグのリストを取得する事が出来ます。

posts.bind( posts.EVENT_PROGRESS, function(e){
    console.log( this.getLoadedRate() + "% Loaded" );
});

こちらは使う事は少ないかもしれませんが、
記事のロードが進むごとに“progress”(EVENT_PROGRESS)イベントが着火されます。
getLoadedRate()で進捗をパーセントで取得する事が出来ます。

ロードスタート

posts.run();

run()メソッドをコールすると、APIへのアクセスが開始されます。

APIとか

TumblrPost( config )

コンストラクタ。引数に設定用のオブジェクトを渡せます。
config
– domain (String) : Tumblrのドメイン。外部Tumblrにアクセスする時に指定。
– maxNum (Number) : 読み込む最大記事数。投稿数が多い場合はこれを指定する事で負荷を軽減出来ます。
（maxNumを指定した場合、タグの取得はあまり正確でなくなります）

run() : void

APIへのアクセスを開始します。
全ての投稿をロードするか、config.maxNumに達するまでアクセスを繰り返し行ないます。

getTags() : Array

タグリストを取得します。返されるArrayの子要素はシンプルなオブジェクトです。
Array
– name (String) : タグの名前
– count (Number) : ポスト数

getPosts( offset, count ) : Array

記事リストを取得します。
– offset (Number) : 開始位置
– count (Number) : 取得する記事数 返されるArrayの子要素はTumblrAPIのpostオブジェクトです
c) API | Tumblr

getTitleByPost( post ) : String

postオブジェクトから記事タイトルを抽出します。（試験的に実装）

getLoadedRate() : Number

ロードの進捗をパーセントで返します。

まとめ

仕方がないとは言え、
この手法は場合によっては複数回JSONPのアクセスを繰り返すことになり、
パフォーマンスが正直あまりよろしくない為、必要がなければ避けるべきでしょう。
（一度に取得できるポストの最大数が50なので…）

最新の投稿の取得は、はっきり言ってオマケでつけています。
タグ抽出時にどうせ投稿情報取得するので、ついでに格納しとけ～的な。
新規投稿だけならJSONPのコールバックで直接処理したほうが明らかに効率がいいので、
タグリストに用がないならそうすべきですね。

そんなわけで、
TumblrのAPIがタグの抽出に対応してくれれば不要なライブラリです。
まとめ書きながらなんかへこんできました…

はじめにお断りしておくと、今回のお仕事は
「本番環境を直接触れず、ローカルで構築したMTのバックアップデータを納品する。
尚、本番環境でPHPは動作しない。」
というちょっと限定的な状況です。

名前からblog_idを引く

例えば、親サイトから、ある子ブログの投稿一覧を出力したい。
本番環境で作業できるのならばblog_id決め打ちで良いと思うのですが、
バックアップ＋復元を繰り返していくとblog_idが安定せず、
連番で増えて行ってしまう場合があります。

そこで、ブログのタイトルからblog_idを引いてみます。

<mt:Blogs include_blogs="site">
    <mt:SetVarBlock name="blog_name"><mt:BlogName /></mt:SetVarBlock>
    <mt:If name="blog_name" eq="最新情報">
        <mt:SetVarBlock name="news_id"><mt:BlogID /></mt:SetVarBlock>
    <mt:ElseIf name="blog_name" eq="導入事例">
        <mt:SetVarBlock name="case_id"><mt:BlogID /></mt:SetVarBlock>
    </mt:If>
</mt:Blogs>

サイトに所属する全てのブログの中で、タイトルが一致する物を拾ってIDをSetVarしています。
上の例では「最新情報」というブログのIDを「news_id」に、
「導入事例」というブログのIDを「case_id」に格納しています。
あとは格納されたIDを使ってなんやかんやしましょう。

<mt:Entries blog_id="$news_id">
    <mt:Ignore><!--なんやかんや--></mt:Ignore>
</mt:Entries>

もうちょっとスマートな書き方がありそうな気もせんではないですが…
もしご存知の方いたら是非ご教示下さい。

親サイトのモジュールを子ブログで使う

これはMT使いの中ではごく当たり前かもしれませんね。
子ブログでMTIncludeしても、子ブログのモジュールの中から探してしまうので、
blog_idモディファイアで、どのブログのモジュールから探すか指定してやりましょう。

<mt:Ignore><!-- 親サイトのIDを取得してwebsite_idに格納 --></mt:Ignore>
<mt:BlogParentWebsite>
    <mt:SetVarBlock name="website_id"><mt:WebsiteID></mt:SetVarBlock>
</mt:BlogParentWebsite>

<mt:Ignore><!-- blog_idで指定してモジュールをインクルード --></mt:Ignore>
<mt:Include module="module_name" blog_id="$website_id" />

純粋にMTの機能だけでアレコレしようとすると、 なんだかモッサリなコードになってしまいますね…。