diff --git a/biome.json b/biome.json index 09945d2..8e2e579 100644 --- a/biome.json +++ b/biome.json @@ -30,5 +30,10 @@ "organizeImports": "on" } } + }, + "css": { + "parser": { + "tailwindDirectives": true + } } } diff --git a/package-lock.json b/package-lock.json index fab07da..394854b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5920,9 +5920,9 @@ "license": "Apache-2.0" }, "node_modules/hono": { - "version": "4.12.12", - "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.12.tgz", - "integrity": "sha512-p1JfQMKaceuCbpJKAPKVqyqviZdS0eUxH9v82oWo1kb9xjQ5wA6iP3FNVAPDFlz5/p7d45lO+BpSk1tuSZMF4Q==", + "version": "4.12.14", + "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.14.tgz", + "integrity": "sha512-am5zfg3yu6sqn5yjKBNqhnTX7Cv+m00ox+7jbaKkrLMRJ4rAdldd1xPd/JzbBWspqaQv6RSTrgFN95EsfhC+7w==", "license": "MIT", "engines": { "node": ">=16.9.0" diff --git a/src/index.css b/src/index.css index fb3c7e9..e35af17 100644 --- a/src/index.css +++ b/src/index.css @@ -6,125 +6,125 @@ @custom-variant dark (&:is(.dark *)); @theme inline { - --font-heading: var(--font-sans); - --font-sans: 'Geist Variable', sans-serif; - --color-sidebar-ring: var(--sidebar-ring); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar: var(--sidebar); - --color-chart-5: var(--chart-5); - --color-chart-4: var(--chart-4); - --color-chart-3: var(--chart-3); - --color-chart-2: var(--chart-2); - --color-chart-1: var(--chart-1); - --color-ring: var(--ring); - --color-input: var(--input); - --color-border: var(--border); - --color-destructive: var(--destructive); - --color-accent-foreground: var(--accent-foreground); - --color-accent: var(--accent); - --color-muted-foreground: var(--muted-foreground); - --color-muted: var(--muted); - --color-secondary-foreground: var(--secondary-foreground); - --color-secondary: var(--secondary); - --color-primary-foreground: var(--primary-foreground); - --color-primary: var(--primary); - --color-popover-foreground: var(--popover-foreground); - --color-popover: var(--popover); - --color-card-foreground: var(--card-foreground); - --color-card: var(--card); - --color-foreground: var(--foreground); - --color-background: var(--background); - --radius-sm: calc(var(--radius) * 0.6); - --radius-md: calc(var(--radius) * 0.8); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) * 1.4); - --radius-2xl: calc(var(--radius) * 1.8); - --radius-3xl: calc(var(--radius) * 2.2); - --radius-4xl: calc(var(--radius) * 2.6); + --font-heading: var(--font-sans); + --font-sans: "Geist Variable", sans-serif; + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --color-foreground: var(--foreground); + --color-background: var(--background); + --radius-sm: calc(var(--radius) * 0.6); + --radius-md: calc(var(--radius) * 0.8); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) * 1.4); + --radius-2xl: calc(var(--radius) * 1.8); + --radius-3xl: calc(var(--radius) * 2.2); + --radius-4xl: calc(var(--radius) * 2.6); } :root { - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.87 0 0); - --chart-2: oklch(0.556 0 0); - --chart-3: oklch(0.439 0 0); - --chart-4: oklch(0.371 0 0); - --chart-5: oklch(0.269 0 0); - --radius: 0.625rem; - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.87 0 0); + --chart-2: oklch(0.556 0 0); + --chart-3: oklch(0.439 0 0); + --chart-4: oklch(0.371 0 0); + --chart-5: oklch(0.269 0 0); + --radius: 0.625rem; + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); } .dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); - --chart-1: oklch(0.87 0 0); - --chart-2: oklch(0.556 0 0); - --chart-3: oklch(0.439 0 0); - --chart-4: oklch(0.371 0 0); - --chart-5: oklch(0.269 0 0); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.87 0 0); + --chart-2: oklch(0.556 0 0); + --chart-3: oklch(0.439 0 0); + --chart-4: oklch(0.371 0 0); + --chart-5: oklch(0.269 0 0); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); } @layer base { - * { - @apply border-border outline-ring/50; - } - body { - @apply bg-background text-foreground; - } - html { - @apply font-sans; - } -} \ No newline at end of file + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } + html { + @apply font-sans; + } +} diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index b3d6c6e..3c65d63 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -40,6 +40,7 @@ export default function Page() { type="button" onClick={() => navigate("/play")} className=" + w-80 px-10 py-4 text-xl font-semibold text-white @@ -59,6 +60,7 @@ export default function Page() { type="button" onClick={() => navigate("/templates")} className=" + w-80 px-10 py-4 text-xl font-semibold text-white @@ -78,6 +80,7 @@ export default function Page() { type="button" onClick={() => navigate("/tutorial")} className=" + w-80 px-10 py-4 text-xl font-semibold text-white diff --git a/src/pages/Tutotial/components/TutorialViewer.tsx b/src/pages/Tutotial/components/TutorialViewer.tsx index 5a5c807..b9d725b 100644 --- a/src/pages/Tutotial/components/TutorialViewer.tsx +++ b/src/pages/Tutotial/components/TutorialViewer.tsx @@ -18,6 +18,7 @@ export default function Page() { tutorialSections[0]; const title = detail.title; const Content = detail.Content; + const simPath = detail.simPath; return (
@@ -63,10 +64,21 @@ export default function Page() { {tutorialSections.some((section) => section.id === id) && (
+ {simPath && ( + + )} diff --git a/src/pages/Tutotial/components/data/contents/BinaryStarContent.tsx b/src/pages/Tutotial/components/data/contents/BinaryStarContent.tsx new file mode 100644 index 0000000..a8de44b --- /dev/null +++ b/src/pages/Tutotial/components/data/contents/BinaryStarContent.tsx @@ -0,0 +1,154 @@ +// BinaryStarContent.tsx +import { BlockMath } from "react-katex"; + +export default function BinaryStarContent() { + return ( +
+
+

+ 1. 連星（バイナリスター）とは？ +

+

+ 夜空に輝く星の多くは、実は1つではなく、2つ以上の星がお互いの周りをぐるぐると回り合っています。 + このように、重力で結びついたペアの星を「連星」 + と呼びます。 + 太陽のように1つポツンと存在している星よりも、宇宙では連星の方がよく見られる存在なのです。 +

+
+ +
+

+ 2. 「共通の重心」を中心に回る +

+

+ 連星は、一方がもう一方の周りを回っているように見えますが、正確には2つの星の + 「重心（重さのバランスが取れる点）」 + を中心に回っています。 +

+

+ これは公園のシーソーと同じです。 + 同じ体重の二人が乗れば真ん中が中心になりますが、一方が重い場合は、中心は重い人の方に寄ります。 +

+
+

+ 重心のバランスの式 +

+

+ 2つの星の重さと、重心からの距離 + には次の関係があります。 +

+
+ +
+

+ ※ M: 星の重さ、r: 重心からの距離 +

+

+ 直感的な解釈：{" "} + これは「重い星ほど重心の近くに、軽い星ほど重心から遠くに位置する」というバランスを示しています。 + + 「重い星はどっしりと構え、軽い星がその周りを大きく振り回される」 + + イメージです。 +

+
+
+ +
+

+ 3. 連星を維持するバランス +

+

+ 星が円を描いて回り続けるには、常に中心に向かって引っ張る力（向心力）が必要です。連星の場合、この役割をお互いに引き合う「万有引力」が果たしています。 +

+

+ ※回転している星の上から見ると、外側に逃げようとする「遠心力」と「万有引力」が釣り合っているように見えます（遠心力は見かけの力です）。 +

+
+

+ 力のつり合いの式（星1の場合） +

+

+ 星1にかかる「見かけの遠心力」と「相手から受ける万有引力」のバランスはこう書けます。 +

+
+ +
+
+

+ 左辺：外へ逃げようとする力（遠心力） / + 右辺：相手に引かれる力（万有引力） +

+

※ v: 速度、(r₁+r₂): 星と星の間の合計距離

+
+
+

+ 直感的な解釈： +

+
    +
  • + 「動くスピード」と「引き合う強さ」がぴったり一致したときだけ、星は衝突も脱走もせずに回り続けられます。 +
    • +
  • + 分母の (r₁ + r₂)²{" "} + は、重力が「お互いの距離」で決まることを示しています。 +
    • +
  • + 2つの星は全く同じ時間（周期） + をかけて1周します。 +
    • +
  • + 重心から遠くを回る軽い星は、移動距離が長いため、重い星よりも移動スピードが速くなります。 +
    • +
+
+
+
+ +
+

+ 4. 理想的な軌道を作ってみよう +

+

+ シミュレーションで綺麗な円軌道の連星を作るためのステップを紹介します。 +

+
+

+ 🎮 ミッション：連星を安定させよう +

+
    +
  • + 同じ重さで試す： + まずは2つの星を同じ質量にして、中心から等距離に配置してみましょう。速度を全く逆向きに与えると、綺麗な円を描きます。 +
    • +
  • + 重さを変えてみる： + 一方の星を2倍の重さにしてみましょう。重心は重い星に近くなります。重い星の初速度を小さく、軽い星の初速度を大きく設定するのがコツです。 +
    • +
  • + 速度の向き： + 速度は、常に重心（2つの星を結ぶ線の中間点付近）に対して垂直な方向に与える必要があります。 +
    • +

    + 連星がうまくできたら、今度は星の大きさ（質量）をいろいろ変えてみましょう。 + 重さの違いを大きくすると、2つの星の動き方や回る中心の位置（重心）がどう変わるか観察できます。 + 「重い星と軽い星では、どちらがどんな動きをするのか？」 + 実際に動かして確かめてみることが大切です。 +

    +
    +

    ※太陽を使うと変化がわかりやすく、楽しく遊べます。。

    +
+
+
+

💡 ヒント

+

+ もし星が衝突してしまったら「初速度が足りない」サインです。逆に、お互い離れていってしまったら「速すぎる」ことになります。 + 絶妙なバランスを見つけて、条件を少し変えるだけで軌道が安定しなくなることを観察してみましょう。 +

+
+
+
+ ); +} diff --git a/src/pages/Tutotial/components/data/contents/Eccentricity.tsx b/src/pages/Tutotial/components/data/contents/Eccentricity.tsx new file mode 100644 index 0000000..68f9de3 --- /dev/null +++ b/src/pages/Tutotial/components/data/contents/Eccentricity.tsx @@ -0,0 +1,127 @@ +// EccentricityContent.tsx +import { BlockMath, InlineMath } from "react-katex"; + +export default function EccentricityContent() { + return ( +
+
+

+ 1. 宇宙の軌道は「きれいな円」じゃない？ +

+

+ 多くの人は、惑星は太陽の周りを「きれいな円」で回っていると思っているかもしれません。 + でも実は、ほとんどの天体は少しつぶれた円、つまり + 「楕円（だえん）」の形で動いています。 + この「どれくらい円からつぶれているか」を表す数字を + 「軌道離心率（きどうりしんりつ）」と呼びます。 +

+
+ +
+

+ 2. 離心率（e）の数字を見てみよう +

+

+ 離心率はアルファベットの {" "} + で表されます。この数字によって、軌道の形が決まります。 +

+
+
+

e = 0

+

真ん丸な円

+
+
+

0 < e < 1

+

楕円（つぶれた円）

+
+
+

e ≧ 1

+

+ 重力に引かれても戻ってこない軌道（放物線・双曲線） +

+
+
+

+ 地球の離心率は約 0.017 なので、かなり円に近いです。 + 一方で、遠くからやってくる彗星（すいせい）などは 0.9{" "} + を超えるような、ものすごく細長い楕円を描くことがあります。 +

+
+ +
+

+ 3. スピードと形の関係 +

+

+ なぜ軌道が楕円になるのでしょうか？ それは、天体の + 「速さ」が関係しています。 +

+
+

+ 円軌道になるための速度 +

+
+ +
+

+ この速度ぴったりだと + （円）になります。 +

+
+
    +
  • + ● +

    + 速度が より + 少し速い、または遅いと、軌道は楕円になります。 +

    +
    • +
  • + ● +

    + 楕円軌道では、天体は「速くなったり遅くなったり」 + しながら回ります。太陽に近いときは速く、遠いときはゆっくり動くのが特徴です。 +

    +
    • +
+
+ +
+

+ 4. いろんな離心率を作ってみよう +

+

+ シミュレーションを使って、軌道のカタチをコントロールしてみましょう。 +

+
+

+ 🎮 軌道デザイン・ミッション +

+
    +
  • + 完璧な円を狙う： + 前のページで学んだ「マジックナンバー（円軌道速度）」をピタッと同じに設定して、離心率 + 0 を目指しましょう。 +
    • +
  • + 細長い楕円を作る： + 円軌道の速度から、あえて少しだけ速度を落としてみてください。太陽をかすめるような、美しい楕円軌道が描けるはずです。 +
    • +
  • + 脱出速度に挑戦： + 速度をどんどん上げていくと、あるところで軌道が閉じなくなり、天体がどこかへ飛んでいってしまいます。これが離心率が + 1 を超えた瞬間です！ +
    • +
+
+
+

💡 ヒント

+

+ 天体が太陽に一番近づく点を「近日点（きんじつてん）」、一番遠ざかる点を「遠日点（えんにちてん）」と言います。 + 離心率が大きければ大きいほど、この2つの地点でのスピードの差が激しくなるのを観察してみてください。 +

+
+
+
+ ); +} diff --git a/src/pages/Tutotial/components/data/contents/SwingBy.tsx b/src/pages/Tutotial/components/data/contents/SwingBy.tsx new file mode 100644 index 0000000..96fa976 --- /dev/null +++ b/src/pages/Tutotial/components/data/contents/SwingBy.tsx @@ -0,0 +1,115 @@ +import { BlockMath } from "react-katex"; + +export default function SwingByContent() { + return ( +
+
+

+ 1. 宇宙の加速装置「スイングバイ」 +

+

+ 宇宙探査機が、燃料をほとんど使わずにスピードをグンと上げる魔法のような技術、それが + 「スイングバイ」（重力アシスト）です。 + 惑星の横をギリギリですれ違うことで、その惑星の重力を利用して自分を弾き飛ばしてもらう仕組みです。 +

+

+ ※「はやぶさ」や「ボイジャー」などの探査機が遠い宇宙へ行くためによく使われます。 +

+
+ +
+

+ 2. 惑星の動きを「盗む」しくみ +

+

+ なぜ、そばを通るだけで速くなるのでしょうか？ それは、通りすがる惑星が + 「動いているから」です。 +

+

+ 止まっている天体のそばを通っても、近づくときに加速した分、離れるときに同じだけ減速してしまいます。 + しかし、動いている惑星に向かっていくと、惑星の移動スピードの一部を「もらう」ことができるのです。 +

+
+

+ エネルギーのやり取り（イメージ） +

+
+ 探査機の速度 += 惑星の速度の成分 +
+

+ 相対速度が変化 → 観測すると加速したように見える +

+

+ 動いているトラックにロープを投げて、引っ張ってもらうようなイメージです！ +

+
+
+ +
+

+ 3. 惑星同士でも起こる「巨大なキャッチボール」 +

+

+ スイングバイは人工衛星だけの技術ではありません。 + このシミュレーターのように + 惑星同士、天体同士でも全く同じことが起こります。 +

+

+ 物理学では、これを「運動量保存の法則」で説明します。 +

+
+

+ 運動量保存の法則 +

+
+ +
+

+ m: 重さ, v: 速度（1番が飛んできた天体、2番が待ち構える惑星） +

+
+

+ 軽い天体が重い惑星に近づくと、軽い方は猛烈に加速し、重い惑星はほんの、ほんの少しだけ減速します（質量が大きすぎるため、ほとんど変化は観測できません）。 + 宇宙ではこのように、天体同士が重力でエネルギーをやり取りしながら、お互いの軌道を変え合っているのです（これを「重力散乱」と呼びます）。 +

+
+ +
+

+ 4. 最強のスイングバイに挑戦！ +

+

+ このシミュレーターを使えば、あなたも宇宙ナビゲーターです。 + 惑星を配置して、別の天体をその「後ろ側」から追い越すように投げてみましょう。 +

+
+

+ 🎮 スイングバイ・ミッション +

+
    +
  • + 加速スイングバイ： + 惑星の進行方向の「後ろ」をかすめるように通してみましょう。天体が加速して遠くへ飛んでいけば成功です！ +
    • +
  • + 減速スイングバイ： + 逆に、惑星の「前」を横切るとどうなるでしょうか？ + スピードが落ちて内側の軌道へ吸い込まれる様子を観察しましょう。 +
    • +
  • + 惑星散乱： + 木星のような巨大な惑星の近くに、小さな惑星をたくさん置いてみてください。バラバラに弾き飛ばされる「重力のダンス」が見られるはずです。 +
    • +
+
+
+

💡 ヒント

+

+ 天体が描く「軌道の曲がり角」が急であればあるほど、大きなエネルギーがやり取りされています。 + 太陽系を旅する探査機になったつもりで、自分だけの「最強ルート」をシミュレーションで見つけ出しましょう！ +

+
+
+
+ ); +} diff --git a/src/pages/Tutotial/components/data/contents/solarSystem.tsx b/src/pages/Tutotial/components/data/contents/solarSystem.tsx new file mode 100644 index 0000000..cef7192 --- /dev/null +++ b/src/pages/Tutotial/components/data/contents/solarSystem.tsx @@ -0,0 +1,119 @@ +// SolarSystemContent.tsx +import { BlockMath } from "react-katex"; + +export default function SolarSystemContent() { + return ( +
+
+

+ 1. 太陽系：太陽を中心とした巨大な家族 +

+

+ 太陽系は、中心にある巨大な星「太陽」 + と、その周りを回る惑星や彗星たちの集まりです。 + 太陽系全体の重さ（質量）のうち、なんと 99.8%{" "} + を太陽が占めています。 + この圧倒的な重力によって、遠くの惑星たちも逃げ出さずに太陽の周りを回り続けているのです。 +

+
+

+ 太陽に近い順に並べてみよう +

+

+ 水星 → 金星 → 地球 → 火星 → 木星 → 土星 → 天王星 → 海王星 +

+

+ 「すい・きん・ち・か・もく・ど・てん・かい」で覚えよう！ +

+
+
+ +
+

+ 2. 惑星には「2つのタイプ」がある +

+

+ 太陽系の8つの惑星は、その特徴から大きく2つのグループに分けられます。 +

+
+
+

地球型惑星

+

+ （水星・金星・地球・火星） +

+

+ 岩石でできていて、地面がある惑星。サイズは小さめだけど、密度がぎゅっと詰まっています。 +

+
+
+

木星型・天王星型惑星

+

+ （木星・土星・天王星・海王星） +

+

+ ガスや氷でできていて、巨大な惑星。地球のような固い地面はなく、雲が渦巻いています。 +

+
+
+
+ +
+

+ 3. 遠いほど「ゆっくり」長く回る +

+

+ 太陽から遠い惑星ほど、1周（公転）するのにかかる時間が長くなります。 + これを発見したのはケプラーという科学者で、 + 「ケプラーの第3法則」と呼ばれます。 +

+
+

+ ケプラーの第3法則（イメージ） +

+
+ +
+

+ T: 1周する時間, a: 太陽からの距離 +

+
+

+ 例えば、地球は1年で太陽を1周しますが、一番外側の海王星は{" "} + 約165年 もかけてゆっくりと1周します。 + 太陽から遠い惑星ほど軌道が大きくなるため、1周するのに長い時間がかかります。 +

+
+ +
+

+ 4. 自分だけの太陽系を作ってみよう +

+

シミュレーションを使って、太陽系の惑星たちを配置してみましょう。

+
+

+ 🎮 太陽系シミュレーション・ガイド +

+
    +
  • + 内側の惑星： + 太陽の近くに惑星を置いて、速い初速度を与えてみましょう。水星のようにビュンビュン回る様子が見られます。 +
    • +
  • + 外側の巨大惑星： + 太陽からずっと遠くに、重い惑星を置いてみましょう。速度をゆっくりに設定して、雄大な軌道を描けるか挑戦です。 +
    • +
  • + 小惑星帯（アステロイドベルト）： + 火星と木星の間に、小さな天体をたくさん散りばめてみると、より本物の太陽系らしくなります。 +
    • +
+
+
+

+ ヒント：太陽系は「平らな円盤」のような形をしています。真横から見たときに惑星が一直線に並ぶように配置すると、きれいな太陽系が作れますよ！ +

+
+
+
+ ); +} diff --git a/src/pages/Tutotial/components/data/index.ts b/src/pages/Tutotial/components/data/index.ts index 218916a..bebc553 100644 --- a/src/pages/Tutotial/components/data/index.ts +++ b/src/pages/Tutotial/components/data/index.ts @@ -1,12 +1,17 @@ import type React from "react"; +import BinaryStarContent from "./contents/BinaryStarContent"; import CircularMotionContent from "./contents/circularMotion"; +import Eccentricity from "./contents/Eccentricity"; import fallBack from "./contents/fallBack"; +import SwingBy from "./contents/SwingBy"; +import SolarSystemContent from "./contents/solarSystem"; type Tutorial = { id: string; title: string; description: string; path: string; + simPath: null | string; Content: React.FC; }; @@ -16,14 +21,52 @@ export const tutorialSections: Tutorial[] = [ title: "ページが見つかりません", description: "ページが見つかりません", path: "/tutorial/fallBack", + simPath: null, Content: fallBack, }, { id: "circularMotion", title: "万有引力の法則と円運動", description: - "ニュートンの法則に基づき、2つの天体が互いに引き合う力の仕組みを学びます。", + "万有引力の法則を使って、天体が互いに引き合いながら円運動する仕組みを学びます。", path: "/tutorial/circularMotion", + simPath: null, Content: CircularMotionContent, }, + { + id: "solarSystem", + title: "太陽系", + description: + "太陽を中心に、惑星や天体がどのように運動しているかを学び、太陽系の構造を理解します。", + path: "/tutorial/solarSystem", + simPath: "/play?template=solar", + Content: SolarSystemContent, + }, + { + id: "binaryStar", + title: "連星系", + description: + "2つ以上の星が互いの重力で引き合いながら共通の重心のまわりを回るしくみを学びます。", + path: "/tutorial/binaryStar", + simPath: "/play?template=binary", + Content: BinaryStarContent, + }, + { + id: "eccentricity", + title: "軌道離心率", + description: + "天体が描く楕円軌道の形のゆがみを表す量で、円軌道からどれだけ外れているかを示します。", + path: "/tutorial/eccentricity", + simPath: null, + Content: Eccentricity, + }, + { + id: "swingBy", + title: "スイングバイ", + description: + "天体の重力を利用して宇宙機の速度や進行方向を変える航法技術で、燃料をほとんど使わずに加速や軌道変更ができます。", + path: "/tutorial/swingBy", + simPath: null, + Content: SwingBy, + }, ];