読者です 読者をやめる 読者になる 読者になる

つばさのーと

つばさの日常を綴るのーと

Re:ブログ記事の画像を圧縮して差し替える作業を外注したい

f:id:tsubasa123:20170321165530j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

今日は雑記、というかちょっとした自慢?記事になります。はてなブログネタ、プログラム要素高め、そしてコードは載せない、なので最後まで読んでもあまり得るものがない記事かもしれません。それでも良い方はよろしくお付き合いください。

 

タイトル通りなんですけど、記事の画像を圧縮して差し替える作業を外注したい、というツイートをお見かけしまして。これ、私が受注してシステム化して自動でできるようにしたら大儲けじゃね?ってのが事の発端です。

 

 

そもそも圧縮してます?

 

皆さん、ブログに画像を掲載する時にちゃんと圧縮したものを利用していますか?私はあまり画像を掲載するような記事は書きませんが、一応、アイキャッチなんかの画像は圧縮してから登録するようにしています。

 

tinyjpg.com

 

私がいつもお世話になっているサービスがこちら。JPGとPNGの画像を圧縮してくれるサービスです。圧縮したい画像をデスクトップからドラッグアンドドロップするだけで圧縮した画像をダウンロードすることができる便利な奴です。もちろん無料、一度に圧縮できるファイル数やサイズに上限はありますが、一回に圧縮するファイル数を調整すれば特に問題なく利用できます。$25でPro契約もできますのでお気に召した方はお布施してどうぞ。

 

詳しい仕組みはよくわかりませんが、特に画質が劣化することもなく、大体半分くらい、画像によっては8割くらいファイルサイズを軽量化することができます。仕組みについてはサービスの下の方に英語で書かれていますので、気になる方は翻訳してみてください。

 

なぜ圧縮するのか

 

早いは正義、ですからね。通信速度を確保するために皆さん画像を圧縮してファイルサイズの軽量化を図っています。何年前か忘れちゃいましたけど、Googleの検索アルゴリズムにページの表示速度も取り入れられたようですし、PageSpeed Insightsみたいなツールも提供されていますので、やはり気にしている人は多いんじゃないでしょうか。

 

あと、モバイルファーストとか言われる昨今ですが、格安SIMやSIMフリーの低価格・低スペック端末などの普及により、あまり速度がでない通信環境でインターネットに接続する人も増えてきているようです。これらのユーザーにも快適にコンテンツを提供するにはやはり画像の軽量化は大切だといえるでしょう。

 

表示速度が0.1秒遅くなると売り上げが1%減るとか、昔どこかで目にした記憶があります。たしかAmazonさんだったような。そこまでシビアに考えているブロガーさんは稀だと思いますが、ガジェットの紹介記事とか、レシピの紹介で収益をあげている方にとってはかなり重要なファクターなのかな、画像いっぱい扱いますもんね、キレイな画像がないと魅力半減ですし。

 

でもめんどくさいよね

 

これから書く記事はいいんですよね、先ほど紹介したようなツールとか、フォトレタッチツールの最適化機能とかを利用してちゃんと画像を圧縮してから記事を書けばいいので。問題は過去に書いた記事。WordPressのようにプラグインで一発、といかないのがはてなブログの辛いところ。

 

基本的にはてなブログで画像を投稿すると「はてなフォトライフ」というサービスに画像が登録され、そこを経由するような形でブログ内に画像が配置されます。はてなのサービス上に画像が登録されるため、はてなが提供してくれいているサービスを利用しなければ画像を編集したりすることはできません。

 

こればっかりは仕方ないですね。プラットフォームをお借りしている立場なので、どうしようもありません。

 

はてな運営はAPIを用意してくれている

 

以前にこんな記事を書きました。

 

www.tsubasa-note.blog

 

はてなが提供してくれているAPIを利用して、ブログ記事の管理を自動化したよ、って話なんですが、このAPIは記事の情報を取得するだけでなく、編集や削除にも対応しているんですよね。これに加えて、

 

はてなフォトライフAtomAPI - Hatena Developer Center

 

はてなフォトライフ専用のAPIも用意されています。ん、これを組み合わせれば画像圧縮の自動化いけんじゃね?

 

(たぶん)できた!

 

かなり特殊な条件下ではありますが、(たぶん)成功。

 

$ php optimize.php http://ここにブログのURL

 

こんな感じでURLを指定して、コンソールからプログラムを実行すると勝手にそのページ内の画像を圧縮してアップロードしなおしてくれるやつです。すごーい。

 

とりあえず、拡張子はJPGのみに対応、私のブログではGIFとPNGは3枚くらいしか扱っていなかったので無視しました。UIはありません、CLIから記事のURLを個別に指定しての実行となっています。1記事ごとURLを指定する必要がありますが、まぁ、ちゃんと圧縮できているか確認したいのでまとめて実行する機能は持たせませんでした。

 

大雑把に処理の流れを説明しますと、

 

  1. 指定されたURLからコンテンツをスクレイピングし、記事に個別に与えられているIDを取得
  2. はてなブログAPIにIDを渡して記事の情報を取得
  3. 取得した記事の情報からはてはフォトライフで管理されている画像を1枚ずつダウンロード
  4. ダウンロードした画像を順番に別途インストールした圧縮ツールで圧縮して新しい画像を生成
  5. はてなフォトライフAPIを利用して圧縮した画像を新規登録
  6. 新規登録した画像名(ID)で記事の内容をすべて更新
  7. 最終的に更新された記事の内容で記事を編集して保存

 

といった流れ、かなりめんどくさいですね。はてなフォトライフのAPIで同じ名前で画像を編集できればよかったのですが、どうやら無理っぽかったので新規に画像を登録し、その情報を記事の内容に反映させてから記事自体を更新するようにしました。いやーがんばった。

 

さて、ほんとに効果はあるのかな

 

正常系の動作しか試していないのでまだまだ完成度は低いですが、30枚の画像が登録された記事を対象にプログラムを実行すると、画像の圧縮と記事の更新完了まで平均して120秒程度、画像の圧縮率は元画像にもよりますが大体60%前後で、圧縮前のページが約9Mだったものが約4Mまでサイズダウンできました。

 

通信速度に関しては実行時の環境に影響されますので一概には言えませんが、ツールを使って計測した結果、圧縮前は5~8秒程度かかっていたものが圧縮後は4~5秒で安定するようになりましたので、そこそこ効果はあるんじゃないかな、といったところです。

 

f:id:tsubasa123:20170320183358j:plain

 

画質に関しても特に問題ないかと。というか、自分の目では違いがわかりませんでした。

 

f:id:tsubasa123:20170320182439j:plain

 

左が圧縮前で右が圧縮後です。違いわかります?

 

公開したいけどできないジレンマ

 

最初はWEBサービスにして公開しようかなーと思っていたんですが、はてなブログ、はてなフォトライフ、どちらのAPIを利用するにもIDとパスワードを用いる必要があるんですよね。まぁ、記事や画像を登録したり削除したりできるサービスなので当然っちゃ当然なんですが。

 

そんな大切な情報を扱うプログラムを公開する勇気はございませんので今回のコードはお蔵入りとさせていただきます。ごめんなさい。

 

把握している問題や課題

 

自分用なのでいいかな、と思っていますがいくつか問題や課題もあります。

 

  • UIがない
  • 古い画像を削除しない
  • ダウンロード、圧縮した画像を削除しない
  • 一括して圧縮しなおす機能がない
  • マークダウン記法にしか対応していない
  • imgタグを直接記述したものに対応していない
  • JPG画像にしか対応していない

 

こんなところ。とりあえず遊びで使う分には特に困ることはないのでいいのですが、UIくらいは自分用でも作ったほうが捗るかなーといったところ。でもバッチ処理のためにUI作るとなんか負けたような気がするんですよね。

 

はてなフォトライフ上の古い画像を削除することがAPIを経由すればできるんですが、通信が発生するので結構処理時間に影響が出るので今回は見送り。DLしたファイルや圧縮したファイルを削除しなかったのも、後でコマンドでまとめて消せばいいかなーという理由から省略しました。それくらい手動でやってもいいよね。

 

JPG画像にしか対応していないのは、私のブログでPNG画像をあまり使っていなかったというのもありますが、圧縮ツールをインストールするのがめんどくさかったというほうが理由としては大きいです。なので、これはツールさえ入れればすぐに対応はできるはず。

 

技術的な補足も少しだけ

 

ちなみに、実行環境はLinux系のOSで、jpg画像の圧縮には「jpegoptim」というサービスを利用、もろもろの処理に関してはPHPという言語で記述しました。jpegoptimのインストール時にルート権限が必要になる(makeする必要がある)ので、VPSとか自分でサーバ管理している人ならAPIを駆使して同じことができるんじゃないかなーと思います。

 

jpegoptimのインストールに関してはこの記事で説明されているので参考にしてみてください。まぁ、パッケージダウンロードしてきてmakeするだけなんですけどね。もしかしたらlibjpeg-turbo-develみたいなモジュールがなくてエラーになるかもしれません。その時はそっちを先にyumとかapt-getとかでインストールすれば大丈夫だと思います。

 

jpegoptimに関してはかなり便利に使えそうなツールでして、複数ファイルの一括での圧縮や、圧縮率の調整、指定バイト数での圧縮などかなり細かいオプションが用意されていました。あとEXIF情報の削除なんかもあるので、この辺はまた調べて記事にしてまとめたいところです。

 

さいごに

 

久しぶりに頭空っぽにしてコードを書いた気がします。バッチ処理とか何も考えずに手続きでコード書くのは嫌いじゃないですね。あとAPIを利用するのはやっぱり楽しいです。本記事とプログラムを書くきっかけをくれたうぃるさん、興味がありましたらお声掛けください、何かお手伝いができるかもしれません。

 

ではでは、最後までお付き合いいただきありがとうございました。