API – Mach3.laBlog

Google APIs Client Library for PHP を使ってスプレッドシートを読み書きする（3）

mach3 — Fri, 18 Sep 2015 10:32:36 +0000

前回までは Google APIs Client Library for PHP を使って直接Googleスプレッドシートにアクセスしていましたが、今回は読み書きを簡略化できるクライアントライブラリを書いてみました。

書いてみたもの

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

導入方法

Composer で導入出来ます。

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

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



// 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 APIs Client Library for PHP を使ってスプレッドシートを読み書きする（2）

mach3 — Thu, 17 Sep 2015 07:28:10 +0000

前回につづいて、Googleのライブラリを使ってスプレッドシートと連携する実験です。

軽いおさらい

前回は 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]);

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

name	age	email
John	26	john@example.com

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

{
    "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すると、新しい行が追加されます。

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

name	age	email
Tom	32	tom@example.com

本文の形式は “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>Tomgsx:name>
    <gsx:age>32gsx:age>
    <gsx:email>tom@example.comgsx: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);

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

めんどくさいですか？

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

Google APIs Client Library for PHP を使ってスプレッドシートを読み書きする（1）

mach3 — Wed, 16 Sep 2015 01:30:05 +0000

以前より公開されたスプレッドシートの読み込みについて記事をしたためてまいりましたが、拙作の Ghostsheet 等はスプレッドシートを公開しなければならない、書き込みが出来ないといった欠点がありました。今回は、Google製のPHPクライアントを利用して認証し、読み書きの実験を行ってみました。

下準備

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

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

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

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

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

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

Google Drive で新しいスプレッドシートを作成します。
前工程の鍵ファイル内の「client_email」のメールアドレスに「編集者」の権限を与えます
アドレスバーからスプレッドシートの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” を変数等に格納しておきましょう。

続きは次回

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

Youtube IFrame API を使って遊んでみよう

mach3 — Mon, 27 Jul 2015 07:44:32 +0000

Webページで動画を活用したコンテンツもかなり増えてきた昨今ですが、如何お過ごしでしょうか。今回はYoutubeの動画をJavaScriptで操作する Youtube IFrame API を使って色々遊んでみましょう。

Youtube IFrame API とは
基本的な使い方
動的にスクリプトをロードする
見た目・挙動・イベントを設定する
動画再生のイベントトラッキング
動画の再生の任意のタイミングでアクションを起こす
埋め込みプレイヤーでAPIを利用可能にする
まとめ

Youtube IFrame API とは

iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame API | Google Developers

IFrame Player API を使うと、YouTube 動画プレーヤーをウェブサイトに埋め込み、JavaScript でプレーヤーを制御できます。

Youtube の埋め込み動画プレーヤーは iframe 要素でパブリッシュされますが、それを動的に生成したり、プレーヤーの再生等を操作したり、イベントを検知して何かアクションを起こしたりする事が出来ます。動画を軸にしたコンテンツ作りに大活躍しそうですね。

基本的な使い方

プレーヤーの生成は YT.Player というクラスを利用して行います。引数にはプレイヤーを表示する為のコンテナ要素と、オプションを渡します。

<div id="movie">div>
<script>
var onYouTubeIframeAPIReady = function(){
    var player = new YT.Player("movie", {
        videoId: "c5kmKO_gGsc",
        width: 1600,
        height: 900
    });
};
script>

onYouTubeIframeAPIReady という関数は、APIのJavaScriptの準備が完了した段階で自動でコールされます。そして、APIのJavaScript本体を読み込みましょう。

<script src="//www.youtube.com/iframe_api">script>

これで #movie 要素内にプレーヤーが生成されます。とても簡単ですね。

ここでは第一引数に要素のid名を渡していますが、HTMLElementその物でも構いません。なんでしたら、新たに生成した空要素でもよいでしょう。

new YT.Player(document.getElementById("movie"), {...});
new YT.Player(document.createElement("div"), {...});

動的にスクリプトをロードする

onYouTubeIframeAPIReady は、スクリプトのロードが完了された時に一度しか実行されません。つまり既にスクリプトが読み込まれて初期化された状態で onYouTubeIframeAPIReady を設定したとしても、その処理は行われずに何も起こらない事になります。

そこで、「既にロードされている場合は即時実行、まだの場合はスクリプトを読み込んでから実行」という処理を関数にまとめてみます。（jQuery使用）

$.youtubeReady = function(callback){
    var EVENT_READY = "youtubeready";

    if(window.YT && window.YT.Player){
        return callback();
    }
    $(window).on(EVENT_READY, callback);
    window.onYouTubeIframeAPIReady = function(){
        $(this).trigger(EVENT_READY);
        window.onYouTubeIframeAPIReady = void 0;
    };
    $("