ForHosting KIT · 画像の編集・解析

アイコンの境界をグリッド線に合わせて確認

グリッドを使うとアイコン集に統一感が生まれますが、座標のわずかなずれを目視だけで常に見つけることは困難です。このチェッカーは、アイコンの境界ボックスにある左・上・右・下の各辺を、等間隔グリッドの最寄りの線と比較します。グリッド間隔と必要に応じた許容差を入力すると、全体の合否に加えて各辺の詳しい診断が返されます。同じ測定基準をすべてのアイコンへ適用したいデザインシステムの審査、素材処理パイプライン、自動品質検査に適しています。

● Beta無料・ブラウザ内で実行

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

アイコンとグリッドを同じ座標系で指定します

アイコンの境界ボックスを、左、上、右、下の 4 つの座標で入力してください。すべての値には、グリッドと同じ単位および原点を使用する必要があります。たとえば SVG の viewBox をユーザー単位で測る場合は、ボックス座標とグリッド間隔の両方を同じユーザー単位で指定します。書き出し工程がピクセル単位なら、すべてをピクセルで統一してください。グリッドの原点はゼロであり、正負の両方向にグリッド間隔の整数倍ごとに線が置かれます。したがって間隔が 8 なら、ゼロ、8、16、24 に加え、マイナス 8 やマイナス 16 にも線があります。正方形で均一な間隔を前提とするため、横方向と縦方向の座標は同じ方法で判定されます。ベクター変換や拡大縮小によってサブピクセルの境界が生じる場合に備え、小数座標も使用できます。右端と左端、または下端と上端が同じ値でも受け付けますが、通常の可視アイコンには正の幅と高さがあります。左右または上下が逆転した値は有効なボックスではないため拒否されます。特にグリッド間隔は正の値でなければならず、ゼロや負数を指定すると、誤解を招く判定ではなく入力エラーが返されます。

許容差と各辺の診断結果を読み取ります

許容差は、辺がグリッド線からどこまで離れていても整列済みとみなすかを定めます。初期値はゼロで、安定した数値正規化後の完全一致が必要です。正の許容差には境界値も含まれます。たとえば 0.02 を指定した場合、最寄りの線からちょうど 0.02 単位離れた辺も合格です。各辺について、元の座標、最寄りのグリッド線、両者の絶対距離、整列しているかを示す真偽値が返されます。さらに、4 辺がすべて合格した場合だけ真になる全体判定と、不合格になった辺をすべて列挙する一覧も含まれます。この組み合わせにより、素早い判定と具体的な修正案の両方を得られます。継続的インテグレーションでは全体判定を使って処理を失敗させ、デザインツールでは修正が必要な辺を正確に表示できます。一般的な浮動小数点誤差が応答に現れないよう、計算した小数は 12 桁に正規化されます。辺が 2 本の線のちょうど中間にある場合はどちらも同距離です。実装は一方を決定的に選びますが、距離と合否は変わりません。許容差にはゼロ以上を指定し、規則が無意味になるほど大きくせず、実際の書き出し工程に合わせてください。

アイコンの品質管理工程へ組み込みます

最も信頼できる方法は、実際に公開されるすべての変換を適用した後で境界を測定することです。元の文書では丁寧にグリッド上へ描かれたアイコンでも、拡大縮小、線のアウトライン化、viewBox の調整、書き出し最適化によって小数座標が生じる場合があります。その最終境界をチェッカーへ渡し、命名規則、寸法、ファイル容量など、ほかの素材検査と一緒に結果を保存してください。厳密なピクセルアイコンでは、整数のグリッド座標を書き出すことが要件なら許容差をゼロにします。アンチエイリアスを使うベクター素材では、制作ツールによる正当な丸めを反映した小さな許容差を定め、文書化してください。合格の意味がコレクション全体で一貫するよう、同じグリッド間隔と許容差を適用します。不合格時は、まず整列していない辺の一覧を確認し、各辺に示された最寄りのグリッド線を修正目標にしてください。この機能が評価するのは境界ボックスだけです。視覚上のバランス、線の配置、内部制御点、見た目の重さ、選択したグリッドが作品に適するかどうかは判定しません。ネットワーク、隠れた状態、特定ツール独自の解釈に依存せず、自動化と再現が容易な、範囲を限定した幾何学的検査を提供します。

活用例

デザインシステムのグリッドを統一

共有ライブラリーへ追加する前に、すべての投稿アイコンを同じ間隔と許容差で検査できます。

書き出し時のずれを検出

拡大縮小や最適化で小数座標が入った場合に、SVG やビットマップの最終境界を確認できます。

素材検査の不合格理由を明示

各辺の最寄り線と距離を返し、担当者が修正すべき箇所を正確に把握できるようにします。

よくある質問

確認にはいくらかかりますか？

API による確認は 1 回 $0.002 です。このページのブラウザー版はローカルで実行できます。

グリッドの原点はどこですか？

原点はゼロです。グリッド線は、間隔の正負の整数倍ごとに配置されます。

許容差は境界値を含みますか？

はい。距離が許容差と完全に同じ辺も、整列済みと判定されます。

座標やグリッド間隔に小数を使えますか？

はい。有限値で同じ座標系を使用していれば、すべての数値入力に小数を指定できます。

グリッド間隔がゼロまたは負数ならどうなりますか？

正でない間隔ではグリッドを定義できないため、無効な入力としてエラーが返されます。

SVG や画像ファイル自体を調べますか？

いいえ。指定された境界座標だけを検査します。ファイルからの境界抽出は前段の工程で行ってください。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/image/icon-grid-alignment-check

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/image/icon-grid-alignment-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"bounding_box":{"left":16.02,"top":7.99,"right":47.98,"bottom":40.01},"grid_size":8}'

const res = await fetch("https://api.kit.forhosting.com/image/icon-grid-alignment-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "bounding_box": {
      "left": 16.02,
      "top": 7.99,
      "right": 47.98,
      "bottom": 40.01
    },
    "grid_size": 8
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/icon-grid-alignment-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "bounding_box": {
        "left": 16.02,
        "top": 7.99,
        "right": 47.98,
        "bottom": 40.01
    },
    "grid_size": 8
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/icon-grid-alignment-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"bounding_box":{"left":16.02,"top":7.99,"right":47.98,"bottom":40.01},"grid_size":8}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"bounding_box":{"left":16.02,"top":7.99,"right":47.98,"bottom":40.01},"grid_size":8}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/icon-grid-alignment-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "bounding_box": {
    "left": 16.02,
    "top": 7.99,
    "right": 47.98,
    "bottom": 40.01
  },
  "grid_size": 8
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.icon_grid_alignment_check",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

`max_mb`	15
`max_megapixels`	12

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

KITの完全なドキュメントを見る →