みなさん、こんにちは！
現役エンジニアの”ます”です。
60分で作れるLINEとスプレッドシートを連携した今日の夕飯レパートリーをランダムで提案してくれるLINE BOTを作成します。
未経験からエンジニアを目指す方は成果物を求められることが多くあるでしょう。
今回はそんな成果物を手っ取り早く短時間で作ってしまおう！といった記事になります。
無料で取り扱えるGoogle Apps Scriptとお馴染みのLINEを連携したアプリケーションの開発です。
この記事では
- JavaScriptに似たGASの開発経験が積める
- 60分で成果物が1つ作れる
- サーバーレスでWebアプリが公開ができるため自分や友人にも紹介できる
- APIの使い方が分かる
といったメリットがございます。
ぜひ最後までチャレンジしてみてください。
- 1 スプレッドシートに紐づくApps Scriptを作成する
- 2 アプリケーションを公開する
- 3 LINE Developersの登録をする
- 4 プロバイダーを作成する
- 5 LINE BOT用のアカウントを作成する
- 6 LINE Messaging APIの設定を行う
- 7 オウム返しのプログラムを設定する
- 8 プログラムを更新して公開する
- 9 Google Apps ScriptのデプロイURLを固定で更新する
- 10 アクセスを承認する
- 11 オウム返しのBOTを確認する
- 12 Step Up！ スプレッドシートをデータベースとして扱う
- 13 Google Apps Scriptからスプレッドシートのデータを操作する
- 14 まとめ
スプレッドシートに紐づくApps Scriptを作成する
まずはGoogle Driveを開きます。
次にスプレッドシートを作成してください。
スプレッドシート上部の「拡張機能」タブからApps Scriptを選択します。
このようにプロジェクトが表示されたら、まずは開発環境の構築完了です。
※手順を細かく知りたい方はGoogle Apps Scriptの開発環境を整える細かい説明をこちらで説明しています。
アプリケーションを公開する
続いてLINE BOTの設定をしたいところですが、その際にプログラムと連携するためのURLが必要になります。
今回Google Apps Scriptで作成するアプリケーションを公開し、URLを発行しましょう。
またプログラムを書いてはいませんが、画面右上の「デプロイ」ボタンから「新しいデプロイ」を選択してください。
すると、ポップアップが表示されるので
「⚙」（歯車アイコン）を選択します。
続いて、「ウェブアプリ」を選択してください。
続いて、次のユーザーとして実行の部分に「自分（～～@gmail.com）」を設定し、
アクセスできるユーザーを「全員」にします。
これは後ほど設定するLINEのAPIがこのプログラムにアクセスすることを許可するために設定しております。
※一部の組織アカウントではこちらのアクセスが制限されていることがございます。その際は個人アカウントに切り替えてお試しください。
設定を確認したら「デプロイ」を選択してください。
表示されたURLをコピーしたらGASの初期設定はひとまず終了です。
LINE Developersの登録をする
LINE Developers にアクセスし、ログインをします。
ログイン方法はメールアドレスとパスワードを入力する方法と、QRコードを入力する方法があります。
どちらでも構いませんが、QRコードをスマホで読み取るのが楽かもしれません。
初回ログイン時のみ、メールアドレスと同意を求められるかと思いますので、入力を完了してください。
また、「英語で表示されてしまう～」という方は、ページ下部にEnglishと日本語を切り替えられるタブがございます。
そちらから「日本語」を選択してください。
プロバイダーを作成する
では続いて新規プロバイダーの作成をします。
LINEのBOTアカウントを作るための親グループのようなものといった認識で良いかと思います。
私は既にいくつかプロバイダーを作成してしまっているため、表示が違うかもしれませんが、「新規プロバイダーの作成」という緑のボタンをクリックしてください。
すると新規プロバイダーの作成画面が表示されます。
プロバイダー名は何を指定しても大丈夫です。
作成をクリックすると新規プロバイダーが作成されます。
LINE BOT用のアカウントを作成する
次にチャンネルを作成します。
このチャンネルがLINEのBOT用アカウントになります。
画面表示から「Messaging API」という単語を見つけて選択してください。
次に、アカウントの設定をする画面が表示されます。
チャンネル名はアカウント名になります。
一度設定してしまうと7日間変更できませんので気を付けてくださいね！
その他、必須入力を埋めたら作成ボタンを選択してください。
入力が完了し、「作成」のボタンをクリックすると、確認画面が表示されます。
こちらも「OK」を選択し、次の同意確認で「同意」をクリックするとアカウント作成も完了です。
作成した画面がこちら。
LINE Messaging APIの設定を行う
LINE側の設定はこれで最後です。
プログラムと紐づける設定を行います。
「Messaging API設定」というタブをクリックしてください。
ここで表示されるQRコードが今回のアカウントの情報になりますので、動作確認をするためにもお手元のスマートフォンで友達追加しておきましょう。
※スクリーンショットのQRコードのアカウントは記事解説後削除いたしますので読み取れません。
次に、ページスクロールをして現れる「Webhook URL」に先ほどGoogle Apps Scriptで発行したURLを設定します。
「更新」を選択し、「Webhookの利用」をオンにします。
続いて、応答メッセージを無効にしていきます。
今回、LINE BOTで作成する自動返信はプログラムで処理をしたいのですが、LINE Messaging APIのアカウントでは標準でLINEが用意している自動返信が設定されているため、それを無効にしていきます。
応答メッセージの「編集」をクリックすると別のページが開かれます。
ここで、画面下部の詳細設定にある「応答メッセージ」を「オフ」にします。
別ページでの設定は以上ですので、先ほどまでの設定画面に戻り、最後にチャンネルアクセストークンを発行します。
「発行」をクリックします。
すると、長めの文字列が発行されるので、画面右にあるコピーアイコンをクリックしてクリップボードへコピーしてください。
これでLINE側の設定は終了です。
次はいよいよプログラミングに入ります。
オウム返しのプログラムを設定する
Google Apps Scriptのコードにある
function myFunction() {
}を削除し、下記コードを記入してください。
function doPost(e) { // LINE APIから渡されてきた情報を抽出 const contents = e.postData.contents; // JSON変換 const json = JSON.parse(contents); // event抽出 const event = json.events[0]; // 送信されたテキスト const text = event.message.text; // 返信用トークン const token = event.replyToken; // 返信用の関数 reply(token, text); } function reply(token, text) { // LINE Developersで発行したトークン const ACCESS_TOKEN = '__ここにチャンネルアクセストークンを記入__'; // APIのURL const url = "https://api.line.me/v2/bot/message/reply"; // 送信データのヘッダー let headers = { "Content-Type" : "application/json; charset=UTF-8", 'Authorization': 'Bearer ' + ACCESS_TOKEN, }; // 送信データの中身(これをLINEが処理してくれる) let postData = { "replyToken" : token, "messages" : [ { 'type':'text', 'text': text, } ] }; // それぞれをURLに乗せるために固める let options = { "method" : "post", "headers" : headers, "payload" : JSON.stringify(postData) };// 送信！ return UrlFetchApp.fetch(url, options); }
上記コードのうち、「__ここにチャンネルアクセストークンを記入__」の部分に先ほどLINE側の設定の最後に発行したアクセストークンをご記入ください。
プログラムを更新して公開する
プログラムの修正が終わったら、公開設定をしなくてはいけません。
単純に保存しているだけだと、公開しているプログラムは更新されませんので、プログラムを更新した際は、毎回こちらの手順が必要になります。
先ほどLINE側にURLを発行しているため、新しいデプロイをするとURLも更新されてしまいます。
そこで、今回は先ほどのデプロイを更新する形で対応します。
Google Apps ScriptのデプロイURLを固定で更新する
画面上部の「デプロイ」から「デプロイを管理」を選択してください。
編集ボタン（鉛筆アイコン）をクリックし、バージョンを設定します。
今回のプログラムにはURLを外部接続するプログラムが含まれているので、承認が必要になります。
アクセスを承認する
アクセスを承認し、ご自身のアカウントでログインしてください。
続いて、「詳細」をクリックし、安全ではないページへ移動します。
※ここで「安全なページに戻る」を選択しないように注意しましょう。
続いて、「許可」をクリックします。
「デプロイ」をクリックすると、先ほどと同じURLでプログラムが更新されます。
オウム返しのBOTを確認する
では、実際にLINE BOTを友達追加して、メッセージを送ってみましょう！
このように、送信したテキストが返信されたら成功です。
ここまでは非常に簡単なので、次にスプレッドシートをデータベースに見立てて、夕飯のレパートリーをランダムで送信してくれるプログラムにしていきたいと思います。
Step Up！ スプレッドシートをデータベースとして扱う
Google Apps Scriptはスプレッドシートを簡単なデータベースとして取り扱うことができます。
今回は夕飯のレパートリーをあらかじめ登録しておいて、登録した中からランダムで返却するプログラムを組んでいきます。
まずはスプレッドシートの設定から見ていきましょう。
スプレッドシートの画面下部にあるシート名「シート1」の名前を「夕飯」へ変更しました。
後ほど、この夕飯シートへアクセスしてきます。
次に、夕飯シートのA列にレパートリーを並べていきます。
これで準備はOKです。
今度はスクリプトからこのデータを読み取るプログラムを書いていきます。
Google Apps Scriptからスプレッドシートのデータを操作する
では、先ほど作成したプログラムに追加していきましょう。
返信用トークンを宣言しているすぐ下の行に下記のコードを追加してください。
let message;
if (text == "夕飯") {
message = getRandomMessage();
} else {
message = text;
}
reply(token, message);doPost関数の中身はこのようになります。
続いて、スクリプトの行末に下記の関数を追加してください。
function getRandomMessage() {
// スプレッドシートの読み込み
const SpreadSheet = SpreadsheetApp.getActiveSpreadsheet();
// 夕飯シートの読み込み
const Sheet = SpreadSheet.getSheetByName("夕飯");
// 最終行を取得
const lastRow = Sheet.getLastRow();
// スプレッドシートのデータを取得
const values = Sheet.getRange(1, 1, lastRow).getValues();
// ランダム行目の1列目を（A列の値が設定されているセルのどれかのテキスト）を返却
return values[Math.floor(Math.random() * lastRow)][0];
}
このようになります。
プログラムはこれで以上ですので、再度デプロイの管理から公開を更新していきましょう。
「デプロイ」をクリックすると、再度承認が必要になります。
今度はスプレッドシートへのアクセスの承認となりますので、上記「アクセスを承認する」の項目と同じ動作を行ってください。
あとはLINE BOTに「夕飯」と送信することでスプレッドシートに設定したレパートリーが返信されます。
連続で送信すると返信に少しラグがありますが、きちんと動いていることが分かりますね！
まとめ
いかがでしたでしょうか？
今回、未経験者でも簡単に作れるGoogle Apps ScriptLINE BOTを解説してきました。
プログラミングの世界に踏み出す際に、未経験者は成果物を求められることが多いですが、今回の記事がゼロからイチを作り出すための参考になれば幸いです。
Google Workspaceを活用している場合はGoogle Apps Scriptを覚えると業務の効率化および自動化ができます。
Google Apps Scriptが学べるスクールはコチラで紹介しています。よかったら見てみてください。
Google Apps Scriptが学べたらコチラの記事で収益化してみてはいかがでしょうか？
本記事で書いているプログラムに関しては後ほど詳しく解説していきますので、そちらもお楽しみ！