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

  • 92
    いいね
  • 5
    コメント
この記事は最終更新日から1年以上が経過しています。

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

image

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

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

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

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

機能の紹介

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

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

image

Google Drive

All Google Drive items

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

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

Upload documents to Google Drive

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

Google Photos

Picasa Web Albums photo albums

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

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

Upload to Picasa Web Albums

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

その他(認可が必要)

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

Webcam photos

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

Your YouTube videos

自身がupしたyoutube動画を選べるようです。
Kobito.8M4k3A.png

A collection of most recently selected items

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

その他(認可が不要)

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

Google Image Search

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

Google Maps

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

Video Search

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

組み合わせ

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

image

開発向け

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

プロジェクトの設定

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

Google Picker APIをONにする

image

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

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

image
※localhostは開発用です。

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

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

image

※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を向上させましょう:thumbsup: