LINE Bot ハンズオン

2021-04-12 イベント

---

こちらは 2021 年 4 月開催の新歓イベント「LINE Bot をつくってみよう」参加者向けの資料です。 初心者向けのイベントのため、一部あまり正確でない例えなどが含まれますのでご容赦ください。

LINE 公式アカウントの作成

公式ドキュメントに沿って LINE Developers コンソールで設定を行います。

LINE Developers コンソールにアクセスし「LINE アカウントでログイン」をクリックする。

LINE アカウントでログインする（メールアドレスとパスワードが分かる場合は入力、もしくは QR コードでログインするのも簡単でよい）。

初めて Developers コンソールにログインした場合は初期設定が必要なので、名前と自分のメールアドレス、規約同意のチェックを入れて開発者アカウントを作成する。 この名前とメールアドレスは一般公開されるものでないので安心しよう。 このとき画面右下に言語切替メニューがあり日本語へ切り替えることもできる。

開発者登録が完了するとこの画面に入ることができる。 緑の「新規プロバイダー作成」をクリックする。

プロバイダー名を入力し「作成」をクリックする。 このプロバイダー名はこの後作成する LINE 公式アカウントの提供元としてユーザーに表示されるので、見られても恥ずかしくない名前にしよう。

プロバイダーを作成するとこの画面になる。 続いてこのプロバイダー内に「チャンネル」を作成する。今回つくる LINE Bot の場合は Messaging API をクリックする。

チャンネル作成の画面になる。 色々入力項目があるが、最低限必要なのは「チャネル名,チャネル説明,大業種,小業種」の 4 項目。 以下のように入力しよう（好みで変えてもよい）。

項目	入力内容	補足
チャンネル名	占い Bot	これが LINE 公式アカウントのアカウント名になる
チャンネル説明	占いします！	適当に説明文を入れましょう
大業種	個人	何でも良い
小業種	個人（学生）	何でも良い

画面下の方の利用規約に同意して「作成」をクリックする。

すると「今入力した内容を元に LINE 公式アカウントが作成される」などのメッセージが表示されるので「OK」をクリックする。 その後、規約同意の画面が出るが同様に「同意する」をクリックする。

作成された LINE Developers コンソールが表示されれば LINE 側の初期設定はほぼ完了！ この画面は後ほど使うので、開いたままにしておこう。

GoogleAppsScript のプログラムを作成

GoogleDrive へログインする ログイン後の画面の、左上の「新規」→ その他 →GoogleAppsScript をクリックする。

GoogleAppsScript の編集画面が開きます。 「無題のプロジェクト」と書かれている部分をクリックしてプロジェクトに名前をつけましょう。 今回は「LINE 占い Bot」にしてみます。 何でも良いです。

こちらを開き、プログラムを全てコピーします。 GAS の画面へ戻って貼り付けましょう。 このとき最初からある myfunction() は全て消してください。

アクセストークンの準備

最初に作成した LINE Developers コンソールへ戻り、「Messaging API 設定」というタブを開く。

「Messaging API 設定」の一番下、チャンネルアクセストークンという部分の「発行」をクリックし表示される英数字の文字列をコピーする。

GAS のプログラム 2 行目に注目する。

const ACCESS_TOKEN = '';

の '' の間に、LINE Developers コンソールでコピーした文字列を貼り付ける。 この文字列（アクセストークン）は他人に公開しないよう注意しよう（画像のものは既に無効化済みのため問題ない）。

これでプログラムは完成！

GAS のプログラムをデプロイ

次はこのプログラムをサーバー上へアップロード（デプロイという）する。 赤色で示したボタンをクリックして保存し、右上の「デプロイ」ボタンから「新しいデプロイ」をクリックする。

以下のような画面が開くので、種類の選択の横の歯車マークから「ウェブアプリ」を選択する。

以下のように入力し、「デプロイ」をクリックする。

項目	入力内容
新しい説明文	V1
次のユーザとして実行	自分
アクセスできるユーザー	全員

※新しい説明文の「v1」というのはバージョン 1 という意味。 これはただのメモなので何を書いても良いが、バージョンがわかるようにしておくと便利だ。

暫く待つと、「データへのアクセスを許可する必要があります」というメッセージが出るので「アクセスを承認」をクリックする。

自分が今ログインしているアカウントを選択する。

このように警告が表示されるが、左下に小さく出ている「詳細」をクリックする。

「（安全でないページ）に移動」をクリックする。

右下の「許可」をクリックする。

暫く待つとサーバー上へのアップロード（デプロイ）が完了しこのような画面になる。 この「URL」と書かれた部分の「コピー」をクリックしてコピーする。 もし再度「アクセスを承認」ボタンが表示されてしまう場合はもう一度今の手順を繰り返してみよう。

LINE 側の設定

再度、最初に作成した LINE Developers コンソールへ戻り「Messaging API 設定」というタブを開く。

QR コードの下辺りに「Webhook 設定」という項目があるので「編集」をクリックし、先程 GAS でデプロイした際にコピーした URL を貼り付け、「更新」をクリックする。

「検証」というボタンが表示されるのでクリックし、成功と表示されれば完成はもうすぐ！ 「Webhook 設定」の「Webhook の利用」をオンにする。

「Webhook 設定」の下にある「LINE 公式アカウント機能」の中の応答メッセージにある「編集」をクリックする。

詳細設定の「応答メッセージ」を「オフ」に設定する。 これがオンになっているとユーザーが何かチャットを送ると「このアカウントでは個別のお問い合わせは受け付けておりません」というメッセージが表示されてしまうので忘れずオフにしよう。 これですべての作業は完了だ。

動作確認

LINE Developers コンソールの「Messaging API 設定」に表示されている QR コードを読み込んで友だち追加してみよう。 「占って」のように送ると占い結果が、それ以外を送ると「占ってと言ってみてください」のように返ってくれば成功だ！

GAS のプログラムを編集した場合

GAS のプログラムを編集した場合の再デプロイ方法

赤色で示したボタンをクリックして保存し、右上の「デプロイ」ボタンから「デプロイを管理」をクリックする。

右上の鉛筆マークをクリックする。

以下のように入力し「デプロイ」をクリックする。

項目	入力内容
バージョン	新バージョン
説明	v2

※説明の「v2」というのはバージョン 2 という意味。 これはただのメモなので何を書いても良いが、バージョンがわかるようにしておくと便利だ。

以上で編集内容が再度アップロード（デプロイ）される。

---