# 画面設計書 8-CoffeeScript 2発表ページ

## 概要

本ドキュメントは、CoffeeScript 2のリリース告知ページ（docs/v2/announcing-coffeescript-2/index.html）の画面設計書です。CoffeeScript 2の新機能、改善点、移行ガイドなどを紹介する専用のランディングページです。

### 本画面の処理概要

**業務上の目的・背景**：
CoffeeScript 2のメジャーリリースを告知し、ユーザーに新バージョンの利点と変更点を伝えます。ES2015+のJavaScript出力、新しい構文機能、既存プロジェクトの移行方法などを説明し、v2への移行を促進します。マーケティングとドキュメンテーションの両方の役割を果たします。

**画面へのアクセス方法**：
v2ドキュメントページからのリンク、または直接 /v2/announcing-coffeescript-2/ にアクセスすることで表示されます。

**主要な操作・処理内容**：
1. CoffeeScript 2の新機能と改善点の閲覧
2. ES2015+サポートの詳細確認
3. v1からの移行ガイダンスの参照
4. コード例の確認（ある場合）
5. 関連ドキュメントへのナビゲーション

**画面遷移**：
- このページに遷移してくる画面: v2ドキュメントページ
- このページから遷移できる画面: v2ドキュメント本体、外部リンク

**権限による表示制御**：
特になし。全ユーザーがアクセス可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | CoffeeScript コンパイル | 補助機能 | ページ内のコード例のコンパイル表示 |
| 51 | ブラウザコンパイラ | 補助機能 | ブラウザ上でのコード例のコンパイル機能 |

## 画面種別

告知ページ / ランディングページ

## URL/ルーティング

- パス: `/v2/announcing-coffeescript-2/` または `/v2/announcing-coffeescript-2/index.html`
- ファイル: `docs/v2/announcing-coffeescript-2/index.html`（ビルド済み静的HTML）

## 入出力項目

本画面は主に閲覧用のため、入力項目は限定的です。

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|---------|------|------|
| コード例（ある場合） | 入力 | テキスト | - | インタラクティブなコード例 |

## 表示項目

| 表示項目 | データソース | 表示形式 | 説明 |
|---------|-------------|---------|------|
| ヘッダー | 固定 | nav.navbar | CoffeeScriptロゴとナビゲーション |
| タイトル | 固定 | H1 | "Announcing CoffeeScript 2" |
| 新機能紹介 | コンテンツ | 本文 | ES2015+サポート等の説明 |
| コード例 | コンテンツ | pre/code | CoffeeScript/JavaScript並列表示 |
| リンク | 固定 | a | 関連ドキュメントへのナビゲーション |

## イベント仕様

### 1-ナビゲーション

ヘッダーのリンクをクリックすると、関連ページへ遷移します。

- トリガー: ナビゲーションリンクのクリック
- 処理: 通常のハイパーリンク遷移
- 遷移先: v2ドキュメント、GitHub等

### 2-コード例表示（存在する場合）

ページ内にコード例がある場合、CoffeeScriptコンパイラで処理されます。

- トリガー: ページ読み込み
- 処理: コード例のシンタックスハイライトまたはコンパイル表示

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

該当なし

## メッセージ仕様

該当なし（閲覧専用ページ）

## 例外処理

| 例外状況 | 処理内容 |
|---------|---------|
| スタイルシート読み込み失敗 | 基本的なHTML表示でフォールバック |

## 備考

- Bootstrap 4ベースのレスポンシブデザイン
- Google Fonts（Galada, Alegreya Sans, Lato, Roboto Mono）を使用
- CoffeeScriptロゴ（SVG）をヘッダーに表示
- 背景にリブパターンのテクスチャ（bg-ribbed-light, bg-ribbed-dark）
- 専用のランディングページとしてデザインされている
- リリース告知の記録として保存されている

---

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

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

### 推奨読解順序

#### Step 1: ページ構造を理解する

告知ページのHTML構造とスタイルを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.html | `docs/v2/announcing-coffeescript-2/index.html` | HTML構造、CSS定義 |

**読解のコツ**: このページは専用のランディングページとして設計されており、v2ドキュメント本体とは異なるスタイルを持っています。

#### Step 2: スタイルを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.html | `docs/v2/announcing-coffeescript-2/index.html` | インラインCSS定義 |

**主要処理フロー**:
- **行16**: Bootstrap 4 CSS読み込み
- **行17**: Google Fonts読み込み
- **行18-150**: カスタムスタイル定義（ヘッダー、本文、コード等）

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

```
docs/v2/announcing-coffeescript-2/index.html
    |
    +-- CSS読み込み
    |       +-- Bootstrap 4.0.0-beta
    |       +-- Google Fonts (Galada, Alegreya Sans, Lato, Roboto Mono)
    |       +-- カスタムスタイル（インライン）
    |
    +-- nav.navbar（ヘッダー）
    |       +-- CoffeeScriptロゴ（SVG）
    |       +-- ナビゲーションリンク
    |
    +-- main.main（コンテンツ）
            +-- タイトル
            +-- 新機能紹介本文
            +-- コード例（ある場合）
            +-- 関連リンク
```

### データフロー図

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

ページアクセス            HTML/CSS                        ページ表示
               -------->  レンダリング     ------------>
                              |
                              v
                         ロゴ・フォント
                         外部リソース読み込み
                              |
                              v
                         コンテンツ表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.html | `docs/v2/announcing-coffeescript-2/index.html` | HTML | CoffeeScript 2発表ページ本体 |
| index.html | `docs/v2/index.html` | HTML | v2ドキュメント（リンク元） |
