サイト外に画像をおいてWordPressで使う—Google Photos

サイトを運営していると、あっという間にサーバーが一杯になって行きます。このサイトも始めたばかりですが、もし1年続いたら、サーバー容量を一杯まで使ってしまうと思います。

そこで、アイキャッチ画像や貼り付ける画像を外のサーバーに置くという考え方が出てきます。改組されて新しくなったGoogleのサービス、Google Photoを使うことにしました。

（2017年8月、アンインストールしました）

Google Photos
Photo Express for Google
Nelio External Featured Image

Google Photos

Googleの写真ストレージサービスは、結構変化が激しくて、2004年にPicasaを買収して始まりました。ソーシャルネットワークサービスのGoogle+の開始後、Google＋PhotoとしてPicasaと統合されたサービスがあり、無料で保存できる画像が増えていました。

2015年5月29日に新しくGoogle Photosが発表され、もう稼動しています。Google＋Photo Storageとは（相互に関係はあるけれど）関係ない新しいサービスです。

Google+PhotoもPicasaも今も使えるため、何がなんだか分からないのですが、Google Photosにメリットがたくさんあります。

1600万画素までの画像なら保存容量無制限
フルHD（1080p）の動画も保存容量無制限
WordPressにプラグインがある
速いかもしれない
HTTPSもミックスコンテンツにならない
Google＋の登録は要らない

実質、保存容量が無料で無制限

特筆すべき点は、1600万画素までの画像が無料で保存容量無制限という点です。1600万画素というと、

4000×4000ピクセル
約4620×3465ピクセル（コンパクトデジカメ、スマホなど）
約4900×3265ピクセル（デジタル一眼レフ）

で、巨大です。デジタル一眼レフの写真をそのまま保存する場合には、Google Driveの容量を食っていきますが、1600万画素を超えなければ無料です。

デジタル一眼レフといっても、2015年夏時点では最新の最上位機種でなければ1600万画素を大幅に超える解像度の写真は撮れません。ネット上の画像サイトでも、これを越える画像にはそうお目にかかれませんし、ブログの画像にするには大きすぎます。

WordPressのプラグイン

WordPressでは無料で使えるプラグインでGoogle Photos、Google+ Photo、Picasa Web上の画像を利用できます。

（2015年に入って、認証方式が変わったそうですので古いプラグインは動きません）

Googleは速いかも？

世界中どこでも高速アクセスできるかどうかは分かりませんが、アクセス制限されているグレートウォール内でもなければ、大丈夫かなと思います。

このページ以降しばらくの間試してみたいと思います。（プラグインが更新停止しているのとあまり使わないので2017年停止しました。

Photo Express for Google

まずは、記事内にGoogle Photos、Google+ Photo、Picasaの画像を貼るためのプラグインです。

Googleのストレージに置いた画像は、画像を公開してもアルバムにしても、そのまま画像URLとして使うことができません。

公開した場合に共有アドレスとして出されるURLはGoogleの短縮URL、goo.glですが、短縮される前のアドレスにアクセスしても、Googleのサイトが表示されるだけで、画像への直接リンクではないからです。

これをサイト外から使うためのプラグインが、この「Photo Express for Google」です。APIを使うため、写真を公開する設定にしていなくても利用できますが、このプラグインを使って公開した画像のアドレスへアクセスすれば画像を見られます。アップロードしたままの状態では使うことはできません。

アルバムに追加する（公開する必要はない）
公開する

と使えるようになります。

アップロードする際に、画像圧縮プラグインの記事で紹介したプラグインを使ってロスレス圧縮されているのでサイズは多少違うかもしれません。

画像の回り込みが正常にならない

同じ写真を自分のサーバーに置いたものとGoogle Photos経由のものと並べると、表示はされるもののうまく処理されず正常に表示されません。

レスポンシブルデザインを使っているのですが、画像がサイトの幅よりも小さい場合には、周りに<div>などを置いても無視して回り込んでしまうようです。

画面幅が小さい場合には、きちんと表示されますので回りこむ分を改行で埋めたりするとスマホで見たときにやばいです。

ローカルにアップロードした画像

不具合の対処方法

対処方法１：最大幅を大きくする

対処方法は、Photo Express for Googleのプラグイン設定でサイトが表示されるであろう幅よりも、最大幅を大きくすることです。

設定幅よりも小さい画像を置いた場合には回り込みが起こってしまいますが、大きな画像が見苦しいほどかぶってしまうことはなくなります。

対処方法２：ショートコードを使わない設定にする（非推奨）

設定の下のほうに、

Return HTML instead of shortcode

という項目があり、これを有効にするとショートコードの代わりにHTMLコードを書き込んでくれます。その場合には不具合は避けやすくなりますが、代わりにGoogleがAPI仕様を変更したときに大きなリスクを負います。

生成されるショートコード。だいぶ改変

[[peg-image src="https://***.googleusercontent.com/ごちゃごちゃ/Photo-Express-for-Google-setting.png" href="https://picasaweb.google.com/*******/アルバム名#画像番号？" caption="" type="image" alt="Photo-Express-for-Google-setting.jpg" image_size="1089x228" ]]

生成されるURLはこんな感じ。同じくだいぶ改変。

<a href=http://***.googleusercontent.com/ごちゃごちゃ/Photo-Express-for-Google-setting.png link=https://picasaweb.google.com/*******/アルバム名#画像番号？ title="" class=photoswipe rel=post-191 data-size=1089x228><img src=http://***.googleusercontent.com/ごちゃごちゃ/Photo-Express-for-Google-setting.png alt=Photo-Express-for-Google-setting.jpg title="" class="alignleft peg-photo"/></a>

例によって、なぜか画像参照コードがHTTPSでもプロトコール参照でもなく、HTTPと書かれていて、ミックスドコンテンツになります・・・。リンクのほうはHTTPSなのに・・・。

CM On Demand Search And Replaceでは、ショートコードの中身も変えてくれるようなので、ショートコードの記載、