# 身長比較 — 並べて見比べ、ダウンロードできる図 身長を打ち込めば、絵が持ち帰れます。描くために何かを送ることはありません。 > 身長を並べて比べられます。男性・女性・男の子・女の子に加えて、ドアや窓、ホワイトボード、自動販売機といったものも足せます。センチメートルでも、フィートとインチでも指定でき、できあがった図はPNGかSVGでダウンロードできます。描画はあなたのブラウザの中で行われます。 これはhttps://abox.tools/ja/compare-heights/にあるブラウザー用の対話型ツールです。ファイルはそのブラウザーを実行する端末上で処理します。意図した共有や任意の通信機能はページ内で説明します。以下は文章による説明です。利用するにはアドレスを開いてください。 ## 名前と身長、そしてそれでできる図表は**ブラウザー内で処理**されます。処理のためのアップロードはありません。 身長の図表は計算と絵です。送るファイルもなければ、頼るサービスもありません——そしてこのページが受け取る唯一のファイル、目盛りに載せるご自分の画像も、ここで読まれてどこへも行きません。男性・女性・男の子・女の子は、このページと一緒に配られるパブリックドメインの絵で、男の子と女の子は小さくした大人ではなく実在の子どもを描いたものです。家族の図表が、誰にも名指しできないかたちで狂って見えるのを防いでいるのが、まさにそこです。そのどの段階も、あなたが読めるこのページの数百行のJavaScriptの中で起きます。ネットワーク機能はそもそも一つもなく、それがここで大事なのは、打ち込む内容が人の一覧と、その一人ひとりの背丈だからです。 - ✗ アップロードなし - ✗ 登録なし - ✗ 透かしなし - ✓ オフラインで動作 - ✓ ソース公開 ## 身長比較チャートの作り方 1. **まず全員を入れて、見た目はそのあとで。** 1行が、図と名前と身長と色です。名前は任意で——名前のないシルエット二つに身長だけを添えた図が、まさに求められていることも多くあります—順番が大事なら、各行の矢印で左右に動かせます。 2. **身長は普段の書き方のまま打ち込みます。** `173`、`1.73 m`、`5'8"`、`68 in`、`5 ft 8`はどれも正しく読まれます。欄の下の行が、何と解釈したかを両方の単位系で示すので、読み違いは印刷したあとではなく描かれる前に見えます。単位のない数字は、メートル法の図ではセンチメートル、ヤード・ポンド法の図ではインチで、3未満の裸の数字はメートルです。身長1.73 cmの人はいません。 3. **その人に合う図を選びます。** 子どもはおよそ頭六つ、大人は七つ半の背丈です。ですから縮めた大人として描かれた子どもは、名指しにくく、それでいてすぐ目につく形で違って見えます。男の子と女の子は小さくした大人ではなく実在の子どもを描いたもので、家族の図表が家族らしく見えるかどうかは、その大半がここで決まります。どの行にも最初から身長が入っているので、誰かを足せば誰かが描かれます。そのまま上から打ち込んでください。 4. **見慣れたものを図表に置きます。** 数字は抽象的で、戸口はそうではありません。誰もが大きさを知っているものを一つ加えること——ドア、窓、教室のホワイトボード、自動販売機——それが、二つの身長を述べるだけの図表を、それを見せる図表に変えます。メニューには二十点が分類して並んでいて、どれも自分の数字を上書きできる普通の行として入ります。ものには高さのほかに幅もあるので、ドアは細い帯ではなく203に81です。 5. **あるいは、自分の絵を載せます。** **自分の画像**は、お手元のファイルを受け取り、指定した高さで目盛りの上に置きます。図表の主題が人ではなく製品や車両、建物であるときに手を伸ばすものです。SVGは他の図と同じくその行の色で描かれ、写真やPNGはそのままの姿で載ります。どちらも自身の比率を保ち、どちらもどこにも送らずにここで読みます。 6. **読み手が慣れた単位に目盛りを合わせます。** センチメートルとフィートの切り替えは、欄の中身を解釈し直すのではなく書き換えます。ですから図表そのものは動かず、表記だけが変わります。読み手が二種類いる図表なら、各図の上に書かれる身長は図表の単位で、各欄の下の行には両方が出ます。 7. **貼るならPNG、印刷するならSVG。** PNGは指定したピクセル高さの絵で、チャット欄や文書やスライドが求めるのはこちらです。SVGは図表を指示として持っているので、どんな大きさでも鮮明に印刷でき、ベクターを開けるものなら後から色を変えられます。 ## 詳しい解説 [身長比較チャートの作り方](https://abox.tools/ja/guides/make-a-height-comparison-chart/): 身長の一覧を並べて見せる絵にする方法。身長の書き方、子どもにどの図を選ぶか、なぜ見慣れたもの一つが三人目より効くのか、そして図表をPNGやSVGとして取り出す方法。 ## 箱の中のほかのツール - [ビジネスプロフィールのプレビュー](https://abox.tools/ja/business-profile-preview/): 入力するとGoogleのカードの見本になります。描くための送信はありません。 - [画像圧縮ツール](https://abox.tools/ja/compress-image/): サイズを指定するだけ。あとは自動で探します。 - [画像リサイズツール](https://abox.tools/ja/resize-image/): サイズを指定し、枠を描き、形式を選ぶ。それだけです。 - [HEIC→JPG変換ツール](https://abox.tools/ja/heic-to-jpg/): iPhoneが作る写真を、どこでも開ける形式に。 ## よくある質問 ### 打ち込んだ内容はどこかに送られますか？ 送られません。図表はこのページのJavaScriptが、ご自分の端末の上で描いています。この道具にはネットワーク機能そのものがなく、何かを取りに行くことも送ることもありません。ページの`Content-Security-Policy`には接続してよいアドレスがすべて書かれていて、そのどれもこのサイトのものではありません。ここではっきり言っておくべきなのは、入力が人の名前と、その一人ひとりの背丈の一覧であり、このサイトが扱うもののほとんどより私的なものだからです。 ### 図表はダウンロードできますか？ できます。PNGでもSVGでも、透かしもアカウントもなしにです。PNGは指定したピクセル高さで描かれ、文書やスライド、チャットに貼るのはこちらです。SVGは図表をピクセルではなく指示として持っているので、どんな大きさでも鮮明に印刷でき、後からどのベクターエディターでも開いて色を変えられます。どちらも画面に出ているのと同じマークアップから作られるので、プレビューと食い違いようがありません。 ### 身長はどう書けばいいですか。センチメートルですか、フィートですか？ どちらでも、どの行でも、普段お書きになるとおりで構いません。`173`、`173 cm`、`1.73 m`、`5'8"`、`5 ft 8 in`、`68 in`はすべて理解され、欄の下の行が何と読んだかを両方の単位系で示します。単位のない数字は、図表がメートル法ならセンチメートル、ヤード・ポンド法ならインチです。3未満の裸の数字はメートルと受け取ります。1.73 cmは誰も打ち込まない身長だからです。 ### 子どもが小さな大人に見えないのはなぜですか？ 子どもは小さな大人ではないからです。身体のプロポーションは年齢で変わります。2歳児はだいたい頭四つ半、8歳児は六つ、大人は七つ半の背丈です。ですから頭は幼い子どものほぼ4分の1、大人の8分の1を占めます。ここでの男の子と女の子は、縮小したシルエット一つではなく実在の子どもを描いたもので、家族の図表が、大きさの違う大人四人ではなく家族に見えるのはそのためです。 ### 図はどこから来たものですか？ 四つとも他の方の絵で、すべてパブリックドメインです。男性はpitr氏、女性はMadeleine Price Ball氏、女の子はOpenClipart-Vectors、男の子はNIH BioArtライブラリのためにRyan Kissinger氏が描いたものです。どのファイルも公開されたままの姿で`vendor/`に入ってこのページと一緒に配られるので、原典と突き合わせられます。パブリックドメインは何も求めません。そこが肝心で、絵はあなたがダウンロードする画像の中に入るので、表示を求めるライセンスなら、その義務があなたの図表にくっついてしまいます。 ### 自分の画像を図表に載せられますか？ はい——**自分の画像**は、絵でも写真でも受け取り、打ち込んだ高さで目盛りの上に置きます。ロゴでも、間取り図でも、機械の部品でも、車でも、その物そのものの写真でも構いません。比率はその画像自身のものなので、幅を書き入れる必要はありません。 \ \ **SVG**は一色の塗りで描かれます。その行に設定した色で、図表の他の部分がそうだからです。ですから塗られた図形ではなく細い輪郭線で描かれた絵はしみになって出てきますし、それにはこの道具は向きません。残るのは*図形*だけです。ファイルはパスと長方形と円から一から組み直され、ネットワークに手が届きうるもの——リンクされた画像、スタイルシート、フォント、スクリプト——は置いていかれます。 \ \ **写真やPNG**はそのままの姿で載り、自分の色を保ちます。行の色は名前を書くためだけのものになります。載る前にここで描き直されるので、図表に持ち込む量には上限があり、ファイルのメタデータは置いていかれます。透明は保たれるので、切り抜いた画像は目盛りの上にきれいに立ちます——写真は背景ごと連れてくるので、先に切り落としておく価値があります。 \ \ どちらのファイルもどこにも行きません。それが二重に大事なのは、ダウンロードした図表が、誰かに送るかもしれないファイルだからです。 ### 幼児や赤ちゃんの図がないのはなぜですか？ 本ツールのパブリックドメインのライセンス条件と描画要件に合う幼児や赤ちゃんの絵を見つけられませんでした。付属する子どもの図は男の子と女の子で、子どもの絵の全目録ではありません。もっと幼い子は実測した身長に設定するか、適切な自分の画像を追加してください。寸法は目盛りが示します。 ### 一つの図表に何人まで載せられますか？ 12人です。技術的な限界ではなく——描画は30人でも喜んでこなします——ただ、1ダースを超えると列が上に書かれた名前より狭くなり、絵が読めなくなります。もっと必要なら、名前を消せば幅が戻りますし、二枚に分けたほうが一枚より伝わります。 ### ものを図表に置けますか？ 置けます。しかも大半は絵付きで届きます。メニューには出発点として二十点が四つの組に入っています。ドアと窓、学校とオフィス（ホワイトボード、机、書類キャビネット、プロジェクタースクリーン）、街のもの（自動販売機、キャスター付きごみ箱、バスケットゴール、20フィートの海上コンテナ）、そして家のもの。そのうち十七点には絵が付いています——取っ手のあるドア、上に冷凍室のある冷蔵庫、見ればソファと分かるソファ——絵は行の高さと幅に合わせて収められるので、大きさを決めるのは相変わらず数字で、その上から打ち込んだご自分の数字も相変わらず効きます。残りの三点はただの長方形です。正しく、かつ比率も正しい自由な絵が見つからなかったからで、大きさを扱う図表では、間違った絵より正直な四角のほうがましだからです。 \ \ 本当の規格もあれば典型的な寸法もあり、ページはそれを声に出して言います。見慣れたもの一つは、人を何人増やすよりも図表のためになります。比較を、大きさの実感に変えてくれるからです。 ### 犬や猫の図はありますか？ ありません。見落としではなく、意図した欠けです。どちらも作ってはみました——横向き、立った姿勢で、頭を肩の高さに合わせ、絵の上端が隣に書かれた身長になるように。どの犬種標準も動物をそこで測るからです。ただ、出せるほどの出来にはなりませんでした。正面を向いた四人の隣に横から見た四足動物が立っていると、絵がよくても間違いに見えてしまいます。当面は、その動物の肩の高さの長方形が正直なところです。 ### 図表をリンクで共有できますか？ ここからはできません。これも意図したことです。それを提供する道具は、一覧まるごとをアドレスに入れることで実現しています。つまり、あらゆる名前と身長が、そのリンクが旅する先すべてに残ります。チャットサーバーのログ、メールの検査装置、誰かの閲覧履歴、リンクプレビューを取りに行くサービス。絵をダウンロードして、そちらを送ってください。同じことを伝えますし、一覧は持って行きません。 ### 無料ですか。図表を商用に使えますか？ 無料で、アカウントも透かしもなく、結果を報告書やプレゼン、広告や製品に入れて構いません。このサイトには広告があり、それが費用をまかなっています。ここで作った図表について、私たちのものは何一つなく、何も保存されません。 ### 目盛りが1ではなく10刻みなのはなぜですか？ 間隔が、決まった数ではなく、その絵が何本の線を支えられるかから選ばれるからです。大人二人の図表なら10センチごとに1本、そこにバスケットゴールを置けば線は25センチに移ります。一枚に90本の線は、目盛りではなく灰色のにじみだからです。フィートとインチでは1・3・6・12インチの段階なので、線は中途半端なところではなく丸いインチに載ります。 ### 図表を暗いスライドに置けますか？ 置けます。背景を、載せる先の色に設定すれば、目盛りと文字がそれに合わせて濃くも淡くも切り替わります——当て推量ではなく、その色の輝度から計算しています。そのうえで絵自体を透明にしたければ「背景をまったく付けない」にチェックを入れてください。インクを決めるのは選んだ色のままなので、濃紺のスライドに向かう透明な図表は、その上で読めるように出てきます。 ### オフラインでも動きますか？ 動きます。ページを一度読み込んだあとインターネットを切っても、そのまま使えます。これは何もアップロードされていないことを示す一番簡単な方法でもあります。図表を描いてもらうために一覧を送り出す道具なら、線を抜いた瞬間に止まってしまうはずです。 ## この主張を確かめる方法 - **処理はこのブラウザー内で行います。** 入力と結果はブラウザー内で処理し、処理コードはそれらを処理用にアップロードしません。Content-Security-Policyは資源と接続先を制限しますが、許可済みの相手はリクエストを受け取れます。内容は検査せず、何も送られないことを単独で証明しません。具体的な操作の要求とソースを比較するか、切断中にローカル操作を完了してください。 - **ここからは何も取りに行きません。** `src/`のどこにも`fetch`も`XMLHttpRequest`も`sendBeacon`もありません。Content-Security-Policyには、このページが接続してよいアドレスがすべて書かれていて、そのどれもこのサイトのものではありません。 - **訪問と訪問のあいだにも、何も覚えていません。** 図表はページの中だけに存在します。タブを閉じれば一覧は消えます。保持するアカウントもなければ、運ぶクッキーもなく、このブラウザの保存領域にも何も書き込まれません。取っておきたい図表がダウンロードする図表になるのは、そのためです。 - **リンクは図表を運びません。** この種の道具のいくつかは、共有できるようにと一覧まるごとをアドレス欄に入れます。そうすると、あらゆる名前と身長が、そのリンクが通る先すべてに記録されるものへ変わります。チャットのサーバー、メールの検査装置、誰かの閲覧履歴。このページのアドレスは、打っているあいだ一度も変わりません。 - **PNGは、画面に出ているSVGから作られます。** ダウンロードは、プレビューと食い違うかもしれない二度目の描画ではありません。同じマークアップをブラウザに渡してキャンバスに描いているだけで、だからこそネットワークを抜いたままでもできます。取りに行くフォントも、中に読み込む画像もないからです。 - **足した画像はここで読み、どこへも送りません。** ファイルがこのページを出ることはありません。ブラウザ自身の`FileReader`で読み、何も実行しない不活性な文書として解析します。描かれるのはそのファイルではありません。`src/import-svg.js`が、図形と幾何だけを許可した一覧から新しい絵を組み立てるので、スクリプトもスタイルシートもフォントも、リンクされた画像も、他の文書への参照も、運ばれずにその場へ置いていかれます。これが二重に効いてくるのは、ダウンロードした図表が他人に送るファイルだからです。もし何かが生き残っていたら、それは何日も後に、このページが書いたものから、相手のブラウザが見知らぬサーバーを呼ぶということになります。写真やPNGはプログラムではなく、組み直すものが何もありません。ブラウザ自身のデコーダーが読み、図表に載る前にここでキャンバスへ描き直されます。ファイルのメタデータ——カメラ、場所、プロファイル、その中にあった何もかも——が置いていかれるのは、この描き直しのためです。キャンバスを通り抜けられるものは一つもありません。図表に入るのはこのページが符号化した画像で、アドレスではなくデータとして書き込まれるので、図表は相変わらずどこも指しません。 - **絵はここにあり、取りに行くものではありません。** 四体の図はどれもパブリックドメインの絵で、ページの残りと一緒にこのオリジンから配信されます。アイコンフォントもCDNも、打っているあいだによそのサーバーから引っぱるスプライトもありません。ネットワークを抜いても図表が描けるのは、これも理由の一つです。 - **Googleが読み込むものと、渡されないもの。** 広告と計測のスクリプトはGoogleから、寄付ボタンはBuy Me a Coffeeから来ます。そのどれにも、名前も身長も渡されません。あなたの一覧を絵に変えるすべての行は、このオリジンから配信され、リポジトリに載っています。 - **オフラインで動きます。** ネットワークを切っても道具は何も変わりません。もともとネットワークの段階がなかったからです。これが何よりも簡単な証明です。 **自分で確かめてください。**以上のどれも、鵜呑みにする必要はありません。このページは、リポジトリにあるテンプレートと設定から、誰でも読んで実行できるビルドスクリプトが生成しています。その結果は`dist`ブランチに置いてあるので、配信されているものと、ソースをビルドした結果とを差分で比べられます。 https://github.com/A-Box-of-Tools/website まず読むとよいのは、Content-Security-Policyについては`config/site.toml`、四体の図とその絵の出どころは`src/traced.js`と`vendor/`、メニューを組み立てる一覧は`src/figures.js`、打ち込まれた身長がどう数値になり目盛りにどう名前が付くかは`src/units.js`、配置は`src/chart.js`、二つのダウンロードは`src/save.js`—後者は画面上のSVGと、その同じSVGをキャンバスに描いたものです——そして足されたSVGがどの許可一覧から組み直されるかは`src/import-svg.js`をご覧ください。ここで間違えると響くファイルは、それ一つです。