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


2022年9月15日
[初心者向け：普通のサラリーマンによる「LINEチャットボットを作る！」enebularハンズオン](https://enebular.connpass.com/event/258453/)　の内容です。

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



<br>

## 1. まず最初に

### 1-1. 想定する対象者
こういったアプリケーションの開発というものをしたことのない方に教えるつもりで進めます。

### 1-2. 目標
理屈は分からなくていいので、とりあえずチャットボットを作る。

### 1-3. 完成イメージ

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/c0f999ba-4e79-f8b1-5239-a8182f9e8166.png" width="60%">


### 1-4．環境
- OS:  Windows10以上 または　masOS Catalina以上
- ブラウザ：Google Chrome 

<br>

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

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

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

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

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

[![Image from Gyazo](https://i.gyazo.com/65ac525b80c6ec0b80de80860bde202e.png)](https://gyazo.com/65ac525b80c6ec0b80de80860bde202e)

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

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

|![Image from Gyazo](https://i.gyazo.com/d8d0b076675ffcba8f1c108a1e808ba3.png)|
|:-:|

<br>
LINEアカウントでログイン

|![Image from Gyazo](https://i.gyazo.com/bab203c4363227653999f60df55bb982.png)|
|:-:|
<br>
メールアドレスまたはQRコードでログイン

QRコードログインの場合

|![Image from Gyazo](https://i.gyazo.com/abe8a5ba1c7b117812d801ed8ac66d69.png)|
|:-:|

<br>
こんな画面になる。

|![Image from Gyazo](https://i.gyazo.com/a4dfb0f7cd24f549b85fa8605d5e5c14.png)|
|:-:|

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

|![Image from Gyazo](https://i.gyazo.com/a2e49af725ad3f2160601cc65cb373bd.jpg)|
|:-:|


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

|![Image from Gyazo](https://i.gyazo.com/dd51693fef082033048a4d874d30bc9e.jpg)|
|:-:|

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

|![Image from Gyazo](https://i.gyazo.com/89a8a494f8e6044199dcb6f686c07a0a.png)|
|:-:|

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

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

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

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

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

<br>
右上の「サインイン」

[![Image from Gyazo](https://i.gyazo.com/315cfa8c6290f04256bfe7f3a93bf460.jpg)](https://gyazo.com/315cfa8c6290f04256bfe7f3a93bf460)

アカウントの作成

[![Image from Gyazo](https://i.gyazo.com/81d6895f609a904802ca160f0df49cab.png)](https://gyazo.com/81d6895f609a904802ca160f0df49cab)

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

[![Image from Gyazo](https://i.gyazo.com/c57b0f2e2e4f82800c3fecd193a1e349.png)](https://gyazo.com/c57b0f2e2e4f82800c3fecd193a1e349)


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

（メール画面）

|![Image from Gyazo](https://i.gyazo.com/b628980104e4dd3b10dedae3546f9c6d.png)|
|:-:|

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

[![Image from Gyazo](https://i.gyazo.com/3781cfaaa45b464000e2d6b94b95367c.png)](https://gyazo.com/3781cfaaa45b464000e2d6b94b95367c)

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

[![Image from Gyazo](https://i.gyazo.com/a769bb7472abc219f173ac7a2f3adb61.png)](https://gyazo.com/a769bb7472abc219f173ac7a2f3adb61)

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

<br><br><br>


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

（所要時間：約60分）

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

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

<B>(1) 実装化が比較的簡単</B>

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

<B>(2) 身近な人に自慢できる</B>

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


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

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

[![Image from Gyazo](https://i.gyazo.com/33de067e7a3d4c96c2be77392c2b7b3e.png)](https://gyazo.com/33de067e7a3d4c96c2be77392c2b7b3e)

LINEアカウントでログイン

|![Image from Gyazo](https://i.gyazo.com/bab203c4363227653999f60df55bb982.png)|
|:-:|


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

|![Image from Gyazo](https://i.gyazo.com/54bf79e7f1dca3a3a5e0325e7551e62d.png)|
|:-:|


|![Image from Gyazo](https://i.gyazo.com/4ea8cee2173870b2ded618883b2b5b65.png)|
|:-:|

|![Image from Gyazo](https://i.gyazo.com/30063ca49a6b20aa138268864123d99a.png)|
|:-:|

|![Image from Gyazo](https://i.gyazo.com/5ea770cca8bcad2f1bc9b2020a58e738.png)|
|:-:|

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

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

|![Image from Gyazo](https://i.gyazo.com/a57c002e2756aac0fd3fbf5f2217863a.png)|
|:-:|

|![Image from Gyazo](https://i.gyazo.com/3f69129f36ba1172225a440310f31e25.png)|
|:-:|

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

|![Image from Gyazo](https://i.gyazo.com/5c8cf83d8d87847bf0b4cc880ac7b580.png)|
|:-:|


[LINE Official Account Manager]をクリック

|![Image from Gyazo](https://i.gyazo.com/ed7e36727be39ea439df41b64599d7a5.png)|
|:-:|

「応答設定」をクリック

|![Image from Gyazo](https://i.gyazo.com/8a5600ba112c77d5edaad639e1e81fc7.png)|
|:-:|

<br>

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

|![Image from Gyazo](https://i.gyazo.com/d5365d1495bd4ceebddbb4034c110768.png)|
|:-:|


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

Messaging API設定　をクリック

|![Image from Gyazo](https://i.gyazo.com/7cf1ed1c8b11f4a9f345e2afcb5d0ca5.png)|
|:-:|


|![Image from Gyazo](https://i.gyazo.com/a54192f349d62cacfb74d038e7edf911.png)|
|:-:|


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


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

[![Image from Gyazo](https://i.gyazo.com/67a89771c987a22ac8fc1064a9b7c78d.png)](https://gyazo.com/67a89771c987a22ac8fc1064a9b7c78d)

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


## 3. enebular（エネブラー）

### 3-1.なぜ enebular？

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


### 3-2.enebularの基本

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

右上の「サインイン」
[![Image from Gyazo](https://i.gyazo.com/7ff4b5fc6e136579d5cc2644d7c38970.jpg)](https://gyazo.com/7ff4b5fc6e136579d5cc2644d7c38970)

プロジェクトの作成
[![Image from Gyazo](https://i.gyazo.com/736b11acacfcbe8338c0fcd1facdcf3e.png)](https://gyazo.com/736b11acacfcbe8338c0fcd1facdcf3e)

名前を入力　＞　送信
[![Image from Gyazo](https://i.gyazo.com/205db7d0110959686594159eacdf4923.png)](https://gyazo.com/205db7d0110959686594159eacdf4923)

作成したプロジェクトの名前をクリック
[![Image from Gyazo](https://i.gyazo.com/4b0f0cc14b01f8289028983e09a2a66f.png)](https://gyazo.com/4b0f0cc14b01f8289028983e09a2a66f)

こんな画面になるので、「＋」をクリック
[![Image from Gyazo](https://i.gyazo.com/0c4a57d5d61d7bbed8484cf600521b45.png)](https://gyazo.com/0c4a57d5d61d7bbed8484cf600521b45)

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

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

[![Image from Gyazo](https://i.gyazo.com/961fe4cb47437fc5e8fb242e0f87b88d.png)](https://gyazo.com/961fe4cb47437fc5e8fb242e0f87b88d)

こんな画面になる。
「編集」をクリック
[![Image from Gyazo](https://i.gyazo.com/ca48bd8cb119f503df3631719845d5f9.png)](https://gyazo.com/ca48bd8cb119f503df3631719845d5f9)


ちょっと待つ。


こんな画面になる。
[![Image from Gyazo](https://i.gyazo.com/6b11199bcc88d7a42c6e6deafc7760c4.png)](https://gyazo.com/6b11199bcc88d7a42c6e6deafc7760c4)

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

[![Image from Gyazo](https://i.gyazo.com/0dd7af36a1a6d96cc749e58cf9ae1f22.png)](https://gyazo.com/0dd7af36a1a6d96cc749e58cf9ae1f22)


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

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

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

|![Image from Gyazo](https://i.gyazo.com/748ade12fb3c562c3acf8b5336d5d75d.png)|
|:-:|

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

|![Image from Gyazo](https://i.gyazo.com/fcbe8db9e1a1f1881598c0d5c30aa766.gif)|
|:-:|

<br>
はい、これで、タイムスタンプを表示するというプログラムが完成しました。

<br>
保存ボタンをおしてください。

[![Image from Gyazo](https://i.gyazo.com/f2f803fe01dc54fbda53f0f933ca44b1.png)](https://gyazo.com/f2f803fe01dc54fbda53f0f933ca44b1)

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

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


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

[![Image from Gyazo](https://i.gyazo.com/1b9e73578a25f2706404ecbeab4ad67c.png)](https://gyazo.com/1b9e73578a25f2706404ecbeab4ad67c)


こんな状態になります。

[![Image from Gyazo](https://i.gyazo.com/cd89d8c8dfe505c7aed6f469eed3161e.png)](https://gyazo.com/cd89d8c8dfe505c7aed6f469eed3161e)


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


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

|![Image from Gyazo](https://i.gyazo.com/f8cfc4c3ee20c5abf212d5af0c2f344e.png)|
|:-:|

「Inject 処理を実行しました」
右サイドにプログラムの結果がでてますね。
[![Image from Gyazo](https://i.gyazo.com/064df78ad7351e5f8ce6d85b8c253334.png)](https://gyazo.com/064df78ad7351e5f8ce6d85b8c253334)

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

時間が出てきました。（グリニッジ標準時）
[![Image from Gyazo](https://i.gyazo.com/aef2d2a80935ad9891a0e4003f1baba5.png)](https://gyazo.com/aef2d2a80935ad9891a0e4003f1baba5)

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


<br>

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


### 4-1. 完成イメージ

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/c0f999ba-4e79-f8b1-5239-a8182f9e8166.png" width="60%">


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

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

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

[![Image from Gyazo](https://i.gyazo.com/e327033c04def0f36ec8ee68d8ff260d.jpg)](https://gyazo.com/e327033c04def0f36ec8ee68d8ff260d)


「linebot-handson 」で検索
[![Image from Gyazo](https://i.gyazo.com/477bb97d6271bf8fa5fdd7c47d6f6683.png)](https://gyazo.com/477bb97d6271bf8fa5fdd7c47d6f6683)

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

[![Image from Gyazo](https://i.gyazo.com/31f41141b1c9bb20652a6d2d1cf5dc88.png)](https://gyazo.com/31f41141b1c9bb20652a6d2d1cf5dc88)

「インポート」をクリック
[![Image from Gyazo](https://i.gyazo.com/dd02f00b45da57dc946bb168c063a869.png)](https://gyazo.com/dd02f00b45da57dc946bb168c063a869)


プロジェクトを選択して、「インポート」をクリック
[![Image from Gyazo](https://i.gyazo.com/1d850a1b9b0d3495d5c75f71f5a3a63c.png)](https://gyazo.com/1d850a1b9b0d3495d5c75f71f5a3a63c)


「編集」をクリック
[![Image from Gyazo](https://i.gyazo.com/993400a1c4013722ce6cd208ca09661b.png)](https://gyazo.com/993400a1c4013722ce6cd208ca09661b)

こんな画面になったらOK
[![Image from Gyazo](https://i.gyazo.com/159a768881dba313872420c4a6ff4cf1.png)](https://gyazo.com/159a768881dba313872420c4a6ff4cf1)

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

### 4-3. 各ノードの説明

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

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

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

[![Image from Gyazo](https://i.gyazo.com/9cfa8cc74855e304f477087098379208.png)](https://gyazo.com/9cfa8cc74855e304f477087098379208)


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

[![Image from Gyazo](https://i.gyazo.com/fafe56ef91146323b853d1e6005fdff0.png)](https://gyazo.com/fafe56ef91146323b853d1e6005fdff0)


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

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

|![Image from Gyazo](https://i.gyazo.com/3d5168bffa51fb21043568ca071e82df.png)|
|:-:|

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

|![Image from Gyazo](https://i.gyazo.com/cc90f913edfb2c4431c6187f57da3ce7.png)|
|:-:|




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

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

|![Image from Gyazo](https://i.gyazo.com/f2319f5897245e8efee509bdba106bff.png)|
|:-:|

<br>

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

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

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

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

<br>

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

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

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

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


|![Image from Gyazo](https://i.gyazo.com/2a8448d3ec86f5ad20de2d652fc0ed4d.png)]|
|:-:|


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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">一番伸びてるのはこれかしら。仕様の継続性や運用状況のお知らせを気象庁はお約束していないという意味で、APIではないと申し上げざるを得ないのですが、一方で政府標準利用規約に準拠してご利用いただけます。 <a href="https://t.co/QLuhI4DNDv">https://t.co/QLuhI4DNDv</a></p>&mdash; TOYODA Eizi (@e_toyoda) <a href="https://twitter.com/e_toyoda/status/1364504338572410885?ref_src=twsrc%5Etfw">February 24, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



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


<br>

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

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

|![Image from Gyazo](https://i.gyazo.com/bb5341729791797694dccf2d262a398b.png)|
|:-:|

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

<br>


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


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

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


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

|![Image from Gyazo](https://i.gyazo.com/dbdbf4ab8fbda5c23f7a8877e1c0ce1e.png)|
|:-:|

「変更をマージ」

|![Image from Gyazo](https://i.gyazo.com/b86ac3538a8a73d34dee2de9d06173cb.png)|
|:-:|

これを押してください

|![Image from Gyazo](https://i.gyazo.com/736399785dc51cbc9f5325ce4b2558eb.png)|
|:-:|

<br>

### 4-5. LINE Developersで Webhook の設定

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

[![Image from Gyazo](https://i.gyazo.com/c6066f4b13b75019a17f9a3b02967dd4.png)](https://gyazo.com/c6066f4b13b75019a17f9a3b02967dd4)


なにかURLが出てきます。
[![Image from Gyazo](https://i.gyazo.com/d0513be98dc4d4fdb6c79a83a3eb7a2e.png)](https://gyazo.com/d0513be98dc4d4fdb6c79a83a3eb7a2e)



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

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

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

|![Image from Gyazo](https://i.gyazo.com/f8e07e823aeace3f295b9aaffc3ef44b.png)|
|:-:|

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

|![Image from Gyazo](https://i.gyazo.com/5373fb528995928dc0a75ea23573df52.png)|
|:-:|

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

[![Image from Gyazo](https://i.gyazo.com/830ba95fc609d6fa834cc6b7594a47d8.png)](https://gyazo.com/830ba95fc609d6fa834cc6b7594a47d8)


「webhookの利用」　を有効（緑色）にしてください。
[![Image from Gyazo](https://i.gyazo.com/0bb47ec273460299fb4e2c9ab14bd664.png)](https://gyazo.com/0bb47ec273460299fb4e2c9ab14bd664)




### 4-6. LINEを開く

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/94c3bb3e-d26d-ea99-c555-40dcfe7e2641.jpeg" width="60%">


完成です！！


<br><br>




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

<font color="RED"><B>※時間に余裕があったらします。</B></font>


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

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

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

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

[![Image from Gyazo](https://i.gyazo.com/4afb619d83aa33d0be63dfd71c39d91c.png)](https://gyazo.com/4afb619d83aa33d0be63dfd71c39d91c)

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

[![Image from Gyazo](https://i.gyazo.com/d54beb170715f22d67d3cea3cdd32163.png)](https://gyazo.com/d54beb170715f22d67d3cea3cdd32163)


インポートをクリック
[![Image from Gyazo](https://i.gyazo.com/ea68f4290e20ccc78fcf684eec33b6ff.png)](https://gyazo.com/ea68f4290e20ccc78fcf684eec33b6ff)

インポートしたいプロジェクトを選んで「インポート」
[![Image from Gyazo](https://i.gyazo.com/f72b7543a39bf534169e0e3d8b5853dc.png)](https://gyazo.com/f72b7543a39bf534169e0e3d8b5853dc)

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

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

※ プランによって実行環境の数に限度があるので注意。（限度数は後述）<br>
実行環境が限度の場合環境構築のときエラーがでる。実行環境はフローの削除だけでなく「実行環境」を削除しないと完全に消えない。

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

[![Image from Gyazo](https://i.gyazo.com/e477603a1b0c85dcf5a039e27c2205e2.png)](https://gyazo.com/e477603a1b0c85dcf5a039e27c2205e2)

「＋」をクリック
[![Image from Gyazo](https://i.gyazo.com/6ddb7cc3adacfa5892ce5ed2a6fdf57e.png)](https://gyazo.com/6ddb7cc3adacfa5892ce5ed2a6fdf57e)

「OK」をクリック
[![Image from Gyazo](https://i.gyazo.com/3ccace14956e8832db6d98f5ea27823d.png)](https://gyazo.com/3ccace14956e8832db6d98f5ea27823d)

１，２分後
この画面になる。
[![Image from Gyazo](https://i.gyazo.com/7a2080da77e0dda89804b9db1b43a6dd.png)](https://gyazo.com/7a2080da77e0dda89804b9db1b43a6dd)


設定タグ　＞　設定を編集する
[![Image from Gyazo](https://i.gyazo.com/535c4420e0d129b4ce1ac6778011d34e.png)](https://gyazo.com/535c4420e0d129b4ce1ac6778011d34e)


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

[![Image from Gyazo](https://i.gyazo.com/982729a5ffae5f84f51e66750bbbe648.png)](https://gyazo.com/982729a5ffae5f84f51e66750bbbe648)

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

[![Image from Gyazo](https://i.gyazo.com/b16e709abe3431fad1d2f1b5c0d7f25f.png)](https://gyazo.com/b16e709abe3431fad1d2f1b5c0d7f25f)



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

このURLをコピーする。

[![Image from Gyazo](https://i.gyazo.com/61898eb200a6444df78d3fc5e9c7bea2.png)](https://gyazo.com/61898eb200a6444df78d3fc5e9c7bea2)


LINE Developer の　webhook URL　にペーストする。
[![Image from Gyazo](https://i.gyazo.com/592407d20884c0c9a821af012c13fc38.png)](https://gyazo.com/592407d20884c0c9a821af012c13fc38)



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

LCDP ノードで囲う
[![Image from Gyazo](https://i.gyazo.com/88b33938d1e030ad586a46e7b8d53de1.png)](https://gyazo.com/88b33938d1e030ad586a46e7b8d53de1)

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


<br>

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

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

[![Image from Gyazo](https://i.gyazo.com/d3b487f264988fe2e0059874dbafdadd.png)](https://gyazo.com/d3b487f264988fe2e0059874dbafdadd)

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

<br><br>


### 5-5.利用制限

#### プロジェクト内に作成できる実行環境数
・エンタープライズプランのプロジェクトの場合: 5
・トライアルプランのプロジェクトの場合: 2
・フリープランのプロジェクトの場合: 2


#### 月間当たりの利用上限

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

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

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


<br>

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

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



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

管理画面にログイン

|![Image from Gyazo](https://i.gyazo.com/adbd4444fcc9ce59be43e28298710398.png)|
|:-:|

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

|![Image from Gyazo](https://i.gyazo.com/fe2ce4d89d284ba681bec33e5f56290d.png)|
|:-:|




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

|![Image from Gyazo](https://i.gyazo.com/9163213204a11268c29739c571bcb480.png)|
|:-:|



リッチメニューを作成


|![Image from Gyazo](https://i.gyazo.com/50dcdc0c9cf2ba2c55c6a23fcdd245ae.png)|
|:-:|


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

[![Image from Gyazo](https://i.gyazo.com/5698633723b1e2d48a67de18cdc661f5.png)](https://gyazo.com/5698633723b1e2d48a67de18cdc661f5)


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

|![Image from Gyazo](https://i.gyazo.com/7f53547561db8d076338526e3750a49a.png)|
|:-:|

「設定」を押す
[![Image from Gyazo](https://i.gyazo.com/13bc0ee93dfeca20f8df13196d26f3f6.png)](https://gyazo.com/13bc0ee93dfeca20f8df13196d26f3f6)

「画像を作成」をクリック
[![Image from Gyazo](https://i.gyazo.com/a7afa7624418fa0828367cdf3ee74931.png)](https://gyazo.com/a7afa7624418fa0828367cdf3ee74931)


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

[![Image from Gyazo](https://i.gyazo.com/c4ac363301da8da0206cbbc8c3f4abf2.png)](https://gyazo.com/c4ac363301da8da0206cbbc8c3f4abf2)

できたら「適用」をクリック
[![Image from Gyazo](https://i.gyazo.com/ee7c18e15ce47c7174fe8761e89454cf.png)](https://gyazo.com/ee7c18e15ce47c7174fe8761e89454cf)

「適用」をクリック
|![Image from Gyazo](https://i.gyazo.com/d617e78b349bb4a178aae96a79d7c5e0.png)|
|:-:|


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

「保存」をクリック

[![Image from Gyazo](https://i.gyazo.com/5a91db4270bee30ae0efbaff5fb6d81f.png)](https://gyazo.com/5a91db4270bee30ae0efbaff5fb6d81f)

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

![272959547_4836108163104346_908754242108442216_n (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/f63210d3-4e94-314e-b161-72f7835e393e.jpeg)







<br>

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

<font color="RED"><B>※enebular ではないですが、ご参考まで</B></font>

#### API

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

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


#### 私の作品

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

https://www.slideshare.net/tatsuyatakemura/10-249504819


#### LIFF、LINEPAY

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


- LINE Pay 連携も簡単
この画像はためしにお弁当屋さんになったつもりで試しに作ってみたチャットボットです。
[![Image from Gyazo](https://i.gyazo.com/3973ee79b6c2694c8229b3ddcf8b2583.png)](https://gyazo.com/3973ee79b6c2694c8229b3ddcf8b2583)

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



<br>


## ８．終わりに


これで、終わります。

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

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

<br>



<br>