WordPressにGoogleフォトから1枚ずつ画像を配信する【2020年版】

WordPresssでGoogleフォトの利用WordPress
この記事は約11分で読めます。

※当サイトはアフィリエイト広告を利用しています

ブログの本文は文章を書くことですが、華やかさ不足を少しでも補うために画像を積極的に利用していきたい。

面倒くさがりなのでスマホでとってそのままブログで表示したい。編集とかもできるだけしたくない。ソフト開いて画像のサイズの調整とかもいや。

でもって、Wordpressサーバに画像をアップロードしたくない。画像ファイルってそこそこサイズ大きいし、レンタルサーバだから容量制限あるし。

となると、匿名あざらし的に選択肢は一つなわけですよ。
Googleフォトに集めた画像をWordpress上で直接表示する。スマホがandroidでGoogle Photo使いなので。

プラグインで楽勝っしょ。って思っていたんですが、全然面倒くさかった。
2020年現在、先人たち過去できてたことができなかったりするので備忘録のためにこの記事を残します。
同じように悩まれる方の参考になれば。

スポンサーリンク

Googleフォトの共有リンクを利用して画像リンクを1枚ずつ貼る

最初に結論です。この結論に至った経緯は後述。

ようするにやりたいことは

  • クラウドサービスに画像を集約して
  • 画像のリンクを取得して
  • WordPressに差し込む

以上な訳です。以下の手順を実施してください。

1. Googleフォトで共有アルバムを作る

外部公開するためにはアルバムの共有化が必要です。画像を選んで共有でもいいし共有アルバムを作ってから画像入れてもいい。画像選んで共有した場合でもそれ単体で共有アルバムを作るイメージなので、結果同じことです。

Googleフォトで共有アルバムの新規作成
Googleフォトのスクリーンショット。以降もブラウズのスクリーンショットが続きます

ついでに、共有の際の位置情報削除も設定しておきましょう。身バレ歓迎の人はそのままでもいいですがおすすめはしません。「リンクで共有するファイルの位置情報を削除」をオン。

共有ファイルの設定で位置情報を削除

Googleフォト自体の使い方なのでさらっと次行きます。

2. 共有アルバムのリンクを取得する

作成した共有アルバムを選択し、シェアボタン(ブラウザであれば右上あたり)をから「リンクを作成」をクリックし、共有アルバム自体のURLを発行します。

共有アルバムのURLを発行

ここで作成されるリンクは短縮リンクを呼ばれるもので、こんな感じになるはず。

https://photos.app.goo.gl/XXXXXXXXXXXXXX

ブラウザに入力してページを表示した時点で正規URLにリダイレクトされます。

3. 共有アルバムをGoogleフォトにログインしていない状態で開く

ここがポイントでありこの記事の存在意義になります。

Googleフォトの共有アルバムリンクって、Google Photoにログインしているかどうかでブラウザで表示したときの動きが変わってきますよね。ログインしていれば「画像をライブラリに保存」とかでてくるわけです。

今回は、ログインしていないことが大事。理由は後述。パソコンやスマホを別のものに変えてもいいし、手っ取り早いのはchromeのシークレットブラウザ。私もこの方法です。

ログインしていない状態で共有アルバムを開く

共有アルバムを開いたときにログインボタンの表示があればOK。

開いた先をブックマークしておけば、次回以降シークレットブラウザで開くだけ済むのでだいぶ楽になります

4. 画像の直接リンクを取得する

作成した共有アルバムから公開する写真を選択表示し、「画像アドレスをコピー」で直接リンクのURLが取得できます。必ずGoogleフォトにログインしていない状態でリンクを取得します。

画像アドレスのコピー

なにを言っているかですが。
ログインしているかどうかで、取得できるリンクが変わります。(URLの一部を変えています)

ログインしていない

https://lh3.googleusercontent.com/PXiqmcBk1Lnc3C1IiVlEpUxabd2GbGBL0xnvn5MscinyPvvpnJKtZDcJlNeK_d-NCnDI2QUg20jM4WGdvMs6U3wlchrGYzy0uRTw2wM63EVR_XXXXXXXXXXXXXXXXXXXXXX=w1536-h612-no

ログイン中

https://lh3.googleusercontent.com/RjvYMDZkyaDNRVOIEsy1K5EliaJoDaSqB2L60bCesj3VQjqbuK4s_cmrJW-7PFjHipkdWlQ7mVMTcJy4hFF2USrz4PUKFGMuIUCZSuAJpoLptzYdUHIkq_j_sBY_xLguZWyZSI55BwBbMFv5DD5_lUkx3Nmzxa4owHfZmJ-03ObUs76kyj0SISJjNUfAs55r60YFavKajhmdDYW4ceRaSZuKIIzofJpf80Yclf_8j7JyYd8Ve7KT30GBuSfSSRBg4wt1JchFKxskqJcqsz8hL0K5pCVBcSoggk-1l7JK_SSJyBEGHqYf_t2E7oMv-b6FWG5zJQEWuyiBWcRO2kqztQG8cDla_lcOH08yQdChwiT8KAwsYtoOfqxOprGvt5JAcb2y5ZN5oJQ70JPexsA0OE807KmPWN5AgPXDM6x0c0sIcX0DdW3P024Dzg1WP_2GJkcGOznZCq51FP_Q63JcHGNzh5zZ59UzqtEwa0SIvay4VFu8FNF5oEtcSoLcJCKENdndQzjkumdq9pAmnOlNa8tzKYgI4UvkPEdAfHzpoRewgxCPrg2ZaIoNSs0h0__B3oSmPEBTHEv0ieN8AleUTtmxuMlKkPittDtLUVR7J4lxgWgHblAwO85drCoYUXYJr5GaYEt9x97Sf7EJ2knPyP7w4SC88ymi2Tkj4Ksrb8Y6f0IN-kIqfSEn9ZJUAdBlx6twrcY-Mc9SB8Bt8pPoSE3icWXXXXXXXXXXXXXXXXXXXXXXXXXXX=w1232-h490-no

ね。これの何が問題かですが、ログイン中に取得したURLは、一時的なURL扱いで途中で表示できなくなるようです。

WordPressの記事差込用として公開し続けたい訳なので、途中で見れなくなのは困る。
必ずログインなしでリンクを取得しましょう。

5. WordPressにURLを貼るときに画像サイズを指定する

直接リンクの取得までできれば、あとはURLを貼るだけです。
ブロックエディタやらテキストエディタやらで手順違ってくるでしょうが、ブロックエディタなら「URLから挿入」で。

URLから挿入

URLで画像のサイズを指定(リサイズ)

GooglePhotoのURLを一部変更することで、取得する画像サイズの設定ができるようになっています。さすが天下のGoogle様!素晴らしい。

元々のURLが以下だったとして

https://lh3.googleusercontent.com/PXiqmcBk1Lnc3C1IiVlEpUxabd2GbGBL0xnvn5MscinyPvvpnJKtZDcJlNeK_d-NCnDI2QUg20jM4WGdvMs6U3wlchrGYzy0uRTw2wM63EVR_XXXXXXXXXXXXXXXXXXXXXX=w1536-h612-no

末尾の “=w1536-h612-no” がサイズ指定部分です。この例だったら、幅の高さの最大値指定。

横長の長方形画像が一般的だと思うので、”=wXXXX”の指定だけすればいい感じにリサイズしてくれます。

https://lh3.googleusercontent.com/PXiqmcBk1Lnc3C1IiVlEpUxabd2GbGBL0xnvn5MscinyPvvpnJKtZDcJlNeK_d-NCnDI2QUg20jM4WGdvMs6U3wlchrGYzy0uRTw2wM63EVR_XXXXXXXXXXXXXXXXXXXXXX=w780

Googleフォトの前身?であるPicasa時代からのパラメーターのようです。
ちなみに”w0″とすると原寸台で表示、”sXXX”とすると幅か高さの大きい方をXXXに指定、などなど。

英語ですが、詳しく解説しているサイト様を見つけましたので最後にリンクを置いておきます。

スポンサーリンク

ブログに画像を入れる作業の流れまとめ

一連のイメージとしてこんな感じ。

  1. スマホで写真とる。Googleフォトに自動でアップロードされる。
  2. Googleフォトのライブラリにアップロードされた写真からブログで使うようの写真を選び、あらかじめ用意した共有アルバムに突っ込む
  3. シークレットブラウザで事前にブックマーク済の共有アルバムを開き、画像アドレスをコピー
  4. WordPressの記事にURL指定でリンクを貼る。サイズの調整を実施する。

手順が煩雑そうなイメージあるかもしれませんが慣れるとそうでもないです。3.と4.の繰り返しなだけですね。

将来的に仕様変更の可能性はある

これは何のサービスにも言えることですが、将来的にGoogleの仕様変更によりこの方法が使えなくなるかもしれません。一番最悪なのは、直接リンクのURLが変わって見えなくなることですね。

この辺りは便利さなどのメリットとのトレードオフ関係だと思いますので、各位リスク込みでご判断ください。今のところ問題なく使えています。

2020年時点でプラグインはありません

以上がWordPressにGoogleフォトから画像を配信する方法の2020年版でした。
調べるのすごく大変だったので、どなたかプラグイン一発でばしっと連携できるようにしてください。私はphpは専門外なので。。

ここからは、この選択に至った経緯などを紹介していきます。ご興味あれば。

スポンサーリンク

GoogleフォトをWordPressの画像配信サーバとして使う理由

面倒くさがりの私がなぜこうまで調べに調べてまでGoogleフォト利用にこだわるのか。

自サーバから画像配信しないメリット

サーバのストレージ容量を消費しない

この1点につきますね。どれだけ画像を多用しようが、実画像ファイルはクラウド上なわけですから画像ファイルアップロードし放題です。レンタルサーバーは契約プランによってストレージの大きさ変わってきますし。

低スペックサーバでも処理能力関係なさそう

WordPressは記事が閲覧されるタイミングでデータベースから記事データを取得してhtmlとして組み立てる動きが基本です(結果のキャッシュとかはあるとして)。

自サーバに画像ファイルを持つことで、処理能力からくる画面表示速度に影響されそうじゃないですか。笑

Google様の世界最高峰に高性能なサーバにリンクを貼らせて頂けば、この部分の処理がまるまるクラウド側に任せられるので、ネックになるのはネットワーク回線ぐらいです。
大容量回線が当たり前になりつつあるこの時代でもあるので、ネットワークは問題にならないはず。

クラウドサービスがGoogleフォトの理由は?AmazonでもAppleでもいいのでは

はい、なんでも良いです。スマホで写真をとってPCで共有できれば。

匿名あざらしがandroidスマホ使いであって、Googleフォトとの親和性が高いからずっと使っています。
無制限でアップロードし放題、UIも美しいですし。

他の写真共有サービスでも同じような感じなんでしょうが、使ったことないので知りません。WordPressとの連携方法も。

WordPressにGoogleフォトのプラグインないの?

Googleフォトの写真を選択して1枚ごとにリンクを取得するプラグイン

以前はありました。このブログではないですが、過去便利に利用させていただいていました。

[Photo Express for Google] Support | WordPress.org

Googleフォトの前身のPicasa時代のAPIを叩く作りだったようです。
現在は開発も継続していなさそう。実際、ある時期からプラグインが機能しなくなっています。ブロックエディターにも対応していないしね。

新しくなったGoogle Photo API を利用するプラグインはギャラリー表示ばかり

Google Photo API は、フォトライブラリの写真を外部から操作可能にする新しいGoogleのAPIです。

Google Photos APIs  |  Google for Developers
Integrate Google Photos with your apps or devices.

これに対応したWordPressプラグインがいくつかあるのですが、いずれもギャラリー表示(アルバム表示)ばかりの模様。ドキュメントを詳しく読み込んでいないですが、先人者がいないってことは、新しいAPIでは写真を1枚ずつ取得するにあたりなにからしらのハードルがあるのでしょう。

スポンサーリンク

参考にさせていただいたサイト様

全体的に参考にさせていただきました。海外の英語サイトです。記事内にReactで組んだGoogleフォト画像URL生成ツールまであります(手動で準備する部分が結構あるので、わざわざツールを使うより本記事の方が結果的に早いと思われます)

Embed single image from Google Photos by shared link
Copy sharing link from Google Photos and paste into input of tool in this page. Press then “Get image url„ button to get direct url to use.

こちらの後半部分、Googleフォトのリサイズについて分かりやすい。前半部分は本記事の内容にも触れているようです。

Photos Resources

Googleフォトの共有URLの扱いについて解説されています。非SSLサイトでしたのでリンク化できず、ごめんなさい。

“http://nonsubject.arinco.org/2017/02/how-to-create-direct-link-from-google-photos.html”

コメント

タイトルとURLをコピーしました