【非エンジニア向け】 手を動かして学ぶデジタル講座（その2）「LINEチャットボット作成入門」

実際に非エンジニアの一般社員の方々を対象に実施したオンライン講座です。
エンジニア育成を目的としているのではなく、一般社員がデジタルへの苦手意識をなくし関心を持ってもらう第一歩になることを目的としています。

前回はこちら
[【非エンジニア向け】 手を動かして学ぶデジタル講座（その1）「ホームページ作成入門」](https://qiita.com/tatsuya1970/items/4f0e9ac49e1a13fdda88)


<br>
では、はじめましょう。
<br>
所要時間は約60分です。


<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．講義までの事前準備

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

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

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

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

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

### (2) JSONファイルをダウンロード

以下のリンク先のJSON形式のファイル をダウンロードしてデスクトップに保存してください。
(ファイル名：flows1.json) 
https://www.dropbox.com/s/wnajktd3w73qpmd/flows1.json?dl=0

<br>

### (3) 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>

### (4) 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>


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


## 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/3c17b99ac6f48c73e26501a26fae6733.png)|
|:-:|

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

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

各ノードそれぞれに機能があり、ノードをつなげていく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/004a2a071d837db488a7f8dedf6091c2.png)|
|:-:|

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

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

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

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

こんな状態になります。

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


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


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

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

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

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

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

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

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



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. プログラムの読み込み

「読み込み」をクリック

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


「読み込むファイルを選択してください」をクリックし、
事前にデスクトップに保存の 「flows1.json」 を選択

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

「読み込み」をクリック

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


フロータブが１つ増え、こんな画面になります。

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


大勢に影響ないですが、不要なフロータブを消します。

さきほど作業してた「フロー１」のタブをダブルクリック
[![Image from Gyazo](https://i.gyazo.com/7b7784d7ffe28cc05e67147048a4e30c.png)](https://gyazo.com/7b7784d7ffe28cc05e67147048a4e30c)

「削除」をクリック
[![Image from Gyazo](https://i.gyazo.com/7fe327e0882ad71bbdf831a6b7394f0f.png)](https://gyazo.com/7fe327e0882ad71bbdf831a6b7394f0f)



（講師メモ：予定経過時間30分）
<br><br>
### 4-3. 各ノードの説明

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

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

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

自分のボットのチャンネルの
Messaging API設定（QRコードがあるところ）の最下層にあります。

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


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

|![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)は冒頭でやったことと同じです。（コードがちょっと違いますが）


ここまでできたら、
デプロイ


### 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/608312b44ca8af529da1ec11c94eb037.png)|
|:-:|

なにかURLが出てきます。

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

この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ペーストし、末尾に line を付けて、「更新」をクリック。
「webhookの利用」　を有効（緑色）にしてください。

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



### 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">2022.3.7更新
※2022.2.28 より、AWS や　Heroku にデプロイしなくても、enebular 単体で対応可能になったため修正<br>
</font>

今回作ったLINEのチャットボットをずっと使えるようにするには、こちらの記事をご参考にしてください。
https://qiita.com/tatsuya1970/items/b3ddad7c5c1b009f0051


<br>
<del>
ここまでは、enebular がを開いている状態しかLINEのチャットボットは動きません。
enebular は開発するためのツールで、動作をすぐに確認できるのですが、制限時間が１時間の縛りがあります。1時間ごとに更新すれば開発を続けることはできるのですが、そのたびにURLが変わり、LINE　Developersのwebhookアドレスも修正しないいけません。
したがって、実用化したい場合は、AWSやHerokuといったサービスにデプロイする必要があります。
今日ご自分で作ったチャットボットを今後ずっと使いたい方は、講座終了後ご自分で以下を試してください。
こちらに、Heroku　へのデプロイ方法を掲載してます。
https://qiita.com/tatsuya1970/items/cafe8967958e81e23457
</del>



<br>

## 6．今後

### 6-1. アイデアしだいで可能性は無限大

#### 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>

### 6-2. コミュニティ

今回のようなハンズオンや勉強会、登壇イベントなど、頻繁にイベントやってます。

[https://linedevelopercommunity.connpass.com/](https://linedevelopercommunity.connpass.com/
)

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




<br><br>

## 7．終わりに


これで、終わります。

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

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

<br>



<br>