リアルタイムでグラフィカルな"議事ボード"を自動作成する「AI Meeting Board」を開発

はじめに

会議の「見えないコスト」に終止符を

「あのタスク、誰が担当するんだっけ？」「画面共有で何映そう？」「議論に集中したいのに、メモを取るのに必死で話が頭に入ってこない…」

会議に参加する誰もが一度は感じたことのある、こうした悩み。
会議には、アジェンダの準備、リアルタイムでのメモ取り、議事録の清書、タスクの洗い出しと担当者割り振りなど、「見えないコスト」がつきまといます。

今回、私たちが開発したAI Meeting Board（愛称：AIMeeBo）は、こうした会議にまつわる非効率を、AIの力で解消するリアルタイム議事録生成アプリです。
("あいみーぼ"と読みます。どこかのキャラクターフィギュアに似ている気がしますが気のせいです)

本記事では、このアプリが解決する課題、そのユニークなソリューション、そしてそれを支える Gemini と Firebase をフル活用したサーバーレス・リアルタイムアーキテクチャをご紹介します。

まずは動作をご覧ください

実際にどのように動作するのか、こちらのデモ動画をご覧ください。
リアルタイムで情報が更新されていく様子や、自由なレイアウト調整機能の滑らかな操作性にもご注目ください！

https://youtu.be/mfH7h1C983g

また、一般公開用にAI機能無しのデモページも用意しました
https://aimeebo-demo.web.app/
音声認識動作確認デバイス

1. デモページにアクセス
2. ニックネームを入力し「匿名でログイン」をクリック (初回はCloudRunスタートアップのため時間がかかるかも)
3. サンプル会話を追加して動作を確認 (感想代わりにでも)
4. パネルをドラッグ&ドロップで自由に配置

※音声認識にはWeb Speech APIを利用しており一部ブラウザでは動作しないため、Chrome推奨です
※APIキー取り扱いに関する利用規約がまだできていないため、今のところ会話履歴追加のみで、AI機能は無効化してあります
※実際のアプリを試したい方は、GitHubをクローンしご自身のGoogleCloudアカウントでセットアップしてください
※審査員殿には本番環境のURLを提出しています

1. 対象ユーザーと解決したい課題

ターゲットユーザー

• プロジェクトマネージャー/チームリーダー: 複数の会議を掛け持ち、決定事項やタスクの管理に追われている。
• ソフトウェアエンジニア/デザイナー: 専門的な議論に集中したいが、議事録作成の負担を感じている。
• リモートワーカー/途中参加者: 会議の文脈を素早くキャッチアップし、スムーズに議論に参加したい。

根深い課題

彼らが共通して抱えるのは、「議論への集中」と「情報の記録・整理」という二つの行為を両立させることの難しさです。
結果として、以下のような問題が発生します。

• タスクの抜け漏れ: 「言った・言わない」問題が発生し、担当者が不明確なタスクが宙に浮く。
• 決定事項の曖昧化: 議論の末に何が決まったのか、参加者の認識がズレる。
• 質の低い議事録: 発言の羅列だけで、文脈や結論がわからない議事録が量産される。
• 情報共有の高コスト: 新しい参加者や欠席者へのキャッチアップに、多大な時間と労力がかかる。
• 何から決めていけばいいか迷う: 意見が合わない場合や、アイディアが出ずに議論が硬直する。
• 実際には読まれない: 苦労して作ったものの、読むのが面倒などの理由で関係者にも読まれない。

2. ソリューションと「AI Meeting Board」のユニークな特徴

「AI Meeting Board」は、単なる音声文字起こしアプリではありません。**会議の文脈をリアルタイムで理解し、情報を自動で構造化する「AIファシリテーター」**として機能します。

ソリューション

従来のアプローチとの違い：

• ❌ 従来：録音ファイルをアップロード → 処理待ち → 結果表示
• ✅ 本アプリ：リアルタイム音声認識 → 即座にAI処理 → その場で画面更新

このアプリは、ブラウザに標準搭載されている Web Speech API を活用し、会議中の発言をリアルタイムで文字起こしします。
バックグラウンドでAIエージェントが常にその会話を監視し、以下の情報をリアルタイムで生成・更新し続けます。
しかも、Web Speech APIは無料で利用できるため、高価な音声認識APIのコストを気にすることなく、このリアルタイム体験を提供できます。

• ✅ タスクリスト: 「〇〇さんが来週までに対応」といった発言から、タスク、担当者、期限を自動で抽出。
• 👥 参加者リスト: 参加者の状態を把握。
• 👥 会話履歴: 各参加者と、AIが出した司令を表示します。
• 📝 ノート: 重要な決定事項、課題、アイデアなどを箇条書きで自動生成。
• 📜 議題: 現在の議題と、次に議論すべきトピックをAIが推定・提案。
• 📊 概要図: 会話全体の構造をMermaid形式の図で可視化。

これにより、参加者はメモ取りから解放され議論に集中できます。
会議終了の瞬間には、整理された議事ボードが完成しているのです。

音声認識動作確認デバイス

Mac

• Chrome: 可
• Vivaldi: 不可

Android

• Chrome: 可

iPad

• Chrome: 不可
• Safari: 可

3つのユニークな特徴

1. 司令塔(オーケストレイター)LLM + 専門家(エージェント)LLMによる分業体制
   人間の組織と同じように、1つの巨大なLLMに全てを任せるのではなく、「全体の文脈を理解し、指示を出す司令塔」と、「タスク管理」「ノート生成」といった各分野の専門家AIエージェントに処理を分業させています。
   これにより、複雑な会議の状況にも柔軟かつ的確に対応できます。

2. Firebase Realtime Database を活用した完全リアルタイム同期
   
   フロントエンドとバックエンドのデータは、Firebase Realtime Databaseを介して常に同期されます。
   誰かの一言でタスクが生まれると、瞬時に全参加者の画面に反映され、まるで同じノートを全員で覗き込んでいるかのような一体感のある会議体験を提供します。

3. JSON出力とリッチなUIによる、究極に「見やすい」ダッシュボード
   

   一般的なLLM議事録ツールは、出力がマークダウン形式に留まることが多く、一見して内容を把握しづらいことがあります。
   このアプリは、各専門エージェントが構造化されたJSONデータのみを出力し、そのJSONを元に最適化されたUIコンポーネントを描画します。
   これにより、単なるテキストの羅列ではない、視覚的に分かりやすく整理されたレイアウトを実現します。
   表示される情報パネル（タスク、ノート、概要図など）はドラッグ＆ドロップで好きな位置に配置できるため、自分だけの最適な会議ダッシュボードを構築できます。
   カラム幅も調整できるため、見せたいパネルを強調することもできます。
   レイアウト変更: https://youtu.be/iAxGBPvCMmU
   パネル拡大: https://youtu.be/7CcjMAaSoj0
   テーマ変更: https://youtu.be/GZOnf1-3CYo

3. こだわりのサーバーレス・リアルタイムアーキテクチャ

スケーラビリティ、リアルタイム性、そして開発効率を最大化するために、Google Cloudのサービスを全面的に採用したサーバーレスアーキテクチャで構築されています。

システムアーキテクチャ図

技術選定とその理由

• フロントエンド (Next.js + Firebase Hosting):
  Next.jsによるモダンなUI開発と、Firebase HostingによるグローバルCDN配信を組み合わせることで、高速かつ安定したフロントエンドをサーバーレスで提供します。
  今回はCSRを主体とし、Firebase Realtime Databaseとのリアルタイム連携を最大限に活かしています。

深くは述べませんが、デプロイtargetを自分で選択できるのも、firebase.jsonを使用したリダイレクトの仕組みも素晴らしいです。
サーバーレスの静的ホスティングでこれが実現できるなんて驚きでした。

    "rewrites": [
        {
            "source": "/create_room",
            "run": {
                "serviceId": "app-name",
                "region": "us-central1"
            }
        }
        ]

• バックエンド (FastAPI + Cloud Run):
  バックエンドはFastAPIで構築し、Cloud Runにデプロイします。
  リクエスト駆動でスケールし、リクエストがない時はゼロになるため、コスト効率に優れています。

• データベース (Firebase Realtime Database):
  NoSQL型のデータベースで、データが変更されると、接続している全クライアントに瞬時に変更がプッシュされます。
  これにより、複雑なWebSocket実装なしに、極めて低遅延なUI同期が実現できました。
  これはかなり気に入っているポイントです。

前回のハッカソン(https://zenn.dev/marcosan/articles/188e5f13464171)でも複数人チャットアプリを作成していたように、リアルタイム性とコミュニケーションを重視したコンセプトで挑んでいます。

• 認証 (Firebase Authentication):
  セキュアなユーザー認証機能を迅速に実装するために採用しました。
  Firebaseの他サービス（Hosting, Realtime Database）との親和性が非常に高く、SDKを組み込むだけで簡単に認証システムを構築できます。
  メール/パスワード認証に加え、今回実装した匿名認証のような多様なログイン方法を標準でサポートしているため、ユーザー登録のハードルを下げることが可能です。
  

• AI (Gemini):
  ユーザー自身がAPIキーを提供するアーキテクチャとしているため、Vertex AI経由ではなくGemini APIを採用しています。
  現段階ではカスタムしきれておらず全コンテキストを投げているのですが、それでも十分な精度の応答ができており、単純に性能が素晴らしいです。

4. LLMエージェント分業システム

このアプリの大きな特徴は、司令塔となるオーケストレイターLLMが、専門分野を持つ複数のエージェントLLMを統括するアーキテクチャです。

処理フロー

1. ユーザー発言: ユーザーがフロントエンドからWeb Speech APIを通じて発言すると、バックエンドでトランスクリプトとしてFirebaseに保存します。
2. オーケストレイター起動: 一定の発言が溜まると、orchestrate_agents 関数が起動。会話履歴と現在の会議データ（タスク、ノート等）の概要を分析します。
3. 指示生成: オーケストレイターLLMが、「どのエージェントに、何をさせるべきか」を判断し、以下のような指示リストをJSON形式で生成します。

   [
     {"agent_name": "TaskManagementAgent", "instruction": "田中さんが来週までにAPI仕様書を作成するというタスクを追加してください。"},
     {"agent_name": "NotesGeneratorAgent", "instruction": "技術選定がNext.jsとFastAPIに決定したことを記録してください。"}
   ]
   

4. エージェント実行とJSON出力: 指示を受け取った各専門エージェント（例: TaskManagementAgent）は、自身の専門知識（プロンプト）と会話履歴を基に、タスクリストやノートといった構造化されたデータをJSON形式で出力します。
5. データ更新: 生成されたJSONデータでFirebase Realtime Databaseを更新します。
6. UI反映: データベースの変更がリアルタイムでフロントエンドに通知され、Reactコンポーネントが新しいデータを元にUIを自動で更新します。

このアーキテクチャのキモは、各専門エージェントがJSON形式のデータを生成することです。LLMの出力を単なるマークダウンとして表示するのではなく、構造化されたJSONをフロントエンドのReactコンポーネントが解釈して描画することで、ただのテキストの羅列ではない、タスクカードやノートといったリッチでインタラクティブなUIの構築を可能にしています。

また、この分業アーキテクチャは拡張性にも優れています。例えば、将来「議事録の感情分析パネル」を追加したい場合、感情分析を担当するSentimentAnalysisAgentを開発し、判断対象に加えるだけで、既存のシステムを大きく変更することなく機能拡張が可能です。

5. ユーザーのプライバシーとセキュリティへの配慮

まず前提として、本アプリは開発段階のため、重要な情報や機密情報は入力しないでください。

認証によるアクセスコントロール

本アプリケーションでは、Firebase Authentication を活用し、認証されたユーザーのみがルームを作成・参加できる仕組みを導入しています。

現在はどのメールアドレスでもユーザー登録が可能ですが、実際の運用（例えば社内利用など）では、特定のメールドメインや特定のユーザーのみがルームに参加できるよう、より詳細な認可ルールを定義していくこともできます。

ユーザー自身のAPIキー利用と、その安全な管理

「AI Meeting Board」では、ルーム作成者ご自身のGemini AI APIキーを設定いただくモデルを採用しています。
これにより、ユーザーは利用するLLMのモデル（最新のGeminiモデルなど）を自由に選択できる柔軟性を得られます。
そして何より、サービス提供者である私の運用コストが劇的に楽になります。
（無料クレジット期間が過ぎてしまいました）

また皆様から大切なAPIキーをお預かりする以上、暗号化やアクセス権などで保護しています。
詳しくはプロジェクトREADMEをご覧ください。

Firebase Realtime Databaseのセキュリティルール

まず、データベースレベルで厳格なアクセス制御を行っています。クライアント（ブラウザ）からは、自身が参加しているルームの公開情報 (/rooms/{roomId}) しか読み取れません。書き込みは一切許可されておらず、全てのデータ更新はバックエンドのAPI経由で行われます。

rules

{
  "rules": {
    "rooms": {
      "$roomId": {
        // 認証済み、かつその部屋の参加者リストにいるユーザーのみ読み取り可
        ".read": "auth != null && root.child('rooms').child($roomId).child('participants').hasChild(auth.uid)",
        // クライアントからの直接書き込みは一切禁止
        ".write": false
      }
    },
    // APIキーが保存されるパスは、クライアントからは読み書き不可
    "room_secrets": {
      ".read": false,
      ".write": false
    }
  }
}

6. 今後の展望

• 話者分離による高精度化: 現在は無料のWeb Speech APIによるコスト性を優先していますが、プロジェクトがより発展したフェーズでは、Google Cloudの Speech-to-Text API との連携を強化します。特に、話者分離（Speaker Diarization）機能を活用することで、「誰が」「何を」話したかをより正確にAIが認識できるようになり、担当者の割り当て精度などが飛躍的に向上した、高精度な議事ボードの自動生成を目指します。
• 高度な入室管理機能: 現在は、ルームURLを知っているメンバーが自由に参加できるシンプルな設計を採用しています。今後は、よりクローズドな会議にも対応するため、ルーム作成者が参加者を承認する「承認制」の導入や、特定のドメインを持つユーザーのみ参加を許可するなどの高度な入室管理機能を追加していく予定です。
• 外部ツール連携: 生成されたタスクをJiraやGithub issuesなどのプロジェクト管理ツールに自動で起票する機能。

7. 感想

• Gemini 2.5 には大変お世話になりました。いただいたクレジットを2.5万円分ぐらい消費しましたし、アイディアを練るのに非常に助かりました。
• 開発、正直めちゃくちゃ大変でした。夜更かししながら作っていたので、ドライアイと疲れがすごいです笑。
• でも、皆様含むエンジニアって何かを作りたくなったら止まらないですよね？
• このハッカソン及びAIツール(GeminiとCline)はそんな夢を叶える良い機会でした。

今後皆様のご意見もいただき、パネルとそれに紐づくエージェントの追加など、より発展させていくことができたら嬉しいなとも思います。
良かったなと思っていただけたら、「いいね」していただけると大変うれしいです！
最後までお読みいただき、ありがとうございました！

GitHub Repository

https://github.com/marcosanyo/AIMeeBo.git