Zenn
🍷

AIボドゲソムリエ🎲Gemini2.0×Dify×Flaskで作る推薦エージェント

2025/02/24に公開
JavaScript
Python
Gemini
Dify
AIエージェント
tech

概要

ボードゲームを始めたいけど、何を選べばいいか分からない...。
そんな経験はありませんか？？

ボードゲームには、プレイ人数やプレイ時間、ゲームの難易度など、考慮すべき要素が多くあります。
初心者にとって、これらの条件を満たす最適なゲームを見つけるのは結構大変だったりしますよね！

そこで今回作った「ボードゲームソムリエのサイハラさん」は、プレイ人数やプレイ時間などの簡単な質問に答えるだけで、AIが最適なボードゲームを提案してくれるチャットエージェントです！

サイハラさん開発にあたり、フロントエンドではPythonのWeb開発フレームワークのFlaskとJavaScript、バックエンドではDifyのチャットフロー、そしてデプロイはCloud Runを使いましたので、これらについて解説していけたらと思います！

※デモ：https://boardgame-sommelier.com
https://www.youtube.com/watch?v=Zx1sTBFyMn0

想定ユーザー

  • ボードゲームの初心者：ボドゲを試したいけど、何を買えばいいか分からない人
  • 家族・友人と遊びたい人：子どもや友だちと一緒に楽しめるゲームを探している人
  • ボードゲームのコアなファン：自分の知らない新しいゲームを発見したい人

目的

  • ボードゲーム選びの悩みを解決
    • ユーザーのプレイ人数、希望するプレイ時間、好みのジャンルに基づいて、AIが最適なボードゲームを提案します。単にリストを表示するのではなく、選定理由やそのゲームの魅力も詳しく説明し、納得感のある選択をサポートします！
    • 対話形式なので「ルールが簡単」「戦略的で奥深い」「協力プレイができる」「小学生でも楽しめる」など、プレイヤーの好みに合ったゲームを見つけやすいです。ユーザーの要望に寄り添った提案ができるのが特徴です！

ポイント

  1. ストリーミングでの回答生成
    キャラクターの「サイハラさん」がエージェントの回答をリアルタイムで表示するようにし、より自然な対話感を目指しています。
    ※サイハラさんのアイコン画像はDALL·E 3で生成しました

  2. おすすめのYouTube動画を検索
    YouTubeを調べてくれて、おすすめの画面が埋め込み表示されるのでゲームの雰囲気やルールを即座に確かめることができます！
    ※デモ動画ではスクリーン録画の仕様上ミュートになっていますが、もちろん音声つきで動画を観られます🔈

  3. 快適なUI
    レスポンシブデザインにより、スマホ・パソコン両方での快適な使用ができるようにしました📱

システムの設計

システムアーキテクチャの概要

アーキテクチャ図▼（詳細は後述のGithubリポジトリをご覧ください。）

1. フロントエンド：Flask + JavaScript

FlaskとJavaScript（Vanilla JS）を組み合わせることで、シンプルかつ高速なフロントエンドを実現しました。

2. バックエンド：Difyチャットフロー

バックエンドの主要な処理は、Difyチャットフローによって実現しています。

具体的には、以下の処理を自動で行います▼

  • 要望のヒアリング
    入力されたプレイ人数とプレイ時間に加えてユーザーのゲームに関する要望をヒアリングし、整理します。
  • ゲーム候補のブレスト
    条件に合ったボードゲームを、理由とともに提案します。
  • YouTube動画の検索
    YouTubeを検索し、おすすめするボードゲームのルールや雰囲気がわかる短い動画を探します。
  • 回答のまとめ
    ゲームの特徴、難易度、おすすめポイントなどをおすすめの動画とともにユーザーに回答します。
  • 追加質問への対応
    掘り下げや他のゲームなどの質問にも対応します。

そもそものDifyについて知りたい方は、こちらの方の記事を参考にしてみてください！
Difyの基礎知識|さっと

Dify DSLファイルの公開

Githubリポジトリにて、Dify用のDSLファイルを公開しています。これらのファイルを使用して、ボードゲームソムリエのベースとなるチャットフローとYouTubeのスクレイピングツールをDifyで観点に再現できます！

含まれるDSLファイル
  1. Boardgame Sommelier Chatflow.yml
    • ボードゲームソムリエのチャットフローを定義したDSLファイルです。
    • プレイ人数やプレイ時間に基づいて、最適なボードゲームを提案するフローを実装しています。

今回イテレーションという比較的高度な処理を使っているのですが、その仕様についてはこちらの記事をとても参考にさせていただきました！
Difyにiterationが追加されたので使用感を確かめる|na

  1. YouTube Search API Tool.yml
    • YouTubeのスクレイピングを行うためのDSLファイルです。
    • YouTube APIを利用して、特定のキーワードに基づく動画検索を行います。

YouTubeの検索APIについてはこちらの方の記事が参考になりました！
YouTube Data API v3 を使って YouTube 動画を検索する|@koki_develop(Koki Sato)

DSLファイルの使用方法
  1. Difyプラットフォームにログインし、アプリのインポート機能を使用して、上記のDSLファイルをインポートします。
  2. インポート後、必要に応じて設定を調整します。
  3. APIを発行し、Flaskアプリのバックエンドとして環境設定します。

3. デプロイ：Google Cloud Run

Cloud Runでのデプロイ

Google Cloud Runを利用することで、コンテナ化したアプリケーションをサーバレスで運用可能です。Cloud Runのメリットとして、以下が挙げられます！

  • スケールが簡単：トラフィックに応じた自動スケールができる
  • 管理が簡単：インフラのアップデートが簡単になる
  • セキュリティが簡単：自動でSSL証明書を発行できる

DNS設定のポイント

独自ドメインの設定には、以下の手順で対応しました。

  1. Cloud Runサービスの作成
    アプリをCloud Runにデプロイし、サービスURLを取得
  2. カスタムドメインの登録
    Google Cloud Consoleからカスタムドメインを登録
  3. DNSレコードの追加
    お名前.comのDNS設定で、以下のレコードを設定：
  • Aレコード（IPv4）：4つのIPアドレス
  • AAAAレコード（IPv6）：4つのIPアドレス
  1. SSL証明書の自動管理
    Cloud Runによる自動的なSSL証明書の発行・更新

今後の展望

今後さらに利便性を向上させるために、以下の機能を追加したいと思っています！

  • 購入リンクの提供
    • おすすめされたゲームをすぐに購入できるよう、ECサイトへのリンクをユーザーに示すともっと便利になりそうですよね！
  • 音声でのやり取り
    • STT、TTSを活用してやり取りを音声会話でできるようにしたいです
    • 今回、Open AIの日本語版で実施を試みましたが、発話速度や声色の問題があり、できませんでした

ソースコードの共有

今回は、FlaskとJavaScriptによるフロントエンド、Difyを利用したLLMを取り入れたバックエンド、そしてCloud Runによる安定した運用環境を組み合わせて楽しいシステムを作りました！

ソースコードはGitHubリポジトリで公開します。使い方はREADMEにも詳しく書いているので興味のある方はそちらもご覧ください。

バズったら宣伝📣

私が所属するKyoboは京都大学の現役院生＆OBによるボードゲーム制作会社を立ち上げ、

など、さまざまな頭脳系ゲームの制作に取り組んでいます！ご興味のある方は、ぜひホームページやXを見に来てくださいね〜！**📣

Discussion