Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LINE, Supabase MCP でバイブスを上げる
Search
4geru
May 24, 2025
0
92
LINE, Supabase MCP でバイブスを上げる
「最初から学ぶMCPとFunction Calling」で LT した内容です
https://awsbasics.connpass.com/event/351591/
4geru
May 24, 2025
Tweet
Share
More Decks by 4geru
See All by 4geru
AI時代のハンズオン:未来の“相棒”と出会う実践体験
4geru
0
5
ツンデレさんと考える LINE bot MCP の使い方
4geru
0
180
アマゾンの最強の働き方 読書シェア会
4geru
1
49
オンプレからクラウドへ。大規模なAWS移行を支えたリアーキテクチャプロジェクト達
4geru
0
190
クラウドネイティブで実現する、共通DBの課題解決 ~桃園の誓いアーキテクチャ~
4geru
0
22
LINE Bot MCP の可能性
4geru
0
83
Supabase超入門: 基本から応用まで
4geru
0
15
「成果を生み出すためのSalesforce運用ガイド」 ~ 第4章 Salesforceの標準的なモデルをおさえる ~
4geru
2
170
Ruby エンジニアが Salesforce 業界に 異動して感じたこと
4geru
1
180
Featured
See All Featured
Designing for Performance
lara
610
69k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Writing Fast Ruby
sferik
628
62k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Code Review Best Practice
trishagee
69
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Being A Developer After 40
akosma
90
590k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
KATA
mclloyd
30
14k
Speed Design
sergeychernyshev
32
1k
Transcript
LINE, Supabase MCP でバイブスを上げる 2025/05/24 最初から学ぶMCPとFunction Calling
自己紹介 名前:しげる 所属:マネーフォワード 趣味:LINE API で遊ぶこと X: @_4geru 🐼 LINE
API Expert 歴:7年目 昨日 CloudNative Days Summer 登壇し、沖縄観光中
AIに手伝ってもらいながら開発するって、 実際どうなの?便利なの?
利用技術 - Supabase - Supabase • オープンソースのバックエンドサービス(BaaS)プラットフォーム • PostgreSQLデータベース、認証、ストレージなどの開発環境を提供 •
MCPサーバーを公式リリースし、AIツールとの連携を強化 Supabase Edge Function • サーバーレスの機能(AWS Lambdaのようなもの)
利用技術 - LINE Messasging API(Bot) - LINE Messaging API •
テキスト、画像、動画、Flex Messageなど のメッセージをサポート • Reply, Push APIなどがある Flex Message • 広告でよく流れてくるメッセージ • 柔軟な UI を表現 • 複数を横並びも可能 • アクション(リンク)も埋め込める
MCPとの二人三脚開発ドキュメンタリー
- 図書管理システム -
LINE x Supabase MCP のお品書き 第1章: Supabase環境構築 - プロジェクトの土台作り 第2章:
データベース設計 - ER図からマイグレーションまで 第3章: LINE連携 - Flex Message送信の挑戦と学び 第4章: Suapabse Edge Function - 知見をアウトプット 第5章: MCPは「相棒」となり得るか? - 試行錯誤の先に得た答え
第1章: Supabase環境構築 - プロジェクトの土台作り -
プロジェクト作成① プロジェクト概要を README.md へ Cursor が読んで解釈
プロジェクト作成② ✅ 組織の検索
プロジェクト作成③ ✅ コストの確認
コストの確認 + 作成 ✅ プロジェクト名も提案 ✅ コストの最終確認
プロジェクトが作成された! 👏👏👏
第2章: データベース設計 - ER図からマイグレーションまで -
テーブル設計 ✅ 丁寧でわかりやすい
テーブルの作成 3 つのテーブルが作成されました 1. books テーブル: 本自体の情報を管理します。 2. users テーブル:
ユーザー情報を管理します。Supabaseの認証機能 (Auth) と連 携することを前提とします。 3. reservations テーブル: 本の予約情報を管理します。 テーブル間のリレーションシップ: • reservationsテーブルのuser_idはusersテーブルのidを参照します。 • reservationsテーブルのbook_idはbooksテーブルのidを参照します。 テーブル設計
テーブル再設計
テーブルの追加変更 1. users テーブル (変更なし) 2. genres テーブル (新規): 本のジャンルを管理します。
3. books テーブル (変更なし) 4. book_genres テーブル (新規): 本とジャンルの関連を管理する中間テーブル(多 対多)。 5. reservations テーブル (変更・拡張 ): 本の予約情報を管理します。 6. borrowings テーブル (新規): 実際の貸出情報を管理します(貸出履歴)。 テーブル再設計
[3] books [1] users [6] borrowings [5] reservations [4] book_genres
[2] genres
テーブル作成 ✅ テーブルの作成
テーブル確認 ✅ 先ほどの6テーブルが生成されている!
ダミーデータ生成 ✅ ダミーデータの生成
✅ ダミーデータができている! ダミーデータ確認
第3章: LINE連携 - Flex Message送信の挑戦と学び -
テスト用データ取得① ✅ プロジェクトを取得してくれる → ③ 番目が正しい 💬 user を 1
件取得したい
🤔 プロジェクト選択めんどくさくない?
✅ プロジェクト指定可能 Supabase MCP 設定
テスト用データ取得② ✅ users からの検索
Flex Message 作成① 💬 プロンプトはわかりやすく箇条書き
Flex Message 作成②
履歴と予約も表示させたい!
対象データ検索① ✅ テーブルの一覧を確認
✅ 取得用のクエリ - 貸出履歴 対象データ検索② ✅ 取得用のクエリ - 予約情報
横並びで表示 - メッセージ
縦並びにしたい!
メッセージ改良① ✅ 1つにまとめて表示
メッセージ改良②
Flex Message って...
複雑な Flex Message Flex Message は JSON 形式 複雑な入れ子構造(めんどくさい) →
LLM が自動で修正(らくちん!)
第4章: Suapabse Edge Function - 知見をアウトプット -
今までの手順を関数化 → 1つの関数まとまっている / 400行 over
関数の分割①
関数の分割②
👏 やった!できた!!
おや、表示されてる
関数の分割③
関数の分割④
👏 すごすぎる
① ② ③ ④ 関数の分割 分解して、リファクタ
次はデプロイをしたい!
Supabase へデプロイ
環境変数の設定
UIからの確認 ✅ 環境変数が登録されている
Curl から実行 ✅ curl から実行
👏 無事送信ができました!
第5章: MCPは「相棒」となり得るか? - 試行錯誤の先に得た答え -
MCPは「相棒」となり得るか? 1. 複数 MCP を繋ぐと生まれる価値 ◦ 開発のテンポが良くなり、楽しくなる 2. MCP を使うだけでなく、MCP
開発も必要 ◦ OSS MCP にも Contribute を! 3. MCPは「相棒」となっていく ◦ こういうことをしたい!を伝える ◦ ドキュメント、作図も作れる
👏 MCP を使った開発楽しい!