Skip to content

Commit 4675b1e

Browse files
フッターに「my.code(); について」セクションと関連ページを追加
Agent-Logs-Url: https://github.com/ut-code/my-code/sessions/32c9b5c4-9369-4154-a5a9-c10fe02fab53 Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>
1 parent e272f74 commit 4675b1e

4 files changed

Lines changed: 381 additions & 0 deletions

File tree

app/about/ai/page.tsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { Metadata } from "next";
2+
import { Heading } from "@/markdown/heading";
3+
4+
export const metadata: Metadata = {
5+
title: "AI質問機能について",
6+
description: "my.code(); のAI質問機能の詳細と利用上の注意事項について説明します。",
7+
};
8+
9+
export default function AiPage() {
10+
return (
11+
<div className="p-4 pb-16 w-full max-w-docs mx-auto">
12+
<Heading level={1}>AI質問機能について</Heading>
13+
<p className="my-4 opacity-80">
14+
my.code(); では、学習をサポートするためのAIアシスタント機能を提供しています。
15+
ご利用前に以下の事項をご確認ください。
16+
</p>
17+
18+
<Heading level={2}>AIの回答の正確性について</Heading>
19+
<div className="alert alert-warning my-4">
20+
<svg
21+
xmlns="http://www.w3.org/2000/svg"
22+
className="h-6 w-6 shrink-0 stroke-current"
23+
fill="none"
24+
viewBox="0 0 24 24"
25+
>
26+
<path
27+
strokeLinecap="round"
28+
strokeLinejoin="round"
29+
strokeWidth="2"
30+
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"
31+
/>
32+
</svg>
33+
<div>
34+
<p className="font-bold">AIの回答は誤りを含む場合があります</p>
35+
<p className="mt-1">
36+
AIは非常に自信を持って誤った情報を回答することがあります。
37+
AIの回答を鵜呑みにせず、必ず自分自身で内容を確認するようにしてください。
38+
</p>
39+
</div>
40+
</div>
41+
42+
<Heading level={2}>免責事項</Heading>
43+
<p className="my-4 opacity-80">
44+
AI質問機能の利用によって生じたいかなる損害についても、ut.code();
45+
は責任を負いません。
46+
</p>
47+
48+
<Heading level={2}>使用しているAIモデルについて</Heading>
49+
<p className="my-4 opacity-80">
50+
AIモデルへのアクセスには{" "}
51+
<a
52+
className="link link-primary"
53+
href="https://openrouter.ai/"
54+
target="_blank"
55+
rel="noopener noreferrer"
56+
>
57+
OpenRouter
58+
</a>{" "}
59+
を使用しています。使用するモデルは ut.code();
60+
が選択しており、ユーザーが変更することはできません。
61+
また、使用するモデルは予告なく変更される場合があります。
62+
</p>
63+
64+
<Heading level={2}>データの取り扱いについて</Heading>
65+
<div className="alert alert-info my-4">
66+
<svg
67+
xmlns="http://www.w3.org/2000/svg"
68+
fill="none"
69+
viewBox="0 0 24 24"
70+
className="h-6 w-6 shrink-0 stroke-current"
71+
>
72+
<path
73+
strokeLinecap="round"
74+
strokeLinejoin="round"
75+
strokeWidth="2"
76+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
77+
></path>
78+
</svg>
79+
<div>
80+
<p className="font-bold">入力データの利用について</p>
81+
<ul className="list-disc list-outside ml-4 mt-1 flex flex-col gap-1">
82+
<li>
83+
AIへの質問内容やこのサイトで実行したコードのデータは、AIモデルのプロバイダーによって学習データとして利用される可能性があります。
84+
</li>
85+
<li>
86+
また、サービス品質の向上等を目的として、ut.code();
87+
のメンバーが閲覧可能な形でサイトに保存されます。
88+
</li>
89+
<li className="font-bold">
90+
個人情報や機密情報は入力しないようにしてください。
91+
</li>
92+
</ul>
93+
</div>
94+
</div>
95+
</div>
96+
);
97+
}
Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
"use client";
2+
3+
import { useEffect, useState } from "react";
4+
5+
interface LicenseEntry {
6+
name: string;
7+
version: string;
8+
author?: string;
9+
repository?: string;
10+
source?: string;
11+
license: string;
12+
licenseText?: string;
13+
}
14+
15+
export function ThirdPartyLicenses() {
16+
const [licenses, setLicenses] = useState<LicenseEntry[] | null>(null);
17+
const [error, setError] = useState(false);
18+
const [expanded, setExpanded] = useState<string | null>(null);
19+
20+
useEffect(() => {
21+
fetch("/_next/static/oss-licenses.json")
22+
.then((res) => {
23+
if (!res.ok) throw new Error("not found");
24+
return res.json();
25+
})
26+
.then((data) => setLicenses(data))
27+
.catch(() => setError(true));
28+
}, []);
29+
30+
if (error) {
31+
return (
32+
<p className="opacity-60 text-sm">
33+
ライセンス情報の読み込みに失敗しました。
34+
</p>
35+
);
36+
}
37+
38+
if (!licenses) {
39+
return (
40+
<div className="flex items-center gap-2 opacity-60">
41+
<span className="loading loading-spinner loading-sm" />
42+
<span>読み込み中...</span>
43+
</div>
44+
);
45+
}
46+
47+
return (
48+
<div className="flex flex-col gap-2">
49+
{licenses.map((pkg) => {
50+
const key = `${pkg.name}@${pkg.version}`;
51+
const isOpen = expanded === key;
52+
return (
53+
<div key={key} className="collapse collapse-arrow bg-base-200">
54+
<input
55+
type="checkbox"
56+
checked={isOpen}
57+
onChange={() => setExpanded(isOpen ? null : key)}
58+
/>
59+
<div className="collapse-title font-mono text-sm">
60+
<span className="font-bold">{pkg.name}</span>
61+
<span className="opacity-60 ml-2">v{pkg.version}</span>
62+
<span className="badge badge-outline badge-sm ml-3">
63+
{pkg.license}
64+
</span>
65+
</div>
66+
<div className="collapse-content text-sm">
67+
{pkg.author && (
68+
<p className="mb-1">
69+
<span className="opacity-60">Author: </span>
70+
{pkg.author}
71+
</p>
72+
)}
73+
{pkg.repository && (
74+
<p className="mb-1">
75+
<span className="opacity-60">Repository: </span>
76+
<a
77+
className="link link-primary break-all"
78+
href={pkg.repository}
79+
target="_blank"
80+
rel="noopener noreferrer"
81+
>
82+
{pkg.repository}
83+
</a>
84+
</p>
85+
)}
86+
{pkg.licenseText && (
87+
<pre className="mt-2 whitespace-pre-wrap text-xs bg-base-300 p-3 rounded-box overflow-x-auto">
88+
{pkg.licenseText}
89+
</pre>
90+
)}
91+
</div>
92+
</div>
93+
);
94+
})}
95+
</div>
96+
);
97+
}

app/about/license/page.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Metadata } from "next";
2+
import { Heading } from "@/markdown/heading";
3+
import licenseText from "../../../LICENSE?raw";
4+
import { ThirdPartyLicenses } from "./ThirdPartyLicenses";
5+
6+
export const metadata: Metadata = {
7+
title: "ライセンス",
8+
description: "my.code(); のライセンスおよび使用しているサードパーティライブラリのライセンス情報です。",
9+
};
10+
11+
export default function LicensePage() {
12+
return (
13+
<div className="p-4 pb-16 w-full max-w-docs mx-auto">
14+
<Heading level={1}>ライセンス</Heading>
15+
16+
<Heading level={2}>my.code(); のライセンス</Heading>
17+
<p className="my-4 opacity-80">
18+
my.code(); のソースコードは MIT ライセンスのもとで公開されています。
19+
</p>
20+
<pre className="bg-base-200 rounded-box p-4 text-sm whitespace-pre-wrap overflow-x-auto my-4">
21+
{licenseText}
22+
</pre>
23+
24+
<Heading level={2}>サードパーティライブラリのライセンス</Heading>
25+
<p className="my-4 opacity-80">
26+
my.code(); は以下のオープンソースライブラリを使用しています。
27+
</p>
28+
<ThirdPartyLicenses />
29+
</div>
30+
);
31+
}

app/about/runtime/page.tsx

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import { Metadata } from "next";
2+
import { Heading } from "@/markdown/heading";
3+
4+
export const metadata: Metadata = {
5+
title: "コード実行環境について",
6+
description: "my.code(); で使用しているコード実行環境の仕組みを説明します。",
7+
};
8+
9+
export default function RuntimePage() {
10+
return (
11+
<div className="p-4 pb-16 w-full max-w-docs mx-auto">
12+
<Heading level={1}>コード実行環境について</Heading>
13+
<p className="my-4 opacity-80">
14+
my.code(); では、プログラミング言語ごとに異なる仕組みでコードを実行しています。
15+
以下にそれぞれの言語の実行環境について説明します。
16+
</p>
17+
18+
<Heading level={2}>ブラウザ内で実行される言語</Heading>
19+
<p className="my-4 opacity-80">
20+
以下の言語は、サーバーへの通信を行わず、すべてお使いのブラウザ内で実行されます。
21+
そのため、インターネット接続が不安定な環境でも、一度ページが読み込まれれば実行可能です。
22+
</p>
23+
24+
<div className="flex flex-col gap-6 my-6">
25+
<div className="card bg-base-200 shadow-sm">
26+
<div className="card-body">
27+
<h3 className="card-title">Python</h3>
28+
<p>
29+
Python は{" "}
30+
<a
31+
className="link link-primary"
32+
href="https://pyodide.org/"
33+
target="_blank"
34+
rel="noopener noreferrer"
35+
>
36+
Pyodide
37+
</a>{" "}
38+
を使用して実行されます。Pyodide は CPython(Python の公式実装)を
39+
WebAssembly にコンパイルしたものです。Python コードはブラウザ内の
40+
Web Worker 上で動作するため、ページの描画をブロックせずに実行できます。
41+
</p>
42+
</div>
43+
</div>
44+
45+
<div className="card bg-base-200 shadow-sm">
46+
<div className="card-body">
47+
<h3 className="card-title">Ruby</h3>
48+
<p>
49+
Ruby は{" "}
50+
<a
51+
className="link link-primary"
52+
href="https://ruby.github.io/ruby.wasm/"
53+
target="_blank"
54+
rel="noopener noreferrer"
55+
>
56+
ruby.wasm
57+
</a>{" "}
58+
を使用して実行されます。ruby.wasm は公式の CRuby を WebAssembly
59+
にコンパイルしたものです。Python と同様に Web Worker 上で動作します。
60+
</p>
61+
</div>
62+
</div>
63+
64+
<div className="card bg-base-200 shadow-sm">
65+
<div className="card-body">
66+
<h3 className="card-title">JavaScript</h3>
67+
<p>
68+
JavaScript はブラウザ自身の JavaScript エンジンを利用して実行されます。
69+
コードは安全なサンドボックス環境内で評価されます。
70+
</p>
71+
</div>
72+
</div>
73+
74+
<div className="card bg-base-200 shadow-sm">
75+
<div className="card-body">
76+
<h3 className="card-title">TypeScript</h3>
77+
<p>
78+
TypeScript は{" "}
79+
<a
80+
className="link link-primary"
81+
href="https://www.npmjs.com/package/@typescript/vfs"
82+
target="_blank"
83+
rel="noopener noreferrer"
84+
>
85+
@typescript/vfs
86+
</a>{" "}
87+
を使用してブラウザ内でコンパイルされ、その後 JavaScript
88+
と同じ仕組みで実行されます。
89+
</p>
90+
</div>
91+
</div>
92+
</div>
93+
94+
<Heading level={2}>外部サービスを利用して実行される言語</Heading>
95+
<p className="my-4 opacity-80">
96+
以下の言語は、外部のコンパイル・実行サービス(
97+
<a
98+
className="link link-primary"
99+
href="https://wandbox.org/"
100+
target="_blank"
101+
rel="noopener noreferrer"
102+
>
103+
Wandbox
104+
</a>
105+
)の API を通じて実行されます。コードはサーバーに送信されてコンパイル・実行され、
106+
結果がブラウザに返されます。そのため、実行にはインターネット接続が必要です。
107+
また、入力したコードが Wandbox のサーバーに送信されることをご了承ください。
108+
</p>
109+
110+
<div className="flex flex-col gap-6 my-6">
111+
<div className="card bg-base-200 shadow-sm">
112+
<div className="card-body">
113+
<h3 className="card-title">C++</h3>
114+
<p>
115+
Wandbox の g++ (GNU C++ Compiler) を使用してコンパイル・実行されます。
116+
最新の安定版コンパイラが使用され、Boost ライブラリも利用可能です。
117+
実行時にエラーが発生した場合は、スタックトレースが表示されます。
118+
</p>
119+
</div>
120+
</div>
121+
122+
<div className="card bg-base-200 shadow-sm">
123+
<div className="card-body">
124+
<h3 className="card-title">Rust</h3>
125+
<p>
126+
Wandbox の rustc (Rust コンパイラ) を使用してコンパイル・実行されます。
127+
最新版のコンパイラが使用されます。
128+
</p>
129+
</div>
130+
</div>
131+
</div>
132+
133+
<div className="alert alert-warning alert-dash my-6">
134+
<svg
135+
xmlns="http://www.w3.org/2000/svg"
136+
className="h-6 w-6 shrink-0 stroke-current"
137+
fill="none"
138+
viewBox="0 0 24 24"
139+
>
140+
<path
141+
strokeLinecap="round"
142+
strokeLinejoin="round"
143+
strokeWidth="2"
144+
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"
145+
/>
146+
</svg>
147+
<div>
148+
<p>
149+
外部サービスを利用して実行される言語(C++・Rust)では、入力したコードが外部サーバーに送信されます。
150+
個人情報や機密情報を含むコードは入力しないようにしてください。
151+
</p>
152+
</div>
153+
</div>
154+
</div>
155+
);
156+
}

0 commit comments

Comments
 (0)