Hawk Vision – WordPress Plugin

可能になること

Photo by Anton Darius on Unsplash
左: Hawk Visionプラグインのインターフェース内で示されるクロップヒントの解析結果/右: クロップヒントを画像として保存した結果
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 > img {
width: 100%;
height: 100%;

// クロップヒントの中心点の位置を object-position として設定
object-position: 73.68% 50%;

object-fit: cover;
}
https://hawkvision.one

マニュアルクロップヒント

利用条件

  • APIキーの設定なしにはプラグインの利用自体ができないことがその他のプラグインと異なる点で、
  • 加えてAPIの利用にあたってはGoogleの定める従量課金が発生します

その他の機能や仕様、今後の展望など

https://hawkvision.one
  • WordPressプラグインの実装方法
  • プラグイン公式ディレクトリへ掲載してもらうために必要な(審査に通すための)追加実装のノウハウやお作法
  • 追加機能を有料アドオンとして提供するための実装ノウハウ
  • プライベートでの利用ではなく、公開プラグインとしてリリースするにあたり追加で必要なリソースやそのレギュレーションの把握。
    – ウェブサイト
    – ドキュメント
    – プラグインのヘッダ画像やアイコンなどのアセット

--

--

💻 Web Design and Develop @ aguije inc. / 🏄‍♂️ Pro Web Surfer / ≡ adidas SAMBA / 🚲 VanMoofer / 🎮 Nintendo Addict / 🇯🇵 nipponcolors.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Takehiko Ono

Takehiko Ono

587 Followers

💻 Web Design and Develop @ aguije inc. / 🏄‍♂️ Pro Web Surfer / ≡ adidas SAMBA / 🚲 VanMoofer / 🎮 Nintendo Addict / 🇯🇵 nipponcolors.com