PicasaWebアルバムがシャットダウンしたのでGoogleフォトの埋め込みタグを生成するサービスを作った話

2016-08-27(Sat) Infomation
javascript Google Picker API API
目次

ついさっきブログ更新をしてましたが、それまでは8月冒頭でぱったりと切ってました。理由はここに書いたとおりです。それからしばらく経って8月のお盆ぐらいに埋め込みタグを生成するサービスづくりに着手してました。

Javascript書くの久々すぎて右往左往してましたが、コード的に大丈夫かはともかく公開してみました。

Google Photos Embed Code Generator

この写真を見ていただけるとわかると思いますが、こんな感じで埋め込みタグを生成してくれます。アルバム単位で決定するのでアルバムを作成することが条件です。写真単体でできるか調べてみてますが今のところまだわからないです。

仕組み

サービスと言っても、javascriptのみで構成されたhtmlファイル一つのみで実質ブラウザ側のみで処理しています。

Google Picker APIという、Googleのサービスで使えるファイルピッカーやアップロードを行うリッチなUI込のAPIを使いました。javascriptで動作するもので、Google API Consoleで必要なAPIキーとoAuth2のクライアントID/シークレットを取れば利用できます。

Picker  |  Google Developers

このサービスのコード自体もAPIのドキュメントに書かれているHello Worldのコードをほとんど変えることなく動いてます。なので使い勝手はものすごく良いと思います。GoogleフォトやGoogleドライブ, 画像検索やMapやYoutubeも扱えるらしいので、使わない手はないと思います。

Picker API Developer's Guide  |  Picker  |  Google Developers

このサービスを作るにあたって、以下のQiita記事が非常に参考になりました。ボタン操作で認証を走らせる方法がよくわかってなかったのですが、デモコードを参考に（javascriptのonClickイベントは少しだけ変更）させていただいてます。

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

howdy39/google-picker-api-demo: google picker api demo https://developers.google.com/picker/

というわけで、感想やまずいところなど教えていただけると嬉しいので、ぜひとも感想などいただければと思います。

今後の予定

  • 一度取得したアルバムのタグを数回キャッシュする
  • imgタグのheigthとwidthを設定として変更, 動的に変更する
  • タグ取得時に表示されているサムネールの大きさを設定でかえれるようにする
  • githubへの公開を近いうちに行う

今のところ満足してしまっていて優先度高くないですが、気になったら改善してみます。githubへの公開は近いうちに行っておきます。

おまけ:Googleフォト周りの写真のURLについて

最後に、このサービスを作る過程で、Googleフォト周りの画像URLについて調べていたものを上げておきます。関連するサービスで取得できるURLはこのぐらいあります。

元画像はこちらで

旧picasa経由, GooglePickerAPI, Googleフォト, アルバムアーカイブ(Picasa Webアルバムに現時点でアクセスすると見れる)で取れるURLがこちら

カオス感が半端ない。。。Googleは一体何がしたいんですかね？

あとGoogleフォトで有名な話ですが、公開設定関係なく画像のURLを公開するとその画像が見れてしまいます。このAPI経由でもそうらしいのでお気をつけ下さい。

隠したくて非公開設定した写真が覗き見されるかも！？オンライン写真サービスの意外なリスクを「Google フォト」で試す【吉川英一の「スマホのちょっと深いとこ」】 - S-MAX

追記:2016-08-28 23:06

Githubへ公開しました。ローカルなどで利用される場合はAPIキー, クライアントIDを変更下さい。

hrsano645/google-photos-embed-code-generator: Generate Embed Code(img tag) for Google Photos