Help us understand the problem. What is going on with this article?

LINE WORKSで初めてのBot開発!(前編)

More than 1 year has passed since last update.

LINE WORKSでBotを開発してみたい!ということで、今までBotを開発したことがない方向けに、手順を紹介したいと思います。

プログラミング初心者の方でも(多分)気軽にチャレンジできる内容になっていると思いますので、是非試してみてください^^
LINE WORKSってそもそもなーに?って方はこちら→LINE WORKS
また、この記事は、前編・後編に分かれています。

後編はこちら→ LINE WORKSで初めてのBot開発!(後編)

出来上がりイメージ

今回の記事は、トークでつぶやかれたメッセージをそのまま投稿し返すBotを作ります。
出来上がりはこんな感じです。
image.png

BotサーバーとしてHeroku、言語はNode.jsを使います。
あと、Macでの開発方法を紹介しています。Windows版も書いて!という方はコメントください。

Developer ConsoleでAPIを使うための設定とBotを登録する

Developer Console設定

Developer Consoleへアクセス

Developer Consoleへアクセスします。
②LINE WORKSのIDを入力してログインします。
image.png

下記画面が出力された場合は、Developer Consoleへのアクセス権限がありません。Developer Consoleへアクセスするためには、ライトプラン以上のテナントの「最高管理者」もしくは「副管理者」の権限が必要です。権限の付与手順は、こちらを参考にしてください。
image.png

③[LINE WORKS APIサービス利用規約]を確認し、[APIサービス利用規約の内容を理解し、これに同意します。]にチェックを入れ、[利用する]ボタンをクリックします。
image.png

API IDを発行する

LINE WORKS Bot Platform APIを使うにあたり、ドメインごとに「API ID」が必要となります。「API ID」はDeveloper Consoleで発行します。

①[Developer Console]へアクセスします。
②[API]メニューの一番上にある[API ID]の[発行]ボタンをクリックします。
image.png

③API IDが発行されました!
image.png

サーバーAPIのコンシューマーキーを発行する

Botがユーザーにメッセージを送信する時には「サーバーAPI」を利用します。
また、サーバーAPIを利用する時には、「サーバーAPIコンシューマーキー」と「Server Token」をヘッダーに含める必要があります。まず、Developer Consoleで「サーバーAPIコンシューマーキー」を発行します。
①Developer Consoleへアクセスします。
②[API]メニューの真ん中にある[Server API Consumer Key]の[発行]ボタンをクリックします。
image.png

③サーバーAPIの利用範囲を聞かれるダイアログが表示されます。今回はBotのみ利用するため、[トークBot]を選択し、[次へ]をクリックします。
image.png

④[Tokenの有効期間]はデフォルト90日となっていますが、ここで値を変更することが可能です。また、Tokenを利用した時に自動的にTokenの有効期限を延長する場合は、[Tokenの使用時に有効期間を自動延長しますか?]にて、[はい]を選択します。
image.png

⑤サーバーAPIコンシューマーキーが発行されました!
image.png

Server Listを追加する

次に、サーバーAPIを利用する時にヘッダーに含める必要がある「Server Token」についてですが、「Server Token」を取得するためには「サーバーID」と「認証キー」が必要となります。Developer Consoleでこの2つを発行しましょう。
ちなみに、このServer Tokenも2種類「固定IPタイプ」と「ID登録タイプ」があります。今回は、Botをホストするサーバーはクラウド上のサーバーを使いたいのでIPアドレスが変わります。そのため、今回は「ID登録タイプ」を使います。

①Developer Consoleへアクセスします。
②[API]メニューの一番下にある[追加]ボタンをクリックします。
image.png

③表示されたダイアログの[サーバー名]欄には任意の値を入力してください。
[Keyの選択]で、先程発行したService API Consumer Keyを選択し、[保存]します。
image.png

④サーバーIDが追加され、認証キーがダウンロードできるようになりました!
image.png

Bot登録

①左の[Bot]メニューをクリックし、[Botを登録]もしくは[登録]ボタンをクリックします。
image.png

②Botの設定をしていきます。

項目名 設定値
Bot名 任意の名前を設定します。
説明 Botの説明文を設定します。
ユーザーがBotを選ぶ時にわかりやすい文を追加しましょう。
Callback URL [On]を選択します。
URL欄は、HerokuのWebアプリケーションURLを入力します。今回は、「https://<HerokuのWebアプリケーション名>.herokuapp.com/callback」と入力しましょう。
[メッセージが送信可能なメッセージタイプ]にて、Botが送信できるメッセージタイプを選びます。今回はテキストだけ送るため、[テキスト]にチェックを入れます。
Botポリシー-トークルームへの招待 グループトークでBotを使う場合は、[複数人のトークルームに招待可]にチェックを入れます。
管理者-主担当 Botの管理者を設定します。

全部設定すると、下記のようになります。
image.png

③[保存]ボタンをクリックします。

Botサーバーを用意する

Botサーバーの用意

ユーザーのメッセージを受信して返信するBotを運用するサーバーを用意します。今回は無料でWebアプリケーションの公開ができるHerokuを使います。

Herokuアカウント作成

Herokuアカウント作成します。こちらから作成してください。

ローカル端末設定

下記をローカル端末へインストールをしてください。

Botサーバー初期設定・起動

①ローカルにBot用のディレクトリを作成します。

$ mkdir oumubot
$ cd oumubot

②Botのプロジェクトを作成します。

$ npm init

上記コマンドを実行するといくつか質問が聞かれるので、それに回答していきます。(※取り急ぎ、全てEnterでも動作に支障はありません。)全て回答すると、package.jsonファイルが作成されます。
下記は実行例です。

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (oumubot) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/.../Projects/oumubot/package.json:

{
  "name": "oumubot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes)
$

③Bot用のディレクトリに配下に下記2ファイル作成します。

  • .gitignore Gitの管理に含めないファイルを指定するファイルです。
.DS_Store
.gitignore
npm-debug.log
node_modules
  • Procfile アプリの起動に必要なファイルです。
Procfile
web: node index.js

④Node.jsで利用できるWebアプリケーションフレームワークであるexpressというパッケージをインストールします。

$ npm install express --save

—saveオプションをつけることによって、package.jsonに記載します。

⑤Expressを使ってWebアプリケーションが起動するindex.jsファイルを作成します。
まずは、サーバー起動の部分だけ記載しておきます。

index.js
"use strict";

// モジュールインポート
const express = require("express");
const server = express();

// Webアプリケーション起動
server.listen(process.env.PORT || 3000);

// サーバー起動確認
server.get('/', (req, res) => {
    res.send('Hello World!');
});

// Botからメッセージに応答
server.post('/callback', (req, res) => {
    res.sendStatus(200);
});

Gitリポジトリの作成とコミット

Herokuへデプロイするためには、Gitレポジトリで管理する必要があります。そのため、Gitレポジトリを作成します。
①Gitリポジトリを作成します。

$ git init

②ローカルのファイル・ディレクトリをインデックスに登録します。

$ git add .

③に追加されたファイルをコミットします。

$ git commit -m 'commit message'

④Herokuへログインします。

$ heroku login
heroku: Enter your login credentials
Email: <HerokuアカウントのEメールアドレス>
Password: ***********
Logged in as <HerokuアカウントのEメールアドレス>

⑤Herokuでアプリケーションを作成します。

$ heroku apps:create <アプリケーション名>
Creating ⬢ <アプリケーション名>... done
https:// <アプリケーション名>.herokuapp.com/ | https://git.heroku.com/<アプリケーション名>.git

[注意]
Herokuアプリケーション名は、Herokuの世界の中で重複が不可です。「Name <アプリケーション名>is already taken」というメッセージが出力されたら、違うアプリケーション名に修正しましょう。

⑥ローカルのGitリポジトリをHerokuアプリと紐付けます。

$ git remote add heroku https://git.heroku.com/<アプリケーション名>.git

⑦Herokuへプッシュします。

$ git push heroku master

⑧下記URLへアクセスし、「Hello World!」とページに出力されていたら成功です。

⑨ログを確認する場合は、下記コマンドで確認できます。

$ heroku logs –tail

後編に続きます

ここまででBotを開発する基盤がほぼ整いました。
いよいよBotを開発していきますが長くなってしまったので、少し休憩してから後編にいきましょう!

後編はこちら→LINE WORKSで初めてのBot開発!(後編)

tokotan
LINE WORKS→Box。 Qiitaの記事は個人の見解であり、所属する組織の公式見解ではありません。 趣味は、電子工作です。夫婦で「SHK」と言う名称でMakerFaireTokyoに出展したりしました。 http://makezine.jp/event/makers2018/m0265/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away