LINE謎のBotを作成する上で、以下の記事や本を参考にしました。
参考：プログラミング初心者でも無料で簡単にLINE BOTが作れるチュートリアル｜渡なべ🍲達明｜note
参考：【入門】Google Apps ScriptでLINE botを作成する
特にこちらのKindle本ではとてもわかりやすく解説されています。こちらの本では実際に作られている謎解きやマーケティング戦略まで紹介されているので、ご一読することをおすすめします。
目次
LINE謎とは
LINEの公式アカウントを用いて、主にBot形式で謎を出題する謎解き形式をLINE謎と呼ばれています。
LINEのアカウントさえあれば、手軽に謎解きに挑戦することができます。LINEのMessaging APIが開放されてからLINE謎が出現し、少しずつ広まってきているようです。
LINE謎開発の事前準備
事前準備として以下が必要となります。今回は参考記事通りにGAS(Google App Script)を使用してコーディングを行っています。Googleアカウントは登録された前提とします。
- Googleアカウント登録
- LINE Developers登録
- LINE Bot Designer(必須ではない)
LINE Developersの登録
まず、以下のリンクからLINE開発者登録を行います。既にLINEアカウントを持っている場合は、そのアカウントで登録することができます。QRコードログインで簡単に認証することができます。
LINE Bot Designerのダウンロード
LINE Bot Designerを使用することで、簡単かつ短時間でLINE Botのプロトタイプを作成することができます。GUIで感覚的にチャットボットを設計できます。
以下のリンクからLINE Bot Designerをダウンロードします。後ほど使用しますので、その後インストールまでやっておきましょう。
Messaging APIで新規チャンネルを作成
先ほど登録したLINE Developersにログインし、「新規チャンネル作成」を押します。新規チャンネル作成に必要な項目を入力します。
ここで作成するLINE謎のチャンネル名やアイコンなどを登録します。なおチャンネル名は7日間は変更できないため、注意が必要です。
LINE Messaging API：Messaging APIの特徴 Messaging APIは
GASからWebhook URLを取得する
まず、自身のGoogleアカウントからGoogleドライブを開き、Googleスプレッドシートを新規作成します。
スプレッドシートを開いたら、「ツール」→「スクリプトエディタ」を選択します。
選択すると、以下のようなスクリプトエディタが表示されます。左上にあるプロジェクト名を入力し、「公開」→「ウェブアプリケーションとして導入」を選択してください。
それぞれ、以下のように設定し「Deploy」を押下します。
表示された「Current web app URL」をコピーします。これがWebhook URLとなります。
LINE DevelopersのWebhook設定でGASと連携する
作成したチャンネルからMessaging API設定を選択します。下にあるWebhook設定のWebhook URLに先ほどコピーしたURLをペーストします。また、Webhookの利用をONにします。
次にさらに下にあるチャンネルアクセストークンの発行を行います。このチャンネルアクセストークンは後で使います。
GAS(Google App Script)を使って、ユーザとの応答形式LINE Botのスクリプトを実装する
GASの画面に戻り、ユーザとの応答形式のスクリプトを実装していきます。JavaScriptで書くことができます。
チャンネルアクセストークンの設定とリクエスト判定
まずはじめにチャンネルアクセストークンを設定します。先ほど発行したチャンネルアクセストークンを変数に代入しましょう。
次にユーザから送られてくるリクエスト判定を行います。event.typeによって友達追加かメッセージかを判定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // チャンネルアクセストークンを設定 var channel_access_token = "先ほど発行したチャンネルアクセストークン"; // ユーザからのリクエスト判定(友達追加またはメッセージ) function doPost(e) { var events = JSON.parse(e.postData.contents).events; events.forEach(function(event) { if (event.type == "message") { sendMessage(event); } if (event.type == "follow") { sendFollowMessage(event); } }); } |
友達追加時の挙動
ユーザから友達追加された際に返すメッセージを設定します。setFollowMessageで友達追加時のメッセージ用意し、ユーザに返します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | function sendFollowMessage(e) { var followMessage = setFollowMessage(e); var postData = { "replyToken": e.replyToken, "messages": followMessage }; var options = { "method": "post", "headers": { "Content-Type": "application/json", "Authorization": "Bearer " + channel_access_token }, "payload": JSON.stringify(postData) }; UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options); } // 友達追加された際に返すメッセージ function setFollowMessage(e) { var message = [{ "type": "text", "text": "友達追加ありがとうございます！" }]; return (message) } |
メッセージが送られてきた際の挙動
友達追加時と同様にsetMessageに送られてきたメッセージに対応する返信を用意します。
switch文でそれぞれのメッセージに対応する返信を書いていきます。これがユーザとの応答形式Botの中身になります。LINE謎の場合は答えやヒントなどに対応する返信を書いていくことになります。
defaultは想定していないメッセージが送られてきた場合の返信を書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | function sendMessage(e) { var message = setMessage(e); var postData = { "replyToken": e.replyToken, "messages": message }; var options = { "method": "post", "headers": { "Content-Type": "application/json", "Authorization": "Bearer " + channel_access_token }, "payload": JSON.stringify(postData) }; UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options); } // メッセージが送られてきた際に返す返信の条件分岐 function setMessage(e) { switch (e.message.text) { case "答え": var message = [ { "type": "text", "text": "正解です。" } ]; return(message) break; case "ヒント": var message = [ { "type": "text", "text": "ヒントは〇〇です。" } ]; return(message) break; default: var message = [ { "type": "text", "text": "ヒントが欲しい場合は「ヒント」と入力してください。" } ]; return(message) break; } } |
以上で応答形式Botの完成です。完成後は、「公開」→「ウェブアプリケーションとして導入」を選択し、バージョンを「new」にして再度デプロイしましょう。すると反映されていることが確認できると思います。
返信メッセージをリッチにしたい
返信メッセージをもっとリッチにしたい場合は、先ほどインストールしたLINE Bot Designerを使ってみましょう。
インストールが完了後、プロジェクトを作成を選択します。
プロジェクトの設定を行います。
設定完了後、プロトタイプをGUIで作成することができます。プロトタイプ完成後、右下のJSONをコピーすることで、そのまま使用することができます。
ここで画像・動画、テンプレートメッセージなどを設計し、JSONコードをそのままGASにコピペで使うことができます。LINE謎を作成する場合は画像などを使うと思いますので、こちらを積極的に活用してみましょう。
実際にLINE謎を作ってみた
実際にLINE謎を作ってみました。ざっくりストーリーから考え、次にストーリーにあわせた謎を作り、開発という流れで行いました。こういう謎解きを作るのは初めてでしたが、丸一日かけて公開まで漕ぎ着けることができました。
初心者向けのLINE謎で10分くらいで解けるので、もし時間があればやっていただけると嬉しいです。
地球最後の日に残された謎：https://lin.ee/tV2tCPuy