身長比較画像メーカー — 使い方

できること

複数の人物の身長を並べて比較する画像を、ブラウザ上で作成できます。名前・身長・色を 自由に指定でき、作成した画像は保存・共有できます。すべての処理はブラウザ内で完結し、 入力内容や画像がサーバーに送信・保存されることはありません。

使い方

  1. 身長比較画像メーカー を開きます。
  2. フォームに名前と身長を入力し、「追加」で人物を増やします。色も指定できます。
  3. 入力に応じてプレビュー画像がリアルタイムで更新されます。上段が「指定した順」、 下段が「背の順」に並んだ2パネル構成です。
  4. 各行の「↑」「↓」で並べ替え、「削除」で除去できます。
  5. 「単位切替」で cmft/in(フィート・インチ)入力を切り替えられます。 切り替えると入力済みの人物データは新単位へ変換されず破棄されます。
  6. 「画像をダウンロード」で PNG を保存できます。「リンクをコピー」で、いまの構成を 復元できる URL(?people=…)をクリップボードにコピーします。「共有」は端末の 共有シートに画像と URL を渡します(Web Share API 対応時のみ表示。ファイル添付が 使えない環境では URL とテキストだけを共有します)。

仕様

URLパラメータ

現在の構成は URL に反映され、その URL を開くと同じ構成が復元されます。共有・ブックマークに使えます。

パラメータ 形式 説明
people 名前:身長:色 をカンマ区切りで連結 例: ?people=たろう:170:7c9eff,はなこ:160:ffb86b
unit ft または省略 ft のとき ft/in 入力モードで開く。それ以外は cm モード。起動時にどちらのモードで開くかを決めるだけで、以後の単位は画面の「単位切替」で変更する

people の各フィールド:

  • 名前: パーセントエンコードされます(名前に含まれる :, は自動でエスケープされるため区切り文字と衝突しません)。編集欄での上限は20文字です。
  • 身長: 常に cm 単位の数値(ft/in モードでも URL 上は cm)。有限かつ 0 より大きい必要があり、満たさない要素はその1件だけ無視されます。
  • : # を除いた6桁の16進カラー(例: 7c9eff)。不正な値は既定色 #7c9eff にフォールバックします。

people の全要素が不正な場合は、既定の2人(たろう 170cm / はなこ 160cm)が表示されます(?people=たろう:170:7c9eff,はなこ:160:ffb86b を開いたときと同じ状態)。

入力範囲

項目 範囲
身長(cm モード) 1〜1000、1 刻み
フィート(ft/in モード) 0〜9、整数
インチ(ft/in モード) 0〜11、整数

数値でない入力や 0 以下の入力は追加時に無視されます。

単位(cm / ft/in)

  • 単位は開いたときに決まり、その後は「単位切替」でのみ変わります。 使用中に 入力済みの身長を単位間で自動変換して持ち替えることはありません。
  • 内部の保持値も URL も常に cm です。 ft/in は入力の取り込みと表示のときだけ 換算し、ft/in 表示は 最も近い整数インチに丸めます(丸めた結果インチが12に なった場合はフィートを1繰り上げます)。
  • 「単位切替」は入力済みの人物データを新しい単位へ変換せず、すべて破棄して 作り直します(確認ダイアログを挟みます)。cm で入れた端数を ft/in の整数入力へ 無理に当てはめないための挙動です。
  • 目盛りは cm モードでは 5cm / 10cm 刻み、ft/in モードでは 3インチ / 1フィート刻みで表示します。

出力画像

  • 人数や身長にかかわらず、外枠は固定サイズ(880×820、書き出し時は2倍の 1760×1640 PNG)。 内容はこの固定フレームに収まるよう拡縮・詰め込みされます。
  • 名前は各人物の胴体内に描画されます。日本語などCJK文字を含む名前は1文字ずつ縦書き、 ラテン文字(英語など)の名前は90度回転して1行で描かれ、横書きのまま読めます。
  • 右下に Made with abstiro.com のウォーターマークが入ります。
  • ダウンロード時のファイル名は height-comparison.png です。

共有

  • 「リンクをコピー」: 現在の URL(?people=…&unit=…。構成をそのまま復元できる)を クリップボードにコピーします。すべての環境で使えます。
  • 「共有」: navigator.share に画像 PNG と現在の URL・テキストを渡します。Web Share API 非対応のブラウザではボタンを表示しません。ファイル添付に対応しない環境(デスクトップ等) では URL とテキストだけを共有します。共有をキャンセルしても何も起きません。
  • どちらもツール側からサーバーへは何も送信しません(共有先アプリに渡すだけ)。

補足

  • URL は入力のたびに history.replaceState で更新されるため、ブラウザ履歴を汚しません。
  • 画像は長押しまたは右クリックでも保存できます。