LINE BotでLINE謎を作成しました

はじめに

こんにちは。ms3nd3rと申します。題名の通り先日学内のイベントでLINE Botを利用しLINE謎を作成しました。
その制作過程についてまとめていきたいと思います。

まとめ

LINE Botを活用して非認証公式アカウントを作りました
情報系の学生向けに謎解きの問題を作りました
GAS(Google App Script)を使いJavaScriptのコードを書くことでどんな答えにも対応する自動返信の仕組みができました
学内イベントで配布したところ72人に友達追加(≒謎解きをプレイ)してもらいました
アンケートに回答していただいた8割以上の人に"とても楽しかった"と評価をいただきました

参考にしたサイト

【LINE謎】LINEで遊べる謎解きの作り方と開発方法まとめ | みんたく
LINE謎は謎解き界隈においてスタンダードになっているところがありますが、改めて細やかに解説をしていただいているこちらのサイトを参考にしました。コードに関してもこの方の記法を参考にしております。是非訪れてみてください。

作り方

制作手順-1 "謎を作成する"

謎解きの環境を作るのですから謎を作ることは欠かせません。
大謎から情報系の学生向けの小謎を作り、合計7問分の謎を作成するに至りました。
ただし技術とは別ベクトルの内容になるので、気になる方は本稿下部の謎についてを参照ください。

制作手順-2 "LINE Developersで公式アカウント開設"

いざ謎が用意できたら公式アカウントを開設します。

ここからLINE Developersにアクセスし、
ログイン→プロバイダ作成→新規チャネル作成→Messaging APIと選択します。任意のチャネル名やアイコン画像を設定し、下部の"作成"ボタンを押すことで新しくアカウントを作ることができます。
※元々LINE Botの用途として企業の宣伝を兼ねている都合上、利用する業種の入力を求められますが、なるべく自分の用途に近いものを選んでおけば問題はないと思われます。個人開発にも広く用いられているため、気にせず作成してください。

制作手順-3 "GASの環境を作る"

続いてコードを書くための準備を行います。 GAS(Google App Script)の環境を利用することで低コストかつシンプルにWebアプリを建てられるため、Botを扱う際にはよくお世話になっています。

適当なスプレッドシートを作成
上部"拡張機能"タブよりApps Scriptを選択してください。
※ここは私が参考にした記事と位置が変わっています！注意して探してください
遷移先で.gsファイルを作成できることを確認
GASの位置はここ

制作手順-4 "LINE Developersでチャネルアクセストークンを取得"

続いてチャネルアクセストークンを取得します。これが無いと処理がつながりません。

LINE Developersで提供するチャネルでは、認証手段としてチャネルアクセストークンを利用します。LINE Developersに正しいチャネルアクセストークンを送信してきた相手は、そのチャネルの利用権限を持つ本人であると判断される仕組みです。- 公式ドキュメントから引用 developers.line.biz

LINE DevelopersのMessaging API設定の最下部にあるチャネルアクセストークンの発行をクリックし、コピーしておきましょう。

!!ここで取得できたトークンの文字列は現実世界の鍵と思ってください、うっかり漏らさないよう気をつけましょう!!

制作手順-5 "GASでコーディング"

先ほど取得したチャネルアクセストークンを書き込み、解答の結果を処理するためのコードを書いていきます。

設定周り

// チャネルアクセストークンを設定
var channel_access_token = "手順4で手に入れたチャネルアクセストークンを入れてね";
 
// ユーザからのリクエスト判定(友達追加またはメッセージ)
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);
    }
  });
}

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": "追加感謝のメッセージ、ここで問題を出してもOK"
  }
  ];
  return (message)
}

返答メッセージにまつわる処理

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": "正解発表をしたり祝福のメッセージを入れてくだされば"
        },
        {
          "type":"image",
          "originalContentUrl":"問題に使う画像元のURL",
          "previewImageUrl":"プレビューに使う画像元のURL@1MBまで"
        }
      ];
      return(message)
      break;

// 送られてきたメッセージが答えと違う場合やtypoがありcase文と一致しない場合
  default:
    var message = [
      {
        "type": "text",
        "text": "エラーだよ！答えか入力した文章の形式が間違っている可能性があるねぇ。"
      }
    ];
    return(message)
    break;
  }

以上がテンプレートです。
流れとして、友だち追加→友だち追加に対してのメッセージ(ここで出題)→答えが送信される→正解ならば解説と次の問題の画像を送信→答えが送信…
となります。(太字がBot側の動き)

完了したらデプロイを行います。
"デプロイ"→"新しいデプロイ"で設定画面に移動し、
説明:任意の説明文(無くても構いません)
次のユーザとして実行:自分
アクセスできるユーザ:全員
この設定にした上で"デプロイ"ボタンを押すと処理が保存されます。この際ですが、ウェブアプリという領域に現れたURLをコピーしてください。手順6にて利用するので、とりあえずクリップボードに保存してから次の手順に移りましょう。

制作手順-6 "Webhookで処理をつなげる"

手順5でウェブアプリのURLはコピーしてこれましたか？ここからLINEBotと処理のやりとりができるようにします。

LINE DevelopersのMessaging API設定のWebhook URLに遷移する
"編集"ボタンからウェブアプリURLをペースト
"検証"ボタンで"成功"と出れば完了

ここまでくれば動きとしてはOKです。
自分のアカウントでテストプレイして改修を重ね、正常に動いた段階で公開へ移りましょう。

制作手順-7 "アカウントを公開"

LINE Official Account Managerにアクセスし、先ほど作成したBotのページへ遷移します。
左端のメニューバーを開き,"友だちを増やす"→"友だち追加ガイド"→"友だち追加QRコードを作成"をクリック
このBotを友だち追加できるQRコードが表示されるので、ダウンロードするなりなんなりで好きな場所へ配布

以上で、自分で作成したLINE謎を誰かにプレイしてもらうことが可能になります。

トラブルシューティング

友達追加時、メッセージ送信時に意図しないメッセージが送られてしまう
- A."LINE公式アカウント機能"から"応答メッセージ","あいさつメッセージ"を無効におきましょう
画像が表示されない
- A.ドキュメントやコードの凡例のように、画像の要素をきちんと満たしましょう

謎について

本線ではありませんが、せっかくなので謎を作成する際の環境も紹介します。

利用するツール

Photoshop(もしくはIllustrator)
いらすとや

あると便利なもの

謎解き知識
五十音表、アルファベット表
Notion,WorkFlowyなど色々な端末で同期できるメモ環境

作り方

どんな謎が作りたいかを考えます(情報系の学生向け,最後に答えがつながるどんでん返しなど)
謎の構成をメモできる環境に書き出します
画像が必要な謎があればいらすとやをはじめとした画像をインターネットや自力で収集
Photoshop,Illustratorのようなソフトを活かし画像制作
完成したらpngに書き出し

フィードバック、反省点

８割以上の方に最高評価で楽しんでいただけました。
バグや謎の仕様に質問を受けることが多かったので、スムーズに解ける環境を作っていきたいです。

今後の展望

内輪で終わらず、パブリックに公開してよりたくさんの人に謎を解いてもらいたい。
ドキュメントを読んでリッチメッセージを使いこなし、もっと驚いてもらえるような謎を作りたい。
外部APIや日時を生かした仕掛けを書き、謎の幅を広げたい。
頒布しやすい環境を見つけ、よりたくさんの人と楽しんでいきたい。

あいさつ

先駆者としてブログを書いていただいた方、謎をプレイしていただいた学生の方、そしてこのブログを閲覧してくださった方にこの場を借りてお礼申し上げます。ありがとうございました。

しがない情報系専門学生の発信集

情報系4年目の学生がやりたいことに対して悪戦苦闘するブログです。Web系で戦いたい。