Go to Qiita Advent Calendar Top
LoginSignup
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@stachibana

11/05 さくらのAI Engine × LINE Botハンズオン LINEパート資料

Last updated at Posted at 2025-11-05

本資料について

本資料は[ハンズオン]さくらのAI EngineとLINE Botで社会の課題を安全にDXしよう！のLINEパート資料です。

さくらインターネット様、会場提供ありがとうございます！

LINE API Expertのスペシャルマンさんに資料レビュー頂きました。ありがとうございました！

自己紹介

立花 翔
LINEヤフー株式会社Technical Evangelist

2017年(旧LINE)より現職。スマホアプリの個人開発者として、世界中で1000万近くのユーザーと接点を持った経験を元に、LINE API Exertや開発者コミュニティの支援を担当。

LINE API Expert(JP)
LINE Developer Community
LINE Developer Community(Online)

事前準備

さくらのAI Engineパートが終わっていることが前提です。

このあたりまでできていればOKです。

Connpass記載の事前準備はお済みでしょうか？まだの方はこちらを参考にLINE公式アカウントの作成とMessaging APIの有効化をお願いいたします。

終わっている方はLINE Developersコンソールを開いて下さい。

貼り付けた画像_2025_10_27_17_14.png

このような状態になっていると思います。

本ハンズオン用に作成したチャネルが最近閲覧したチャネル内にあるかと思いますので、クリックし、Messaging API設定タブの最下部のチャネルアクセストークンをどこかに控えておいて下さい。

tokennnn.png

QRコードから友だち追加もお願いします。

LINE Botハンズオン

作るもの

今回は学校給食に関する様々な情報を便利に検索出来るLINE Botを作ります。自分の学区は未だに紙で配られるので、いちいち貼ってある冷蔵庫まで行く、という手間が発生しています。

学校のような業務が複雑でかつ予算も限られており、また対象となるユーザーのITリテラシーが高くないような場面においては、今回のさくらのAI Engine + LINE + Makeはスモールスタート可能な業務改善の選択肢として有効な組み合わせになり得るのではないかと思います。

LINE公式アカウントとは？

LINE公式アカウントは、簡単に言うと法人や団体向けのLINEアカウントです。2012年頃からサービス運営しており非常にたくさんのコミュニケーション、分析などの機能を備えています。わかりやすいところで言うと友だちになったユーザーに対して管理画面からメッセージを送ったりクーポンを送ったりということが出来ます。

LINE Botとは？

LINE BotはMessaging APIという公式アカウント向けの拡張機能を有効化して裏側を自由に構築したシステム(+公式アカウントの管理画面)で運用できるようにしたLINE公式アカウントです。公式アカウントと独立した概念ではなく、基本的には1:1の関係になっています。

エンジニアの皆様が触る公式アカウントはBot化されているものがほとんどで、今回作るのもLINE Botになりますので、以後はLINE Botの説明をします。

Messaging APIの公式ドキュメント

メリット

開発者向けのメリットとしては

  • デザイン不要なのですぐにサービスを作れる、機能作りに集中できる
  • 無料で使える機能がたくさんあり、NativeレベルのUIも構築可能
  • ログインの離脱が少ない
  • メッセージを読んで貰える可能性がメールなどに比べ高い
  • SDKがあり、開発もカンタン
  • LINE上での友だち経由で広まりやすい

ユーザーから見ると

  • 使い慣れたインターフェースで迷わない
  • インストール、空き容量不要でどこでもすぐに使い始められる
  • 新たにPush通知有効にしなくてもいい

といったものが挙げられます。

事例

事例も非常に沢山あり、B向けだとECや販促、予約管理、CRMのようなもの、アプリっぽいものとしてはリマインダや割り勘、ゲーム、また最近ではAIに質問出来たり、占いをしてくれるようなBotが人気です。

他にも事例集にたくさんの事例が掲載されています。
https://www.lycbiz.com/jp/case-study/

ハンズオン

今回はハンズオンですのでLINE BotのバックエンドをMakeというノーコードツールで作成しながら動作の流れや実装のポイント、手順を体験して頂くのがゴールとなります。

詰まってしまったら遠慮なく挙手するなどして講師陣にお知らせ下さい。サポートします。

Makeアカウントの作成

アカウントをお持ちでない方はMake.comにアクセスし、Continue with Googleもしくはフォームに入力して登録を行って下さい。クレジットカードは不要です。

image.png

シナリオの作成

左サイドバーからScenariosをクリックし、右上のCreate scenarioをクリックしてシナリオ作成画面に入ります。

シナリオ = 台本のようなイメージで、1つのLINE Botが行う一連の処理を1つのシナリオ上で定義していきます。

貼り付けた画像_2025_09_25_16_04.png

シナリオの新規作成では起点となるモジュールの作成を促されますので、LINEを選択、Watch Eventsを選択して下さい。WebhookとConnectionの設定が必要なので、Addをクリックして控えておいたチャネルアクセストークンを利用して設定して下さい。

貼り付けた画像_2025_09_25_16_06.png

終わるとこのモジュールにイベントを飛ばすためのURLが表示されますのでコピーして下さい。

貼り付けた画像_2025_09_25_16_12.png

LINEの管理画面に戻り、Webhook URLの欄にコピーしたURLを貼り付け、次にWebhookの利用を有効にして下さい。この段階での検証はエラーになりますが気にしないで下さい。

貼り付けた画像_2025_09_25_16_13.png

続いて起点モジュールの右側の+をクリックし、LINE > Send a reply messageを選択します。

貼り付けた画像_2025_09_25_16_15.png

貼り付けた画像_2025_09_25_16_15.png

設定ダイアログが出てくるので、以下の様に設定します。過去に制作済みでConnectionが複数ある場合は異なるものが選択されている場合がありますので、先程作成したConnectionを選択して下さい。

貼り付けた画像_2025_09_25_16_18.png

下部のRun Onceをクリックします。シナリオが応答待機状態になります。

貼り付けた画像_2025_09_25_16_21.png

Botに話しかけてみて下さい。ここまで問題なく設定できていれば、設定したテキストが返答されるようになっています。

24206_0.jpg

余計なメッセージが表示される方は応答メッセージが有効になっている可能性があります。管理画面から無効化して下さい。

貼り付けた画像_2025_11_04_13_23.png

さくらのAI Engineとの接続

では先程開通を確認したさくらのAI Engineと、このBotをつなげましょう。

モジュールを繋いでいる線を右クリックし、Add ModuleからHTTP > Make a requestを選択します。

image.png

image.png

モジュールが作成されたら以下の様に設定して下さい。ラベルになっているところはクリックで選択です。また、トークンは入れ替えて下さい。

設定項目 値
URL https://api.ai.sakura.ad.jp/v1/chat/completions
Method POST
Headers 1 Authorization　と　Bearer [YOUR_TOKEN]
Headers 2 Content-Type　と　application/json
Body type Raw
Content type JSON (application/json)
Request content 下記参照
Parse response Yes 
{
    "model": "gpt-oss-120b",
    "messages": [
     {
       "role": "system",
       "content": "{{1.events[].message.text}}"
     }
    ],
    "temperature": 0.7,
    "max_tokens": 2000,
    "stream": false
}

貼り付けた画像_2025_09_25_16_26.png

image.png

一度Run onceしてBotに話しかけます。HTTPモジュールのParse responseにチェックを入れてあるので、一度実行するとレスポンスを読み取り記憶してくれます。

shina.png

終端のモジュールの返答をHTTPモジュールの実行結果から選択できるようになっているのでそちらに変更しましょう。

貼り付けた画像_2025_09_25_16_29.png

これでイベント受取と返答の間にさくらのAIによる処理が入り、LLMとの対話が出来るようになりました。テストしておいて下さい。

24205_0.jpg

RAG用の大阪市給食情報の登録

では給食情報をBotさくらのAI Engineが扱えるよう、ファイルをドキュメントに登録します。

こちらからドキュメント管理画面を開いておいてください。

今回は大阪市が公開している小学校家庭配付用献立表から1ブロック（此花・港・西淀川・淀川・東淀川）のものを利用します。配布形式がPDFなので、今回は私の方でテキスト化しました。

ここで注意点があるのですが、さくらのAI Engineではドキュメントのチャンクは固定長となっており、サイズの大きいドキュメントを登録しようとすると意図しない場所でチャンクが区切られ、検索が期待通りに働かないことがあります。 （まだ出たばかりなのでアップデートに期待しましょう＆ 皆さん積極的に亀田さんにフィードバックしましょう！ ）

そこで今回は一ヶ月分の給食データを1つのファイルにまとめるのではなく、1日分を1ドキュメントとしてアップロードします。少し手間は増えますが、これで問題ない精度を実現できます。

1つずつ管理画面でクリック、選択してアップロードでも良いのですが、一括アップロードを行うファイルをClaudeに作ってもらいました。Mac、Windows版記載してありますので、こちらを利用すれば一括でアップロードできます。

環境によりエラー等出る方は解凍してできたものから適当に10個位選んで管理画面からアップロードでも問題ありません。

Macでの手順

こちらからファイルをダウンロードし、解凍してください。

ターミナルを開き、以下のコマンドを実行します。

cd 解凍して出来たフォルダ
./upload.sh [さくらのAI Engineのアクセストークン(分からなくなった方は新規作成でも可)]

image.png

Windowsでの手順

こちらからファイルをダウンロードし、解凍してください。

PowerShellを開き、以下のコマンドを実行します。

cd 解凍して出来たフォルダ
upload.bat [さくらのAI Engineのアクセストークン(分からなくなった方は新規作成でも可)]

Mac & Window共通

管理画面を確認してください。ファイルがアップロードされているのが確認できます。

image.png

これでRAGの情報も検索して返してくれるようになりました。下部の高度な検索を開くをクリックしてシミュレーターを開き、「11/5の鶏肉のおろしじょうゆかけの材料は？」などと聞いてみましょう。

image.png

検索され、良い感じで返答してくれるようになりました。

シナリオの変更

ではMakeにも反映させましょう。HTTPのモジュールの内容を変更します。

設定項目 変更前 変更後
URL https://api.ai.sakura.ad.jp/v1/chat/completions https://api.ai.sakura.ad.jp/v1/documents/chat/

Request content

{
    "model": "multilingual-e5-large",
    "chat_model": "gpt-oss-120b",
    "query": "{{1.events[].message.text}}",
    "top_k": 15,
    "threshold": 0.7
}

貼り付けた画像_2025_09_25_16_43.png

貼り付けた画像_2025_09_25_16_44.png

先程と同様一度Botに話しかけてフォーマットを更新してから返答も変更しましょう。

※ モジュールの番号が環境によって異なるかもしれません。適宜変更して下さい。

貼り付けた画像_2025_09_25_16_45.png

給食に関する質問をしてみましょう。

例

  • カレーライスの日はある？
  • 魚類のメニューの日を教えて
  • パン給食の日を教えて

lineeeee.png

リッチメニューの設定

では最後に、リッチメニューを設定しましょう。リッチメニューはLINE公式アカウントとのトーク画面下部に表示できるメニューで、エリアと、そのエリアタップ時の挙動を設定できます。

25968.jpg

リッチメニューはLINE公式アカウント、LINE Botどちらでも利用できますが、今回はLINE公式アカウントマネージャーのGUIで設定しましょう。こちらにアクセスし、チャネルを選択、サイドバーからトークルーム管理 > リッチメニューと進み、リッチメニューの作成をクリックします。

以下のように設定します。

設定項目 値
タイトル 適当にわかりやすい名前
表示期間 現在を含む適当な期間 11/4 - 11/10とか
テンプレート 「大」の中から、上下二段、上エリア1つ下エリア3つのもの
画像 こちらからダウンロードし選択
アクション 下記参照
メニューバーのテキスト ←自由入力｜タップでメニュー
メニューのデフォルト表示 表示する

image.png

終わったら保存をクリックして下さい。

動作確認

スマホ版のLINEから、Botとのトークルームを開いて下さい。メニューが表示されていると思います(表示されていない場合は一度閉じて開き直して下さい)。

ボタンをタップするとキーボードで問いかけた時と同じ挙動になります。よく利用されるような機能を1タップで提供可能になり、利便性がアップします。

25966_0.jpg

出力がマークダウンになっていて見にくいですね。LLMへの指示を加えましょう。HTTPモジュールのRequest contentのこちらを編集します。

貼り付けた画像_2025_10_29_11_03.png

指示が効き、マークダウンではなくなりました。是非色々試して、使いやすいLINE Botを作ってみて下さい。

25968.jpg

まとめ

生成AIのインパクトについては、もう誰もが実感しているはずです。ただ、その価値をエンドユーザーにどう届けるかは、まだ誰もが試行錯誤している段階ではないでしょうか。LINEが活躍できるシーンもあるかと思います。ぜひ、皆さんの武器の1つに加えて頂ければ幸いです。

また、さくらインターネット田中社長のお言葉にもあるように、今、一歩先を行く海外ではAIの利用が問題を引き起こすことも増えてきました。IPの他にも、採用で使って問題になったりということもありましたよね。

この良くない流れを日本にそのまま入れさせないように、ある程度は日本のプロダクトは日本で作る、デジタル主権は日本で担えるようにしたいものだと思います。

良いもの便利なものを選ぶのも人間として当然の行動ではありますが、もし同じような危機感、使命感を持っている方は是非一緒にさくらインターネット、さくらのAI Engineも合わせて応援していきましょう！

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?