# 画面設計書 7-ダウンロードページ

## 概要

本ドキュメントは、OpenCodeウェブサイトのダウンロードページの設計仕様を定義する。

### 本画面の処理概要

ダウンロードページは、OpenCodeのCLIツール、デスクトップアプリ、IDE拡張機能、各種インテグレーションのダウンロード・インストール方法を提供するページである。ユーザーのOSを自動検出し、適切なダウンロードオプションを優先表示する。

**業務上の目的・背景**：OpenCodeを利用するためには、CLIツールまたはデスクトップアプリケーションのインストールが必要である。このページは、ユーザーの環境に応じた最適なインストール方法を案内し、スムーズな導入を支援する。

**画面へのアクセス方法**：ランディングページのダウンロードリンク、またはURL `/download` に直接アクセス。

**主要な操作・処理内容**：
1. ユーザーOSの自動検出（macOS/Windows/Linux）
2. 検出されたOSに対応したダウンロードボタンの表示
3. CLIインストールコマンドのクリップボードコピー
4. 各プラットフォーム向けダウンロードリンクの提供
5. IDE拡張機能インストールページへの誘導
6. GitHub/GitLab連携ページへの誘導

**画面遷移**：
- 遷移元：ランディングページ、各種リンク
- 遷移先：ダウンロードファイル、ドキュメントページ、Zenページ

**権限による表示制御**：特になし（公開ページ）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 56 | 国際化 | 主機能 | 多言語対応（i18n.t関数による翻訳） |

## 画面種別

公開ページ / ダウンロード

## URL/ルーティング

`/download` - ダウンロードページ

## 入出力項目

| 項目名 | 入力/出力 | 型 | 必須 | 説明 |
|--------|----------|------|------|------|
| - | - | - | - | この画面では入力項目なし |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|------|------|
| ヘッダー | コンポーネント | サイトナビゲーション |
| アプリアイコン | 画像 | OpenCodeデスクトップアイコン |
| ヒーローテキスト | テキスト | ダウンロードページタイトル |
| OS別ダウンロードボタン | ボタン | 検出されたOS用ダウンロードボタン |
| ターミナルセクション | セクション | CLIインストールコマンド一覧 |
| デスクトップセクション | セクション | デスクトップアプリダウンロード一覧 |
| 拡張機能セクション | セクション | IDE拡張機能一覧 |
| インテグレーションセクション | セクション | GitHub/GitLab連携 |
| FAQセクション | アコーディオン | よくある質問と回答 |
| フッター | コンポーネント | サイトフッター |

## イベント仕様

### 1-OS自動検出

ページ読み込み時にユーザーのOSを検出する処理。

処理フロー：
1. `onMount()` で `detectOS()` を呼び出し
2. `navigator.platform` と `navigator.userAgent` を解析
3. `setDetectedOS()` で検出結果を保存
4. 検出結果に基づいてダウンロードボタンを表示

### 2-CLIコマンドコピー

ユーザーがインストールコマンドをクリックした際の処理。

処理フロー：
1. `handleCopyClick(command)` が呼び出される
2. `navigator.clipboard.writeText(command)` でクリップボードにコピー
3. `button.setAttribute("data-copied", "")` でコピー完了状態を表示
4. 1500ms後に `button.removeAttribute("data-copied")` で元の状態に戻す

### 3-ダウンロードリンククリック

各プラットフォーム向けダウンロードリンクをクリックした際の処理。

処理フロー：
1. `getDownloadHref(platform)` でダウンロードURLを生成
2. `/download/stable/{platform}` 形式のURLに遷移
3. ダウンロードが開始される

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | この画面ではデータベース更新は行わない |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|--------------|----------|
| download.title | タイトル | ページタイトル | 常時 |
| download.meta.description | メタ | ページ説明 | 常時 |
| download.hero.title | 見出し | ヒーロータイトル | 常時 |
| download.hero.subtitle | 説明 | ヒーローサブタイトル | 常時 |
| download.hero.button | ボタン | Download for {os} | OS検出時 |
| download.section.terminal | ラベル | ターミナルセクション | 常時 |
| download.section.desktop | ラベル | デスクトップセクション | 常時 |
| download.section.extensions | ラベル | 拡張機能セクション | 常時 |
| download.section.integrations | ラベル | インテグレーションセクション | 常時 |
| download.platform.macosAppleSilicon | ラベル | macOS Apple Silicon | 常時 |
| download.platform.macosIntel | ラベル | macOS Intel | 常時 |
| download.platform.windowsX64 | ラベル | Windows x64 | 常時 |
| download.platform.linuxDeb | ラベル | Linux (.deb) | 常時 |
| download.platform.linuxRpm | ラベル | Linux (.rpm) | 常時 |
| download.action.download | ボタン | Download | 常時 |
| download.action.install | ボタン | Install | 常時 |

## 例外処理

| 状況 | 処理内容 |
|------|---------|
| OS検出失敗 | デフォルトでmacOS Apple Siliconを選択 |
| クリップボードAPIが利用不可 | コピー処理がサイレントに失敗 |

## 備考

- OS検出はクライアントサイドで実行される（SSR時はnull）
- ダウンロードプラットフォームの種類：
  - darwin-aarch64-dmg（macOS Apple Silicon）
  - darwin-x64-dmg（macOS Intel）
  - windows-x64-nsis（Windows）
  - linux-x64-deb（Linux Debian系）
  - linux-x64-rpm（Linux RPM系）
- IDE拡張機能：VS Code, Cursor, Zed, Windsurf, VSCodium
- インテグレーション：GitHub, GitLab
- ヘッダーの「Get Started」ボタンは非表示（hideGetStarted props）

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

OS検出とダウンロードプラットフォームの型定義を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.tsx | `packages/console/app/src/routes/download/index.tsx` | OS型定義（17行目） |
| 1-2 | types.ts | `packages/console/app/src/routes/download/types.ts` | DownloadPlatform型定義 |

**読解のコツ**: OS型は `"macOS" | "Windows" | "Linux" | null`、DownloadPlatformは各プラットフォーム向けの識別子。

#### Step 2: エントリーポイントを理解する

メインのDownloadコンポーネントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.tsx | `packages/console/app/src/routes/download/index.tsx` | Downloadコンポーネント（69-486行目） |

**主要処理フロー**:
1. **70-72行目**: useI18n, useLanguage, createSignalの取得
2. **74-76行目**: onMountでOS検出
3. **78-85行目**: handleCopyClick関数
4. **95-112行目**: ヒーローセクション（OS別ダウンロードボタン）
5. **114-153行目**: ターミナルセクション（CLIコマンド）
6. **155-271行目**: デスクトップセクション（プラットフォーム別ダウンロード）
7. **273-377行目**: 拡張機能セクション（IDE連携）
8. **379-418行目**: インテグレーションセクション（GitHub/GitLab）
9. **421-479行目**: FAQセクション

#### Step 3: ヘルパー関数を理解する

OS検出とダウンロードURL生成を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.tsx | `packages/console/app/src/routes/download/index.tsx` | detectOS関数（19-28行目） |
| 3-2 | index.tsx | `packages/console/app/src/routes/download/index.tsx` | getDownloadPlatform関数（30-41行目） |
| 3-3 | index.tsx | `packages/console/app/src/routes/download/index.tsx` | getDownloadHref関数（43-45行目） |

### プログラム呼び出し階層図

```
Download (index.tsx)
    │
    ├─ useI18n() ──────────────────> I18nContext
    │      └─ i18n.t() (翻訳)
    │
    ├─ useLanguage() ──────────────> LanguageContext
    │      └─ language.route() (多言語ルート生成)
    │
    ├─ onMount() ──────────────────> ライフサイクル
    │      └─ detectOS() ─────────> OS検出
    │             ├─ navigator.platform
    │             └─ navigator.userAgent
    │
    ├─ getDownloadPlatform() ──────> プラットフォーム変換
    │      └─ OS → DownloadPlatform
    │
    ├─ getDownloadHref() ──────────> URL生成
    │      └─ "/download/{channel}/{platform}"
    │
    ├─ handleCopyClick() ──────────> コピー処理
    │      └─ navigator.clipboard.writeText()
    │
    ├─ Header ─────────────────────> header.tsx
    │
    ├─ Faq ────────────────────────> faq.tsx
    │
    ├─ Footer ─────────────────────> footer.tsx
    │
    └─ Legal ──────────────────────> legal.tsx
```

### データフロー図

```
[入力]                      [処理]                          [出力]

ページ読み込み            detectOS()                      detectedOS状態
(onMount) ──────────────▶ (navigator解析) ───────────────▶ ダウンロードボタン表示

OS検出結果              getDownloadPlatform()             ダウンロードURL
(detectedOS) ───────────▶ (プラットフォーム変換) ──────────▶ ダウンロードリンク

コマンドクリック          handleCopyClick()               コピー完了表示
(ボタン) ───────────────▶ navigator.clipboard ──────────▶ data-copied属性
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.tsx | `packages/console/app/src/routes/download/index.tsx` | ソース | ダウンロードページコンポーネント（487行） |
| index.css | `packages/console/app/src/routes/download/index.css` | スタイル | ダウンロードページ専用スタイル |
| types.ts | `packages/console/app/src/routes/download/types.ts` | ソース | ダウンロードプラットフォーム型定義 |
| header.tsx | `packages/console/app/src/component/header.tsx` | ソース | ヘッダーコンポーネント |
| footer.tsx | `packages/console/app/src/component/footer.tsx` | ソース | フッターコンポーネント |
| faq.tsx | `packages/console/app/src/component/faq.tsx` | ソース | FAQコンポーネント |
| legal.tsx | `packages/console/app/src/component/legal.tsx` | ソース | 法的表示 |
| locale-links.tsx | `packages/console/app/src/component/locale-links.tsx` | ソース | 多言語リンク |
| icon.tsx | `packages/console/app/src/component/icon.tsx` | ソース | アイコンコンポーネント |
| i18n.tsx | `packages/console/app/src/context/i18n.tsx` | ソース | 国際化コンテキスト |
| language.tsx | `packages/console/app/src/context/language.tsx` | ソース | 言語コンテキスト |
| opencode-desktop-icon.png | `packages/console/app/src/asset/lander/opencode-desktop-icon.png` | アセット | デスクトップアプリアイコン |
