Google Picker API を使ってみる

Google Driveのファイルを利用できるPicker APIを GAE上で使ってみたのでメモっておきます。
クライアントIDが何かとか詳しい話は抜きにしてとにかく動かすまで。

こちらのガイドに従ってやります。
https://developers.google.com/picker/docs/

まずPciker APIを有効にします。
Google Developers ConsoleにログインしてAPIを使うプロジェクトのページに入ります。
左側のサイドバーの「APIと認証」->「API」を選択。
Pickerとかで検索して「Google Picker API」を選択しAPIを有効にします。

次にクライアントIDとAPIキーを作成します。
「APIと認証」->「認証情報」から2つとも作成できます。

クライアントIDの方はウェブアプリケーションを選択し、
「JavaScript 生成元」にはAPIを使用するページのオリジンを指定。
今回はlocalhost:8080でも動いて欲しいので次の二つを指定しました。
http://プロジェクトID.appspot.com/
http://localhost:8080/
リダイレクトURLはよくわからなかった。とりあえず、
http://localhost:8080/oauth2callback
みたいな感じで指定してるけどたぶん意味ないです。

APIキーの方はブラウザキーを選択。
リファラーはクライアントIDの時と同じ感じで
http://プロジェクトID.appspot.com/*
http://localhost:8080/*
としました。

これでクライアントIDとAPIキーが取得できたので
先のガイドの「The “Hello World” Application」のとおりにページを用意して
developerKeyとclientIdを書き換えればとりあえず動きます。

このスクリプトの流れは、

<script type=“text/javascript” src=“https://apis.google.com/js/api.js?onload=onApiLoad"></script>
でGoogle API Loader scriptを読み込む。
読み込みが終わると onload=onApiLoad で指定しているonApiLoadが呼ばれて
authとpickerのスクリプトが読み込まれる。
両方読み込まれるとcreatePicker()の内容が実行されて
pickerのインスタンスが作成、可視化される。
という感じになっています。

pickerの生成時にコールバック用の関数とかいろいろ指定できるのですが、
addView()の部分がキモで、ここで表示されるファイルの種類を指定しています。
指定方法についてはガイドの「Showing Different Views」に表が載っていて
サンプルの通りだとPicasaのWeb Albumsにある写真が表示されるようになっています。

こことscopeを表に従って変えればGoogle Driveのアイテムとかも表示できるのですが
全部取得してしまうとごちゃごちゃになるのでsetMimeTypesでMIME Typeを指定します。
MIME TypeはMIME Type 一覧表を見て適当に。
例えばpdfだけを表示するようにしたい場合は次のようにします。

function createPicker() {
    var view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes(“application/pdf”);
    if (pickerApiLoaded && oauthToken) {
        var picker = new google.picker.PickerBuilder().
            addView(view).
            setLocale(‘ja’).
            setOAuthToken(oauthToken).
            setDeveloperKey(developerKey).
            setCallback(pickerCallback).
            build();
        picker.setVisible(true);
    }
}
setLocale(‘ja’)で日本語で表示するよう指定することができます。

Pcikerで取得した内容はsetCallbackで指定した関数にJSONで渡されるので
これを適当に処理してやればおっけーです。

以上です。

Google Drive File Picker Example
Gistにもっと工夫したものがあったのでこれも参考にするといいと思います。

このエントリーをはてなブックマークに追加