LINE謎の作り方 応用編-前編 LINEapi設定編

この記事内解説によるLINE謎制作で実装できること・できないこと

apiを利用することでLINE謎に多くのギミックを実装することが技術的には可能ですが、この記事ではScript記述を1パターンしか紹介していないため、本来実装可能なもののうち一部のみの機能が使用可能になっています。

• ○：ボタン付きメッセージや、ちょっとリッチなメッセージを送る。
• ○：同じ文言を入力しても、場面によって異なる反応が返ってくる。
• ×：同じ文言を入力しても、送信時間によって異なる反応が返ってくる。
• ×：同じ文言を入力しても、ユーザーによって異なる反応が返ってくる。

実装できないことについてはご自身でお調べいただければと思いますが、謎解き系のLINEbot開発記事を下記2つ紹介します。(この2記事を読めば上記の2つが解決できるわけではありません)

どちらも有料ですが、より広い表現ができるようになります。

• 【LINE Nazo Maker】複雑なLine botをスプレッドシートを使って簡単に設定できるツール：(by gawa様)
• LINEで15問早解きセットを作ろう！　「LINEで15問早解き」プログラムを公開します：(by 三ツ浜ともき様)

apiを利用したLINE謎制作の流れ

apiを利用したLINE謎の制作は以下の流れで行います。

この記事では、2.初期設定の部分について主に解説します。

• 公式LINEアカウントの作成 (前編 の記事で解説)
• 初期設定
  • Google Spreadsheetsの作成
  • LINE Manager側のapi設定
  • LINEDeveloper側のapi設定
  • Apps Scriptの作成
  • 動作確認
• メッセージの設定 (応用編-後編 の記事で解説)

公式LINEアカウントの作成

事前準備として、通常のLINE謎と同じように公式アカウントを作成してください。作成手順は下の記事で解説しています。

LINE謎の作り方 前編 アカウント登録編

Google Spreadsheetsの作成

まずは、管理画面や挙動制御を司るスプレッドシートを作成します。

ファイル名は何でも良いです。タイトルが決まっていれば「XXXX謎用」とかが分かりやすいと思います。

ファイルを作成したら、シートを3つ作成して以下のように名前を付けます。(管理できれば別の名前でも良いです)

• ステータス
• 自動応答
• 権限情報

Apps Scriptの設定

• スプレッドシートのタスクバーにある「拡張機能→Apps Script」を選択します。

  

• 下図のような画面が開いたらスプレッドシートと同じ名前を付け、下にあるスクリプトをコピーしてエディタ部分に貼り付けます。(元からある「function myFunction〜」は要らないので消してください。)

  

  (2022/04/28 如月一さん(@katteniittero)に情報提供いただきステータスも正規表現できるよう書き換えました！)

  var CHANNEL_ACCESS_TOKEN = 'ここにアクセストークンを入力';//シングルクオートは残してね。
  
  
  //友達追加時のメッセージ(無い場合はコメントアウトしてください。)
  function doPost(e) {
    var json = JSON.parse(e.postData.contents);
    var eventType = json.events[0].type;
    var userId = json.events[0].source.userId;
    
    Logger.log(json)
  
    if (eventType == "follow") {
      
      var url = 'https://api.line.me/v2/bot/message/push';
      var headers = {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
      };
      var data = {
        'to': userId,
        'messages': [{
          'type': 'text',
          'text': '友達追加ありがとう！',
        }],
      };
      var options = {
        'method': 'post',
        'headers': headers,
        'payload': JSON.stringify(data),
      };
      UrlFetchApp.fetch(url, options);
    } else if(eventType == "message"){
    //シートの読み込み
    var statSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('ステータス');
    var statData = statSheet.getDataRange().getValues();
    var replySheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('自動応答');
    var replyData = replySheet.getDataRange().getValues();
  
    //メッセージ内容の解析
    var replyToken = json.events[0].replyToken;
    var sendTime = json.events[0].timestamp;
    var message = json.events[0].message.text;
  
    //現在ステータスの読み込み（ない場合はInitを設定）
    var playerRow;
    var playerStat;
    var playerName;
    var lastReceivedTime;
    for (var i = 1; i < statData.length; i++) {
      if (statData[i][0] === userId) {
        playerRow = i + 1;
        if (playerName !== statData[i][1]) {
          playerName = getUsername(userId)
        } else {
          playerName = statData[i][1]
        };
        playerStat = statData[i][2];
        lastReceivedTime = statData[i][6];
        break;
      }
    }
    if (!playerRow) {
      playerRow = statData.length + 1;
      playerName = 'unknown'; // これに差し替えるとユーザ名表示されます → getUsername(userId);
      playerStat = 'Init';
      lastReceivedTime = 0;
    }
  
    //ステータスに応じたメッセージの設定
    var replyMessage;
    if (sendTime > lastReceivedTime) { //1つ前のメッセージの処理完了前に来たメッセージは無視
      Logger.log("sendTime > lastReceivedTime")
      for (var i = 1; i < replyData.length; i++) {
        Logger.log(i)
        if (playerStat.match(replyData[i][0]) && message.match(replyData[i][1])) {
          Logger.log("playerStat.match(replyData[i][0]) && message.match(replyData[i][1])")
          Logger.log(replyData[i][2])
          replyMessage = eval('[' + replyData[i][2] + '];');
          playerStat = replyData[i][3];
          break;
        }
      }
    }
  
    Logger.log(replyMessage)
    //返信実行
    if (replyMessage) {
      var url = 'https://api.line.me/v2/bot/message/reply';
      var headers = {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
      };
      var data = {
        'replyToken': replyToken,
        'messages': replyMessage,
      };
      var options = {
        'method': 'post',
        'headers': headers,
        'payload': JSON.stringify(data),
      };
      UrlFetchApp.fetch(url, options);
    }
  
    //最新のステータスの書き込み
    var receivedTIme = Math.floor(new Date().getTime()/10);
    statSheet.getRange(playerRow, 1, 1, 7).setValues([[userId, playerName, playerStat, message, replyToken, sendTime, receivedTIme]]);
    }
    
    return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
  }
  
  function getUsername(userId) {
  
    var response = UrlFetchApp.fetch('https://api.line.me/v2/bot/profile/' + userId, {
      'headers': {
        'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN
      }
    });
    return JSON.parse(response.getContentText()).displayName;
  
  }
  

• 貼り付けたら上書き保存をして(Ctrl+s またはフロッピーマーク)、「デプロイ→新しいデプロイ」をクリックします。

  

• すると下図のようなウィンドウが出てきますので「種類の選択→ウェブアプリ」を選んでください。

  

• 設定画面が出てくるので、以下3項目を設定して「デプロイ」ボタンを押します。

  • 新しい説明文　　　　　：「XXXX謎用」など分かりやすい名前。
  • 次のユーザーとして実行：自分
  • アクセスできるユーザー：全員

  

• するとアクセス許可が求められるため、許可するアカウントを選択して「アクセスを承認」ボタンを押します。

  (過去に同様の作業をしたことがあり特に求められなかった方は9まで飛ばしてください。)

  

• さらにGoogleから警告用のアラートが出てきますが、「詳細を表示」→「XXXX謎用（安全ではないページ）に移動」をクリックします。

  

• 下図のようなリクエストウィンドウが開くため、「許可」を押します。

  

• ここまですると、「デプロイを更新しました」と出てきます。

  下図ピンク枠で囲まれた部分のURL(Webhook URL)をコピーして、スプレッドシートの権限情報シートに貼り付けます。

  

  

  貼り付けたら「完了」を押します。

LINE Manager側のapi設定

• LINE Official Account Managerのアカウントに入り「設定→Msessaging API→APIを利用する」を押します。

  

• プロバイダーの選択画面になるので、好きな名前でプロバイダを作成してください。(筆者は既に作成してあるので下を選択)

  その後、利用規約を読んで問題なければ「同意する」を押下してください。

  

• プライバシーポリシーと利用規約を登録する方は登録してください。(任意)

  

• 確認画面が現れるので、問題なければ「OK」を押してください。

  

• 下図のような画面になるので、「Webhook URL」の欄に先ほどスプレッドシートに書いたWebhook URLをコピペして「保存」を押してください。

  

LINEDeveloper側のapi設定

• LINE Developersを開いて、右上のアイコンをクリックしてメニューを開きログインします。(アカウントの部分でも「LINE Developer Console」でもどっちでも良いです。)

  

  (※このとき下図左上のようなGoogleの自動翻訳機能が表示されたら「英語」を選択してください。(自動翻訳を使用しないでください。))

  

  日本語で見たい方は、上図右上orログインした後の下図画面右下から日本語を選択してください。

  

• ログインたら「プロバイダー(Providers)」から先ほど作成したプロバイダーを選択します。

  

• もし既にチャネルができていない場合は「新規チャネル作成」を選びます。

  既に作成されていた場合は5に飛んでください。

  

• 「Messsaging API」を選びます。

  

• 以下の必要情報を入力します。

  • チャネルの種類：「Messaging API」が入ってると思います。
  • プロバイダー：先ほど選択したプロバイダーが入っていると思います。
  • 会社・事業者の所在国・地域：所在国(たぶん「日本」)を入力してください。
  • チャネルアイコン：入れなくてもいいです。サムネが決まってたら入れると分かりやすいです。
  • チャネル名：「XXXX謎用」みたいな名前にすると良いと思います。
  • チャネル説明：「XXXX謎用api」とか入れてます。何でも良いです。
  • 大業種：筆者は「ゲーム」にしてます。「個人」「ウェブサービス」でも良いと思います。
  • 小業種：「ゲーム(パズル)」とか「個人((IT・コンピューター))」とか。
  • メールアドレス：LINE Developersに登録しているメールアドレスが入ってると思います。
  • プライバシーポリシー：作ってたら入れましょう。
  • サービス利用規約URL：作ってたら入れましょう。

  

  その後、「LINE公式アカウント利用規約」「LINE公式アカウントAPI利用規約」の2つを確認して同意したら「作成」ボタンを押してください。

• 「Messaging API設定」タブを選択して、以下の設定を確認します。

  • Webhook設定：「編集」を押して、「Webhook URL」の欄にスプレッドシートの権限情報タブからwebhook URLをコピーして貼り付けて「更新」を押します。
    「Webhookの利用」がOFFになってたらONにします。
    その後「検証」を押して「成功」と表示されたら接続完了です。
  • LINE公式アカウント機能：
    • グループトーク・複数人トークへの参加を許可する：無効(特に理由がなければ)
    • 応答メッセージ：無効 (LINE officail Managerに飛ぶので、応答設定タブの詳細設定にある「応答メッセージ」をオフにします。)
    • あいさつメッセージ：有効(特に理由がなければ)
  • チャネルアクセストークン：=で終わる英数文字列。チャネルアクセストークン(長期)が無い場合には発行してコピー、スプレッドシートの権限情報シートに貼り付けておきましょう。(この後すぐ使います！)
    (※「スペースが入っている」「最後に=が付いていない」などの場合は、googleの自動翻訳機能が設定されていないか再度ご確認ください。)

  

  

アクセストークンの反映

App Scriptに戻り、「ここにアクセストークンをペースト」の部分に先ほど発行したアクセストークン(長期)をコピペします。(シングルクオートは残してください)

その後、上書き保存をして(Ctrl+s またはフロッピーマーク)、デプロイを更新します。

• 「デプロイ→デプロイを管理」を選択します。

  

• 右上にある「編集」を選択します。

  

• バージョンを「新バージョン」に変更して「デプロイ」を押します。

  

• 「完了」を押して完了です。

  

動作確認

• スプレッドシートの自動応答シートA1:D5に以下の表を値のみ貼り付けしてください。

  ステータス	キーワード	メッセージ	処理後ステータス
  ^Init$	^こんにちは$	{'type': 'text', 'text': 'はいこんにちは！'}	Next
  ^Init$	^.*$	{'type': 'text', 'text': 'こんにちは'}	Init
  ^Next$	^こんばんは$	{'type': 'text', 'text': 'はいこんばんは！'}	Init
  ^Next$	^.*$	{'type': 'text', 'text': 'こんばんは'}	Next

  

貼り付けたら、公式LINEアカウントに適当な文字列(「あ」とか)を打ってください。

以下2点が正常に動作していますか？

• 公式LINEから「こんにちは」と返事が来る。

• スプレッドシートのステータスシートが以下のようになっている。

  1行目は手動で入力してください。(下記表をコピーして値のみ貼り付けできます。)

  ユーザID

  名前

  ステータス

  最終メッセージ

  トークン

  送信time

  処理time

  処理時刻

  

  問題なければ、H2セルに以下の式をコピペしてください。

  =arrayformula(if(G2:G="",,text(((G2:G*10+3240000)/86400000)+date(1970,1,1),"yyyy/mm/dd")&" "&text((G2:G+3240000) / 8640000,"hh:mm:ss")))

上記2点が正常に動作していたら、続けて以下を順に確認してください。

• 「こんにちは」と打つと、「はいこんにちは！」と返ってくる。
• 再度「こんにちは」と打つと、「こんばんは」と返ってくる。
• 「こんばんは」と打つと、「はいこんばんは！」と返ってくる。

上記動作確認ができれば準備完了です！

後編 メッセージ作成編へ進んでください。

よくある質問

まとめ

• ちょっと頑張ればそこそこ強いLINE謎を作ることができる。
• 初期設定は正直面倒くさい。

ここまで読んだ方なら、api利用のLINE謎の初期設定はできるようになっているかと思います！

次の記事も読んで実際に応答を設定していきましょう！

LINE謎の作り方 応用編-後編 メッセージ作成編

ちなみに筆者が作成した強めのLINE謎はこちらです！良かったら遊んでみてください！

『性格診断謎』

参考サイト・ページ

• LINE謎手順書 by おんせん (@alplicatio)
• 【LineAPI×GAS】bot作成時における動作しない（応答しない）時
• STEP2 Channel Secret と Channel access token の取得 – エキスパヘルプセンター