Wordpressのブログの全画像をGoogleフォトから配信させるようにした

やわなべです。

先日、wordpressのテーマを自作してみて、wordpressの構造に関心を持つようになりました。

で、先週末、ふとこのエンジニアの方のブログを拝見して、Wordpressがどうやって画像データの情報を保持してるかを知ったんですよ。

wordpressで画像はどのようにデータベースに記録されているか | hellooooworld.com

以前からWordpressにアップロードした画像って、ムダにファイルが作られるなぁ、とは思ってたんですよね。

ss51972.png

これはFTPソフトで見たwordpressのアップロード画像保存フォルダの中身の一部ですが、「kousien.png」というのが私が最初に上げた元々の画像ファイル。「kousien-150×150.png」など、後ろにサイズがあるのがwordpressによって作られた派生サイズのファイルです。

「-e1407…」とついたファイルは、記事に貼り付ける際に、管理画面から自分でリサイズをかけた画像ですね。

詳しい挙動は上のエントリーにまとまっているのですが、アップロードした画像ファイルは、

・ 元サイズの画像ファイルを保存するだけでなく、サムネイル用など、複数のサイズのファイルを別々に作成して保存する

・ 管理画面上で、画像のリサイズをした場合は、さらに別の派生ファイルが作成される

ということのよう。

もちろんこの挙動はプラグインや設定で制御可能だとは思いますが、ムダになってるのは、それだけじゃないんですよ。

スポンサーリンク

1件投稿でファイル30件、データベースも20件増える

これも冒頭の記事にすべて書いてあるのですが、wordpressで画像をアップロードすると、データベースにも多くの情報が格納されます。

・ アップロードした画像の情報は投稿記事などと同じ「wp_posts」というテーブルに1画像、1レコードとして保存される

・ 記事(または、固定ページ)に画像を利用すると、記事IDと、画像IDとの関係を「wp_postmeta」というテーブルに保存する

・ アイキャッチ画像をメディアライブラリからセットすると、さらにその関係を「wp_postmeta」に保存する

とのこと。(「wp_」の部分はインストール時の設定によって異なります)

ためしにエックスサーバーにあるデータベースの管理ツール(phpMyAdmin)で中身を見てみたら、wp_postsのレコード数がが 2,393件、wp_postmetaのレコード数は6,635件ありました。

現時点でこのブログのページ数が、カテゴリ含めても400ページもないですから、ちょっと多い気がしますよね。

例えば、旅行記の記事を1つ書いたとして、そこに10枚のデジカメの高画質の写真をアップしたとしましょう。うち1枚をアイキャッチ画像に指定したとすれば、この時サーバーに格納される情報は…

・画像ファイル: 元ファイル10枚 x 2パターン = 30ファイル

・データベースのテーブルwp_posts に11件(記事1, 画像情報10)

・同、テーブルwp-postmetaに11件(画像添付情報10件+アイキャッチ情報1件)

といった、大げさなものになります。

といっても、ブログ開設以来、これまでアップした画像データ量は全部足しても2GB以内で、エックスサーバーのDISK上限(200GB)からすれば、問題視する必要は全然ありません。

が、検証用の環境を作ろうとしたり、別サーバーに引っ越ししようとかした場合に、使わないファイルやデータが多いのはちょっと気になります。

あとデータベースの中で、記事データと同じ場所に画像の数だけレコードがあったら、記事の読み出しパフォーマンスに影響したりしないのかしら。知らないけど。

Googleフォトを画像ライブラリとして利用できないか

「画像を外部サーバーに保存できないか」と考える人は、昔からいっぱいいらっしゃったようで、wordpressのプラグインにも、「Photo Express for Google」というものありました。めったなことではプラグイン入れない私ですが、これはありがたく使わせていただきます。GoogleのAPI認証が超面倒なんで。

WordPress › Photo Express for Google « WordPress Plugins

インストールすると、wordpressの記事投稿画面の画像アップロードの横にフォトアイコンが出て、アップロード同様にGoogleフォトのライブラリから挿入画像を選ぶことができます。

Googleフォトは一定のサイズ以内の画像であれば無制限に保存できますから、ブログ用にはうってつけです。

プラグインをインストールすると、管理画面の画像アップロードボタンの横にGoogleフォトのアイコンが出て、それを選ぶと、

ss55662.png

このように、Googleフォト内の画像一覧から挿入する画像を選べます。自分のサーバーにはファイルも増えないし、データベースのムダレコードも作成されません。

Googleフォトの画像貼り付けはサイズが自在

さらに、Googleフォトにはうれしい仕様があって、「URLの呼び方で自在に表示サイズを変えられる」というメリットがあります。

公式にアナウンスされてる仕様ではないようなんですが、たとえばこの画像。

DSCN0302.jpg

Googleフォトから呼び出してる画像なんですが、タテ・ヨコの最大幅を480pxで表示するように呼び出しています。このURLの一部を変えれば、

ss55662.png

最大幅300pxの画像を配信してくれますし、

ss55662.png

サムネイル用に150×150の正方形にして表示させたり、

ss55662.png

横に90度回転させろ、とかも自在。すごいですよねぇ

事前に画像をGoogleフォトにアップしている必要はありますし、プラグインを動かすにはGoogleのAPI登録をしないといけないとか、アイキャッチには対応してないとか、いろいろハードルはありますが、かなり柔軟性を感じます。

最終的なゴール

私の最終的なゴールはこうです。

1. WordPressにアップされてる過去記事画像の元ファイルをすべてGoogleフォトへアップロード

2. 過去記事内でアップロード画像を使っている箇所を、GoogleフォトのURLにすべて変換する

3. テンプレートの、アイキャッチ画像(サムネイル)を表示する箇所カスタマイズして、Googleフォトの画像がカスタムフィールドに登録されていれば、それを呼び出すようにする

4. 動作確認ができたら、wordpress内の画像データを全削除 アンド、データベース内のムダなレコードを削除する

実は3までできてて、4の削除だけはまだやってませんが、この投稿含め、サムネ画像も、過去記事の記事内画像も、すべてGoogleフォトからの配信に変換しました。(ロゴ画像とかは別)

さらっと書いてますけど、この「過去の全画像のアップロード」と「過去記事内の画像URLの全変換」の方法に、めっちゃ苦労しました。まあ、一番がんばったのはエックスサーバーとGoogleフォトなんですが。

全部終わったら、そのあたりの詳しい情報を追記するかも、しないかもしれませんが、とりあえず、ひと仕事終えた今の感想を言わせてください。

自分、wordpressで消耗しすぎ

 

(11/25追記)
ミッションコンプリートしたので、続編記事を書きました。