【Make:実践編】ノーコードツールMake(旧:Integromat)でLINEBotを作成

当ページのリンクには広告が含まれています。
LINEとMakeでチャットボット
  • URLをコピーしました!
あわせて読みたい
【初心者向け:準備編】ノーコードツールMake(旧:Integromat)でLINEBotを作成 lineで動作する自分だけのChatbotを作ってみよう! 今回はMakeの使い方を学びながら、LINE公式アカウントを利用して、自分だけのLINEチャットボットを作成したいと思い...
前回の記事

前回の記事ではLINE Developersを利用して、やまびこBotを作りました。

今回はいよいよLINEbotとMakeでの連携を実装します。

まずはMakeのアカウントを作成します。

作成するBotは、やまびこBotであり、LINEで「おーい」とメッセージを送信すると、
Botが「おーい」と返事する動作のChatbotとなります。

Makeの新規アカウント作成は下記バナーからどうぞ。

・ノーコードで誰でも簡単連携ツール
ここからPro版が1ヵ月無料でお試し可能

Make(旧:Integromat)はノーコードで各種サービスを連携できるツールです。
プログラミング初心者でも簡単操作でおすすめです!👉無料で新規登録してみる!

もくじ

Makeのアカウントを作成

Makeのアカウントを作成

👉Makeのアカウント新規作成

上のリンクよりアカウント新規作成ページが開いたら、必要な項目を入力していきます。
Google、Facebook、GitHubのアカウントでも作成可能ですので、こちらだと簡単に登録できます。

名前、メールアドレス、パスワードを入力して、国とリージョン(US,EUどちらでもOK)を入力して、
新規に作成することも可能です。

必要な項目を入力
Googleアカウントなどでも作成可能

小規模のアプリ連携なら無料枠で十分利用可能です。
クレジットカードの登録も不要で、意図せず請求が来ることはありません。
必要に応じて上位プランへとアップデートをすることができます。

登録後メールが届くので、確認してメール無いにあるVerify emailをクリックして準備完了。

届いたメールのVerifyボタンを押して、アカウント作成完了
届いたメールのVerifyボタンを押して、アカウント作成完了
メールのVerify emailボタンをクリック
メールのVerify emailボタンをクリック

Makeのシナリオを作成

早速Makeのサイトへログインします。
左にメニューが並ぶので、scenariosをクリックします。

Makeのメニューが左側に並ぶ
Makeのメニューが左側に並ぶ。scenariosを選択

画面中央に大きな「+」が表示されるので、クリックすると各種サービスが表示されます。
下部に🔎マークの検索ボックスがあるので、LINEと入力して、LINEアイコンをクリックします。

scenarioを作成していく
LINEと検索すると一番上にLINEアイコンが表示される。

LINEをクリックしたら、「Watch Event」を選択します。

LINEを選んだら次に「Watch Event」を選択する
LINEを選んだら次に「Watch Event」を選択する

「Watch Event」とは、LINEBotにイベント(メッセージが送信される等)があったら、トリガーとなってこのモジュールが動き、シナリオが進みます。


👉モジュールとシナリオって?

  • 「モジュール」とは、アイコン一つ一つを指します。(左のスクショだとLINEモジュールが2つとなります)
  • 「シナリオ」は「モジュール」が集まったものとなります。
    (左のスクショではLINEモジュールが2つで1つのシナリオとなります。)

続いて、Webhookを設定するので、「Add」を押してください。

Webhookを設定する
Webhookを設定する

Webhookの「Add」ボタンをおすと、「Webhook name」と「Connection」が表示されるので、
「Webhook name」はお好きな名前を入れて、
「Connection」の「Add」をクリックします。

さらにConnectionの「Add」をクリック
さらにConnectionの「Add」をクリック

下記の画面となるので、ChannelAccessToken欄へ
LINEdevelopersのチャネルアクセストークンを入力します。
ここはややこしいので、次の画面をご覧下さい。

ChannelAccessTokenへLINEdevelopersのチャネルアクセストークンを入力する
LINEdevelopersのチャネルアクセストークンを入力する

下の画面の左側は先ほどのMakeの画面です。
この画面をそのままにしておいて、ブラウザの別タブでLINEdevelopersの画面を開きます。
LINEdevelopers👈リンクでも開くことができます)

LINEdevelopersでチャネルアクセストークンを発行

LINEdevelopersにログインにして、作成したやまびこBotを開くと、
上のスクショ右側の画面のようにMessaging APIというタブがあります。

このようにWebhookを設定する
このようにWebhookを設定する

この「Messaging API」の下の方に「チャネルアクセストークン(長期)」とあるので、
そこの「発行」ボタンを押します。

すると、チャネルアクセストークン(長期)という長い文字列が作成されるので、
この文字列をコピーします。
画面右端に「再発行」ボタンがありますが、この隣にコピーボタンがあります。
(文字列を変更したい場合は、「再発行」ボタンを押します)

チャネルアクセストークンを発行したLINEdevelopersのページはこのまま開いたままにしておいて下さい。
後でまたMakeとの認証で使います。

コピーした文字列をMakeのLINEモジュール「Channel Access Token」に貼り付けて、Saveします。

すると、下記の画面となり、Webhook URLが発行されるので、
「Copy address to clipbpard」を押して、コピーします。
こぴーしたら、OKボタンを押して、「Webhook設定」を閉じておく。

Webhook URLが発行された
Webhook URLが発行された

コピーしたWebhook URLは別タブで開いたままのLINEdevelopersの「Messaging API」の
中段にある「Messaging API設定」の「Webhook設定」にある編集ボタンを押して、
先ほどコピーしたWebhook URL文字列を貼り付けます。

LINEdevelopersにWebhook URLを貼り付ける
LINEdevelopersにWebhook URLを貼り付ける

Webhook URLが貼り付けられたら、「更新」ボタンを押します。
「更新」が「検証」と変わりますが、ボタンは押さずに、Makeへ戻ります。

ここまで設定したら、Makeのシナリオ作成画面の左下にある「Run once」を押します。

「Run once」ボタンを押す
「Run once」ボタンを押す

動作待機中となりますので、LINE developersの画面へ移動します。

ここで、先程のWebhook設定にある「検証」ボタンを押します。

Run onceボタンを押して、LINEの検証ボタンを押す
Run onceボタンを押して、LINEの検証ボタンを押す

検証ボタンを押して「成功」とでたら、MakeとLINEの連携が完了したという合図となります。

成功と出るとホッと一安心
成功と出るとホッと一安心

次はLINEの返事を設定します。

Makeへ次の動作のLINEモジュールを追加

LINEの「Watch Event」モジュールが完成したので、
次はメッセージの送信者へ返事を返すLINEモールを作成します。

モジュールの左側、もこっとした部分を選択
モジュールの左側、もこっとした部分を選択
返事用のLINEモジュールを追加する
返事用のLINEモジュールを追加する

一つ目のモジュールの右側にもこっとした緑の部分があり、そこを選択すると「+」ボタンが出てくるので、モジュールが追加できます。

一つ目と同じようにLINEモジュールを選択します。

すると下記のようにメニューが並ぶので、
「Send a Reply Message」をクリックします。

「Send a Reply Message」を選択する
「Send a Reply Message」を選択する

LINEBotが「どのような返事をするか」の設定

ここからはLINEBotがどのように返事をするかを設定します。

今回はやまびこBotなので、「届いたメッセージをそのまま返す」という動作設定となります。

下記の画面となったら、ConnectionにLINEdevelopersで作ったBot名(ここだと「やまびこBot」)が入っていることを確認ください。

「ReplyToken」の枠をクリックしてみてください。

ReplyToken欄をクリック
ReplyToken欄をクリック
変数を設定できる
変数を設定できる

すると、LINEのメニューがでてくるので、「Event」→「ReplyToken」をクリックしてください。

「Event」内の「ReplyToken」をクリックする
「Event」内の「ReplyToken」をクリックする

すると、「ReplyToken」の空白部分に「Event」「ReplyToken」と緑色で入力されます。

この緑色で表示されたテキストは「変数」となっています。
(サービスによって色が変わります)
LINEから届くテキストやメッセージは毎回変わるので、変数で設定します。

次は返事を設定します。下の画面の「Message」の下に「+Add Item」とあるので、クリックします。

「Message」の「+add Item]をクリック
「Message」の「+add Item]をクリック

LINEのメニューが表示されるので、次は「Event」-「Message」-「Text」を選択します。
LINEモジュールの「Text」の枠に「Event」「Message.Text」と設定されいます。

この通りに変数をセットします
この通りに変数をセットします

LINEチャットボットの動作を確認する。

モジュールの下にフロッピーディスクマークを押して保存したら、いよいよ動作確認となります。

もし自分のLINEアプリから自身のチャットボットと友だちになっていなかったら、
友だち登録をしてください。
LINEdevelopersの画面にあるQRコードから友だち登録ができます。

「Run once」ボタンをおして、シナリオを動作中にしたら、LINEで「よろしくね」など
テキストを入力してください。

その時に下の画面のように、あいさつメッセージや自動メッセージが流れるようならば、
LINEdevelopersのサイトから設定を編集ください。

このように勝手にメッセージが挿入されるので、設定をかえる
このように勝手にメッセージが挿入されるので、設定を変更する
Messaging APIから設定画面へいける
Messaging APIから設定画面へいける
あいさつメッセージ等のオンオフの切替が可能
あいさつメッセージ等のオンオフの切替が可能

あいさつメッセージや応答メッセージがONとなっていると、勝手にメッセージが送信されるので、
チャットボットとして利用するときはオフとしておく。

あらためて、MakeのRun onceを作動させて、やまびこBotへメッセージを送信します。

やまびこの用にメッセージが返ってきたら成功!
やまびこの用にメッセージが返ってきたら成功!

Makeも下記のように動作していることがわかります。
数字はオペレーション数であり、下記のシナリオだと「2」にカウントされます。
フリープランだと月に1,000回までとなっています。

動作が完了するとモジュールに数字が表示される

私がMakeが好きなのは動いているのがリアルタイムでわかるところなんですよ。
複雑なシナリオも流れるように動作しているのを眺めているだけでも楽しい☆

まとめ

最初は取っつきにくいかと思いますが、慣れるとかなり複雑なシナリオも作成可能です。

私がMakeで作ったLINEbotがあるので、遊んでみてくださいね。

作り方もまた記事にしていくので、お楽しみに♪

あわせて読みたい
【GPT-4o】LINEで動作するChatGPTのチャットボットを作成【こんまるくん】 Makeを利用してLINEチャットボットを作成してみた 最近ネット界を賑わしているChatAI「ChatGPT」。新しいバージョンである「ChatGPT-3.5turbo」が利用できるようになっ...
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


もくじ