本文へスキップ
truedistance.org

本当の縮尺の太陽系計算ツールをサイトに埋め込む

学校のページや天文ブログ、博物館のサイト、学習プラットフォームに、対話型の縮尺計算ツールをそのまま埋め込めます。埋め込み画面には広告も Cookie もアクセス解析もありません。

設定ツールと HTML コード

コピー用 HTML コード
<iframe src="https://www.truedistance.org/ja/embed/" title="本当の縮尺の太陽系計算ツール — truedistance.org" width="100%" height="780" style="border:0;max-width:100%;width:100%" loading="lazy"></iframe>
<p><a href="https://www.truedistance.org/ja/">truedistance.org の本当の縮尺の太陽系計算ツール</a></p>
<script>window.addEventListener("message",function(e){if(!e.data||e.data.type!=="td-resize"||typeof e.data.height!=="number")return;var f=document.querySelectorAll("iframe");for(var i=0;i<f.length;i++){if(f[i].contentWindow===e.source)f[i].style.height=Math.ceil(e.data.height)+"px";}});</script>

ブロック全体をコピーしてください。<iframe> が計算ツールを表示し、そのすぐ下の <p><a href="…">…</a></p> がフレームの外で出典を示します。

埋め込み画面のライブプレビュー

3 ステップでの埋め込み手順

  1. 1. 初期値を選ぶ。上で言語・初期距離・いちばん外側の天体を選びます。埋め込み先のページを訪れた人も、すべての値を自由に変更できます。
  2. 2. HTML コードをコピーする。コードには <iframe> と、その直下に置く通常の出典リンク <p><a href="…">…</a></p> が含まれています。
  3. 3. ページに貼り付ける。WordPress なら「カスタム HTML」ブロック、Moodle ならエディターの HTML ソース表示、一般的な CMS や静的ページなら HTML 要素にそのまま貼り付けます。

高さの自動調整について

地球で終わる模型（4 行）か海王星まで含む模型（9 行）かによって、表の高さは変わります。埋め込み画面は ResizeObserver で自身の高さを測り、window.parent.postMessage({ type: 'td-resize', height }, '*') を親ページへ送ります。上のスクリプトを一緒に入れておけば、二重のスクロールバーを出さずに高さが自動で揃います。

プライバシーとライセンス

埋め込み画面（/ja/embed/）はアクセス解析を読み込まず、Cookie も保存せず、外部サーバーへの通信も行いません。書体も惑星データもすべてこのドメインから直接配信されます（詳しくはプライバシーをご覧ください）。そのため、計算ツールのために Cookie バナーを設ける必要はありません。計算ツールと数値は CC BY 4.0 のもとにあり、フレーム下の出典リンクを残すだけで表示条件を満たせます。

計算ツールへ