RUNTEQ公式LINEにお友だち追加いただき、ありがとうございます！

YouTubeで作成した居酒屋検索LINE botのシステム概要と作り方について解説します。

今回は、Claude CodeというAIエージェントを活用していますので、合わせてプロンプトもご紹介します。最後に注意点も記載していますので、そちらも合わせてご確認ください。

本編はこちら：https://youtu.be/liXsuaGRLaM

Contents

【1】開発の流れ

  1. Ruby on Railsを用いて雛形の作成
  2. LINE用のライブラリ（line-bot-api）の導入と、LINEWebhookが受信出来る処理の追加
  3. ngrok起動
  4. LINE Developersプロバイダーおよびチャネル（Messaging API）の作成
  5. 公式LINEアカウントの作成とMessaging API連携
  6. チャンネルトークンとシークレットを取得し、アプリに設定を追加
  7. 外部からのアクセスが出来るように設定し、LINE Webhook設定にURLを追加
  8. 位置情報を受け取れるように処理の追加
  9. Google Places APIの設定およびAPIキーの取得
  10. 位置情報から居酒屋を検索してLINEに送信する処理の追加
  11. 居酒屋情報の絞り込み方法やLINE側で表示する情報の調整

【システム構成図】

システム構成図

【2】開発手順

1. Ruby on Railsを用いて雛形の作成

Ruby on Rails を用いたアプリケーションの雛形を作成します。Claude Code などの AI エージェントを使用して、以下のプロンプトを実行してください。

プロンプト：RailsのAPIモードで雛形を作成してください。docker composeで起動出来るようにしてください。

※ あらかじめ Docker Desktop などをインストールし、Docker を利用できる環境を整えておいてください。

2. LINE用のライブラリ（line-bot-api）の導入と、LINEWebhookが受信出来る処理の追加

LINE と連携できるようにするための準備を行います。まずは疎通確認のため、必要最低限のライブラリを追加し、LINE からの Webhook を受け取れるようにする処理を Claude Code に指示します。

プロンプト：LINEのMessaging APIを使えるようにしたいです。Webhookでコールバックできるようにしてください。

3. ngrok起動

LINE からの Webhook をローカル PC で受け取れるように、ローカルのアプリケーションを外部公開するためのトンネリングツールとして ngrok を起動します。

コマンド：$ ngrok http 3000

ngrok起動画面

4. LINE Developersプロバイダーおよびチャネル（Messaging API）の作成

LINE Developersにログインし、プロバイダーおよびチャネル（Messaging API）の作成を行います。

LINE Developersの使い方はこちら：https://developers.line.biz/ja/docs/line-developers-console/

新規チャネル作成 ＞Messaging API

チャネル作成画面

5. 公式LINEアカウントの作成とMessaging API連携

LINE Official Account Managerにログインし、アカウントを作成します。

アカウント作成画面

設定画面から4で作成したMessaging APIを連携させます。

  • 公式アカウント作成
  • 設定＞Messaging API ＞Messaging APIを利用する

アカウント作成画面

6. チャネルトークンとチャネルシークレットを取得し、アプリに設定を追加

Messaging APIのチャネルに移動し、チャネルトークンとチャネルシークレットを取得します。

①チャンネルトークン

チャンネルトークン取得

②チャンネルシークレット

チャンネルシークレット取得

取得したチャネルトークンとチャネルシークレットは環境変数を扱うための.envファイルに設定します。

env.ファイルに設定

7. 外部からのアクセスが出来るように設定し、LINE Webhook設定にURLを追加

3で起動したngrok経由でのアクセスをRailsのアプリケーションで受け取れるように、Claude Codeに修正を指示します。

プロンプト：ngrokはこちらで起動しています。Railsの設定を変更して外部からのリクエストを受け取れるようにしてください。

 

Messaging API の Webhook 設定に、ngrok で公開している URL を登録します。

LINE Developers ＞Messaging API設定 ＞Webhook設定

webhook設定

ここまででLINEとRailsのアプリケーションが疎通できるか確認してみてください。動画上のSTEP1はここで完了です。

疎通確認画像

8. 位置情報を受け取れるように処理の追加

手順 2 で作成した Webhook 受信処理に、位置情報も受け取れるようにするための対応を Claude Code に指示します。

プロンプト：位置情報を受け取った際に緯度経度を返信してください。

9. Google Places APIの設定およびAPIキーの取得

Google Cloud にログインし、Google Places API の設定画面から API キーを取得します。また取得したAPIキーは.envファイルに保存します。

  • Google Cloud
    • APIとサービス にてPlaces APIを選択
    • 管理＞APIキー＞鍵を表示しますからAPIキーを取得
    • .envファイルに、APIキーを設定
APIキーの取得画像

10. 位置情報から居酒屋を検索してLINEに送信する処理の追加

Google Places API を用いて近くの居酒屋を 3 件取得し、その結果を LINE に送信する処理を追加するよう Claude Code に指示します。

プロンプト：Google Places APIを使って近くの居酒屋を3件取得して、店名をメッセージで返信してください。

11. 居酒屋情報の絞り込み方法やLINE側で表示する情報の調整

居酒屋の検索条件や、LINE上での表示形式などを、Claude Code に指示して調整します。

営業時間中の居酒屋プロンプト：現在の時間を取得して営業時間中の居酒屋のみを抽出してください。

現在地から近い順に並び替えプロンプト：さらに近い順で3件取得できますか？

カード形式での返信プロンプト：位置情報でのカード形式で返信できますか？

【3】注意点

  • .envなどの環境変数を設定した後は必ず起動しているRailsサーバーを再起動してください。
  • エラーが出た際はエラー文をそのままClaude Codeに送信するだけで、エラーを解決してくれます。
  • 公式LINEを運用する際は、審査などが必要となります。詳しくは公式ガイドラインなどをご確認ください。

【4】最後に

いかがでしたでしょうか？

AIを使って、作りたいアプリがすぐに形にできる時代になりました。ものづくりが好きな方、業務改善のアイデアを考えるのが好きな方はより楽しみながらプログラミングを学ぶことができると思います。

RUNTEQでは実践的なプログラミングスキルを身につけることが可能です。

プログラミング学習にご興味のある方はぜひRUNTEQの無料カウンセリングへお越しください。公式LINEからもご予約いただけます♪