フッターに「my.code(); について」セクションと関連ページを追加

app/about/ai/page.tsx

@@ -0,0 +1,97 @@
+import { Metadata } from "next";
+import { Heading } from "@/markdown/heading";
+
+export const metadata: Metadata = {
+  title: "AI質問機能について",
+  description: "my.code(); のAI質問機能の詳細と利用上の注意事項について説明します。",
+};
+
+export default function AiPage() {
+  return (
+    <div className="p-4 pb-16 w-full max-w-docs mx-auto">
+      <Heading level={1}>AI質問機能について</Heading>
+      <p className="my-4 opacity-80">
+        my.code(); では、学習をサポートするためのAIアシスタント機能を提供しています。
+        ご利用前に以下の事項をご確認ください。
+      </p>
+
+      <Heading level={2}>AIの回答の正確性について</Heading>
+      <div className="alert alert-warning my-4">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-6 w-6 shrink-0 stroke-current"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+        <div>
+          <p className="font-bold">AIの回答は誤りを含む場合があります</p>
+          <p className="mt-1">
+            AIは非常に自信を持って誤った情報を回答することがあります。
+            AIの回答を鵜呑みにせず、必ず自分自身で内容を確認するようにしてください。
+          </p>
+        </div>
+      </div>
+
+      <Heading level={2}>免責事項</Heading>
+      <p className="my-4 opacity-80">
+        AI質問機能の利用によって生じたいかなる損害についても、ut.code();
+        は責任を負いません。
+      </p>
+
+      <Heading level={2}>使用しているAIモデルについて</Heading>
+      <p className="my-4 opacity-80">
+        AIモデルへのアクセスには{" "}
+        <a
+          className="link link-primary"
+          href="https://openrouter.ai/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          OpenRouter
+        </a>{" "}
+        を使用しています。使用するモデルは ut.code();
+        が選択しており、ユーザーが変更することはできません。
+        また、使用するモデルは予告なく変更される場合があります。
+      </p>
+
+      <Heading level={2}>データの取り扱いについて</Heading>
+      <div className="alert alert-info my-4">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          className="h-6 w-6 shrink-0 stroke-current"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          ></path>
+        </svg>
+        <div>
+          <p className="font-bold">入力データの利用について</p>
+          <ul className="list-disc list-outside ml-4 mt-1 flex flex-col gap-1">
+            <li>
+              AIへの質問内容やこのサイトで実行したコードのデータは、AIモデルのプロバイダーによって学習データとして利用される可能性があります。
+            </li>
+            <li>
+              また、サービス品質の向上等を目的として、ut.code();
+              のメンバーが閲覧可能な形でサイトに保存されます。
+            </li>
+            <li className="font-bold">
+              個人情報や機密情報は入力しないようにしてください。
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

app/about/license/ThirdPartyLicenses.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface LicenseEntry {
+  name: string;
+  version: string;
+  author?: string;
+  repository?: string;
+  source?: string;
+  license: string;
+  licenseText?: string;
+}
+
+export function ThirdPartyLicenses() {
+  const [licenses, setLicenses] = useState<LicenseEntry[] | null>(null);
+  const [error, setError] = useState(false);
+  const [expanded, setExpanded] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/_next/static/oss-licenses.json")
+      .then((res) => {
+        if (!res.ok) throw new Error("not found");
+        return res.json();
+      })
+      .then((data) => setLicenses(data))
+      .catch(() => setError(true));
+  }, []);
+
+  if (error) {
+    return (
+      <p className="opacity-60 text-sm">
+        ライセンス情報の読み込みに失敗しました。
+      </p>
+    );
+  }
+
+  if (!licenses) {
+    return (
+      <div className="flex items-center gap-2 opacity-60">
+        <span className="loading loading-spinner loading-sm" />
+        <span>読み込み中...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {licenses.map((pkg) => {
+        const key = `${pkg.name}@${pkg.version}`;
+        const isOpen = expanded === key;
+        return (
+          <div key={key} className="collapse collapse-arrow bg-base-200">
+            <input
+              type="checkbox"
+              checked={isOpen}
+              onChange={() => setExpanded(isOpen ? null : key)}
+            />
+            <div className="collapse-title font-mono text-sm">
+              <span className="font-bold">{pkg.name}</span>
+              <span className="opacity-60 ml-2">v{pkg.version}</span>
+              <span className="badge badge-outline badge-sm ml-3">
+                {pkg.license}
+              </span>
+            </div>
+            <div className="collapse-content text-sm">
+              {pkg.author && (
+                <p className="mb-1">
+                  <span className="opacity-60">Author: </span>
+                  {pkg.author}
+                </p>
+              )}
+              {pkg.repository && (
+                <p className="mb-1">
+                  <span className="opacity-60">Repository: </span>
+                  <a
+                    className="link link-primary break-all"
+                    href={pkg.repository}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {pkg.repository}
+                  </a>
+                </p>
+              )}
+              {pkg.licenseText && (
+                <pre className="mt-2 whitespace-pre-wrap text-xs bg-base-300 p-3 rounded-box overflow-x-auto">
+                  {pkg.licenseText}
+                </pre>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

app/about/license/page.tsx

@@ -0,0 +1,31 @@
+import { Metadata } from "next";
+import { Heading } from "@/markdown/heading";
+import licenseText from "../../../LICENSE?raw";
+import { ThirdPartyLicenses } from "./ThirdPartyLicenses";
+
+export const metadata: Metadata = {
+  title: "ライセンス",
+  description: "my.code(); のライセンスおよび使用しているサードパーティライブラリのライセンス情報です。",
+};
+
+export default function LicensePage() {
+  return (
+    <div className="p-4 pb-16 w-full max-w-docs mx-auto">
+      <Heading level={1}>ライセンス</Heading>
+
+      <Heading level={2}>my.code(); のライセンス</Heading>
+      <p className="my-4 opacity-80">
+        my.code(); のソースコードは MIT ライセンスのもとで公開されています。
+      </p>
+      <pre className="bg-base-200 rounded-box p-4 text-sm whitespace-pre-wrap overflow-x-auto my-4">
+        {licenseText}
+      </pre>
+
+      <Heading level={2}>サードパーティライブラリのライセンス</Heading>
+      <p className="my-4 opacity-80">
+        my.code(); は以下のオープンソースライブラリを使用しています。
+      </p>
+      <ThirdPartyLicenses />
+    </div>
+  );
+}

app/about/runtime/page.tsx

@@ -0,0 +1,156 @@
+import { Metadata } from "next";
+import { Heading } from "@/markdown/heading";
+
+export const metadata: Metadata = {
+  title: "コード実行環境について",
+  description: "my.code(); で使用しているコード実行環境の仕組みを説明します。",
+};
+
+export default function RuntimePage() {
+  return (
+    <div className="p-4 pb-16 w-full max-w-docs mx-auto">
+      <Heading level={1}>コード実行環境について</Heading>
+      <p className="my-4 opacity-80">
+        my.code(); では、プログラミング言語ごとに異なる仕組みでコードを実行しています。
+        以下にそれぞれの言語の実行環境について説明します。
+      </p>
+
+      <Heading level={2}>ブラウザ内で実行される言語</Heading>
+      <p className="my-4 opacity-80">
+        以下の言語は、サーバーへの通信を行わず、すべてお使いのブラウザ内で実行されます。
+        そのため、インターネット接続が不安定な環境でも、一度ページが読み込まれれば実行可能です。
+      </p>
+
+      <div className="flex flex-col gap-6 my-6">
+        <div className="card bg-base-200 shadow-sm">
+          <div className="card-body">
+            <h3 className="card-title">Python</h3>
+            <p>
+              Python は{" "}
+              <a
+                className="link link-primary"
+                href="https://pyodide.org/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Pyodide
+              </a>{" "}
+              を使用して実行されます。Pyodide は CPython（Python の公式実装）を
+              WebAssembly にコンパイルしたものです。Python コードはブラウザ内の
+              Web Worker 上で動作するため、ページの描画をブロックせずに実行できます。
+            </p>
+          </div>
+        </div>
+
+        <div className="card bg-base-200 shadow-sm">
+          <div className="card-body">
+            <h3 className="card-title">Ruby</h3>
+            <p>
+              Ruby は{" "}
+              <a
+                className="link link-primary"
+                href="https://ruby.github.io/ruby.wasm/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                ruby.wasm
+              </a>{" "}
+              を使用して実行されます。ruby.wasm は公式の CRuby を WebAssembly
+              にコンパイルしたものです。Python と同様に Web Worker 上で動作します。
+            </p>
+          </div>
+        </div>
+
+        <div className="card bg-base-200 shadow-sm">
+          <div className="card-body">
+            <h3 className="card-title">JavaScript</h3>
+            <p>
+              JavaScript はブラウザ自身の JavaScript エンジンを利用して実行されます。
+              コードは安全なサンドボックス環境内で評価されます。
+            </p>
+          </div>
+        </div>
+
+        <div className="card bg-base-200 shadow-sm">
+          <div className="card-body">
+            <h3 className="card-title">TypeScript</h3>
+            <p>
+              TypeScript は{" "}
+              <a
+                className="link link-primary"
+                href="https://www.npmjs.com/package/@typescript/vfs"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                @typescript/vfs
+              </a>{" "}
+              を使用してブラウザ内でコンパイルされ、その後 JavaScript
+              と同じ仕組みで実行されます。
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <Heading level={2}>外部サービスを利用して実行される言語</Heading>
+      <p className="my-4 opacity-80">
+        以下の言語は、外部のコンパイル・実行サービス（
+        <a
+          className="link link-primary"
+          href="https://wandbox.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Wandbox
+        </a>
+        ）の API を通じて実行されます。コードはサーバーに送信されてコンパイル・実行され、
+        結果がブラウザに返されます。そのため、実行にはインターネット接続が必要です。
+        また、入力したコードが Wandbox のサーバーに送信されることをご了承ください。
+      </p>
+
+      <div className="flex flex-col gap-6 my-6">
+        <div className="card bg-base-200 shadow-sm">
+          <div className="card-body">
+            <h3 className="card-title">C++</h3>
+            <p>
+              Wandbox の g++ (GNU C++ Compiler) を使用してコンパイル・実行されます。
+              最新の安定版コンパイラが使用され、Boost ライブラリも利用可能です。
+              実行時にエラーが発生した場合は、スタックトレースが表示されます。
+            </p>
+          </div>
+        </div>
+
+        <div className="card bg-base-200 shadow-sm">
+          <div className="card-body">
+            <h3 className="card-title">Rust</h3>
+            <p>
+              Wandbox の rustc (Rust コンパイラ) を使用してコンパイル・実行されます。
+              最新版のコンパイラが使用されます。
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="alert alert-warning alert-dash my-6">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-6 w-6 shrink-0 stroke-current"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+        <div>
+          <p>
+            外部サービスを利用して実行される言語（C++・Rust）では、入力したコードが外部サーバーに送信されます。
+            個人情報や機密情報を含むコードは入力しないようにしてください。
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}