ヴィンテージ修理マニュアル生成ツール v2 内部仕様書テクニカルリファレンス（運用・開発マニュアル）
1. 製品概要
本ツールは、ヴィンテージ品の修理技術者やコレクターが、断片的なメモや英語のサービスマニュアル（テキスト・PDF）から、「プロフェッショナルな日本語修理マニュアル」を自動生成するためのWebアプリケーションです。
開発コンセプト: 1950〜70年代の技術文書のようなヴィンテージ感のあるUIと、最新のAI（Claude 3.5 Sonnet）による高度な言語処理の融合。
主なターゲット: カメラ、時計、オーディオ、クラシックカー等のレトロハードウェア愛好家。
2. インターフェース構成
2.1 専門カテゴリ（ニッチ）選択
11種類のプリセットカテゴリを備え、選択によってAIに渡される「専門用語辞書」が動的に切り替わります。
対応ジャンル: カメラ、オーディオ、腕時計、レトロゲーム、車、バイク、家具、ミシン、楽器、暗室、カスタム。
用語プレビュー: 画面上部のバーに、AIが優先的に使用する専門用語が表示されます。
2.2 入力セクション（Panel 01）
PDFアップロード: Base64エンコーディングを使用して、PDFファイルを直接AIに送信可能です。
テキスト入力: 英語の原文や箇条書きの修理記録を入力。文字数およびトークン数のリアルタイムカウンターを搭載。
メタデータ: 製品名・型番の指定、出力言語（日・英・中）、出力スタイルの選択が可能です。
2.3 生成オプション（Panel 02）
チェックボックスにより、出力内容を細かく制御できます。
専門用語辞書適用: 業界特有の用語を正確に使用。
注意・警告ボックス: 危険作業に対する視覚的強調。
Etsy/BOOTHタグ: 販売プラットフォーム向けのハッシュタグ生成。
3. 技術スタックと内部ロジック
3.1 フロントエンド
HTML5 / CSS3: モダンなグリッドレイアウトおよびレスポンシブデザイン。
Vanilla JavaScript: 外部ライブラリに依存しない高速な動作。
Markdown Renderer: 自作のパーサーにより、Markdown形式のテキストをヴィンテージ風のHTMLに変換。特にparts-tableクラスによる部品表のレンダリングが特徴です。
3.2 AI 連携（Anthropic Claude API）
モデル: claude-sonnet-4-20250514（※コード内の指定に基づく）。
ストリーミング出力: APIからのレスポンスをリアルタイムで画面に描写し、ユーザーの待機時間を軽減します。
システムプロンプト構成:
役割定義（専門技術者兼テクニカルライター）。
選択されたニッチに応じた用語制約。
Markdown構造の厳格な指定。
3.3 データ永続化
LocalStorage: vmg_history_v2というキーで、過去20件までの生成履歴をブラウザ内に保存。リロード後も以前のマニュアルを復元できます。
4. 運用・操作手順
ニッチを選択: 画面上部のチップから適切なカテゴリを選択（例：📷 カメラ）。
原文を入力: 手元の修理メモを貼り付けるか、PDFマニュアルをドロップ。
スタイル設定: 「完全マニュアル」や「手順書のみ」から選択。
生成実行: ⚙ マニュアルを生成するをクリック。
出力・保存:
コピー: クリップボードへ。
MD: Markdownファイルとして保存。
HTML: 印刷用レイアウトを保持したHTMLをダウンロード。
印刷: ブラウザの印刷機能（Ctrl+P）で最適化されたA4レイアウトを出力。
5. 開発者向けカスタマイズ・保守
5.1 専門用語の追加
const NICHESオブジェクト内のtermsプロパティを編集することで、特定の業界用語を強化できます。
5.2 エラーハンドリング
APIキー未設定時: renderDemo関数が作動し、APIを消費せずにツールの出力イメージを確認できるデモモードに切り替わります。
HTTPエラー: 401（認証）、429（レート制限）、500（サーバー）を識別し、ユーザーに適切なメッセージを表示します。
5.3 印刷用CSS
@media printブロックにより、UIボタンや入力フォームを隠し、マニュアル本体のみを美しく印刷する設定が組み込まれています。
6. 注意事項
API接続: 本ツールを実際に動作させるには、有効なAnthropic APIキーが必要です。
セキュリティ: クライアントサイドでAPIを叩く構成のため、商用利用時にはサーバーサイドでのAPIキー秘匿を推奨します。
ここから先は
¥ 3,000
この記事が気に入ったらチップで応援してみませんか？