Hawk Vision – WordPress Plugin
--
WordPressのメディアライブラリに画像をアップロードすると、Google Cloud Vision AIを利用し被写体の含まれる画像の重要な領域 = クロップヒント を抽出し、メタデータとして保存するプラグイン「Hawk Vision」を公開しました。
2年ほど前に “Crop Hints” プラグインとしてサブスクリプションモデルで公開したところ、まったくもって売れなかった（←欲張った）代物なのですが、今回オープンソースとして作り直し、WordPress公式プラグインディレクトリに登録してもらいました。
WordPress.orgの審査を通すのがめちゃくちゃ大変でしたが、細かいところまでしっかりチェックされたのは目から鱗な体験でした。
ユーザーインターフェースについてもかなりブラッシュアップを行っています。
可能になること
たとえば次の猫の写真をメディアライブラリにアップロードした際、
Hawk Visionの自動解析モードを有効にしているだけで、Google Cloud Vision AIが以下のようにクロップヒントを認識し再利用可能なデータとしてデータベース内に保存してくれます。もちろん画像として保存することも可能です。
このデータはPHPテンプレート内で hawkvision_get_crophint という専用メソッドを使うことで後から呼び出すことができます。
Array
(
[id] => 202 /* クロップヒント ID */
[post_id] => 123 /* 画像の Post ID */
[status] => 'success' /* 関数の実行結果 */
[parent_width] => 2560 /* 解析した画像の幅（単位は常にpx） */
[parent_height] => 1707 /* 解析した画像の幅（単位は常にpx） */
[width] => 955 /* クロップヒントの幅 */
[height] => 1706 /* クロップヒントの高さ */
[vertices] => Array /* クロップヒントの各頂点の座標 */
(
[0] => Array
(
[x] => 1024
[y] => 0
)
[1] => Array
(
[x] => 1979
[y] => 0
)
[2] => Array
(
[x] => 1979
[y] => 1706
)
[3] => Array
(
[x] => 1024
[y] => 1706
)
)
[center] => Array /* クロップヒントの中央座標 */
(
[x] => 1501.5
[y] => 853
)
[focus] => Array /* クロップヒントに設定されたフォーカスの座標 */
(
[x] => 1722
[y] => 648
)
[force_analyzed] => false /* 強制的に解析されたか否か */
[load] => 'cache' /* データの読み込み元 */
[type] => 'auto' /* クロップヒントのタイプ */
[unit] => 'px' /* データの単位 */
)そしてこのデータをウェブサイトの実装でどのように活かすかはデザイナーやデベロッパーのアイデア次第ということになります。
クロップヒントの活用例
さきほどの猫の画像を
div {
width: 15vw;
aspect-ratio: 3 / 2;
}
div > img {
width: 100%;
height: 100%;
object-fit: cover;
}という条件で配置したとき、
となりますが。上記の div の aspect-ratio を 2 / 3 つまり縦横の比を入れ替えて設定した場合、被写体である猫が見切れてしまいます。
しかし img に対しクロップヒントのデータを object-position として適用するだけで
div > img {
width: 100%;
height: 100%;
// クロップヒントの中心点の位置を object-position として設定
object-position: 73.68% 50%;
object-fit: cover;
}被写体の領域をなるべく損なうことなく、追従するような実装が可能になります。
この例は実際に動作するサンプルとしてウェブサイトに掲載していますので、実際に触ってみた方が理解しやすいかもしれません。
「横長の画像を縦長の領域に表示」するというこの例は、PCサイトとスマートフォンサイトで同じ画像を流用するケースに特に当てはまると思います。
被写体が大きく見切れてしまわないように、これまではPCサイト用・スマートフォンサイト用で画像を2種類用意しなければならなかった手間が、クロップヒントの利用で省けるかもしれません。
マニュアルクロップヒント
Cloud Vision AIはあのGoogleの謹製ということもあり、その解析結果はかなり高精度と言えますが、なかには満足のいかない結果を得る場合もあるかもしれません。
その場合にはHawk Visionのインターフェースで「手動」でクロップヒントを設定できる機能も用意しました。
利用条件
Hawk Visionは上述のとおりGoogle Cloud Vision AIを利用し、そのインターフェースとも言えるプラグインです。そのためプラグインの利用にはVision AI利用のためのAPIキーの発行が必須です。
- APIキーの設定なしにはプラグインの利用自体ができないことがその他のプラグインと異なる点で、
- 加えてAPIの利用にあたってはGoogleの定める従量課金が発生します。
月毎に1,000ユニットの無償利用枠があり、それを超えても次の1,000ユニットごとに1.5ドルとかなり良心的な価格設定と言えますが、その点は踏まえなければなりません。
ちなみにHawk Visionでは画像1回の解析あたり1ユニットの利用となりますので、条件にもよりますが月に1,000枚も解析処理しないよ。ということであれば実質は無料で利用可能ともいえます。
これらの点はおそらく利用のハードルになると思いますが、これはGoogleの定めたルールですので回避することはできません。
Hawk Vision自体の利用には課金は発生しませんが、このことは理解していただければと思います。
その他の機能や仕様、今後の展望など
以上がHawk Visionプラグインのざっくりとした解説となりますが、細かな機能や仕様、料金についてもドキュメントをウェブサイトにまとめていますので参考にしていただければと思います。
かなりマニアックな機能を提供するプラグインですし、利用条件も上で述べたとおり通常のプラグインに比べ利用までのハードルが高いと言えます。なので皆さんにダウンロードしてもらってガシガシ使ってもらえるものになるとは全く想定していません。
元々は自身が携わるプロジェクトの品質を向上させる目的で地味に実装を重ねてきたプライベートなものだったのですが、
- WordPressプラグインの実装方法
- プラグイン公式ディレクトリへ掲載してもらうために必要な（審査に通すための）追加実装のノウハウやお作法
- 追加機能を有料アドオンとして提供するための実装ノウハウ
- プライベートでの利用ではなく、公開プラグインとしてリリースするにあたり追加で必要なリソースやそのレギュレーションの把握。
– ウェブサイト
– ドキュメント
– プラグインのヘッダ画像やアイコンなどのアセット
あたりを学びたかったのが開発の動機です。まんまと僕のスキルセットに加わりましたが、プラグイン制作をお仕事にしたいかは別のお話。
自身での利用のために細々とアップデートは続けていくつもりでいますが、大きな機能を追加する場合には有料のアドオンといった形で配布ができれば良いなと思っています。
既に作った一発目はこちらですが、詳しくはこちらの別記事で。
