【LINE BOT】30分からできるLINE BOT開発②【GASとLINEボットの紐付け】

こんにちは、ともろう(@tomorrowSLog)です。

この記事はLINE BOT開発①の続きの記事になります。

2019-03-21【LINE BOT】30分からできるLINE BOT開発①【下準備】

前回作ったLINE Developersのアカウントからボットの初期設定をして、Google Apps Script(GAS)と紐付けしていくよ。

LINEボットの新規作成
GASの初期設定
GASとLINEボットの紐付け
LINE BOTシリーズ他の記事

2019-04-09【プログラミング】日英翻訳サイトを作ってみた【JavaScript】

LINEボットの新規作成

LINE Developersログイン

前回作成したLINE Developersアカウントにログインしよう。

プロバイダー選択

製作者の名前であるをプロバイダーを選択します。

なければ新規プロバイダーを作成しましょう。

新規チャンネル作成

プロバイダの設定が終われば、チャンネルを設定していきます。これがLINEボットの本体となります。

LINEログイン、Messaging API、Clovaスキルの３つがあるのですが、Messaging APIでチャンネルを作成するを選びます。

Messaging APIの情報を入力

次に各種情報を入れていきます。

ちなみにともろうの設定はこんな感じ

アプリ名:おうむちゃん
アプリ説明:おうむ返しするよ
プラン:Developer Trial
大業種:個人、小業種:個人

メールアドレスとアプリアイコンはご自由に！

設定が終わるとLINE@の利用規約とMessaging APIの利用規約の2つの利用規約への同意が必要となります。

しっかりと確認、同意後に作成ボタンを押せば初期設定はひとまず完了です。

GASの初期設定

GASの作成

前回作成したGoogle driveにアクセスしていきます。

左上にある新規作成から、Google スプレッドシートを選択します。

MEMO

直接GASを開いて大丈夫です。今後スプレッドシートを使った機能も作っていくので、スプレッドシートから開いています。

Google スプレッドシートが開くと、ページ上部のツールから、スクリプトエディタを開いてGASにアクセスします。

注意

2つ以上のグーグルアカウントを使用している場合、うまく編集やアクセスができない場合があります。
どうやらブラウザのメイングーグルアカウントとログインアカウントが異なる場合に起こるみたいです。
ブラウザのメインアカウントを編集アカウントに変更するか、他のブラウザのグーグルアカウントをログアウトすればうまく動作します。
アクセス権限を共有してしまうのもアリかもしれません。

GASの動作確認

動作確認も兼ねて少しだけ遊んでみます。

開いた画面のコード.gsの部分を以下の通りに書き換えましょう。

/*コード.gs*/
function doGet(e) {
 var html = '<p>Hello</p>';
  return HtmlService.createHtmlOutput(html);
}

そしてプロジェクト名をつけてから、

ページ上部公開からウェブアプリケーションとして導入とします

注意

アプリケーションにアクセスできるユーザーを全員(匿名ユーザーを含む)にします。
二度目以降の場合はプロジェクトバージョンをNewで設定しましょう。

導入が完了すると、現在のウェブアプリケーションのURLといったものが表示されます。

そのURLを別のタブから開いてみます。以下のようにHelloと表示されれば成功です。

このURLはまだ使うので控えておきましょう。

スクリプト実行時に承認が必要になった場合、以下のサイトを参考にするといいです。

参考【初心者向けGAS】スクリプト実行時の「承認」でびっくりしないためにtonari-it.com

GASとLINEボットの紐付け

初期設定が終わったGASとLINEボットを紐付けしていきます。

LINE Developersに再度アクセスをして、プロバイダから作ったLINEボットのチャンネルを選択します

チャンネル設定

アカウントの紐付けに重要なポイントの操作のみを書き出していきます。

アクセストークン(ロングターム)の再発行 : 基本的に初回のみで大丈夫です。次回使います。
Webhook送信 : 利用する
Webhook URL : 先ほどのGASのURLをコピペします。

ここの設定と、先ほどのGASの注意の欄で説明した設定は非常に大事になってきます。
うまく動作しない場合、まずこの二つを確認しましょう。

ここまでくれば大体の設定は完了しています。

あとは次回コードを書いていきます。お疲れ様でした。

LINEBOTシリーズ他の記事