吹き出しポップアップ機能仕様書
概要
株主対話デモアプリケーションに、吹き出しの内容を拡大表示するポップアップ機能を実装しました。この機能により、ユーザーは対話内容をより読みやすい形式で確認できます。
実装された機能
1. 吹き出しクリック機能
- 機能: 任意の吹き出しをクリックすると、その内容が全画面ポップアップで表示される
- 対象: 株主、取締役、システムメッセージのすべての吹き出し
- UI: ホバーエフェクトとカーソルポインターで視覚的にクリック可能であることを示す
2. 対話完了時自動ポップアップ
- 機能: 対話の要約が生成された際、自動的にポップアップで要約内容を表示
- タイミング:
generateSummary()完了後、1秒遅延して表示
- 目的: 重要な要約内容をユーザーに確実に通知
3. モーダルダイアログのUI仕様
基本構造
- 背景: 半透明の黒いオーバーレイ（backdrop-filter: blur）
- サイズ: 最大幅4xl、最大高さ90vh
- 配置: 画面中央、レスポンシブ対応
ヘッダー部
- タイトル: 役割に応じたアイコンとタイトル
- 株主: “👤 株主の発言”
- 取締役: “👔 取締役の回答”
- システム: “📋 システムメッセージ”
- 閉じるボタン: 右上にXアイコン
コンテンツ部
- 文字サイズ: 1.125rem（通常より大きめ）
- 行間: 1.7（読みやすさ重視）
- マークダウン対応: 見出し、太字、斜体、リスト、コードブロック等
- スクロール: 内容が長い場合の縦スクロール対応
フッター部
4. 操作方法
モーダルを開く
- 対話履歴の任意の吹き出しをクリック
- 対話完了時は自動的に要約が表示
モーダルを閉じる
- ヘッダーの×ボタンをクリック
- フッターの「閉じる」ボタンをクリック
- ESCキーを押す
- モーダル背景（オーバーレイ）をクリック
5. レスポンシブ対応
モバイル（768px以下）
- マージン調整: 1rem
- フォントサイズ調整: 1rem
- 見出しサイズの調整
タブレット・デスクトップ
技術実装詳細
JavaScript実装
// モーダル表示
openModal(content, role, icon)
// モーダル非表示
closeModal()
// マークダウンレンダリング
renderMarkdownForModal(text)
// 吹き出しクリックイベント
addDialogueMessage(role, content, icon)
CSS実装
/* モーダル基本スタイル */
#chatBubbleModal
/* アニメーション */
@keyframes modalFadeIn
@keyframes modalSlideIn
/* レスポンシブ対応 */
@media (max-width: 768px)
HTML構造
<div id="chatBubbleModal" class="modal">
<div class="modal-dialog">
<div class="modal-header">
<h2 id="modalTitle"></h2>
<button id="closeModalBtn"></button>
</div>
<div class="modal-content">
<div id="modalContent"></div>
</div>
<div class="modal-footer">
<button id="closeModalFooterBtn"></button>
</div>
</div>
</div>
ユーザビリティ向上
視覚的フィードバック
- ホバーエフェクト: 吹き出しにマウスオーバー時の変化
- アニメーション: モーダルの表示・非表示時のスムーズな動作
- カーソル変化: クリック可能であることの明示
アクセシビリティ
- キーボード操作: ESCキーでの閉じる操作
- 適切なフォーカス管理
- セマンティックなHTML構造
パフォーマンス
- 遅延読み込み: 必要時のみモーダル内容を生成
- 軽量なアニメーション: CSS transformとopacityの使用
今後の拡張可能性
- 印刷機能: モーダル内容の印刷対応
- 共有機能: 要約内容のテキスト共有
- 検索機能: モーダル内のテキスト検索
- 多言語対応: モーダルUI要素の国際化
- カスタマイズ: フォントサイズや色テーマの設定
テスト項目
関連ファイル
src/index.html - モーダルHTML構造の追加src/css/styles.css - モーダルスタイルとアニメーションの追加src/js/script.js - モーダル機能とイベントハンドリングの実装