ブログのイメージ保管場所に縛られるのが嫌になったのでGoogleフォトを使う事にした

   

最近、思う所あってWordpressからの移行みたいなものを簡単に出来ないかを調べている。

hatenaブログがWordpressからのインポートを受け付けるようになったのだが、ここでネックになるのは他でもない「画像」だ。

WordPressを自分のサーバでホスティングしている場合、普通に使っていれば画像素材はそのサーバに置かれる事になると思う。

wp-content/uploads/ 以下にアップロードする形だ。

これが一番楽ではあるのだが、いざプラットフォームを移行しようとなると話が変わってくる。

画像ファイルをそのまま移行先に持って行くことが出来れば良いのだけど、URLが変わってしまったりするのでイマイチな感じが否めない。
画像のURLが変わってしまうということは記事内に書かれているリンクが切れるという事だ。つまりそれは移行が出来ないと同義であると言える。

コンテンツ内に書かれたURLはドメインとは独立した場所に置いておきたい

つまりやりたい事はこれである。出来る限り永続的なものが良い。ブログサービスとは独立した存在の方がきっと良いだろう。

コンテンツ内に書かれた画像へのリンクは

<img src="https://永続的なサービス.com/xxxxxx" />

みたいな感じになっていて、コンテンツを移行する場合はテキストファイルだけエクスポートしてどこかでインポートすれば終わるのが理想。画像ファイルの移転は必要なくてものすごく楽だ。

せっかくGoogleフォトが容量無制限なんだし、そっちに移行しようかなと。

そう思って色々と調べてみるが、Google+のプラグインばっかりで上手く出てこず結構時間を喰ってしまった。

最終的にはここに書いてあるのを参考にした。

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

使うプラグインは

  • Photo Express for Google
  • Nelio External Featured Image

この2つ。上がGoogleフォトの写真を取ってくるプラグイン。

下のプラグインはWordpressはアイキャッチ画像は外部URLを使えないのだけれど、それを可能にするプラグイン。

以下は貼ってみた感じ。

設定はいじった。画像の横幅を650に。センター寄せっていう設定に変更して貼り付けた。

[peg-image src="http://lh3.googleusercontent.com/-anzHObcPozk/VctCaG0zHoI/AAAAAAAB3-E/wMhf7_3nFLQ/s144-o/IMG_7654.JPG" href="https://picasaweb.google.com/117388002231020458927/201508122?authkey=WVOvsnycArM#6182107929772236418" caption="" type="image" alt="IMG_7654.JPG" image_size="3264x2448" peg_gal_align="center" ]

コードはショートコードでこんな感じになる。

[peg-image src="http://lh3.googleusercontent.com/-6O2TCOkifcs/Vcvtb97yZDI/AAAAAAAB4mk/F6wzaqQgqgo/s144-o/gphoto.jpeg" href="https://picasaweb.google.com/117388002231020458927/XkFdDF#6182295978233717810" caption="" type="image" alt="gphoto.jpeg" image_size="906x58" ]

ショートコード内にあるsrcのURLで画像を貼り付けるとこんな感じになる。サムネイルですねこれ。

でも何故かサイズ指定すると大きくなっても画質が落ちてない。なんだろうこれは謎である。

面倒じゃない手順を構築する

便利っちゃ便利なんだけど実は面倒くさいというのは嫌である。Wordpressはデフォルト状態だと画像をアップしてそのまま挿入できるのだからそれに匹敵しなくてはならない。

僕の場合は、例えば画面のスクリーンショットを取る場合は、Skitchを使って該当箇所を切り取り、加工したファイルをダウンロードフォルダにダウンロードしてからWordpressにアップする。(Chrome使ってるとこうなってしまう。SafariだとSkitchからそのままWordpressにドロップすればアップされるのに何故なんだろう)

同等の事を実現するには、ダウンロードフォルダに落とすまでは一緒だ。僕の場合は、GoogleフォトのアップローダをMacにインストールしてあるので、ダウンロードフォルダを同期フォルダとして指定しておけば、自動的にアップロードしてくれる。地味に便利。

当然ながら読み込みが遅い

 

[peg-image src="http://lh3.googleusercontent.com/-1DWYgBbvcqk/VcvvSJNEFVI/AAAAAAAB4O4/RwCNKg-AIHE/s144-o/insertwait.jpeg" href="https://picasaweb.google.com/117388002231020458927/XkFdDF#6182298008483534162" caption="" type="image" alt="insertwait.jpeg" image_size="607x465" ]

外部サービスだからね。ちょっと時間かかるね。ボタンおして5〜10秒くらいだろうか。

でもWordpressにアップする場合もアップ→サムネイルを生成するのに同等かもう少し時間かかったりするのでここは同等と言って良いんじゃないかなと個人的には思います。

移行する時はどうすればいいか

さっき表示したとおり、ショートコードが挿入されるのですが、これは置換すればなんとかなる気がする。

ショートコードから実際に出力されるのは以下のようなタグ。

<img src="https://i2.wp.com/lh3.googleusercontent.com/-34nC6rpAPfU/VcvljrihfEI/AAAAAAAB3_Q/ZeilKY6gyyw/w650-o/IMG_7654.JPG?w=580" alt="IMG_7654.JPG" title="" class="aligncenter peg-photo" width="580" height="435">

ドメインがip.wp.comになってるのはjetpackでコンテンツをCDNに渡しているからなんだけど、そもそもGoogleフォトの配信スピードがそれなりに早いっぽいのでこの設定も不要かもしれない。

で、エクスポートしたXMLから、ショートコード部分を適当にイメージタグに置換してあげれば何とかなりそうですねという事がわかったので、これでいいかなという所まで来ましたよっと。

オススメNginx本

nginx実践入門 (WEB+DB PRESS plus) 単行本(ソフトカバー) – 2016/1/16

nginxを現場で活用するための知識を、実践的なノウハウを交えて解説した書籍です。nginxのインストール方法や基本的な設定方法からはじめ、nginxを利用した「静的コンテンツ配信サーバ」「HTTPSサーバ」「Webアプリケーションサーバ」「大規模コンテンツ配信システム」の構築方法をそれぞれ詳しく紹介しています。後半ではnginxサーバのモニタリングやログの収集、そして軽量スクリプト言語Luaでnginxを拡張する方法について解説しているので、nginxをこれから使う方はもちろん、さらに活用したい方にもお勧めです。

 - Wordpress