Google Pickerを使ってWebサイトのUXを向上させよう

12240 ワード
UX HTML JavaScript GoogleApps googleapi HTML テキストリンク

GmailにはGoogleドライブのファイルをポップアップ上で検索してGmail本文に貼り付ける機能が用意されています。
以下の様な画面です。

実はこのGoogleドライブからファイルを選ぶという機能をjavascriptを少し書くだけで 自分のWebサイトに簡単に埋め込むことが可能です。
それを行うための機能をGoogleが提供しています。それがGoogle Pickerです。

またGoogle Pickerはドライブのファイルだけではなく
Googleマップから住所を選択、Googleフォトから写真を選択など様々なピッカーが用意されています。
<input type="file">のクラウド版みたいなものです。

実際に試してもらったほうが理解しやすいと思います。デモページを用意しました。

@本記事は前半に機能の紹介、後半に開発向けの解説を記載しています。

機能の紹介

デモページを開いてみてください。

20種類近くありますが主に4種類にグループ分け出来ます。
それぞれ紹介していきます。

Google Drive

All Google Drive items

Googleドライブ上の全てのファイルから選択するピッカーです。

ファイル選択系は他にもたくさんありますがファイルの種類を絞っているだけなので割愛します。

Upload documents to Google Drive

取得ではなくアップロードする機能になります。
※マイドライブにアップロードされます。

Google Photos

Picasa Web Albums photo albums

PicasaやGoogleフォトから画像やアルバムを選択するためのピッカーです。

Picasa Web Albums photosは写真のみを選択するピッカーです。

Upload to Picasa Web Albums

取得ではなくアップロードする機能になります。
※Picasa、Googleフォトの両方に入るようです。

その他（認可が必要）

GoogleドライブでもGoogleフォトでもないですが認可を必要とするピッカーです。

Webcam photos

PC内臓のWebカメラを使って写真が取れます。
Flashなのがイケてないですが撮り直しして好きなのを選べます。機能自体は悪くないです。

Your YouTube videos

自身がupしたyoutube動画を選べるようです。

A collection of most recently selected items

ピッカーで選択した履歴から選択が可能なピッカーです。

その他（認可が不要）

認可自体が不要なピッカーです。
これを使うだけなら後述するデベロッパー登録なども不要です。

Google Image Search

kittenで検索した際の画面です。
Google画像検索に似ていますが結果は違うみたいです。(マイナーな単語だと結果の件数がゼロだったりします)

Google Maps

富士山で検索した際の画面です。
Googleマップ検索と同じ地点をちゃんと返すようです。
緯度経度・住所なんかを返してくれます。

Video Search

puppyで検索した際の画面です。
Google動画検索に似ていますが結果は微妙に違うようです。

組み合わせ

1つのポップアップに複数のピッカーを混ぜたり階層構造にすることも可能です。
画像系と履歴選択をまとめると以下のようになります。
Googleドライブ、Googleフォト、Web上、履歴、端末内とあらゆるリソースから画像を選択することが可能なピッカーです。

開発向け

ここに記載していない機能もあるので、基本的には公式のリファレンスを参照してください。
わかりにくいところなどを補足していきます。

プロジェクトの設定

Googleデベロッパーコンソールでプロジェクトを作ります。
プロジェクトの作成手順はググれば山のように出てくるので重要なとこだけ貼っときます。

Google Picker APIをONにする

ブラウザAPIキーのリファラーを設定する

コード上のsetDeveloperKeyで入れてるやつです。
このsetDeveloperKeyはなくても動作するので必須ではありません。
setDeveloperKeyを指定することでデベロッパーコンソール上のAPIの使用量に反映させることができます。
ログを取るためみたいなものだと思います。


※localhostは開発用です。

OAuth クライアント | ウェブアプリケーションの設定

httpでもhttpsでもどちらでも行けるように2つ指定しています。

※localhostは開発用です。

HTML作成

大したコード量でもないので公式のリファレンスやサンプルコードとその解説を参照してください。
https://developers.google.com/picker/docs/#hiworld

デモ用コード

公式のサンプルコードを元に作った雑なデモ用コードも良かったらどうぞ。
https://github.com/howdy39/google-picker-api-demo/blob/master/index.html

機能ごとの解説

DriveとPhotosだけ解説しておきます。

Google Drive

ピッカーからのレスポンスは以下のような値になります。

response
{
  "id": "0B-GnwaTpiZSxMDVUOWtGUEVublE",
  "serviceId": "docs",
  "mimeType": "image/jpeg",
  "name": "download (2).jpeg",
  "description": "",
  "type": "photo",
  "lastEditedUtc": 1465219913449,
  "iconUrl": "https://ssl.gstatic.com/docs/doclist/images/icon_11_image_list.png",
  "url": "https://drive.google.com/a/howdylikes.jp/file/d/0B-GnwaTpiZSxMDVUOWtGUEVublE/view?usp=drive_web",
  "sizeBytes": 10857,
  "rotation": 0,
  "rotationDegree": 0,
  "parentId": "0AOGnwaTpiZSxUk9PVA"
}

ここで重要なのはピッカーで取得できるのはあくまで選択したファイルのIDなどの情報です。
ファイル自体のバイナリデータが取れるわけでありません。
ピッカーで取得したファイルIDをサーバーに送信してサーバーサイドでDrive APIのfiles:getなどを駆使してファイルのバイナリを取得していく形になります。

Google Photos

ピッカーからのレスポンスは以下の様な値になります。

response
{
  "id": "6293231690693305154",
  "serviceId": "picasa",
  "mimeType": "application/vnd.google-apps.photo",
  "name": "download (3).jpeg",
  "description": "",
  "type": "photo",
  "lastEditedUtc": 1465257185000,
  "iconUrl": "https://ssl.gstatic.com/docs/doclist/images/icon_10_generic_list.png",
  "url": "https://picasaweb.google.com/101136005779153122515/6293231686581095857#6293231690693305154",
  "thumbnails": [
...省略...
    {
+     "url": "https://lh3.googleusercontent.com/-0bwvPvvg9zg/V1YM4TUBY0I/AAAAAAAAAGQ/S2Te1DVhVjMiPYCRqoCOFS97mAHjxpexwCKgB/s400/download%2B%25283%2529.jpeg",
      "width": 259,
      "height": 194
    }
  ],
  "sizeBytes": 10780,
  "rotation": 0,
  "parentId": "6293231686581095857",
  "version": 100,
  "mediaKey": "AF1QipMc1qIbYlHWuYGgYmJTKoCII8dksA7AUepG1gCj"
}

緑背景のURLが画像のファイルです。
このURLは権限チェックが入っていないので直接ダウンロードが可能です。

あまり知られていないと思うのですが、Picasa(Googleフォト)はURLがわかるとアクセス可能です。
上記の通りPicasaは140文字程度で、Googleフォトは650文字程度になるようです。
推測は事実上不可能な長さということなんでしょう。

あとがき

使うケースは限られているとは思いますが、合致した場合はGoogle Pickerは強力だと思います。
使えるものは有効活用して楽をしよ、、じゃなくてUXを向上させましょう