こんにちは！万年ダイエッターのWakuqqaです。
前回の記事（【初投稿】万年ダイエッターがCursor×Antigravityのバイブコーディングで、チャット感覚の食事管理アプリ「Log-Eats」を個人開発した話）では、AI食事管理アプリ「Log-Eats（ログイーツ）」を爆誕させたお話をしました。
今回は、そのLog-Eatsに「LINE連携」を組み込んだ時の苦労話を、恥を忍んで（そして面白おかしく）振り返ってみたいと思います。
アプリの概要
食事の写真を送るだけで、AIが瞬時にカロリーとPFC（タンパク質・脂質・炭水化物）を計算・記録してくれるアプリです。
ブラウザ版：https://www.log-eats.com/
📲 LINEで簡単にカロリー計算
Log-eatsのLINE公式アカウントで、食事の写真を送るだけでAIがカロリーを計算します。
👉 LINEでカロリー計算はこちら（友だち追加）
🚀 「LINEから写真送れたら最高じゃね？」という甘い誘惑
Log-Eatsを作って数日、自分で使っていてふと思いました。
「毎回ブラウザ開くの、ぶっちゃけ面倒くさいな……」
ダイエットは継続が命。めんどくさがりなダイエッターにとって「ブラウザを開く」という1タップすら高いハードルになります。
そこで思いつきました。「みんな毎日使ってるLINEから直接写真を送れたら、最強のUXになるのでは！？」
AIアシスタント（今回もAntigravity）に、「LINE連携したいんだけど」と伝えたところ、「いいですね！やりましょう！」と元気よく返事が。
これが、果てしなく続く「アカウント重複地獄」の入り口でした。
👿 第一の罠：未ログインユーザーの「とりあえずLINE連携」問題
実装自体は、ClerkのOAuth連携とLINE Messaging APIを使えばプロンプト数発でサクッと終わる……はずでした。
意気揚々とトップページに**「LINEで始める / 連携する」**という緑色の眩しいボタンを設置しました。
未ログインのユーザーがこれを見て、「おっ、LINEで使えるのか」とポチッと押す。素晴らしい導線です。
しかし、テストをしていて恐ろしいことに気がつきました。
「あれ、俺の過去のデータどこ行った……？」
そう、実は私はすでにGoogleアカウントでLog-Eatsに登録し、数日分の記録をつけていました。
それにもかかわらず、ログアウト状態で「LINEで始める」ボタンを押し、全くの別アカウント（LINE紐付けの完全新規アカウント）を爆誕させてしまったのです。
既存ユーザーが「お、LINE便利そう」と軽い気持ちでボタンを押すと、Googleアカウントとは無関係の新しい自分が生まれてしまう。これはダイエッターにとって致命的（過去の努力が消え去る）です。
🛡️ 解決策：UXを損なわない「ワンクッション」
これを防ぐためには、「LINEで始める」ボタンを押した瞬間に、**「君、もしかしてすでにアカウント持ってない？」**と優しく聞いてあげる必要がありました。
AI先生に泣きつき、トップページのボタンの挙動を以下のように修正してもらいました。
- トップページの「LINEで連携」ボタンを押す
- 「すでにアカウントをお持ちですか？」というモーダルが立ち上がる
- 完全新規の人は「いいえ（LINEで登録）」へ
- 既存ユーザーは「はい（ログイン画面へ）」へ案内し、ログイン後の設定画面から安全に連携してもらう
この「ちょっと待ってコール」を挟むことで、データの分散という大惨事を未然に防ぐことができました。
👿 第二の罠：Webhookからの「お前誰やねん」問題
LINE Bot側に写真を送った時の挙動も一筋縄ではいきませんでした。
LINEから画像がWebhookで飛んできた時、私たちのサーバーは**「このLINEユーザーID、データベースのどのユーザーと紐付いてるんだっけ？」**を探す必要があります。
ClerkのWebhook（user.updated など）を使って、LINE連携が完了した瞬間にDB（Postgres）側に line_user_id を保存する処理を書きました（書かせました）。
しかし、最初はエラー頻発。
- LINEで写真を送る。
- Bot「🍽️ 写真を受け取ったよ！AIがカロリーを分析中だから数秒待ってね🔍」
- （裏側でエラー発生）
- Bot「エラーが発生しました💦 もう一度お試しください。」
原因は、Webhookでの署名検証（x-line-signature）のトラブルや、非同期処理でのタイムアウト（VercelのEdge環境との相性）など様々でした。
また、**「LINEアカウント連携済みのつもりだったけど、実はDBに反映されていなかった」**というDB同期のズレも発生。
🛠️ 解決策：地道なデバッグと「おもてなしメッセージ」
ここはもう、AI先生と二人三脚で一つずつログを潰していくしかありませんでした。
crypto を使った署名検証を正確に実装し直し、VercelのAPIの maxDuration を延長することで、なんとか安定して画像を処理できるようになりました。
さらに、未連携ユーザーへの配慮も追加しました。
もしDBに紐づくユーザーがいない（＝連携していない）状態でLINEから写真を送られた場合、分析結果は返すものの、最後にこう付け加えるようにしました。
⚠️ 現在の分析結果は保存されていません。
💡 LogEatsにサインインしてLINE連携を行うと、カレンダーに自動記録され、グラフで振り返りが可能になります！
👉 早速アカウントを連携する: https://log-eats.com/
ただエラーを返すのではなく、「連携するとこんなに便利になるよ！」と優しくWebアプリへ誘導する。
このUXの改善こそが、今回の実装で一番のお気に入りポイントです。
🎉 パワーアップしたLog-Eats
数々の罠を乗り越え、ついに「いつものLINEから写真を送るだけで食事記録が完了する」という最強の体験を手に入れました。
「バイブコーディング（AIとの対話型開発）」はめちゃくちゃ便利ですが、今回のような**「既存のシステム（Clerk, Vercel Blob, Postgres）と外部サービス（LINE）をセキュアに結びつける」といった実装では、人間側の「こういう落とし穴（ユーザーの誤操作など）があるかも？」という想像力と要件定義**がやはり重要だなと痛感しました。
とはいえ、一人でドキュメントを読み漁るよりも100倍早く実装できたのは間違いありません。
これからも、自分が「めんどくさい」と思ったことを解消するために、AI先生と一緒にLog-Eatsを育てていこうと思います。
ぜひ一度、進化したLog-Eatsと、そのLINE機能を試してみてくださいね！
📲 LINEで簡単にカロリー計算
Log-eatsのLINE公式アカウントで、食事の写真を送るだけでAIがカロリーを計算します。
👉 LINEでカロリー計算はこちら（友だち追加）
最後に
万年ダイエッターの皆様、AIの力を借りて一緒に「めんどくさくない食事管理」を始めましょう！