初心者向け：普通のサラリーマンによる「LINEチャットボットを作る！」enebularハンズオン

2022年9月15日
初心者向け：普通のサラリーマンによる「LINEチャットボットを作る！」enebularハンズオン　の内容です。

2022年6月16日に同じ内容でハンズオンをしました。
初心者向け：普通のサラリーマンによる「LINEチャットボットを作る！」enebularハンズオン

1. まず最初に

1-1. 想定する対象者

こういったアプリケーションの開発というものをしたことのない方に教えるつもりで進めます。

1-2. 目標

理屈は分からなくていいので、とりあえずチャットボットを作る。

1-3. 完成イメージ

こんなLINEのチャットボットを作ります。

1-4．環境

• OS: Windows10以上 または　masOS Catalina以上
• ブラウザ：Google Chrome

1-5．講義までの事前準備

以下の３点にご対応ください。

(1) チャットボットのアイコン画像

講座で作成するチャットボットに使うアイコン画像を用意して、デスクトップに保存してください。

ファイル形式：PNG、JPG、JPEG、GIF、BMP
ファイルサイズ：3 MB以内

(2) LINE Developers の登録（無料）

LINE Developers サイトを開き、ログインします。
→ https://developers.line.biz/ja/

LINEアカウントでログイン
メールアドレスまたはQRコードでログイン

QRコードログインの場合

こんな画面になる。

英語になってる人は、日本語に変えよう

必要情報を入力し、「アカウントを作成」

この画面がでたらOKです。

これでLINE側の準備は整いました。
ウィンドウを閉じても結構です。

(3) enebular（エネブラー） のアカウントを取得（無料）

enebular という　PaaS　で開発します。

PaaS（パース）とは Platform as a Service の略で、アプリケーションを実行するためのプラットフォームをインターネットを介して提供するサービスのことです。
PaaSを利用することで、アプリケーションの開発前段階で必要な開発プラットフォーム環境の準備（サーバーの設置/OSのインストール/ネットワークの設定など）を大幅に省略できます。
つまり、簡単に開発できるってことです。

以下のサイトにアクセス
↓↓
https://www.enebular.com/ja/

右上の「サインイン」

アカウントの作成

必要事項を入力し「アカウントの作成」

自分の登録したメールに確認メールが送られるので、
メールを開き、「Verify」をクリック

（メール画面）

再び enebular こんな画面がでたら、「ダッシュボードへ」

こんな画面になったらOKです。

これで enebular の開発環境が整いました。
ウィンドウを閉じても結構です。

以下、講座当日の内容です。

（所要時間：約60分）

2. LINEチャットボット について

2-1. なぜLINEチャットボットの開発をとりあげたのか？

(1) 実装化が比較的簡単

• LINEの画面を利用するのでUIを最初から考える必要がない
• LINEの開発者用のサイトでのいろいろな設定が簡単
• 情報が多い

(2) 身近な人に自慢できる

• 国内の月間利用者数８６００万人（日本人の約７０％が利用）
  ※LINE BUSINESS GUIDE (2021年1-6月期版)
• アプリのインストールが不要。（友達登録だけでOK）

2-2．LINEチャットボット開発前の設定

LINE Developersを開き、ログインします。
→ https://developers.line.biz/ja/

LINEアカウントでログイン

「新規プロバイダー作成」をクリック

• チャネルの種類：Messaging API
• プロバイダー: さっき作ったやつ
• 会社・事業所の所在地：入力
• チャネルアイコン：　持参したアイコン画像を入れよう
• チャネル名：　チャットボットの名前です。
• チャネル説明：　チャットボットの説明
• 大業種：入力
• 小業種：入力
• メールアドレス：入力
• プライバシーポリシーURL ：今回は入力不要
• サービス利用規約URL ：　今回は入力不要

・LINE公式アカウント利用規約 の内容に同意します
・LINE公式アカウントAPI利用規約 の内容に同意します
にチェックをいれて、
作成をクリック

チャットボットの設定ができました。

[LINE Official Account Manager]をクリック

「応答設定」をクリック

• 「応答メッセージ」をオフ
• 「Webhook」をオン

このウィンドウは閉じても可で、 さっきのウィンドウに戻る。

Messaging API設定　をクリック

みなさんのブラウザに表示されているQRコードを読んでください。

おお、チャットボットができてますね。

LINEのウィンドウはこのままにしておいてください。

3. enebular（エネブラー）

3-1.なぜ enebular？

• ウェブで開発できるので、受講者のOSに依存しない（全員同じ画面で授業ができる）
• NODE-RED というビジュアルプログラミングツールを使うので、プログラミング言語を知らなくてもある程度できる
• 本番環境へのデプロイが比較的容易

3-2.enebularの基本

enebular にアクセス
https://www.enebular.com/ja/

右上の「サインイン」

プロジェクトの作成

名前を入力　＞　送信

作成したプロジェクトの名前をクリック

こんな画面になるので、「＋」をクリック

「アセットの作成」の必要項目を入力する。

アセット種別：フロー
名称：なんでも可
説明：入れても入れなくても可
デフォルト権限：「編集、デプロイ、公開」

こんな画面になる。
「編集」をクリック

ちょっと待つ。

こんな画面になる。

ここで、これから使うenebular の用語を説明します。

各ノードそれぞれに機能があり、ノードをつなげていくNode-REDというビジュアルプログラミング開発ツールです。
Node-RED はプログラミング言語をそんなに知らなくてもアプリケーションを作成することができますが、ネット上での動作確認や本番環境を構築するのは結構大変です。

enebular は開発と動作確認、そして本番環境構築を簡単にしてくれるツールです。

それでは試しに、
パレットから「inject」ノードと「debug」ノードを選び、ワークスペースへドラッグ＆ドロップしてみてください。

このふたつをつなげてください。

はい、これで、タイムスタンプを表示するというプログラムが完成しました。
保存ボタンをおしてください。

「デプロイが成功しました」とメッセージがでたらOKです。

デプロイとは大雑把にいうと、プログラムを使える状態にすることです。

つぎに、このプログラムの動作を見るために、
右サイド上の「保存」の下にあるカナブンみたいなアイコンをクリックしてください。

こんな状態になります。

ここに、タイムスタンプを表示します。

では、プログラムを実行します。
タイムスタンプと書かれたノードの左側の取っ手のようなものをクリックしてください。

「Inject 処理を実行しました」
右サイドにプログラムの結果がでてますね。

この数字は機械用のタイムスタンプ。
人間が判別できるように、この数字をクリックしてください。

時間が出てきました。（グリニッジ標準時）

このenebular の画面は閉じてください。

4．チャットボットを作る

4-1. 完成イメージ

冒頭でお見せしましたが再度

4-2. プログラムの読み込み

本日のハンズオンのプログラム（NODE)は、enebular の公開アセットとして登録してます。

さっきの画面に戻り、
「Discover Assets」
をクリック

「linebot-handson 」で検索

検索結果が２つ、
名前が「linebot-handson-202209」（末尾が202209）の方をクリック

「インポート」をクリック

プロジェクトを選択して、「インポート」をクリック

「編集」をクリック

こんな画面になったらOK

（講師メモ：予定経過時間30分）

4-3. 各ノードの説明

「[post]/line」ノード（http in ノード）

「[post]/line」ノード（http in ノード）をダブルクリックします。

ここは、LINEからの情報を最初に受けるノードです。
今は 「 /line 」 と入力されてますが、ここのURL欄に他のenebularユーザーが使いそうにないユニークなパス（例：/tatsuya20220915 ）を入力します。
後ほどLINEのwebhook 設定をするときに関係します。

「(1)LINE情報ゲット」ノード（function ノード）

「(1)LINE情報ゲット」ノード（function ノード）をダブルクリックし、
「チャネルアクセストークン」と書いてあるところをLINE developers サイトにある自分のチャネルアクセストークンで上書きします。

※チャネルアクセストークンはLINE developerサイトの
https://developers.line.biz/console/

自分のボットのチャンネルの
Messaging API設定（QRコードがあるところ）の最下層で、「発行」ボタンをクリックしてください、

復習しますと、以下の画像のような流れです。

「(2) 分岐」ノード（switch ノード）

ここで分岐させてます。
修正事項はありません。

APIについて

以降、APIから情報を取得するノードの説明に入る前に、APIについて簡単に説明します。

APIとは、
「Application Programming Interface」の頭文字です。
一言で表すと、ソフトウェアやプログラム、Webサービスの間をつなぐインターフェースのことを指します。

今回使うAPIは、リクエストすると何か情報をくれるものを使います。
（天気、猫の画像）

APIがなかったらこういう情報を取得するのは大変です。

「(3-1)天気API」ノード（http requestノード）

赤線で囲ったURLが気象庁のAPIのURLです。
URLの末尾340000.json で広島地方を指します。

この地域番号は以下の気象庁公式からお住まいの地域を選択したURLをよく見ればわかります。
https://www.jma.go.jp/bosai/forecast/

ノードの意味を大雑把にいうと、URL記載の情報をGETするという意味になります。
修正事項はありません。

]

ちなみに、このAPIは、気象庁の中の人が、「運用を安定的に保証してなく正式なAPIとはいえないけど、政府標準利用規約に準拠してご利用いただけます」とツイッターで呟かれてます。

一番伸びてるのはこれかしら。仕様の継続性や運用状況のお知らせを気象庁はお約束していないという意味で、APIではないと申し上げざるを得ないのですが、一方で政府標準利用規約に準拠してご利用いただけます。 https://t.co/QLuhI4DNDv

— TOYODA Eizi (@e_toyoda) February 24, 2021

そして、
(3-2) でボットがつぶやく文を作成し、(6)でLINEに送ってます。

「(4-1)猫API」ノード（http requestノード）

さきほどの「天気API」と同様に、ここでは、猫の画像をランダムで取得する「猫API」のURLから猫画像をGETする設定をしています。

天気APIと同様に、(4-2) でボットがつぶやく文を作成し、(6)でLINEに送ってます。

(5)は冒頭でやったことと同じです。（コードがちょっと違いますが）

ここまでできたら、
右上の「保存」をクリック

※エラーがでたら、functionノードの変数に const　を入れたら直る。

4-4. もし「差分を確認」というメッセが出たら、

「変更をマージ」

これを押してください

4-5. LINE Developersで Webhook の設定

デプロイ成功後
enebular の右上の[i] をマウスオーバー

なにかURLが出てきます。

このhttpsから始まるURLをコピーし、

さっきの、LINE Developers の画面に戻り、

Webhook設定の「編集」をクリックしてください。

「webhookを入力してください」と出るので、

さっきのURLペーストし、末尾に 先ほどのユニークなパス　（例：/tatsuya20220915） を付けて、更新をクリック

「webhookの利用」　を有効（緑色）にしてください。

4-6. LINEを開く

スマホのLINEを開き、天気、猫と打ってみると、

完成です！！

5．ずっと使えるようにするには　

※時間に余裕があったらします。

ここまでは、enebular がを開いている状態でしかLINEのチャットボットは動きません。（webhook用のURLの有効時間は1時間）

以下、今回作ったLINEのチャットボットをずっと使えるようにする方法です。

5-1. LCDP in / outノードのインポート

Discover Assets へ
検索欄に　lcdp-toolkit　と入力し、プルダウンから名称を選択

lcdp-toolkit（下画像右側）をクリック

インポートをクリック

インポートしたいプロジェクトを選んで「インポート」

しばらくたってもうんともすんとも言わない場合は、リロードしてみてください。

5-2.クラウド実行環境

※ プランによって実行環境の数に限度があるので注意。（限度数は後述）

実行環境が限度の場合環境構築のときエラーがでる。実行環境はフローの削除だけでなく「実行環境」を削除しないと完全に消えない。

アセット画面の「クラウド実行環境」をクリック

「＋」をクリック

「OK」をクリック

１，２分後
この画面になる。

設定タグ　＞　設定を編集する

HTTP トリガーを「ON」
パスを入力　（先ほど設定したユニークなパス）
「保存」をクリック

ここで、もし以下の画像のようなエラーが出ると、パスはユニークではない（他のenebular利用者が既に使っている）ということなので、パスを変えてください。（遡って、enebularのノード内のパスも変えること）

エラーが出ない場合、
少し経つと、こんな画面になる。
下画像の赤で囲ったURLが、LINE
LINE APIの　webhook アドレスになる。

このURLをコピーする。

LINE Developer の　webhook URL　にペーストする。

5-3.フロー画面の編集

LCDP ノードで囲う

右上の「保存」をクリック！

5-4. 実行環境デプロイ

次は実行環境でデプロイ！

これで、enebular で作成した LINEのチャットボットがずっと使えます。

5-5.利用制限

プロジェクト内に作成できる実行環境数

・エンタープライズプランのプロジェクトの場合: 5
・トライアルプランのプロジェクトの場合: 2
・フリープランのプロジェクトの場合: 2

月間当たりの利用上限

• エンタープライズ
  HTTPリクエスト回数 3,000,000回
  実行時間 1000時間
  ログサイズ 5GB

-トライアルおよびフリー
HTTPリクエスト回数 50,000回
実行時間 24時間
ログサイズ 0.1GB

制限されても、次の月の1日1時頃(UTC時間)に制限は解除されます。

６．（参考）ボタンの設定方法

チャットボットらしくボタンの作り方

ここからLINE公式アカウントにログイン
https://www.linebiz.com/jp/login/

管理画面にログイン

いままで作ったチャットボットが一覧ででる。
該当のチャットボットをクリック

左サイド　の　トークルーム管理　＞　リッチメニュー

リッチメニューを作成

タイトルと表示期間を入力し、テンプレートを選択

テンプレートを選ぶ。
今回は、天気と猫と口座残高という3種類なので、以下の画像のテンプレートを選ぶ。

「設定」を押す

「画像を作成」をクリック

ボタンの編集画面になるので、好きな色、画像、テキストで作ってみてください。
（5分）

できたら「適用」をクリック

「適用」をクリック

A　タイプ：テキストで「天気」
B　タイプ：テキストで「猫」
C　タイプ：テキストで「口座残高」

「保存」をクリック

自分のスマホで　LINE　を開くと
画面の下部にボタンが反映されていて、
テキストを入力しなくてもボタンを押せば事足りるようになりましたね。

７．（参考）アイデアしだいで可能性は無限大

※enebular ではないですが、ご参考まで

API

• 雑談API
  チャットボットといえば、やっぱAIだよねー　て人には
  こちらに雑談チャットボットの作り方を掲載してます。
  https://qiita.com/tatsuya1970/items/0549357aff42969f9ebd

• 無料で簡単に使えるAPI集
  https://zenn.dev/protoout/books/public-apis-api-get

私の作品

以下のリンク先はLINEのコミュニティのイベントで発表したスライドで、私が今まで作ったチャットボットです。
このようにチャットボットでIoTなどアイデア次第で可能性は無限大です。

LIFF、LINEPAY

• LINE Front-end Framework
  LINE 上で動くウェブアプリを作ることができます。

• LINE Pay 連携も簡単
  この画像はためしにお弁当屋さんになったつもりで試しに作ってみたチャットボットです。
  

こちらに作成方法を載せてます。
https://qiita.com/tatsuya1970/items/bdb3209e80aa258ee927

８．終わりに

これで、終わります。

これがキッカケで、ITやデジタルにさらに興味深くなっていただければ幸いです。

ありがとうございました。