# DOCXviewer

**コントロール機能**：Webページに`.docx`文書を埋め込み表示するためのもので、Mammoth.jsを使用してWord文書をHTMLに変換し、レンダリングします。  
**タイプ**：通常コントロール（コンテナコントロールVBoxを継承）  
**親クラスコントロール**：`bricks.VBox`

## 初期化パラメータ

| パラメータ名 | 型 | 説明 |
|------------|----|------|
| `url` | String | `.docx`ファイルへのURLアドレス。`on_parent`イベント発生時に読み込まれます |

> ⚠️ 注意：正常に動作させるには、事前にMammoth.jsライブラリ（CDNリソースなど）を導入しておく必要があります。

## 主なイベント

| イベント名 | 発生タイミング | コールバック引数 | 説明 |
|----------|----------------|------------------|------|
| `on_parent` | コントロールが親コンテナに追加された後 | - | 自動的に`set_url(this.url)`を呼び出し、文書の読み込みとレンダリングを開始します |

---

# EXCELviewer

**コントロール機能**：Excelファイル（`.xlsx`または`.xls`）の閲覧を可能にし、複数のワークシート間を切り替えて表データを表示できます。  
**タイプ**：コンテナコントロール  
**親クラスコントロール**：`bricks.VBox`

## 初期化パラメータ

| パラメータ名 | 型 | 説明 |
|------------|----|------|
| `url` | String | ExcelファイルのURLアドレス。`on_parent`時により読み込まれます |
| `height` | String | デフォルトは`"100%"`。親コンテナの高さをすべて占めるように設定されます |

## 主なイベント

| イベント名 | 発生タイミング | コールバック引数 | 説明 |
|----------|----------------|------------------|------|
| `on_parent` | コントロールが親ノードにマウントされた後 | - | `set_url(url)`をトリガーし、Excelデータを読み込みます |
| `click`（子Textコントロール） | あるシートタブがクリックされたとき | sheetname, widget | 対応するワークシートの内容に切り替えて表示します |

> ✅ サポート機能：
> - ワークシートタブバーを動的に生成（HBox + Text）
> - スクロール可能な領域に表HTMLコンテンツを表示（VScrollPanel）
> - 選択中のタブをハイライト表示（CSSクラス `selected`）

---

# PDFviewer

**コントロール機能**：ページ内にPDFファイルを埋め込み表示し、ページごとにCanvas画像としてレンダリングします。  
**タイプ**：コンテナコントロール  
**親クラスコントロール**：`bricks.VBox`

## 初期化パラメータ

| パラメータ名 | 型 | 説明 |
|------------|----|------|
| `url` | String | PDFファイルのURLアドレス。`set_url`で使用されます |
| `width` | String | 強制的に`'100%'`に設定され、親コンテナの幅に合わせます |

## 主なイベント

| イベント名 | 発生タイミング | コールバック引数 | 説明 |
|----------|----------------|------------------|------|
| `on_parent` | コントロールのマウント完了後 | - | `set_url()`を呼び出してPDFの読み込みとレンダリングを開始します |
| （内部Promise） | PDFの読み込み成功後 | pdfオブジェクト | 全てのページを巡回し、`add_page_content(page)`を呼び出します |
| （エラー処理） | 読み込み失敗時 | error | コンソールに`'error'`を出力します |

> ✅ レンダリング詳細：
> - `pdfjsLib`（Mozilla PDF.js）を使用してPDFを解析・描画
> - 各ページは`<canvas>`でレンダリングされ、拡大率は固定で`1.5`
> - ページ間に`Splitter`区切り線を挿入（視覚的またはレイアウト用途）

> ⚠️ 注意：グローバルスコープで`pdfjsLib`が定義され、正しく設定されていることを確認してください。