10分でLINE Botを作成して公開するまでの手順

Copied the URL !

本記事では10分でLINE Botを作成して公開するまでの手順を説明します。

事前登録が必要なもの

Googleアカウント
LINEアカウント

TOC

作成するLINE Botについて

メッセージを送信したら、語尾に「にゃん」と付けて返すBotを作成します。

LINE Botを作成するまでの流れ

LINE Botを作成して公開するまでの流れは以下の通りです。

STEP

LINE DevelopersでMessaging APIチャネルを作成

LINE Developersに登録し、プロバイダー・Messaging APIチャネルを作成します。

STEP

Google Apps ScriptでWebサービスを作成

Google Apps Scriptsで新規にプロジェクトを作成し、Webアプリケーションをデプロイ（公開）します。

STEP

LINE DevelopersとGoogle Apps Scriptsの紐づけ

STEP1・2で作成したLINE Message APIとWebアプリを紐づけします。

それでは、実際に作成していきます。

LINE DevelopersでMessaging APIチャネルを作成

以下のリンクからLINE Developersにアクセスします。
https://developers.line.biz/ja/

アクセスしたら、画面右上にある「ログイン」ボタンをクリックします。

LINEアカウントかビジネスアカウントのいずれかのアカウントでログインします。

LINE Developerにログインしたら、「新規プロバイダー作成」をクリックします。

プロバイダー名を適宜入力し、「作成」をクリック

作成したら、「Messaging API」を開きます。

必要な項目を埋めていきます。チャネルアイコンはLINEのプロフィールとして表示されるアイコンになります。

チャネル説明や業種は適宜選んで下さい。

利用規約に同意し、「作成」をクリック

「OK」をクリック

情報利用に関する同意について「同意する」をクリック

以上でチャネルの作成が完了しました。
続いて、Messaging APIの設定を行います。「Messaging API設定」タブを開いて下さい。

応答メッセージの欄までスクロールして、「編集」をクリック

詳細設定の応答メッセージを「オフ」、Webhookを「オン」にして下さい。

Messaging API設定に戻り、チャネルアクセストークンと書かれた項目までスクロールします。
チャネルアクセストークンの右横にあるコピーアイコンをクリックし、控えておいて下さい（後で使います）

Google Apps ScriptでWebサービスを作成

次に、Google Apps ScriptでWebサービスを作成します。
Googleドライブにアクセスし、「新規」のボタンをクリックして下さい。

一覧から「その他」＞「Google Apps Script」を選択して下さい。

Google Apps Scriptが開かれます。

以下のソースコードをコピーして下さい。

const CHANNEL_ACCESS_TOKEN = 'アクセストークンに置き換え';
const LINE_ENDPOINT = 'https://api.line.me/v2/bot/message/reply';

function doPost(e) {
  var json = JSON.parse(e.postData.contents);
  var replytoken= json.events[0].replyToken;
  if (typeof replytoken === 'undefined') {
    return;
  }
  var message = json.events[0].message.text;

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

コピーしたテキストを下記の赤枠に貼り付けます。貼り付ける際に、既にfunction myFunction()…というテキストが表示されていますが、一度テキストを全削除し上書きします。