2018年5月にこれまでGoogleが公開していたPicasa Web Albumが終了し、Google Photosに移行しました。これに伴いAPIも変更され、Google Photos Library APIに変更されています。写真データを呼び出すだけでなく、アップロードや変更、アルバムの作成などがAPIからコントロール可能になっています。

Google Apps Scriptではそのままでは使えないAPIですが、OAuth2.0認証をすることで利用することが可能です。スプレッドシート上などに画像を挿入する場合、標準機能でGoogle Photosの写真が出せるので、こちらはどちらかというとアプリケーションとして管理や魅せ方などのガジェットで使いみちがあるんじゃないかなぁと思います。

今回使用するスプレッドシート

カルーセルスライダー入れようとしてまだ、入れてないです・・・スライドはしません・・・

概要

Google Photos Library APIはサービスアカウントではなく、通常のクライアントIDとシークレットで認証をしてアクセスすることが可能です。標準でGASからアクセスする手段はないですが、UrlfetchAppのGETとPOSTだけでアクセスは可能になっていますので、今回は認証部分とアルバムIDの取得、画像リストの取得を行ってみたいと思います。

注意点として、アルバムIDはPhotosのアルバムのURLに含まれている文字列とは異なり、スクリプトからアルバム一覧を取得し、idという値で取得したものがアルバムIDになる点です。一度、リストを取得しないとわかりません。また、画像のURLは2種類あって、通常は、baseUrlの値を利用します。この2点を踏まえて実装が必要になります。

また、スコープは何種類かありますが、通常見せるだけであれば、https://www.googleapis.com/auth/photoslibrary.readonlyでOKです。アップロードや編集も行なう場合には、https://www.googleapis.com/auth/photoslibraryを利用します。

事前準備

Cloud Consoleにプロジェクトを連結する

今回は、Google Cloud ConsoleにあるPhotos Library APIを利用するため、Google Cloud ConsoleとGASのプロジェクトを連結させる必要性があります。以下の手順でプロジェクトを移行しましょう。

  1. Google Cloud Consoleを開く
  2. 左上にある▼をクリックする
  3. ダイアログが出てくるので、新規プロジェクトを作るか?既存のプロジェクトを選択する。この時、G Suiteであれば選択元は「自分のドメイン」を選択する必要があります。
  4. プロジェクト情報パネルから「プロジェクト番号」をコピーする
  5. 対象のGoogle Apps Scriptのスクリプトエディタを開く
  6. リソース」⇒「Cloud Platform プロジェクト」を開く
  7. 4.で入手した番号をプロジェクトを変更のテキストボックスに入れて、プロジェクトを設定ボタンをクリックする
  8. 無事に移動が完了すればメッセージが表示されます。
  9. この時、元の自動作成されたプロジェクトはシャットダウンされて消えます。これで設定完了です。

図:プロジェクト番号が重要です

図:プロジェクトを他のプロジェクトに紐付けしました。

Photos Library APIを追加する

Google Photos Library APIはOAuth2.0認証が必要なので、クライアントIDシークレットが必要になります。取得手順は以下の通り。これはソースコード内に記述が必要ですので、控えておきます。

  1. スクリプトエディタより「ファイル」⇒「プロジェクトのプロパティ」を開き、スクリプトIDを控えておく
  2. スクリプトエディタより「リソース」⇒「Googleの拡張サービス」をクリック
  3. Google Cloud Platform API ダッシュボードをクリックします。
  4. 左サイドメニューからAPIとサービスを開き、「APIとサービスを有効化」をクリックします。
  5. photosと検索すると、Photos Library APIがあるのでクリック。有効化をクリックします。
  6. 続けて、左サイドの認証情報をクリックします。
  7. 認証情報を作成をクリックします。
  8. OAuthクライアントIDを選択します。
  9. 次の画面では、「ウェブアプリケーション」を選択します。
  10. 承認済みの JavaScript 生成元」では、https://script.google.comを入力
  11. 承認済みのリダイレクト URI」には、控えておいた1.の「スクリプトIDをつなげた、値(例:https://script.google.com/macros/d/スクリプトID/usercallback)を入力して作成をクリック
  12. クライアントIDクライアントシークレットが表示されるので、控えておく。
  13. ソースコード内に12.の内容を記述する。

図:スクリプトIDを取得しておきます。

図:Photos Library APIを有効化

図:認証情報を作成中の画面

OAuth2.0認証ライブラリの追加

今回のサービスは、OAuth2.0認証が必要です。以下の手順でOAuth2 for Apps Scriptライブラリを追加しましょう。

  1. スクリプトエディタを開きます。
  2. メニューより「リソース」⇒「ライブラリ」を開きます。
  3. ライブラリを追加欄に「1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF」を追加します。
  4. 現時点ではバージョンは30が最新ですので、それを選択しておきます。
  5. 保存ボタンを押して完了

これで、OAuth2.0認証にまつわる様々な関数を手軽に利用できるようになります。

図:ライブラリを追加した様子

ソースコード

GAS側のコード

認証系のスクリプト

アルバム一覧を取得するコード

  • GETで通信して、アルバム一覧データを取得しています。
  • このコードはテスト用で、アルバム一覧を取得する為のコードです。
  • このコードで返ってくる各アルバムについているidを見つけて、次のコードで利用します。
  • resultの中身は以下のような感じになります。

アルバムの画像一覧を取得するコード

  • 前項で得たアルバムIDを入力しておきます。
  • Access Tokenを取得し、POSTで通信して一覧を取得します。
  • その際にパラメータとして、payloadを指定しています(pageSizeとここでアルバムIDを指定します)
  • 画像リスト一覧は以下のような形で返ってきます。

ウェブアプリケーション側のコード

使い方と実行結果

使い方

今回は手抜きですが、使い方には手順があります。Client IDやSecret、およびアルバムIDをソースコード内に記述したら、以下の手順で認証が必要です。

  1. startoauth()を実行する
  2. 認証のウィンドウが出てくるので、認証をする
  3. Access Tokenがユーザプロパティに登録される
  4. スクリプトエディタの「公開」⇒「ウェブアプリケーションとして導入」。
  5. 色々設定して公開すると、最後がexecのURLが取得できる。表示するとウェブアプリとしてGoogle Photosの写真が出てくる

特に、2.が重要です。

図:Googleフォトライブラリの表示と管理が出てきた

データをウェブアプリとして表示してみた

直リンクURLとファイル名が取得できるので、色々なライブラリで色々な魅せ方が出来ると思います。今回のサンプルは結構手抜きなので、色々と追加しないと、アプリケーションとしてはちょっとアレだと思います。

関連リンク

共有してみる: