Crop Hints — WordPress Plugin
💡Crop Hints — WordPress Pluginは「Hawk Vision — WordPress Plugin」にリニューアルされました。
今年の4月に新型コロナの緊急事態宣言が発令され、なかば強制的に自宅に閉じ込められる状況となりました。世界中の人間がひたすらインドア耐性と人間性を試されるという特殊な経験です。
ゲームや読書に勤しんだり、Netflix の映画やドラマを観まくったりと、僕も色々と工夫して「おうち時間」というやつを楽しんではいましたが、いよいよすることがなくなったので昨年末からプライベートでこそこそ作っていた WordPress のプラグインを仕上げにかかりました。
ようやくプライベート・ベータの段階に入ったので、（そんな人がいてくださるか疑問ですが）若干名のテスターを募集してみようかと検討しています。
6月中旬くらいに正式に配布 & 販売開始予定としていますので、もう少しお待ちください。
以下、ちょっとしたプラグインの紹介です。
1. なにができるの？
Crop Hints プラグインは、WordPress のメディアライブラリに画像がアップロードされた際に、Google Cloud Vision AI の力を借りて画像を解析し、画像内の被写体や重要なオブジェクトの位置データを抽出します。
このメタデータを「クロップヒント」と呼び、WordPress のデータベースに再利用可能な形で保存します。
WordPress サイトを制作するデザイナーやデベロッパは、テンプレート実装時にこのクロップヒントを利用することで、画像の配置やレイアウトに役立てることが出来ます。
具体的には以下の2つを挙げますが、クロップヒントをどう活用できるかはデザイナーやデベロッパの腕の見せ所と言えます。
1.1. Ken Burns Effect
Ken Burns Effect は画像の特定のポイントやエリアに向かって画像をパンさせたりズームさせることで印象的な効果を生むエフェクトで、映画やCMなどにも広く利用されています。
ウェブサイトにおいて、画像がアニメーション効果を持って次々に挿し変わる「スライドショウ」はかなり一般的ですが、このスライドショウの各画像にクロップヒントのデータを反映したアニメーションを実装することで、Ken Burns Effect を伴ったスライドショウを実現可能です。
そして一度仕組みを作ってさえしまえば、後は WordPress の管理画面で複数の画像を選択するだけで、各画像に合わせてパンやズームの位置を変更した Ken Burns Effect スライドショウを自動的に作成することが出来るようになります。
1.2. レスポンシブ・イメージ・ボックス
デスクトップビューでは横長となる写真を、スマートフォンビューではより印象的に見せるため表示面積を獲りやすい「縦長」で表示させたいケースがあります。
こういった場合、デスクトップ用とスマートフォン用で2枚の異るクロップ位置の画像を書き出して対応するのが一般的かと思います。
しかしクロップヒントと CSS の object-position や background-position を利用すれば、任意の縦横比をとりつつ被写体の位置がボックスに追従する、非常にスマートな画像配置を実現させることができます。
これらの例は Crop Hints プラグインのプロダクトサイトに実際に置いていますので、見て体験いただいた方が理解が早いかもしれません。
2. 誰がつかうべき？
Crop Hints は、インストールした直後から WordPress サイトの見た目に変化を与えるような直接的な作用を及ぼすプラグインではありません。
画像から抽出した「クロップヒント」を、テンプレートのデザインや実装にどのように活用するかが肝で、かつそのアイデアを実装する力も必要となりますので、普段から WordPress サイトを構築しているデザイナーやデベロッパが対象と言えます。
3. 料金はかかる？
はい。
Crop Hints プラグインの利用には Google Cloud Vision API の利用料とサブスクリプション費用の2種類の料金設定が存在します。
3.1 Google Cloud Vision API 利用料
Crop Hints には Pro と Standard の2つのエディションが存在します。両エディションとも Google Cloud Vision API の利用が前提となっているため、Google が定める Cloud Vision API の利用料 がかかってきます。
ただし。Cloud Vision API には毎月1,000ユニット* の無償枠が設定されていますので月に1,000枚も処理することはまずないという小中規模のウェブサイトであれば実質無償での利用が可能です。
（* ユニットの定義はやや複雑なのですが、Crop Hints プラグインに於いては1枚の画像からクロップヒントを抽出するのに1ユニット使用します。）
また無償枠を使い切って仮に月に10,000回利用してしまったとしても13.5ドル程度と、かなり良心的なボリュームプライスが適用されますので破産の危機とかは迎えないと思いますし、心配であれば Google 側であらかじめ月間の利用回数を制限する設定も可能です。
当然、この Cloud Vision API の利用料は Google にお支払いいただくものですので私の利益にはなりません。
3.2 サブスクリプション料
Crop Hints の Pro エディションの利用には、サブスクリプションの料金を設定しています。
月額3ドルをいただけばと思いますが、1つのサブスクリプション契約をしていただければ、インストールできる WordPress のサイト数に制限はしていません。
（そもそも GPL ライセンスですので本来制限をしてはならない筈なのですが、そうしたプラグインは多いですね…。）
このサブスクリプションの費用についてはプラグインの機能追加・改善や継続的なメンテナンスの工数に役立てたり、他のプロジェクトの資金として将来的に活用させていただければありがたいなと考えています。
Standard エディションについては無料でご利用いただけますが、Pro エディションから機能を削減したライトな仕様となっています。詳細は Pricing のページをご確認ください。
サブスクリプションの解約はもちろん違約金などはなくいつでも可能です。
4. Pro エディションとは？
Pro エディションには Standard エディションの全機能に加え、クロップヒントをより有効活用いただける便利な機能をご用意しました。
将来的にも Pro エディションのみに展開する追加機能を計画しています。
4.1 Smart Cropped Images
Pro エディションでは
- 画像から抽出したクロップヒントを基にして
- 画像を任意のアスペクト比で
- 被写体が最大限含まれるよう自動的に計算し切り抜く
機能を提供します。そして元画像から切り抜かれた画像を「Smart Cropped Image」と呼称しています。
具体的な利用としては、
- プロダクトが中央に配置されていると限らない商品画像から、正方形のサムネイルを切り抜く。
- Facebook 用の og:image（アスペクト比 0.525）を自動生成する。
などが挙げられ、これらの Smart Cropped Image は画像からクロップヒントを抽出する際に同時に自動生成するよう、プリセットの設定を可能にしています。
また各画像の編集画面に上図のような画像エディタも用意しましたので、「画像のだいたいこのあたりが入るようにして、アスペクト比 2.35 でぴったり切り抜いておいて」的な地味で繊細な作業を WordPress 内でしていただけます。
生成した画像は後からまとめてダウンロードすることも出来ますので、簡易な画像切り抜きツール、リサイズツールとしても活用いただけるのではないかと思います。
また、テンプレート内で利用できるパブリック関数を用いることでテンプレート内で画像を動的に切り抜いて Smart Cropped Image を生成することも可能にしました。
4.2 フォーカス
Cloud Vision AI によって抽出されたクロップヒントはかなり汎用的に利用可能ですが、それでも条件によっては Smart Cropped Image の切り抜き結果がいまいちとなる場合があります。
例えば以下の例では、アスペクト比 2 となる Smart Cropped Image を切り出そうと試みていますが、Cloud Vision AI によって抽出されたクロップヒントが縦長であるため、あまり良い切り抜きエリアがピックアップされているとは言えません。
こんな時に手助けとなってくれるのが「フォーカス」機能で、クロップヒントの中でも特に重要なポイントをデータとして与えることが出来ます。
そしてこのフォーカスが存在する場合には、与えられたポイントを最重要なものと理解して切り抜くエリアをさらに賢く調整してくれるようになります。
5. 今後の展開
プラグインのメンテナンスや機能・UIの改善に重きを置きをおくつもりですが、
- メディアライブラリの一覧画面における複数画像のバッチ処理
- 画像から特徴色・代表色（ドミナントカラーを抽出）し、可読性のあるコントラスト比でカラーパレットを提案
など機能追加も検討しています。
個人的にはありとあらゆる機能を網羅した「スーパープラグイン」のようなものは余り好みでないので、図体が大きくなりすぎないようバランスをとりつつ、ニッチなニーズを満たしていくことのできるものに仕上げていければと思っています。
