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

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/74202973-e247-90d6-f777-efced65be11f.png)

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

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

実際に試してもらったほうが理解しやすいと思います。[デモページ](https://howdy39.github.io/google-picker-api-demo/)を用意しました。


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


## 機能の紹介
[デモページ](https://howdy39.github.io/google-picker-api-demo/)を開いてみてください。

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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/ce2bc4c3-587b-1d98-32e5-8fd22ff997e8.png)

### Google Drive

#### All Google Drive items
Googleドライブ上の全てのファイルから選択するピッカーです。
![Kobito.ULTu75.png](https://qiita-image-store.s3.amazonaws.com/0/35595/e510f968-557f-05c0-62c0-9075a58b5510.png "Kobito.ULTu75.png")


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


#### Upload documents to Google Drive
取得ではなくアップロードする機能になります。
※マイドライブにアップロードされます。
![Kobito.AbUIWH.png](https://qiita-image-store.s3.amazonaws.com/0/35595/73d85479-5d0f-6f7e-a284-84ec6513a6cc.png "Kobito.AbUIWH.png")



### Google Photos

#### Picasa Web Albums photo albums
PicasaやGoogleフォトから画像やアルバムを選択するためのピッカーです。
![Kobito.UIchIW.png](https://qiita-image-store.s3.amazonaws.com/0/35595/d0a54b87-a133-a69e-1f52-a36b6935c1e5.png "Kobito.UIchIW.png")


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

#### Upload to Picasa Web Albums
取得ではなくアップロードする機能になります。
※Picasa、Googleフォトの両方に入るようです。
![Kobito.DSnzun.png](https://qiita-image-store.s3.amazonaws.com/0/35595/ddc7d678-560d-027b-4ab6-cbce56bbfba7.png "Kobito.DSnzun.png")





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


#### Webcam photos
PC内臓のWebカメラを使って写真が取れます。
Flashなのがイケてないですが撮り直しして好きなのを選べます。機能自体は悪くないです。
![Kobito.q8sf1r.png](https://qiita-image-store.s3.amazonaws.com/0/35595/a588a87e-d070-f425-8e54-2651ff100886.png "Kobito.q8sf1r.png")



#### Your YouTube videos
自身がupしたyoutube動画を選べるようです。
![Kobito.8M4k3A.png](https://qiita-image-store.s3.amazonaws.com/0/35595/5a07ee19-f5ed-a5eb-c223-63b51920d8bc.png "Kobito.8M4k3A.png")



#### A collection of most recently selected items
ピッカーで選択した履歴から選択が可能なピッカーです。
![Kobito.LQpGIx.png](https://qiita-image-store.s3.amazonaws.com/0/35595/29df9e36-8789-ec94-3d96-dcd8a4174ab6.png "Kobito.LQpGIx.png")




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


#### Google Image Search
`kitten`で検索した際の画面です。
Google画像検索に似ていますが結果は違うみたいです。(マイナーな単語だと結果の件数がゼロだったりします)
![image](https://qiita-image-store.s3.amazonaws.com/0/35595/f8c8b631-7a40-da8b-d57c-738a81b1d469.png)


#### Google Maps
`富士山`で検索した際の画面です。
Googleマップ検索と同じ地点をちゃんと返すようです。
緯度経度・住所なんかを返してくれます。
![image](https://qiita-image-store.s3.amazonaws.com/0/35595/0f2459d5-e0ac-8a4f-47fe-f116be6c5446.png)


#### Video Search
`puppy`で検索した際の画面です。
Google動画検索に似ていますが結果は微妙に違うようです。
![Kobito.OGLkaZ.png](https://qiita-image-store.s3.amazonaws.com/0/35595/a15cb392-0068-0715-e65a-33b36d7f5945.png "Kobito.OGLkaZ.png")



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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/2f46af89-8e6e-b6f7-15d2-5f07d12a667b.png)





## 開発向け
ここに記載していない機能もあるので、基本的には公式の[リファレンス](https://developers.google.com/picker/docs/)を参照してください。
わかりにくいところなどを補足していきます。

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

#### Google Picker APIをONにする
![image](https://qiita-image-store.s3.amazonaws.com/0/35595/61a71eb6-999f-244b-1ba2-01c2cf7da4dc.png)


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

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/ecb9e6f2-b280-6016-b940-34b1b81b7cea.png)
※localhostは開発用です。

#### OAuth クライアント | ウェブアプリケーションの設定
httpでもhttpsでもどちらでも行けるように2つ指定しています。

![image](https://qiita-image-store.s3.amazonaws.com/0/35595/6086daad-10d6-a8cd-4f53-8f081e82f87c.png)

※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

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

```json: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](https://developers.google.com/drive/v3/reference/files/get)などを駆使してファイルのバイナリを取得していく形になります。


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

```diff: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: