本仕様定義書は、「ブック風マンガビューア」ユーザースクリプトの設計および実装に関する詳細を定義する。
「ブック風」とは、見開き形式のマンガビューアを指し、既存のウェブページから画像URLを収集し、見開き形式で表示する機能を提供する。
Tampermonkey上で動作し、特定のページに起動ボタンを挿入するか、Tampermonkeyメニューから起動可能。
主な構成要素は「データロードクラス」「UIビルドクラス」「UIマネジメントクラス」であり、使用技術はHTML5、CSS3、JavaScript、React、Tailwind CSSとする。
- 起動ボタン: 特定のページに「マンガビューア起動」ボタンを挿入する（挿入位置はページのDOM構造に依存）。
- Tampermonkeyメニュー: Tampermonkeyのメニューに「ブック風マンガビューア起動」項目を追加し、そこから起動可能。
- 対象:
<img>要素のdata-srcsetまたはsrcset属性から画像URLを収集。 - 動作: ページ内のすべての
<img>要素を走査し、有効な画像URLを配列として取得。
- 形式: 見開き形式（2ページ単位で表示）。
- サイズ: ビューポートの縦いっぱいを占有。ただし、画像の縦横比は維持。
- ヘッダー: 閉じるボタンのみを配置。
- デザイン: Tailwind CSSを使用し、シンプルかつレスポンシブなデザインを適用。
- マウス操作: 見開きをドラッグして次のページ/前のページに移動。
- キーボード操作:
Aまたは←: 前の見開きに移動。Dまたは→: 次の見開きに移動。
- 閉じる: ヘッダーの閉じるボタンでビューアを終了。
- 役割: 画像URLの収集を担当。
- メソッド:
collectImageUrls():<img>要素からdata-srcsetまたはsrcsetを解析し、画像URLの配列を返す。validateUrls(urls): 収集したURLが有効かどうかをチェック（例: 空文字や無効な形式を除外）。
- 出力: 画像URLの配列。
- 役割: 見開きビューアのHTML構造を構築し、画像をセット。
- メソッド:
buildViewer(): Reactコンポーネントを使用してビューアのベース構造を生成。setImages(imageUrls): 収集した画像URLを見開き形式で配置。applyStyles(): Tailwind CSSを適用し、ビューポート縦いっぱいのレイアウトを構築。
- 依存: データロードクラスからの画像URL配列。
- 役割: ビューアの操作および状態管理を担当。
- メソッド:
handleMouseDrag(event): マウスドラッグによる見開き移動を処理。handleKeyPress(event):A,D,←,→キーによる見開き移動を処理。nextSpread(): 次の見開きに移動。prevSpread(): 前の見開きに移動。closeViewer(): ビューアを閉じる処理（DOMからビューアを削除）。zoomIn(): 画像を拡大。zoomOut(): 画像を縮小。backToNormal(): 画像をデフォルトの拡大縮小率に戻す。
- イベントリスナー:
- 左右のページマウスクリックでページ切り替え。
- キーボード入力。(A,D,←,→でページ切り替え)
- 閉じるボタンクリック。
- マウスホイールとWS,↑↓キーで拡大縮小操作。
- Qキーとマウス中クリックでデフォルトの拡大縮小率に戻す。
- HTML5: ビューアの構造を定義。
- CSS3: Tailwind CSSを利用し、レスポンシブかつ効率的なスタイリング。
- JavaScript: ロジック実装およびDOM操作。
- React: UIコンポーネントの構築と状態管理。
- Tailwind CSS: デザインの迅速な適用。
- Tampermonkey: ユーザースクリプトの実行環境。
- 構造:
- ヘッダー: 閉じるボタン（右上配置）。
- ボディ: 見開き画像（左右2ページ分）。
- スタイル:
height: 100vh（ビューポート縦いっぱい）。max-width: auto（画像の縦横比を維持）。- 背景色: グレー（
bg-gray-800など）。
- 奇数ページは右側、偶数ページは左側に配置。
- 画像が1枚しかない場合は右側に配置し、左側は空白。
- マウスクリック: 左端、右端それぞれから150px以内をマウスクリックでページ切り替え。A,D,←,→でもページ切り替え。
- マウスホイールとWS,↑↓キーで拡大縮小操作。マウス中クリック、Qキーでデフォルトの拡大縮小率に戻す。
- キーボード: 押下ごとに1見開き移動。
- アニメーション: ページ切り替え時に本の見開き動作アニメーション。
<img>要素が存在しないページでは起動しても何も表示しない。- 画像の読み込みエラー時は代替テキスト（「画像読み込み失敗」）を表示。
- 見開きの1ページの横幅を超える画像は縮小表示（縦横比維持）。
- 見開きの1ページの縦幅を超える画像は縮小表示（縦横比維持）。
- ブックマーク機能（現在の見開きを保存）の実装を視野に入れる。
- Week 1: データロードクラスの実装。
- Week 2: UIビルドクラスの実装。
- Week 3: UIマネジメントクラスの実装および統合。
- Week 4: テストおよびデバッグ。