What makes it tick

このサイトについて

GitHub

解説ができるまで

どんなサイトなのか。モデルをつくる前に、事実をどう確かめているのか。そしてモデルでは、何を省いているのか。

どんなサイトか

ここでは1ページごとに、1つのものを分解して見ていきます。機械のことも、器具のことも、自然の中のもののこともあります。ページには3Dモデルと文章が並んでいて、2つは連動しています。モデルは回したり、ゆっくり動かしたり、少しずつ進めたりできます。次の章までスクロールすると、カメラが動き、話に出てくる部品が光って、ラベルも一緒に動きます。

ねらいはシンプルです。ものが動くところを見るだけなら、誰にでもできます。このサイトでは一歩進んで、それぞれの部品がなぜそこにあるのか、なかったら何が困るのかまで見えるようにしています。

まず事実、モデルはそのあと

事実がそろうまで、モデルには手をつけません。どの解説も、同じ5つのステップを同じ順番で進みます。

  1. 出典つきのファクトシート

    まずは調べるところから始めます。解説に出てくる数字や主張は、1つ残らず出典のリンクと一緒に書き留めます。いちばん頼りにするのは一次情報です。そのものをつくる人、測る人、研究する人から出た情報です。見つからない数字は、推測で埋めずに「未確認」と書いておきます。シートには、ほかに3つのことも書きます。最初の見立てで間違っていたところ、本文で引用してよい数字、そして本文でくり返してはいけない、よくある誤解です。

    シートに書く事実には、次の4つのラベルのどれかをつけます

    • 確認済み
    • おおよそ
    • 異論あり
    • 未確認
  2. すべてのもとになる仕様書

    ファクトシートをもとに、仕様書をつくります。モデルで何を見せるのか、どこを簡略化するのか、どんな式で動かし、その式にどの定数を使うのかを決めます。シミュレーションに出てくる定数は、どれもファクトシートの1行までたどれます。調べる中で見つかった訂正も、何かをつくり始める前に、ここで反映します。

  3. モデル、シーン、文章

    シミュレーションも、3Dシーンも、各言語の文章も、すべてこの1つの仕様書からつくります。だから画面の絵と、リアルタイムの計測値と、文章の中身が食い違いません。シミュレーションは小さなプログラムで、専用のテストもついています。本文で引用できるのは、ファクトシートで認めた数字だけです。どの言語も一語ずつ訳すのではなく、その言葉を母語とする人が読んで自然だと感じるように書いています。

  4. 別の目でチェック

    パーツがそろったら、つくる作業に関わっていないレビュー担当がチェックします。物理がファクトシートと合っているかを確かめ、すべての言語の文章に目を通します。キーボードやスクリーンリーダーで使う人の立場からも、ページを見ます。ここで見つかった問題は、次へ進む前に直します。

  5. ブラウザで確認

    できあがったページを、パソコンとスマートフォンで開きます。言語は英語と、ほかに2つです。すべての章を順に見て、タイムラインをドラッグし、計測値の変化を確かめます。エラーが出る、訳が抜けている、ラベルが操作ボタンに重なる、文章がはみ出す。どれか1つでもあれば、やり直しです。公開するのは、そのあとです。

モデルが省いていること

ここにあるのは学ぶためのモデルで、設計図ではありません。しくみが見やすいように、形は単純にしています。大事な部品が隠れないように、一部を切り取ったり、大きさを変えたりもしています。シミュレーションで再現しているのは、話の筋に必要なところです。本物のエンジニアなら計算に入れるような効果まで、すべて入れているわけではありません。

ですから、しくみを知るために使ってください。実際の仕事で正確な数値が必要なときは、出典を確かめてください。

解説の読み方

スクロールすると、文章に合わせてモデルが動きます。再生ボタンを押せば、モデルが動きだします。タイムラインをドラッグすると、1サイクルを少しずつ追えます。速度をぐっと落とせば、まばたきする間に起きることも、しっかり見られます。隅のメーターには、モデルの動きに合わせて変わる計測値がリアルタイムで出ます。

モデルはドラッグで回せます。拡大と縮小は、スクロールかピンチでどうぞ。Rキーを押すと、カメラが元の位置に戻ります。スペースキーで再生と一時停止、矢印キーでタイムラインを少しずつ動かせます。数字キーを押すと、その段階へ飛びます。Xキーでモデルを全画面にできます。JavaScriptが使えなくても、モデルの静止画と本文の全文は表示されます。

オープンソース

このサイトも、すべての解説も、MITライセンスのオープンソースです。解説ページにはそれぞれ、ソースコードへのリンクがあります。画面の動きのもとになっているシミュレーションを、自分で読んで確かめられます。広告もトラッキングもありません。外部のサーバーから読み込んでいるものも、1つもありません。選んだ言語はお使いのブラウザにだけ保存し、ほかの場所には残しません。

数字やモデル、翻訳の間違いに気づいたら、ぜひ教えてください。どんな報告でも大歓迎です。

GitHubで間違いを報告する