# 機能設計書 75-Webページ追加

## 概要

本ドキュメントは、GiselleワークフローシステムにおけるWebページ追加機能の設計を記述する。この機能は、指定されたURLからWebページのコンテンツをスクレイピングし、ワークスペースのソースとして追加する。

### 本機能の処理概要

**業務上の目的・背景**：ワークフローにおいて、外部Webページの情報を入力ソースとして活用する必要がある。この機能は、URLを指定することでWebページの内容をMarkdown形式で取得し、ワークスペース内のファイルとして保存する。これにより、AIテキスト生成やRAG（Retrieval-Augmented Generation）のソースとして利用可能になる。

**機能の利用シーン**：
- ドキュメントサイトの内容をワークフローの入力として取り込む場面
- ニュースサイトやブログ記事の内容を分析する場面
- 外部ナレッジベースの情報をベクトルストアに取り込む前処理として

**主要な処理内容**：
1. 入力されたURLに対してWebスクレイピングを実行
2. 取得したHTML内容をMarkdown形式に変換
3. 変換結果をバリデーション（空コンテンツチェック）
4. ワークスペースのストレージにファイルとして保存
5. FetchedWebPage情報（タイトル、fileId等）を返却

**関連システム・外部連携**：
- @giselles-ai/web-searchパッケージを介したWebスクレイピング
- GiselleStorageを介したファイルストレージへの保存

**権限による制御**：本機能自体には直接的な権限チェックは含まれないが、呼び出し元でワークスペースへのアクセス権限が確認される。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 17 | ワークフローエディタ画面 | 補助機能 | Webページノードの追加・設定 |

## 機能種別

データ取得処理・外部システム連携

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| webpage | FetchingWebPage | Yes | 取得対象のWebページ情報（URL含む） | URLが有効な形式であること |
| workspaceId | WorkspaceId | Yes | 保存先のワークスペースID | - |
| provider | "self-made" | No | スクレイピングプロバイダ | デフォルト: "self-made" |
| context | GiselleContext | Yes | Giselleの実行コンテキスト | - |

### 入力データソース

- 画面（ワークフローエディタ）からのURL入力

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| FetchedWebPage | FetchedWebPage | 取得完了したWebページ情報 |
| status | "fetched" | ステータス（取得完了） |
| title | string | Webページのタイトル（取得できない場合は"Untitled"） |
| favicon | string | ファビコンURL（現在は空文字） |
| fileId | FileId | 保存されたファイルのID |

### 出力先

- ストレージ（GiselleStorage）にMarkdownファイルとして保存
- 呼び出し元関数への戻り値としてFetchedWebPageを返却

## 処理フロー

### 処理シーケンス

```
1. WebSearchプロバイダの初期化
   └─ webSearch({ provider: "self-made" })

2. URLからコンテンツ取得
   └─ search.fetchUrl(url, ["markdown"])

3. コンテンツバリデーション
   └─ Markdown内容が空または空白のみでないことを確認

4. ファイルID生成
   └─ FileId.generate()で一意のIDを生成

5. ストレージパス生成
   └─ filePath({type: "studio", workspaceId, fileId})

6. コンテンツをBlobとして保存
   └─ TextEncoderでArrayBufferに変換後、setBlobで保存

7. FetchedWebPageオブジェクト構築
   └─ 元のwebpage情報にstatus、title、fileIdを追加

8. 結果返却
```

### フローチャート

```mermaid
flowchart TD
    A[開始] --> B[WebSearchプロバイダ初期化]
    B --> C[fetchUrl実行]
    C --> D{コンテンツ取得成功?}
    D -->|失敗| E[Error: Web page fetch failed]
    D -->|成功| F{Markdownが空?}
    F -->|Yes| G[Error: Failed to fetch meaningful content]
    F -->|No| H[FileId生成]
    H --> I[ストレージパス生成]
    I --> J[Markdown→ArrayBuffer変換]
    J --> K[setBlobで保存]
    K --> L[FetchedWebPage構築]
    L --> M[結果返却]
    E --> N[終了]
    G --> N
    M --> N
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-01 | 空コンテンツ拒否 | 取得したMarkdownが空または空白のみの場合はエラーとする | 常時 |
| BR-02 | Markdown形式保存 | HTMLからMarkdownに変換した内容を保存 | 常時 |
| BR-03 | タイトルフォールバック | タイトルが取得できない場合は"Untitled"を使用 | タイトル未取得時 |
| BR-04 | Content-Type設定 | 保存時は"text/markdown"をContent-Typeとして指定 | 常時 |

### 計算ロジック

該当なし

## データベース操作仕様

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

本機能はデータベースを直接操作しない。ストレージへのファイル保存を行う。

| 操作 | 対象テーブル | 操作種別 | 概要 |
|-----|-------------|---------|------|
| - | - | - | データベース操作なし |

### テーブル別操作詳細

該当なし（ストレージファイル保存のみ）

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | コンテンツ取得エラー | URLへのアクセス失敗、タイムアウト | URLの正確性、ネットワーク接続を確認 |
| - | 空コンテンツエラー | ページが空、JavaScript必須、認証必要 | 別のページを試す、静的コンテンツを使用 |
| - | ストレージ保存エラー | ストレージへの書き込み失敗 | ストレージ設定・権限を確認 |

### リトライ仕様

本関数自体にはリトライロジックは含まれない。WebSearchプロバイダ側でリトライが実装されている可能性がある。

## トランザクション仕様

本機能はファイルストレージを使用するため、データベースレベルのトランザクション管理は行わない。

## パフォーマンス要件

- Webページ取得は外部ネットワーク依存のため、タイムアウト設定はWebSearchプロバイダに依存
- ファイル保存は通常100ms以内に完了すること

## セキュリティ考慮事項

- 任意のURLへのアクセスを許可するため、SSRF（Server-Side Request Forgery）攻撃のリスクがある
- 内部ネットワークへのアクセス制限をWebSearchプロバイダ側で実装することを推奨
- 取得したコンテンツは信頼できないデータとして扱い、後続処理でのサニタイズを検討
- 認証が必要なページはアクセスできない（認証情報の送信機能なし）

## 備考

- 現在のプロバイダは"self-made"のみがサポートされている
- JavaScriptレンダリングが必要なページ（SPA等）は正しく取得できない可能性がある
- ファビコンは現在空文字として返却される（将来的に実装予定の可能性あり）

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | web-page.ts | `packages/protocol/src/node/variables/web-page.ts` | FetchingWebPage、FetchedWebPage型定義 |

**読解のコツ**: statusフィールドが"fetching"から"fetched"に変化することで状態遷移を表現している点を理解する。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | add-web-page.ts | `packages/giselle/src/sources/add-web-page.ts` | メイン関数の全体構造 |

**主要処理フロー**:
1. **11-16行目**: 関数シグネチャ - webpage、workspaceId、provider、contextを受け取る
2. **18行目**: webSearchプロバイダの初期化
3. **19行目**: fetchUrlでMarkdown形式でコンテンツ取得
4. **22-26行目**: 空コンテンツチェックとエラーハンドリング
5. **29-30行目**: TextEncoderでArrayBufferに変換
6. **32-37行目**: FileId生成とストレージパス構築
7. **39-41行目**: setBlobでストレージに保存
8. **42-48行目**: FetchedWebPageオブジェクトの構築
9. **50行目**: 結果返却

#### Step 3: WebSearchプロバイダを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.ts | `packages/web-search/src/index.ts` | webSearch関数のエクスポート |
| 3-2 | self-made/index.ts | `packages/web-search/src/self-made/index.ts` | self-madeプロバイダの実装 |

**読解のコツ**: fetchUrlメソッドがHTML取得からMarkdown変換までを担当している。

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

```
addWebPage()
    │
    ├─ webSearch({ provider })
    │      └─ プロバイダインスタンス生成
    │
    ├─ search.fetchUrl(url, ["markdown"])
    │      └─ URLからコンテンツ取得＋Markdown変換
    │
    ├─ FileId.generate()
    │      └─ 一意のファイルID生成
    │
    ├─ filePath({ type, workspaceId, fileId })
    │      └─ ストレージパス生成
    │
    └─ context.storage.setBlob(path, data, options)
           └─ Blobとしてストレージに保存
```

### データフロー図

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

URL ─────────────────▶ webSearch.fetchUrl() ─────▶ Markdownコンテンツ
                                                          │
                                                          ▼
                                              コンテンツバリデーション
                                                          │
                               ┌──────────────────────────┴──────────────┐
                               │                                          │
                            [空]                                      [有効]
                               │                                          │
                               ▼                                          ▼
                            Error                            TextEncoder.encode()
                                                                          │
                                                                          ▼
workspaceId ────────▶ filePath() ────────────────────────▶ ストレージパス
                                                                          │
                                                                          ▼
                                                context.storage.setBlob()
                                                                          │
                                                                          ▼
                                                              FetchedWebPage
                                                          (status: "fetched")
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| add-web-page.ts | `packages/giselle/src/sources/add-web-page.ts` | ソース | メイン関数 |
| utils.ts | `packages/giselle/src/files/utils.ts` | ソース | filePath関数 |
| index.ts | `packages/web-search/src/index.ts` | ソース | webSearchエクスポート |
| web-page.ts | `packages/protocol/src/node/variables/web-page.ts` | ソース | WebPage型定義 |
