まほろば-Web・ロゴをつくる人-
LINE@ 2018/08/20
お買い物リストBot実装編

【実装編】LINE BOTのつくり方 -お買い物リスト-

まほろば@mahoroba148です。

LINE BOTをつくろう!ということで今回は実装編です。実装編ではGoogle Apps Script(以下、GAS)のプログラミングからLINE@アカウントへの公開の流れまでをご説明いたします。

LINE@アカウントの準備やプログラム環境の設定方法は準備編をご覧ください。

【準備編】LINE BOTのつくり方 -お買い物リスト-

参考にさせていただいたサイト↓

GASにコードを書こう

準備編でGAS「無題のプロジェクト」が開いている状態まで行いました。

Google Apps Script追加完了

①下記のコードを無題のプロジェクトへコピー&ペースト

コメント多めです。書いておかないと自分が何を書いたか忘れてしまうので…

//トークンを取得
var CHANNEL_ACCESS_TOKEN = '';//アクセストークンを記入

//-------------------------------
//トーク開始
//-------------------------------
function doPost(e) {
var reply_token= JSON.parse(e.postData.contents).events[0].replyToken;
if (typeof reply_token === 'undefined') {
return;
}

//メッセージ取得
var com = JSON.parse(e.postData.contents).events[0].message.text;

//スプレッドシートの設定
var ss = SpreadsheetApp.openById('19TSz8WK8S9RzAxNfw59gvPURBnlzRzqbUUcwkBzZ930');//スプレッドシート名
var flag = ss.getRange('F1').getValue();//状態フラグ

//変数設定
var reply_messages;

//フラグで状態を判断
if(flag == 1){//「買ったよ」を言った後

reply_messages = set_item_purchased_(com, ss);

}else if(flag == 2){//「ほしい」を言った後

reply_messages = set_item_purchase_list_(com, ss);

}else{//それ以外

reply_messages = command_purchase(com, ss, flag);

}

//返信設定
var url = 'https://api.line.me/v2/bot/message/reply';
UrlFetchApp.fetch(url, {
'headers': {
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
},
'method': 'post',
'payload': JSON.stringify({
'replyToken': reply_token,
'messages': [{
'type': 'text',
'text': reply_messages,
}],
}),
});
return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}

//-------------------------------
//コマンド分岐
//-------------------------------
function command_purchase(com, ss, flag)
{

//コマンドを識別し、返事をする
if (String(com) == '買い物リスト'){

return get_purchase_list_(ss);

}else if(String(com) == '買ったよ') {

ss.getRange('F1').setValue(1);
return '何を買ったの?';

}else if (String(com) == 'ほしい'){

ss.getRange('F1').setValue(2);
return '何がほしいの?';

}else if (String(com) == 'ヘルプ'){

return 'がんばって!!';

}
return '「買い物リスト」「買ったよ」「ほしい」のどれかで話しかけてね';

}

//-------------------------------
//ほしいの処理
//-------------------------------
function set_item_purchase_list_(items, ss)
{
ss.getRange('F1').setValue(0);

//スプレッドシートの最終行を取得
var lastRow = ss.getLastRow() + 1;

// もし改行があったら分割して登録
if( items.match(/[\n\r]/g) ){

var item = items.split(/\r\n|\r|\n/);

for (i = 0; i < item.length; i++) {
ss.setActiveCell('A' + lastRow).setValue(item[i]);
lastRow = lastRow + 1;
}

}else{//改行なし

ss.setActiveCell('A' + lastRow).setValue(items);

}

return '買い物リストに追加しておいたよ!\nリストの内容を見るには「買い物リスト」って言ってね';
}

//-------------------------------
//買い物リストの処理
//-------------------------------
function get_purchase_list_(ss)
{
var lastRow = ss.getLastRow(); //最終行
var items = ss.getRange("A1:B" + lastRow).getValues();//登録された品目

// 買い出しリストに登録がなければ後続処理を実行しない
if (items.length < 1){

ss.getRange('F1').setValue(1);
return 'いま登録されている品目はないよ!\nほしいものがあったら「ほしい」で教えてね!';

}

var text = '買い物リストには、いま以下の品目が登録されてるよ!\n\n';
var item_not_exist_flg = true;

//済がついていない品目を表示する
items.forEach(function(item){
if (item[1] != '済')
{
item_not_exist_flg = false;
text = text + String(item) + '\n';
}
});

// 全て購入済ならリストに記載項目がない旨を返却
if (item_not_exist_flg) {

ss.getRange('F1').setValue(0);
return 'いま登録されている品目はないよ!\nほしいものがあったら「ほしい」で教えてね!';

}

text = text + '\n買い出しが終わったら「買ったよ」で教えてね!';

ss.getRange('F1').setValue(0);
return text;
}

//-------------------------------
//買ったよの処理
//-------------------------------
function set_item_purchased_(purchased_items, ss)
{

ss.getRange('F1').setValue(0);

//スプレッドシートの最終行を取得
var lastRow = ss.getLastRow();
var items = ss.getRange("A1:B" + lastRow).getValues();

//品目数
var cnt = 0;

//そもそもリストがなかった時の処理
if (purchased_items.length < 1 || items.length < 1) {

return '教えてもらった品目がリストに無いよ!\n「買い物リスト」でリストにある品目を確認してね';

}

// もし改行があったら分割して済にする
if( purchased_items.match(/[\n\r]/g) ){

var tarItem = purchased_items.split(/\r\n|\r|\n/);

for (j = 0; j < tarItem.length; j++) {

//改行:あったときに済にする
for(var i=1 ;i <= lastRow; i++){

var item = ss.getRange('A'+ i).getValue();

if(tarItem[j] == item && ss.getRange('B'+i).getValue() == "" ){

ss.getRange('B'+ i).setValue('済');
cnt = cnt + 1;

}


}//for(i)

}//for(j)

}else{

//通常:あったときに済にする
for(var i=1 ;i <= lastRow; i++){

var item = ss.getRange('A'+ i).getValue();

if(purchased_items == item && ss.getRange('B'+i).getValue() == "" ){

ss.getRange('B'+ i).setValue('済');
cnt = 1;

}

}//比較for

}//分割分岐

//該当する品目がない
if (cnt == 0){

return '教えてもらった品目がリストに無いよ!\n「買い物リスト」でリストにある品目を確認してね';

}else{

return cnt+'品目をリストから削除しておいたよ~\n「買い物リスト」でリストにある品目を確認してね';

}

}

GASに転機

②一旦、保存する

保存マーク←フロッピーディスクのようなマークをクリックすると保存できます。

ファイル名を聞かれるので自分がわかりやすい名前にしてください。ここでは「shoppinglist」としました。

GAS保存

③Googleスプレッドシートを追加

リストを登録しておくためにGoogleスプレッドシート(以下、スプレッドシート)を使います。

先ほどのshoppinglistは閉じないで、スプレッドシートを追加しましょう。

Googleドライブで右クリック、スプレッドシートを選択

※ファイル名を変えたい人はファイル>名前を変更

④スプレッドシートへおまじないを記入する

スプレッドシートへ「リスト」「済」「フラグ」数字のゼロ「0」を記入します。

数字のゼロ「0」は必ず記入してください。その他は任意です。

A1→リスト、B1→済、E1→フラグ、F1→0

スプレッドシートへおまじない

⑤GASにスプレッドシート名を記入する

コード17行目に先ほど追加したスプレッドシート名を記入します。


var ss = SpreadsheetApp.openById('');//スプレッドシート名を記入

気をつけていただきたいのが、スプレッドシート名はURLから抜き出します。③で任意につけたファイル名ではなく、スプレッドシートを追加した段階でつくられる特有のURLです。

 

③で作成したスプレッドシートのURLをみると下記のようになっています。

スプレッドシート名記入

https://docs.google.com/spreadsheets/d/XXX/edit#gid=0

XXXの部分がGASに記入するスプレッドシート名です。

var ss = SpreadsheetApp.openById('XXX');//スプレッドシート名を記入

これでGASとスプレッドシートがつながりました。

スプレッドシート連携完了

まだ作業が残っているためGASは閉じないようにしましょう。

GASとLINE@を連携する

GASとLINE@を連携するためにはLINEデベロッパーでの操作も必要です。

GASとLINEデベロッパーを行き来するのでどちらの画面を参照するか気を付けて操作しましょう。

①【LINEデベロッパー】準備編で作ったMessaging APIのアカウントを選択

【LINEデベロッパー】準備編で作ったMessaging APIのアカウントを選択

 

②【LINEデベロッパー】チャネル基本設定のアクセストークンをコピー

②【LINEデベロッパー】チャネル基本設定のアクセストークンをコピー

アクセストークン(ロングターム)はメッセージ送受信設定にあります。

②【LINEデベロッパー】チャネル基本設定のアクセストークンをコピー

もし表示されない、アクセストークンが気に入らない場合は再発行してください。失効時間は0時間でOKです。

失効時間0

③【GAS】②でコピーしたアクセストークンを記入する

コード2行目にLINE@のアクセストークンを記入します。

 var CHANNEL_ACCESS_TOKEN = '';//アクセストークンを記入

アクセストークンがabcdだったら

 var CHANNEL_ACCESS_TOKEN = 'abcd';//アクセストークンを記入

実際のアクセストークは非常に長いですが「’」と「’」の間に記入すれば問題ありません。

アクセストークン記入

④【GAS】ウェブアプリケーションとして導入する

  • 公開タブからウェブアプリケーションとして導入を選択、下記のように設定してください。
  • プロジェクトバージョン:新規作成
  • 次のユーザーとしてアプリケーションを実行:自分
  • アプリケーションにアクセスできるユーザー:全員(匿名ユーザーを含む)

公開タブからウェブアプリケーションとして導入を選択

Webアプリケーション公開詳細設定

⑤【GAS】アプリケーションを承認する

初めての場合、アプリケーションの承認を行います。

Google先生が怒涛の勢いで確認をしてきますが、この作業をしないとLINE@と連携ができません。

詳細>shoppinglist(BOTの名前)安全ではないページに移動をクリック

アプリケーションの承認

安全ではないページへ移動

安全ではないページへ移動

リクエストを許可

⑥【GAS】ウェブアプリケーションURLをコピー

https://以降をコピーしましょう。あとからでも確認できるので必須ではないです。

【GAS】ウェブアプリケーションURLをコピー

⑦【LINEデベロッパー】Webhook送信を利用するに変更

【LINEデベロッパー】Webhook送信を利用するに変更

⑧【LINEデベロッパー】Webhook URLに⑥でコピーしたURLをペースト、更新する

【LINEデベロッパー】Webhook URLに⑥でコピーしたURLをペースト、更新する

もしコピーできていなかった方はGASにて公開>ウェブアプリケーションとして導入をクリックすると表示されます。

⑨【LINEデベロッパー】接続確認を行う

念のため接続確認を行います。

ここで接続がうまくいなかい方はURLが間違っている可能性が高いです。https://は含まれていないか、コピーし忘れはないかご確認ください。

接続確認

LINE@基本機能の設定

Messaging APIはLINE@アカウントとほとんど同じなので、LINE@の基本機能がついてきます。

  • 自動応答メッセージ
  • 友だち追加時あいさつ

LINE BOTの場合、必要ないので利用しないに設定しましょう。

LINE@基本機能利用しない

LINE@基本機能利用しない

LINE@基本機能利用しない

LINE@MANAGERの設定

設定も残すところ最後の項目になりました。

先ほどまではGASとLINEデベロッパーにて作業を行いました。ここからはLINE@MANAGER(以下LINE@マネージャー)にて作業を行います。

LINE@マネージャーへアクセス

LINEマネージャー(https://at.line.me/jp/)の管理画面をクリックし、個人用のLINEアカウントでログインしてください。

※お使いのスマホのLINEアプリにて認証コードを記入する場合があります

管理画面へログイン

リッチメニューを設定する

買い物リストBotをより操作しやすいようにメニューを用意します。

完成イメージ↓

LINEBOTリッチメニュー

①LINE@マネージャー左側のメニュー>リッチコンテンツ作成

リッチコンテンツ作成を選択

②右側の編集画面で新規作成をクリック

新規作成をクリック

③タイプの設定

上から順に以下のように設定していきます。

  • 表示設定:反映する
  • 表示期間:設定した日~かなり先の未来まで ※のちほど解説
  • タイトル:デフォルト
  • トークルームメニュー:メニュー切り替え
  • 初期表示メニュー:表示する
  • テンプレート選択:テキスト+アイコンで作成
  • 分割タイプ:テキスト+アイコンタイプ2(4分割の図)

リッチメニュータイプの設定

表示期間は設定しないとエラーになります。基本的に変更したくないので2、3年くらい先に設定しておくと良いでしょう。

ちなみに表示期間が過ぎるとリッチメニューは消えてしまいます。

リッチメニューが表示されなくなった場合は、表示期間を確認しましょう。

④コンテンツ設定

リッチメニューに表示する内容を設定します。

リンクのテキストの部分さえ合っていれば、アイコンやラベルなど変更していただいてかまいません。

  • 買い物リスト
  • ほしい
  • 買ったよ
  • ヘルプ

買い物リスト

ほしい

買ったよ

ヘルプ

アカウントページメニューを非表示

今のままだとリッチメニューの隣にもうひとつ「メニュー」ボタンが表示されてしまいます。

邪魔なので非表示にしましょう。

①アカウント設定>基本設定

アカウント設定>メニュー

②アカウントページメニュー>非表示>保存

アカウントページ非表示

LINE BOTと友だちになる

買い物リストBotを使うために友だち追加しましょう。

友だち追加のQRコードはアカウント設定>基本設定の下の方にあります。

買い物リストBotと友だち追加

LINEアプリのQRコードでも別のQRコードアプリからでも読み取り可能です。

買い物リストBotの使い方

機能は3つありました。

  1. 買い物リスト→リスト表示
  2. ほしい→買い物リストにほしいものを登録
  3. 買ったよ→買い物リストから買ったものを削除

リストを表示したいとき

リッチメニューの「リスト表示」をクリック、もしくは「買い物リスト」と話しかける。

買い物リストにほしいものを登録したいとき

リッチメニューの「ほしい」をクリック、もしくは「ほしい」と話しかける。

ほしいものを話しかける。

買い物リストから買ったものを削除したいとき

リッチメニューの「買った報告」をクリック、もしくは「買ったよ」と話しかける。

買ったものを話しかける。

※完全一致なので漢字等まちがえないように!

複数登録、削除したいとき

ほしいもの(買ったもの)を改行して話しかけてください。

「りんご」「みかん」「ぶどう」がほしい場合

改行で複数登録

※削除は完全一致なので漢字等まちがえないように!完全一致したものだけ削除します

買い物リストBotでちょっと便利に!

準備編、そして今回の実装編と2回に渡って買い物リストBotを紹介してきました。

ここまで設定お疲れ様でした~

書き出してみると設定する項目はいっぱいありますね(汗)でも一度設定してしまえば、LINEで買い物リストを管理できるので便利ですよ!

また、トライアルプランは50人まで友だち登録できるので、家族と買い物リストを共有できます。

実際に私もルームシェアしている友人と共有しています。どちらかが買い物に行ったときは買い物リストBotを参考に買ってきます。

いちいち買ってきてと言わなくていいのは気持ちが楽です。たまにおねだりの品が登録されているときもあります(笑)

最後に、ヘルプボタンは応援してもらいたいときに押してください(笑)

では、良きLINE BOTライフを~♪

▼関連記事

【準備編】LINE BOTのつくり方 -お買い物リスト-

気軽な相談OK!LINEで問い合わせできます。

【1:1トーク対応可能時間】
9:00~18:00

※予告なく変更される場合がございます
※お急ぎの場合は問い合わせフォームよりご連絡ください
※不定期でLINE@の使い方やホームページの作り方など情報配信をしています(詳しくはこちら)