Google Photos は基本、容量無制限に使うことができるので、とても便利だ。間にコメントを入れたりもできるが、アルバムページのレイアウトの自由度自体はあまり高くない。そこで
- Google Photos のアルバムをそのままウェブページに読み込み
- コメントを解析してウェブの表示を工夫する
という方針で html + css + js だけでサイトを作る方法を書く(jsを正しく動かすために http-server は使っている)
- Get started with REST | Google Photos APIs | Google Developers で
client_id
を得る。client_secret
はサーバサイドを実装しないので使わない。http-server
使うので、http://localhost:8080
をAuthorised JavaScript origins
とAuthorised redirect URIs
に設定しておく。(環境によって適宜ポートを書き換えてください) - API key も取得する。同じ画面の
Credentials in APIs & Services
のリンクから、Create Credentials する。
- Method: albums.list | Google Photos APIs | Google Developers の Try this API の結果を見て、
albumId
を得る - Method: mediaItems.search | Google Photos APIs | Google Developers の Try this API のウィンドウを拡大表示にし(右上の□っぽいアイコンを押す)、アルバムを指定した検索のJavaScript を得て、上の3つのIDやkeyを設定する。
troubleshooting
- javascript - idpiframe_initialization_failed in Google Sign In from Localhost - Stack Overflow キャッシュ消す
その他参考
- API limits and quotas | Google Photos APIs | Google Developers library は一日 10000、baseURLでの画像アクセスは一日 75000がリミット 利用状況は https://console.cloud.google.com/iam-admin/quotas からプロジェクトを選択。