Part.2 LINE Botでよさこいチームの運営はもっと便利になる
1. 前回の振り返り
こんにちは。
かんしゃらというよさこいチームで東京支部支部長をしているふくじゅんです。
前回の記事でLINE Botのアカウントを作成するところまで進みました！
自分のプロバイダーの中に前回作成したBotがあることを確認してください。
今回はこのLINE Botに機能を追加していきましょう。
まずは基本中の基本、「オウム返し」ボットを作ります。
2. どうやって機能を追加していくのか？
LINE BotはGoogle社が提供しているGoogleAppScript(通称GAS)という言語を使って機能を追加していきます。
Google提供のものなのでスプレッドシートやGoogleカレンダーなどと連携が簡単にでき、様々な機能をLINE Botに付け加えることができます。
それでは、GASを書いてLINE Botを動かす準備をしていきましょう！
3. GASを書く準備をしよう！
まずは前提としてこのnoteを見ている人はGoogleアカウントを持っているものとします。
持っていない人はこちらを参考にアカウントを作成してください。
次のような流れで準備をしていきます。
1. GASへの接続
2. GASエディターの立ち上げ
たったこの二つの手順でLINE Botに機能を加えていく準備は完成します！ほかの言語と比べて準備を整えるのが圧倒的に簡単なのも強みの一つですね。
1. GASへの接続
それではさっそくGASを使えるようにしていきましょう。まずはGoogleDriveへ移動します。
画面から「新規」を選択してクリックします。
「その他」を選択し「アプリを追加」をクリックします。
「アプリを追加」という欄があるので選択し、「Google Apps Script」の「接続」をクリックします。
これで一つ目の手順「GASの接続」が完了しました。(ここまで5分くらい？)
2. GASエディターの立ち上げ
次にコードを書いていくエディターを立ち上げます。これは一瞬です。
Google ドライブから、「新規」→「Google Apps Script」をクリックします。
すると下のような画面が表示されます。これがGASのエディターでここにコードを書いては機能を公開して実際に動かすようにするという流れになります。
4. LINE BotとGASを連携させるための準備をしよう！
LINE BotのアカウントもGASのエディターも準備できたし、もう後はコードをゴリゴリ書いていけばオッケー！。。。というわけにはいきません。
あともう少しだけ準備が必要になります。
必要な準備は次の三つです。
1. アクセストークン(ロングターム)の発行
2. webhook送信を更新
3. LINE@機能の制限
それでは一つずつ準備しましょう。
1. アクセストークン(ロングターム)の発行
アクセストークンって何？？？って思われる人も多いと思いますが、トークンとはいわゆるパスワードのことでLINE Botを触っている人は関係者ですと証明するようなものです。
このトークンを通じてGASとLINE Botを連動させることになります。
LINE Developersに移動してマイページにまずはログインしてください。次に自分のプロバイダーに移動し、作成したLINE Botのアカウントを選択してページを開いてください。
中央あたりにページを動かすと、「メッセージ送受信設定」という項目があると思います。
そこにアクセストークン(ロングターム)という表示と「再発行」ボタンがあると思います。この「再発行」ボタンをクリックしてトークンを生成してください。失効までの時間は「0」と設定してください。
これでトークンの発行は完了です。念のためこのトークンは保存しておき、誰にも教えないことを推奨します。
2. webhook送信を更新
webhookって何？？？という人も多いと思うので一応定義を書いておきます。
Webhook（Webコールバック、HTTPプッシュAPIなどと呼ばれる場合もあります）はあるアプリケーションから別のアプリケーションに対してリアルタイムな情報提供を実現するための仕組みです。
ピンとこないと思います。自分もです。要はLINE Botが動くと同時にGASの機能も動くようにする仕組みなんだな～という認識で大丈夫です。(専門の人が読んでいればすみません)
このwebhook送信の機能を使えるようにしましょう。
さきほど発行したアクセストークンの下に「webhook送信」という表示と「編集」というボタンがあると思います。
「編集」ボタンをクリックし、「利用する」にチェックを入れて「更新」をクリックしてください。これでwebhookの機能が使えるようになります。
※このwebhook送信機能ですが、「利用する」を選択し更新してもなぜか何回か「利用しない」のままになっていることが多いです。画面の更新を行い、もし「利用しない」になっていたら再度更新してください。
3. LINE@機能の制限
次にLINE@機能の制限をします。今ある機能を制限することに違和感を覚えるかもしれませんが、機能を制限しないと自分で作った機能が使えないので、残念ながら消しましょう。
制限する機能は「自動応答メッセージ」「友達追加時あいさつ」です。先ほどwebhook送信を更新したところのもう少し下に「LINE@機能の利用」という項目があります。
そこの「自動応答メッセージ」「友達追加時あいさつ」の「編集」ボタンをクリックし、「利用しない」に更新をかけてください。
以上でようやくコードを書いてLINE Botに機能を追加していく準備が整いました！
次の章ではオウム返しBotのコードを見ていきます。
5. コードを書いていこう！
今から作成するBotの完成イメージはこちらです。
時間がない人のためにまずは完成形のコードを載せておきます。
とりあえず動けばいいっていう人は下のコードをコピーして一番最初に開いている画面に貼り付けてみてください。
(コード.gs)
var secret_token = "XXXXXXXXXXX(発行したアクセストークン)"
var secret = "Bearer " + secret_token;
function doPost(e) {
var json = e.postData.getDataAsString();
var token = JSON.parse(json).events[0].replyToken;
var text = JSON.parse(json).events[0].message.text;
var url = "https://api.line.me/v2/bot/message/reply";
var headers = {
"Content-Type" : "application/json",
"Authorization":secret
};
var data = {
"replyToken" : token,
"messages" : [{
"type" : "text",
"text" : text
}]
};
var options = {
"method" : "POST",
"headers" : headers,
"payload" : JSON.stringify(data)
};
return UrlFetchApp.fetch(url, options);
}XXXXXXXXXXX(発行したアクセストークン)の部分には「4-1.アクセストークンの発行」で生成されたトークンを貼り付けてください。
書き終わったら「ファイル」→「保存」または「Ctrl+S」でコードを保存してください。
コードを保存したらいよいよLINE Botに機能を反映させていきます。
エディター上部にある「公開」タブをクリックし、「ウェブアプリケーションとして導入」をクリックしてください。
クリックすると次のような画面が表示されます。
注意してほしいのはプロジェクトバージョンを「新規作成(またはnew)」にすること、次のユーザーとしてアプリケーションを実行するのは「自分」とすること、アプリケーションにアクセスできるユーザーを「全員(匿名ユーザーを含む)」にすることです。
これを忘れるとせっかく公開しても誰も使えないBotが出来上がってしまうので忘れないようにしてください。
設定が完了したら「更新」ボタンをクリックしてください。
初めての導入の場合、次のような警告が表示されますが、気にせずに許可してください。
アクセスが許可されると次のような画面が表示され「https://~」と続く現在のウェブアプリケーションのURLというアドレスが表示されます。
このアドレスをコピーして保存しておいてください。
上のウェブアプリケーションのURLをコピーしたらLINE Developersに戻り自分のLINE Botのページに移動してください。
ページ中央あたりまでスクロールし、「Webhook URL ※SSLのみ対応」という項目を見つけてください。
「編集」ボタンをクリックし、先ほどコピーしたURLを貼り付けて更新してください。
「https://」はすでに書かれているので先ほどコピーしたURLからhttps://の部分は消して貼り付けをしてください。
更新が完了したら「接続確認」ボタンをクリックし、LINE BotとGASが接続されているか確認してください。接続ができていれば「成功しました」という表示されます。もし表示されなければもう一度URLを確認してください。
いよいよ大詰めです。
念のためにwebhook送信が「利用する」になっているか、自動応答メッセージは「利用しない」になっているか、webhook URLの接続は成功しているかを確認してください。
全て問題なければスマホからLINEを開いて作成したBotに何か話しかけてみてください。オウム返しをしてくれるはずです！
6. うまくいかないんだけど。。。
なぜかうまくいかないという人のために考えられる原因を書いておきます。
1. コードの記述ミス(上のコードを正確にコピーできていない)
2. 発行したアクセストークンをコードに正確に貼り付けできていない。
3. webhookが「利用しない」のままになっている。
コードは一文字でも足りていない、文字が違うなどがあるとそれが些細なミスであれうんともすんとも動かない繊細なものです。融通が利かなくて大変ですが、もし動かない場合はどこか記述を間違えてないか疑ってみてください。
アクセストークンはパスワードなので一言一句正確なものでないといけません。よくあるのは末尾の"="が抜けていたなどがあるので、こちらも確認してみてください。
最後はwebhook送信ですが、うえでも言った通りなぜか更新がされにくいので1も2もあっている場合はこちらも確認してみてください。
自分の経験上はこの3つを確認すればだいたい動くようになったので、動かない場合でも落ち着いて問題を探してみてください。
6. 終わりに
今回の記事でちゃんと動くLINE Botが完成しました。
しかし、これだけではチームの運営に使うにはまだまだ機能が足りませんね。
今回書いたコードをベースに公式ドキュメントを見ながらいろいろな機能を追加したり、偉大な先人たちの書いたページを見たりしてどんどんBotを更新してもらえたらと思います。
かんしゃらで使っている機能はすべて公式ドキュメントに書いてあることを使ってやっているので誰でも簡単に機能が追加できるはずです！
よさこいチームを運営している人やすべての踊り子が便利に使えるBotが作られますように。
頑張ってくださーい！
この記事が気に入ったらサポートをしてみませんか？