# 画面設計書 28-Misc - For Enterprise

## 概要

本ドキュメントは、Prettier公式サイトの「For Enterprise」ドキュメントページの画面設計書である。このページは、企業向けにTideliftサブスクリプションを通じたPrettierの商用サポート・メンテナンスサービスを紹介するドキュメントページとして機能する。

### 本画面の処理概要

この画面では、Tideliftサブスクリプションを通じて提供される企業向けのPrettier商用サポートサービスを紹介している。セキュリティアップデート、ライセンス検証、メンテナンス、パッケージ選定ガイダンス、ロードマップへの参加、ツール統合などのサービス内容を説明している。

**業務上の目的・背景**：オープンソースソフトウェアを業務で利用する企業にとって、セキュリティ、ライセンス、長期的なメンテナンスは重要な課題である。この画面は、Tideliftパートナーシップを通じて、Prettierの商用サポートが利用可能であることを企業ユーザーに伝え、オープンソースの持続可能性を支援する商業モデルを紹介する。

**画面へのアクセス方法**：ホームページのナビゲーションバーから「Docs」をクリックし、サイドバーの「Misc」セクション内の「For Enterprise」リンクをクリックしてアクセスする。URLは `/docs/for-enterprise` である。

**主要な操作・処理内容**：
1. Tideliftサブスクリプションの概要確認
2. 提供サービス（セキュリティ、ライセンス、メンテナンス等）の確認
3. 「Learn more」ボタンからTideliftサイトへ遷移
4. 「Request a demo」ボタンからデモリクエストフォームへ遷移

**画面遷移**：
- 遷移元：ホームページ、他のドキュメントページ
- 遷移先：Tidelift契約ページ（外部リンク）、Tideliftデモリクエストページ（外部リンク）

**権限による表示制御**：なし（公開ドキュメントページ）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 画面機能マッピングに該当なし（商用サービス紹介ページのため） |

## 画面種別

ドキュメント表示（静的コンテンツ） - ランディングページ・マーケティング

## URL/ルーティング

- URL: `/docs/for-enterprise`
- ルーティング: Docusaurus docs機能による自動生成

## 入出力項目

本画面は静的なドキュメント表示ページのため、ユーザー入力項目はない。

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|-----|------|
| - | - | - | 該当なし |

## 表示項目

| 項目名 | 説明 | 備考 |
|--------|------|------|
| ページタイトル | "For Enterprise" | H1見出し |
| Tideliftサブスクリプション見出し | "Available as part of the Tidelift Subscription" | H2見出し |
| サブスクリプション概要 | Tideliftとメンテナーの協力による商用サポートの説明 | |
| Learn moreボタン | Tideliftサブスクリプションページへのリンク | CTAボタン（primary） |
| Request a demoボタン | デモリクエストページへのリンク | CTAボタン（primary） |
| Enterprise-ready見出し | "Enterprise-ready open source software-managed for you" | H3見出し |
| サブスクリプション内容説明 | JavaScript、Python、Java等の対応言語と概要 | |
| Security updates | セキュリティアップデートの説明 | 太字見出し付き |
| Licensing verification | ライセンス検証・補償の説明 | 太字見出し付き |
| Maintenance and code improvement | メンテナンス・コード改善の説明 | 太字見出し付き |
| Package selection and version guidance | パッケージ選定・バージョンガイダンスの説明 | 太字見出し付き |
| Roadmap input | ロードマップへの参加の説明 | 太字見出し付き |
| Tooling and cloud integration | ツール・クラウド統合の説明 | 太字見出し付き |
| まとめテキスト | 商用グレードの機能が得られる利点 | |
| Learn moreボタン（下部） | Tideliftサブスクリプションページへのリンク | CTAボタン（primary） |
| Request a demoボタン（下部） | デモリクエストページへのリンク | CTAボタン（primary） |

## イベント仕様

### 1-ページ読み込み

Docusaurusによる静的サイトジェネレーションにより、ビルド時にMarkdownファイルからHTMLページが生成される。ユーザーがページにアクセスすると、生成済みのHTMLコンテンツが表示される。

### 2-Learn moreボタンクリック

「Learn more」ボタンをクリックすると、Tideliftのnpm-prettierサブスクリプションページ（外部サイト）に遷移する。

### 3-Request a demoボタンクリック

「Request a demo」ボタンをクリックすると、Tideliftのデモリクエストページ（外部サイト）に遷移する。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | 静的サイトのため該当なし |

## メッセージ仕様

| メッセージID | 種別 | 表示条件 | メッセージ内容 |
|-------------|------|---------|---------------|
| - | - | - | 静的ドキュメントページのため該当なし |

## 例外処理

| 例外 | 処理内容 |
|------|---------|
| 404 Not Found | ドキュメントが存在しない場合、Docusaurusの404ページを表示 |
| 外部リンク切れ | 外部リンクのリンク先が存在しない場合、外部サイトの404ページを表示 |

## 備考

- 本ページはDocusaurusのdocs機能を使用して生成される
- Markdownファイルのフロントマターで`id: for-enterprise`と`title: For Enterprise`を定義
- CTAボタンにはDocusaurusのbutton--primaryクラスが適用されている
- Tideliftへのリンクにはトラッキングパラメータ（utm_source、utm_medium、utm_campaign）が含まれている
- ページの上部と下部に同じCTAボタンが配置されている

---

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

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

### 推奨読解順序

#### Step 1: ドキュメントコンテンツを理解する

まず、実際のMarkdownドキュメントの内容と構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | for-enterprise.md | `docs/for-enterprise.md` | Tideliftサービスの説明内容、CTAボタンの実装 |

**読解のコツ**: ページはHTML要素（`<a class="button">`）を直接含んでおり、DocusaurusのCSSクラスを利用している。`<br />`タグによるスペーシングも使用されている。

#### Step 2: サイドバー構成を理解する

ドキュメントのナビゲーション構造を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | sidebars.json | `website/sidebars.json` | "Misc"カテゴリ内での位置づけ |

**主要処理フロー**:
1. **行27**: "Misc"カテゴリの最後に"for-enterprise"が含まれている

#### Step 3: Tidelift統合を理解する

Docusaurus設定でのTidelift関連設定を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | docusaurus.config.js | `website/docusaurus.config.js` | customFields.tideliftUrl設定 |

**主要処理フロー**:
- **行50-51**: tideliftUrlがカスタムフィールドとして定義されている

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

```
Docusaurus Build Process
    |
    +-- docs/for-enterprise.md (Source)
    |      |
    |      +-- HTML Elements (Direct)
    |      |      +-- <a class="button button--primary"> (Learn more)
    |      |      +-- <a class="button button--primary"> (Request a demo)
    |      |
    |      +-- External Links
    |             +-- Tidelift Subscription Page
    |             +-- Tidelift Demo Request Page
    |
    +-- website/sidebars.json (Navigation)
    |      |
    |      +-- "Misc" Category
    |             +-- technical-details
    |             +-- related-projects
    |             +-- for-enterprise (this page)
    |
    +-- website/docusaurus.config.js (Configuration)
           |
           +-- customFields.tideliftUrl
```

### データフロー図

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

Markdown File          ------> Docusaurus MDX Compiler -----> HTML Page
(docs/for-             (HTML Pass-through)                    (/docs/for-
enterprise.md)                                                 enterprise)
       |
       +-- Frontmatter (id, title)
       +-- Content (Markdown + HTML)
       +-- Button Elements (HTML)
       +-- External Links (Tidelift)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| for-enterprise.md | `docs/for-enterprise.md` | ソース | ドキュメントコンテンツ（Markdown + HTML） |
| sidebars.json | `website/sidebars.json` | 設定 | サイドバーナビゲーション構成 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurusサイト全体の設定（tideliftUrl含む） |
| custom.css | `website/src/css/custom.css` | スタイル | buttonクラスのスタイル定義 |
