株主対話デモアプリケーションの具体的な操作方法について、画面ごと・機能ごとに詳細に説明します。初心者から上級者まで、誰でも効率的にアプリケーションを活用できるよう手順を整理しています。
graph TD
A[📊 アプリケーション] --> B[🔧 接続設定エリア]
A --> C[📄 PDF管理エリア]
A --> D[💬 対話エリア]
B --> E[Azure OpenAI 設定]
B --> F[言語選択]
C --> G[ファイルアップロード]
C --> H[PDFプレビュー]
D --> I[❓ 質問候補]
D --> J[💬 対話履歴]
D --> K[🚀 対話制御]
style B fill:#e3f2fd
style C fill:#f3e5f5
style D fill:#e8f5e8
┌─────────────────────────────────────────────────────────┐
│ 📊 株主対話デモアプリケーション │
├─────────────────────────────────────────────────────────┤
│ 🔧 Azure OpenAI 接続設定 [折り畳みボタン] │
│ [設定フォーム...] │
├─────────────────┬───────────────────────────────────────┤
│ 📄 PDF管理 │ 💬 対話シミュレーション │
│ [アップロード] │ ❓ 質問候補 [折り畳みボタン] │
│ [プレビュー] │ [質問候補リスト...] │
│ │ [🚀 対話開始] [🗑️ 対話クリア] │
│ │ [対話履歴表示...] │
└─────────────────┴───────────────────────────────────────┘
┌───────────────────────────────┐
│ 📊 株主対話デモアプリケーション │
├───────────────────────────────┤
│ 🔧 Azure OpenAI 接続設定 │
│ [設定フォーム...] │
├───────────────────────────────┤
│ 📄 PDF管理 │
│ [アップロード・プレビュー] │
├───────────────────────────────┤
│ 💬 対話シミュレーション │
│ ❓ 質問候補 │
│ [対話制御・履歴] │
└───────────────────────────────┘
sequenceDiagram
participant U as ユーザー
participant UI as 設定エリア
Note over U,UI: 初期状態（展開済み）
U->>UI: 折り畳みボタンクリック
UI->>UI: エリア折り畳み
U->>UI: 再度ボタンクリック
UI->>UI: エリア展開
操作手順:
| 項目 | 説明 | 入力例 | 注意点 |
|---|---|---|---|
| エンドポイント URL | Azure OpenAI リソースのURL | https://your-resource.openai.azure.com/ |
末尾の / を含める |
| API キー | Azure で生成されたキー | abcd1234... |
パスワード形式で非表示 |
| デプロイメント名 | モデルのデプロイ名 | gpt-4o-mini |
Azure Studio で確認 |
| API バージョン | 使用するAPIバージョン | 2024-02-15-preview |
通常変更不要 |
graph LR
A[言語選択] --> B[🌐 対話言語ドロップダウン]
B --> C[言語選択]
C --> D[全エリア同期]
D --> E[接続設定エリア]
D --> F[対話シミュレーションエリア]
style D fill:#fff2cc
対応言語:
接続テスト手順:
graph TD
A[🔗 接続テスト ボタン] --> B[Azure OpenAI へリクエスト]
B --> C{接続結果}
C -->|成功| D[🟢 接続済み 表示]
C -->|失敗| E[🔴 接続エラー 表示]
D --> F[💾 設定保存 ボタン有効化]
E --> G[エラー詳細表示]
| エラーコード | 原因 | 解決方法 | |————-|——|———-| | 401 | APIキー無効 | Azure Portal でキーを確認・再発行 | | 403 | リソースアクセス権限なし | Azure でロール・権限を確認 | | 404 | エンドポイント・デプロイメント名誤り | 設定値をAzure Portal で再確認 | | 429 | レート制限到達 | 少し待ってから再試行 | | 500 | サーバーエラー | Azure サービス状況を確認 |
graph TD
A[ファイル選択ボタン] --> B[ファイルダイアログ]
B --> C[PDFファイル選択]
C --> D{ファイル検証}
D -->|OK| E[アップロード実行]
D -->|NG| F[エラー表示]
E --> G[ファイルリスト追加]
E --> H[プレビュー表示]
E --> I[テキスト抽出]
style D fill:#fff2cc
操作手順:
graph LR
A[PDFファイル要件] --> B[形式: .pdf のみ]
A --> C[サイズ: 10MB以下推奨]
A --> D[内容: テキスト抽出可能]
A --> E[セキュリティ: パスワードなし]
style A fill:#e1f5fe
アップロード済みファイルは以下の形式で表示されます：
📄 2024年度決算短信.pdf (1.2MB) [プレビュー] [削除]
📄 株主総会資料.pdf (850KB) [プレビュー] [削除]
ファイル操作:
sequenceDiagram
participant U as ユーザー
participant UI as プレビューエリア
participant PDF as PDF.js Engine
U->>UI: ファイル選択/プレビューボタン
UI->>PDF: PDF読み込み要求
PDF->>PDF: ファイル解析
PDF-->>UI: 描画データ返却
UI->>UI: Canvas描画
UI-->>U: プレビュー表示
プレビュー下部にナビゲーションコントロールが表示されます：
[⬅️ 前のページ] ページ 1 / 5 [次のページ ➡️]
操作方法:
プレビューは画面サイズに応じて自動調整されます：
graph TD
A[Azure接続 + PDF準備完了] --> B[質問候補自動生成開始]
B --> C[PDF内容解析]
C --> D[6つの質問候補生成]
D --> E[❓質問候補セクション表示]
E --> F[質問選択待機]
F --> G[質問候補クリック]
G --> H[セクション自動折り畳み]
H --> I[選択質問で対話開始]
style B fill:#e3f2fd
style I fill:#d4edda
生成される6つの質問は以下の観点に基づきます：
| 番号 | 観点 | 例 |
|---|---|---|
| 1 | 業績・財務状況 | 「売上高が前年比で減少していますが、その主な要因と今後の回復見通しを教えてください」 |
| 2 | 経営戦略・将来計画 | 「中期経営計画の進捗状況と、目標達成に向けた具体的な施策を教えてください」 |
| 3 | 株主還元政策 | 「配当政策の方針と、今後の株主還元の考え方について説明してください」 |
| 4 | リスク・課題 | 「事業リスクとして挙げられている項目について、具体的な対策を教えてください」 |
| 5 | 市場環境対応 | 「競争環境の変化にどのように対応していく計画でしょうか」 |
| 6 | その他重要課題 | 「ESGの取り組み状況と今後の方針について教えてください」 |
表示・操作:
❓ 株主質問候補 [⬇️折り畳みボタン]
💡 PDF資料の内容に基づいて生成された質問候補です。クリックして対話を開始してください。
[1] 売上高が前年比で減少していますが、その主な要因と... [▶️]
[2] 中期経営計画の進捗状況と、目標達成に向けた... [▶️]
[3] 配当政策の方針と、今後の株主還元の考え方に... [▶️]
...
操作方法:
graph LR
A[対話制御] --> B[🌐 生成言語選択]
A --> C[🚀 対話開始ボタン]
A --> D[🗑️ 対話クリアボタン]
B --> E[言語同期機能]
C --> F[自動質問生成]
D --> G[履歴完全削除]
パネル構成:
💬 対話シミュレーション
🌐 生成言語: [日本語 ▼]
[🚀 対話開始] [🗑️対話クリア]
📝 Azure OpenAI に接続してPDFファイルをアップロードしてから対話を開始してください
sequenceDiagram
participant U as ユーザー
participant S as システム
participant AI as Azure OpenAI
Note over U,AI: 対話開始
U->>S: 対話開始/質問候補選択
loop 5ターン
S->>AI: 株主質問生成リクエスト
AI-->>S: 株主質問レスポンス
S->>S: 株主吹き出し表示
S->>AI: 取締役回答生成リクエスト
AI-->>S: 取締役回答レスポンス
S->>S: 取締役吹き出し表示
end
S->>AI: 対話要約生成リクエスト
AI-->>S: 要約レスポンス
S->>S: 要約吹き出し表示
S-->>U: 対話完了通知
吹き出しデザイン:
👤株主: [青い吹き出し]
「決算内容について質問があります...」
👔取締役: [緑の吹き出し]
「ご質問にお答えいたします...」
📊システム: [紫の吹き出し]
「対話要約: 今回の対話では...」
graph TD
A[吹き出しクリック] --> B[モーダル表示]
B --> C[詳細内容表示]
C --> D[スクロール可能表示]
D --> E[閉じるボタン/ESCキー]
E --> F[モーダル閉じる]
style B fill:#e3f2fd
モーダル表示内容:
┌─────────────────────────────────────┐
│ 💬 吹き出しの内容 │ [×]
├─────────────────────────────────────┤
│ │
│ [詳細なメッセージ内容] │
│ - リスト形式 │
│ - マークダウン対応 │
│ - 長文も完全表示 │
│ │
├─────────────────────────────────────┤
│ [閉じる] │
└─────────────────────────────────────┘
操作方法:
| キー | 機能 | 利用場面 |
|---|---|---|
| ESC | モーダル閉じる | 詳細表示時 |
| ←→ | ページ送り | PDFプレビュー時 |
| Ctrl+S | 設定保存 | 接続設定時 |
| F5 | リロード | エラー時の回復 |
graph LR
A[設定自動保存] --> B[Azure OpenAI 設定]
A --> C[選択言語]
A --> D[UI状態]
B --> E[エンドポイント・APIキー等]
C --> F[対話生成言語]
D --> G[折り畳み状態]
style A fill:#e8f5e8
設定リセット:
// ブラウザ開発者ツールのコンソールで実行
localStorage.clear();
location.reload();
対話履歴クリア:
graph TD
A[最適化設定] --> B[ファイルサイズ管理]
A --> C[ネットワーク環境]
A --> D[ブラウザ設定]
B --> E[PDF: 10MB以下]
B --> F[画像圧縮推奨]
C --> G[安定した高速回線]
D --> H[JavaScript有効]
D --> I[Cookie・ローカルストレージ有効]
メモリ節約のコツ:
文書バージョン: 1.0
作成日: 2025年7月31日
最終更新: 2025年7月31日
対象アプリケーション: 株主対話デモアプリケーション v1.0