🦉

【超丁寧】オウム返しができる LINE bot を作成しよう！

2021/10/16に公開

初心者

tech

セルフペースハンズオン資料

この資料は、現役インターンが語る！女子中高生に伝えたい、IT で働く魅力 | Code Polaris #07 で行うハンズオンの手順をまとめたものです。

概要

今回作成するのはオウム返しをしてくれるLINE botです。あなたが送ったメッセージをそのまま返してくれます。

事前の準備

本ハンズオンを進めるにあたり、下記のアカウントをご用意ください。

必要なアカウント	説明
LINE アカウント	LINE Developersコンソールで作業ができるように、LINEアカウントまたはLINEビジネスアカウントをご用意ください。詳細は、LINE Developersコンソールへのログインをご参考ください。
Google アカウント	Google Apps Scriptを利用するために、アカウントが必要です。これからご準備する方は、サインアップからアカウントを作成してください。

1. LINE Developersコンソールにログインする

以下は、LINE Developersコンソールへのログインと同様の内容です。

LINE Developersコンソールにログインするには、LINE Developersサイトの右上にある［ログイン］をクリックします。

次の画面が表示されたら、［LINEアカウントでログイン］または［ビジネスアカウントでログイン］をクリックします。

LINEアカウントでログイン

［LINEアカウントでログイン］をクリックした場合、以下のいずれかの認証方法でログインできます。

メールアドレスログイン：LINEアカウントのメールアドレスとパスワードを入力してログイン
QRコードログイン：表示されたQRコードを、スマートフォン版LINEのQRコードリーダーでスキャンしてログイン

開発者アカウントを作成する（初回ログイン時のみ）

LINEアカウントまたはビジネスアカウントでLINE Developersコンソールに初めてログインしたら、開発者アカウントを作成します。［開発者名］と［メールアドレス］を入力します。［開発者名］にはご自分の名前を、［メールアドレス］にはご自分のメールアドレスを入力してください。
LINE開発者契約をよく読み、同意できる場合はチェックボックスにチェックを入れて、［アカウントの作成］をクリックします。この作業は、初回ログイン時のみ必要です。

新規プロバイダーを作成する

ホーム画面の［新規プロバイダー作成］をクリックします。
次に、[新規プロバイダー作成]画面で［プロパイダー名］にご自分の名前を入力してください。入力できたら、［作成］をクリックします。プロバイダーとは、アプリを提供する組織のことです。

2. チャネルを作成する

作成したプロバイダーページで、［チャネル設定］タブの［Messaging API］をクリックします。
チャネルに必要な情報を入力します。

Messaging APIチャネルの設定のうち、入力する情報は以下のとおりです。

項目	説明
チャネルの種類	Messaging API が選択されている
プロバイダー	先ほど設定したプロバイダー名（ご自分の名前）が既に表示されている
チャネルアイコン（任意）	設定したいLINEのアイコン
チャネル名	LINEのアカウント名を入力
チャネル説明	どのようなbotなのかの説明を入力
大業種	個人
小業種	個人(学生)
プライバシーポリシーURL（任意）	入力する必要なし
サービス利用規約URL（任意）	入力する必要なし

チャネルを確認する
チャネルが作成されたことを確認します。

3. Google Apps Scriptでウェブアプリのスクリプトを作成する

Googleドライブにアクセスします。
[新規]をクリックします。
[その他]→[Google Apps Script]を選択してください。
すると、以下のようにスクリプトを作成できる画面に遷移します。
左上の「無題のプロジェクト」をクリックし、プロジェクトの名前を「無題のプロジェクト」から「LINE_bot」に変更します。[名前を変更]をクリックします。
既に以下のようなコードが存在していると思いますが、全て削除してください。

function myFunction() {
  
}

アクセストークンを取得します。先ほどチャネルができたことを確認した画面に戻ってください。そして、[Messaging API設定]をクリックしてください。

一番下までスクロールすると、チャネルアクセストークンが取得できます。
初めてチャネルアクセストークンを取得する場合は[発行]をクリックしてください。
(注意！：チャネルアクセストークンは誰にも教えないこと！チャネルアクセストークンが漏洩すると、意図しない第三者にチャネルを利用される可能性があります。たとえば、悪意のあるメッセージがすべての友だちに送信されるなどの危険があります。
チャネルアクセストークンの漏洩が疑われた場合は、漏洩の可能性があるチャネルアクセストークンを取り消して、再発行してください。)
Google Apps Scriptの画面に戻り、以下をそのままコピーして貼り付けます。この時、１行目の「ここにトークンを入力」の部分に7.で取得したチャネルアクセストークンを挿入します。
(注意！：チャネルアクセストークンは必ず''で囲むこと！)

var ACCESS_TOKEN = 'ここにトークンを入力';

function doPost(e) {
  var event = JSON.parse(e.postData.contents).events[0];
  // 応答トークン
  var replyToken = event.replyToken;
  // ユーザーからのメッセージ
  var userMessage = event.message.text;
  // 応答メッセージ用のAPI URL
  var url = 'https://api.line.me/v2/bot/message/reply';

  if (userMessage === undefined) {
    // メッセージ以外(スタンプや画像など)が送られてきた場合
    userMessage = '？？？';
  }

  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': [{
        'type': 'text',
        'text': userMessage,
      }]
    })
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}

コードをデプロイします。右の[デプロイ]→[新しいデプロイ]をクリックしてください。
歯車マークをクリックし、[ウェブアプリ]をクリックします。
[アクセスできるユーザー]を[全員]に変更し、右下の[デプロイ]をクリックします。
デプロイが完了したらウェブアプリのURLをコピーします。

4. 作成したウェブアプリとLINE botを連携させる

LINE Developersのチャネルの設定画面から[Messaging API設定]を選択し、[Webhook URL]に先程取得したウェブアプリのURLを入力し、[Webhookの利用]をオンにしてください。
同じく[Messaging API設定]の[LINE公式アカウント機能]から、[あいさつメッセージ]の[編集]をクリックします。
すると、LINE公式アカウントマネージャーの応答設定に移動します。設定の中にある[応答メッセージ]をオフにし、[Webhook]をオンに変更してください。

お疲れ様でした！👏

ここまでできたら、LINE botの完成です！！
LINE botを「友だち追加」すると、botがオウム返しをしてくれます！