LINE, Supabase MCP でバイブスを上げる

「最初から学ぶMCPとFunction Calling」で LT した内容です
https://awsbasics.connpass.com/event/351591/

Transcript

1. LINE, Supabase MCP でバイブスを上げる 2025/05/24 最初から学ぶMCPとFunction Calling
2. 自己紹介 名前：しげる 所属：マネーフォワード 趣味：LINE API で遊ぶこと X： @_4geru 🐼 LINE API Expert 歴：7年目 昨日 CloudNative Days Summer 登壇し、沖縄観光中
3. AIに手伝ってもらいながら開発するって、 実際どうなの？便利なの？
4. 利用技術 - Supabase - Supabase • オープンソースのバックエンドサービス（BaaS）プラットフォーム • PostgreSQLデータベース、認証、ストレージなどの開発環境を提供 • MCPサーバーを公式リリースし、AIツールとの連携を強化 Supabase Edge Function • サーバーレスの機能（AWS Lambdaのようなもの）
5. 利用技術 - LINE Messasging API(Bot) - LINE Messaging API • テキスト、画像、動画、Flex Messageなど のメッセージをサポート • Reply, Push APIなどがある Flex Message • 広告でよく流れてくるメッセージ • 柔軟な UI を表現 • 複数を横並びも可能 • アクション(リンク)も埋め込める
6. MCPとの二人三脚開発ドキュメンタリー
7. - 図書管理システム -
8. LINE x Supabase MCP のお品書き 第1章: Supabase環境構築 - プロジェクトの土台作り 第2章: データベース設計 - ER図からマイグレーションまで 第3章: LINE連携 - Flex Message送信の挑戦と学び 第4章: Suapabse Edge Function - 知見をアウトプット 第5章: MCPは「相棒」となり得るか？ - 試行錯誤の先に得た答え
9. 第1章: Supabase環境構築 - プロジェクトの土台作り -
10. プロジェクト作成① プロジェクト概要を README.md へ Cursor が読んで解釈
11. プロジェクト作成② ✅ 組織の検索
12. プロジェクト作成③ ✅ コストの確認
13. コストの確認 + 作成 ✅ プロジェクト名も提案 ✅ コストの最終確認
14. プロジェクトが作成された！ 👏👏👏
15. 第2章: データベース設計 - ER図からマイグレーションまで -
16. テーブル設計 ✅ 丁寧でわかりやすい
17. テーブルの作成 3 つのテーブルが作成されました 1. books テーブル: 本自体の情報を管理します。 2. users テーブル: ユーザー情報を管理します。Supabaseの認証機能 (Auth) と連 携することを前提とします。 3. reservations テーブル: 本の予約情報を管理します。 テーブル間のリレーションシップ: • reservationsテーブルのuser_idはusersテーブルのidを参照します。 • reservationsテーブルのbook_idはbooksテーブルのidを参照します。 テーブル設計
18. テーブル再設計
19. テーブルの追加変更 1. users テーブル (変更なし) 2. genres テーブル (新規): 本のジャンルを管理します。 3. books テーブル (変更なし) 4. book_genres テーブル (新規): 本とジャンルの関連を管理する中間テーブル（多 対多）。 5. reservations テーブル (変更・拡張 ): 本の予約情報を管理します。 6. borrowings テーブル (新規): 実際の貸出情報を管理します（貸出履歴）。 テーブル再設計
20. [3] books [1] users [6] borrowings [5] reservations [4] book_genres [2] genres
21. テーブル作成 ✅ テーブルの作成
22. テーブル確認 ✅ 先ほどの6テーブルが生成されている！
23. ダミーデータ生成 ✅ ダミーデータの生成
24. ✅ ダミーデータができている！ ダミーデータ確認
25. 第3章: LINE連携 - Flex Message送信の挑戦と学び -
26. テスト用データ取得① ✅ プロジェクトを取得してくれる → ③ 番目が正しい 💬 user を 1 件取得したい
27. 🤔 プロジェクト選択めんどくさくない？
28. ✅ プロジェクト指定可能 Supabase MCP 設定
29. テスト用データ取得② ✅ users からの検索
30. Flex Message 作成① 💬 プロンプトはわかりやすく箇条書き
31. Flex Message 作成②
32. 履歴と予約も表示させたい！
33. 対象データ検索① ✅ テーブルの一覧を確認
34. ✅ 取得用のクエリ - 貸出履歴 対象データ検索② ✅ 取得用のクエリ - 予約情報
35. 横並びで表示 - メッセージ
36. 縦並びにしたい！
37. メッセージ改良① ✅ 1つにまとめて表示
38. メッセージ改良②
39. Flex Message って...
40. 複雑な Flex Message Flex Message は JSON 形式 複雑な入れ子構造（めんどくさい） → LLM が自動で修正（らくちん！）
41. 第4章: Suapabse Edge Function - 知見をアウトプット -
42. 今までの手順を関数化 → 1つの関数まとまっている / 400行 over
43. 関数の分割①
44. 関数の分割②
45. 👏 やった！できた！！
46. おや、表示されてる
47. 関数の分割③
48. 関数の分割④
49. 👏 すごすぎる
50. ① ② ③ ④ 関数の分割 分解して、リファクタ
51. 次はデプロイをしたい！
52. Supabase へデプロイ
53. 環境変数の設定
54. UIからの確認 ✅ 環境変数が登録されている
55. Curl から実行 ✅ curl から実行
56. 👏 無事送信ができました！
57. 第5章: MCPは「相棒」となり得るか？ - 試行錯誤の先に得た答え -
58. MCPは「相棒」となり得るか？ 1. 複数 MCP を繋ぐと生まれる価値 ◦ 開発のテンポが良くなり、楽しくなる 2. MCP を使うだけでなく、MCP 開発も必要 ◦ OSS MCP にも Contribute を！ 3. MCPは「相棒」となっていく ◦ こういうことをしたい！を伝える ◦ ドキュメント、作図も作れる
59. 👏 MCP を使った開発楽しい！