LINE謎を開発するにあたって、必要なことをまとめます。
技術的な知識があまりない方でもLINE謎を作れるようにしたいです。

この記事は誰向け？

・LINE謎を作って見たい人
・LINE謎で使っている技術に興味がある人
・謎はつくれるがLINE上でどうやって作ればいいかわからない人

LINE謎の概要説明

既にご存知かもしれませんが、LINE謎は2016年にLINE APIが開放されたことにより生まれたまだまだ若いコンテンツです。

アセプロの観測範囲だと2016年に2件、2017年に5件コンテンツがうまれています。
最近、LINE謎のリリースが増加しており、このままのペースが続けば、2018年は50件弱、2019年は100個程度コンテンツが生まれるのでは？と推測しています。（すごく楽しみ）

この記事を書いているユビスケが所属しているアセプロは、2018年にもっとも遊ばれた、#乾いた魔女謎やリリースして24時間で約1000人が遊んだ#おちょ子謎をリリースしてきました。

その開発ノウハウをここで一度まとめることで、面白いLINE謎が生まれる一助になれればと思い、このまとめを書いています。

どうやってつくるの？

ここでは、謎自体の製作やデザインについての解説はあまり踏み込まず、どのように謎をLINEへ実装し提供するかにフォーカスして解説します。

概要

企画内容の考え方
環境の設定・コーディング
デバッグ

1.企画内容の考え方

まずは、企画です。どういったコンセプトにしたいか、ストーリーにしたいかを考えます。
直近でリリースした#おちょ子謎では、キャラクターの議論から始まり、プロモーション動画をつくることでイメージを具体的に固めていきました。

また、並行して、どんな謎構成にしたいかも固める必要があります。図示化することで具体的にイメージが固めることが可能です。

イメージを固めるのに使った便利なツールたち

GoogleSpredsheet(図形描画）

Googleのスプレッドシート機能である図形描画でゴリゴリ書きます。（本当はVisioとか使いたいのですが、お高い。）
とあるLINE謎の構成図（抜粋）

LINE Bot Designer

コンセプトや謎構成をもと、にユーザとどんなコミュニケーションがしたいかイメージします。この際にLINE社が提供しているLINE Bot Designerを使うと具体的にイメージ可能です。

例えばこれは、ユーザが問題を選ぶ際に利用している、イメージマップ形式のメッセージです。ここを押せばこういった反応になる。といったイメージを固めることが爆速で出来る上、あとでスクリプト書くのがめちゃくちゃ早くなります。

2. 環境の設定・コーディング

ここからは、LINEBOTの実装に入ります。
まず、おうむ返しBOT（話した内容をそのまま返す）を準備します。

LINE謎でどんなものを実現するかによるのですが、
単純な一問一答の積み重ねでOKな場合、GAS（Google Apps Script）が無料かつ手軽でおすすめです。

以下の記事がわかりやすかったので、手順をそのままなぞります。
（無料領域までで大丈夫です。）

[プログラミング初心者でも無料で簡単にLINE BOTが作れるチュートリアル]
(https://note.mu/tatsuaki_w/n/nfed622429f4a?creator_urlname=tatsuaki_w)

そこから、GAS上のコードを編集していきます。

基本的な構造はこんな形です。
以下のコードに2点対応すれば、すぐ動くと思います。
①XXXXXXとかいてあるところにLINE Developerで取得した
　チャネルトークンを記載することと
②文言部分に、フォロー時の文言や一問一答の内容を記載すること

sample.js

// LINE Developers の Channel Access Tokenを設定
var channel_access_token = "******************";

// LINEから呼ばれる関数
function doPost(e) {
  var events = JSON.parse(e.postData.contents).events;
  events.forEach(function(event) {
    if (event.type == "message") {
      lineReply(event);
    }
    if (event.type == "follow") {
      linefollowReply(event);
    }
  });
}


// LINEフォロー時の動作
function linefollowReply(e) {
  var repMes = replyfollowMessage(e);
  var postData = {
    "replyToken": e.replyToken,
    "messages": repMes
  };
  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 replyfollowMessage(e) {
  var repMes = [{
    "type": "text",
    "text": "友達追加時に送信する内容を規定。ルールとか書くといいと思います。"
  }
                
               ];
  return (repMes)
}


// LINEメッセージへの返信
function lineReply(e) {
  var repMes = replyMessage(e);
  var postData = {
    "replyToken": e.replyToken,
    "messages": repMes
  };
  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 replyMessage(e) {
  //遊んでくれている人がどこでつまっているか把握するため、送信内容のログを取得
  console.log(e.message.text);
  
  switch (e.message.text) {
    //反応するワードを規定
    case "反応するワードを規定":
      var repMes=[
        {
          "type" : "text",
          "text":"反応する内容をここに記載"
        }
      ];
      return(repMes)
      break;
      
      
    default:
      var repMes=[
        {
          "type" : "text",
          "text":"デフォルトの返信内容を記載。ヒント取得方法とか書くと良いと思います。"
        }
      ];
      return(repMes)
      break;
      
      
  }
}

3.デバッグ

デバッグ版を公開したあとに、LINEに繋ぎ込みを行います。実機で動作を確認。
ここでは、謎好きな友人にも共有し、デバッグに協力してもらうといいです。リリース時にバグがあると、作ってる側もテンション下がりますし……

他の謎団体の方によく聞かれる内容

よく質問される内容についてもここで記述します。

Q.乾いた魔女謎にある、地図とボタンがある画面はどうやって作りますか？

A.LINE Message APIにあるのテンプレートメッセージを利用します。

例えば、上記の画像を表示するためのコードはこんな感じです

mazyo_map.js


        {
          "type": "template",
          "altText": "地図を表示",
          "template": {
            "type": "buttons",
            "thumbnailImageUrl": "!!画像のURLを入力してね!!",
            "imageAspectRatio": "square",
            "imageSize": "contain",
            "imageBackgroundColor": "#FFFFFF",
            "title": "地図",
            "text": "行きたい場所を選択してください。地図を拡大するには「チズヲカクダイスル」と入力して下さい。",
            "actions": [
              {
                "type":"message",
                "label":"遺跡へ向かう",
                "text":"イセキヘムカウ"
              },
              {
                "type":"message",
                "label":"沼へ向かう",
                "text":"ヌマヘムカウ"
                
              },
              {
                "type":"message",
                "label":"洞窟へ向かう",
                "text":"ドウクツヘムカウ"
                
              },
              {
                "type":"message",
                "label":"塔へ向かう",
                "text":"トウヘムカウ"
                
              }
            ]
          }
        }

Q.おちょこ謎にある、LINEの画面で半分WEBサイトがでてくるものはどうやって作りますか？

A.LIFFといったウェブアプリのプラットフォームを使うことで利用可能です。

おちょこ謎ではよりストーリーに没頭してもらうために、活用しています。
LIFFを使う場合は以下の記事が参考になります。
[LINE の LIFF 開発超入門 : LIFF SDK を使った Web アプリの開発]
(https://qiita.com/kenakamu/items/44cba247ab51b6c5ed51#_reference-9d47a35ca38574b61675)

※おちょこ謎にてLIFF内にてメッセージ送信が動かないケースがあるとユーザ申告があったため、実際にリリースする際には、OS跨いで検証したほうがいいと思います。

最後に

LINE謎をつくる人が増えることと同じぐらい
アセロラプロダクションは楽しいコンテンツを作っていきたいと思っています。
よければ、フォローしてもらえると嬉しいです。
https://twitter.com/AcerolaPro