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

更新

LINE謎の作り方

「謎解きを作って公開してみたい!」と思ったときに、方法の1つとしてLINE謎(LINE謎解き)という公開手段があります。

ここではLINE謎の作り方 応用編-前編 として、apiを使用したLINEbotを作成するための初期設定の手順を説明します。

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

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

実装できないことについてはご自身でお調べいただければと思います。

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

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

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

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

公式LINEアカウントの作成

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

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

Google Spreadsheetsの作成

手順1

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

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

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

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

Apps Scriptの設定

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

    手順e1

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

    手順e2

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

    var CHANNEL_ACCESS_TOKEN = 'ここにアクセストークンをペースト';//シングルクオートは残してね。
    function doPost(e){
    
    //シートの読み込み
    var statSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('ステータス');
    var statData = statSheet.getDataRange().getValues();
    var replySheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('自動応答');
    var replyData = replySheet.getDataRange().getValues();
    
    //メッセージ内容の解析
    var json = JSON.parse(e.postData.contents).events[0];
    var userId = json.source.userId;
    var replyToken = json.replyToken;
    var sendTime = json.timestamp;
    var message = json.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つ前のメッセージの処理完了前に来たメッセージは無視
    for(var i=1; i<replyData.length; i++){
    if(playerStat.match(replyData[i][0]) && message.match(replyData[i][1])){
    replyMessage = eval('[' + replyData[i][2] + '];');
    playerStat = replyData[i][3];
    break;
    }
    }
    }
    
    //返信実行
    if(replyMessage){
    UrlFetchApp.fetch('https://api.line.me/v2/bot/message/reply',{
    'headers': {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'POST',
    'payload': JSON.stringify({
    'replyToken': replyToken,
    'messages': replyMessage,
    })
    });
    }
    
    //最新のステータスの書き込み
    var receivedTIme = Math.floor( new Date().getTime() / 10 );
    statSheet.getRange(playerRow, 1, 1, 7).setValues([[userId, playerName, playerStat, message, replyToken, sendTime, receivedTIme]]);
    
    //LINEに正常終了を伝える
    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 またはフロッピーマーク)、「デプロイ→新しいデプロイ」をクリックします。

    手順e3

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

    手順e4

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

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

    手順e5

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

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

    手順e6

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

    手順e7

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

    手順e8

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

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

    手順e9

    手順e10

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

LINE Manager側のapi設定

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

    手順c1

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

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

    手順c2

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

    手順c3

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

    手順c4

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

    手順c5

LINEDeveloper側のapi設定

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

    手順d0

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

    手順c0

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

    手順c0a

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

    手順d1

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

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

    手順d2

  • 「Messsaging API」を選びます。

    手順d3

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

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

    手順d4

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

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

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

    手順d6

    手順d7

アクセストークンの反映

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

手順g0

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

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

    手順g1

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

    手順g2

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

    手順g3

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

    手順g4

動作確認

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

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

    手順f1

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

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

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

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

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

    ユーザID名前ステータス最終メッセージトークン送信time処理time処理時刻

    手順f3

    問題なければ、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点が正常に動作していたら、続けて以下を順に確認してください。

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

手順f2

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

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

よくある質問

間違ってApp Scriptでアクセストークンを貼り付ける前にデプロイしてしまった!

再デプロイすれば問題ありません。


App Scriptにアクセストークンを貼り付け、以下の手順で再デプロイを行ってください。

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

    手順g1

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

    手順g2

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

    手順g3

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

    手順g4

間違ってチャネルアクセストークンを再発行してしまった!

落ち着いてスプレッドシートの情報を更新してから、App Scriptを書き換えて上書き保存をして(Ctrl+s またはフロッピーマーク)、再デプロイしましょう。


まずはスプレッドシートの情報に再発行したアクセストークンを貼り付け、最新の状態に保つようにしましょう。

その後、App Scriptを書き換えて上書き保存をして(Ctrl+s またはフロッピーマーク)、再デプロイを行ってください。

再デプロイの方手順は1つ上の質問にあります。

動作確認の時に送っても返事が来ないんだけど?

おそらく設定部分でミスをしています。


以下の点を確認してください。

  • LINE Developersの今回使用するチャネルのMessaging APIタブにおいて、Webhook URLの検証を押したら「成功」と表示されるか、かつWebhookの利用がONになっているか。
  • App Scriptのアクセストークンを貼り付ける部分にアクセストークンが貼り付けられているか

上記2点を確認して問題がない場合は、再デプロイを行ってください。

再デプロイの手順は2つ上の質問にあります。

まとめ

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

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

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

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


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

『性格診断謎』

参考サイト・ページ

↓↓↓この記事をシェア↓↓↓