Googleフォトのアルバムから埋め込みコードを生成するツールを作った【ブログに便利】
こんにちは、イズミです。
今回は、Googleフォトのアルバム共有リンクから、アルバムに含まれる画像の埋め込み用タグを一気に生成するツールを作成しました。
リンク：Google Photos Embed Link Generator
この記事には、このツールの使い方と、作成時に参考にしたことなどを残しておきます。
Googleフォトから埋め込みコードを生成したい理由
このブログでは、ブログ記事の管理に Contentful を使用しています。
Contentfulは、 無料プランの場合に保存できるレコード数が5000まで という制限があります。
※レコード数は、記事などの"エントリー数"と、アップロードした画像などの"アセット数"の合計
そこで本ブログではレコード数を節約するため、 画像サーバーとしてGoogleフォト を使用しています。
（過去記事：ブログの画像サーバとしてGoogleフォトを使う
しかし、この過去記事で紹介した方法では画像一枚一枚に手間がかかってしまい面倒になったため、アルバムから一気に 埋め込み用コードを生成するWebツール を作成してみました。
アルバムの作成手順と埋め込みコード生成の仕方
使い方はいたって簡単で、Googleフォト上でアルバムを作成し、その共有URLを張り付けるだけです。
アルバムの作成方法から、実際に手順を追って説明していきます。
まず、ブログに使用したい画像たちをGoogleフォトにアップロードします
アップロードが完了すると、左下にモーダルが出現します。
ここで、「アルバムに追加」のボタンを押して、先ほどアップロードした画像たちのアルバムを作成します。
（「共有アルバム」のボタンを押すと手順を若干飛ばせます。お好みで）
「新しいアルバム」を押してアルバムを作成します。
既存のアルバムに追加しても問題ないです。
タイトルを適当に入力し、左上の☑ボタンを押します。
右上の共有ボタンを押します。
「リンクを作成」ボタンを押します。
少し待つと共有用リンクが作成されるので、それをコピーします。
Google Photos Embed Link Generator を開きます。
入力欄に先ほどコピーしたアルバムの共有リンクを張り付けて、「GENERATE」ボタンを押します。
（リンクのURLではなく、https://photos.app.goo.gl/ 以後のIDのみ張り付けても動作します。）
するとこのようにアルバム内の画像一覧が表示されます。
オプション欄で次のような設定をできるようにしています。
- Width：Googleフォトから取得する画像の横幅を指定できます。
- Markdown：有効にするとマークダウンで画像を挿入するためのシンタックスを自動で追加します。
画像自体をクリックするか、各画像の右下の「Copy!」ボタンを押すと、埋め込みコードがクリップボードにコピーされます。
これをブログ編集画面等の埋め込みたい箇所に張り付ければ完了です！
埋め込みコード作成後の画面はそのままブックマークしておいて、作業を中断してまた別のタイミングで開くこともできます。
https://google-photos-embed-generator.glitch.me/***
の***の部分にアルバムのIDを入力して直接開くことも可能です。
※利用上の注意
- アルバムの共有を無効にしてしまうと、ブログに張り付けた画像も表示できなくなると思います。
- 本ツールによる画像の流出などについて責任は持てません。ブログ等でパブリックに公開する用の画像のみで利用してください。
参考記事
今回のツール作成では、以下の記事を大いに参考にしました。
How I used Google Photos to host my website picture gallery
Googleフォトのアルバムから貼り付け用のURLを取得するところまでは上の記事の内容をそのまま使用しています。
この記事のサンプルでは画像の一覧をjsonのようにただ並べて取得するだけだったので、ブログ作成に利用しやすいようにアレンジしてみました。
今回はexpressで作成しましたが、慣れていなかったのでたぶん簡単そうなところでもつまずいてしまいました。
まとめ
最後に、今回作成したツールのソースコードを一応貼っておきます。
リンク：Glitch
そもそも根幹部分は僕の製作ではないですが、ご自由に参考にしてください！
もし使ってみて感想や要望があれば、ぜひコメント欄まで！！
あと最近、東京の隠れフォトスポットを探すブログを始めたので、興味のある方は見てみてください！
Tokyizm - 「ココで撮りたい」を見つけるWebメディア -
ではまたー！
