プログラミング未経験者向け Node.js で LINE Bot 開発講座 資料１（おうむ返しbot編）

#はじめに
資料は2部構成になっています。
後半の資料はこちらです。
[プログラミング未経験者向け Node.js で LINE Bot 開発講座 資料2（テンプレートメッセージ編）](https://qiita.com/shinbunbun_/items/81db9b7973553b2d665d)

#LINEDevelopersにログインしよう！
1. [LINEDevelopers](https://developers.line.biz/ja/)にアクセスします
2. 真ん中のログインボタンをクリックします<img width="1440" alt="スクリーンショット 2019-02-07 16.36.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/29640903-5d65-2077-7b58-e5af745d8a34.png">
3. 「LINEアカウントでログイン」を選択します
<img width="1440" alt="スクリーンショット 2019-02-07 16.40.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/f1a04967-5dc7-ea22-ab3f-267506edeb4e.png">
4. 「QRコードログイン」を選択します
<img width="1440" alt="スクリーンショット 2019-02-07 16.41.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/91e1193c-d231-5aef-0be4-fe2c5ebd469e.png">
5. LINE（スマホアプリ）からQRコードを読み取ると以下のような画面が出るので、「ログイン」をクリックします
<img height="500" alt="スクリーンショット 2019-02-07 16.40.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/176ba109-0dc5-54b2-167c-07ce51f51c19.png">

6. PCに以下のような画面が表示されるので、この数字をLINE（スマホアプリ）上に表示される入力フォームに入力するとログインが完了します
<img width="1440" alt="スクリーンショット 2019-02-07 16.44.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/d0ad78d6-2142-6c67-f2c9-68d6a69d480d.png">

7. 開発者情報を入力してから、「確認画面へ進む」をクリックし、「この内容で作成する」をクリックします
 ![スクリーンショット 2019-02-07 16.47.16.png](https://qiita-image-store.s3.amazonaws.com/0/260292/8fb314b2-b7d3-c7e9-05c4-fa6b4de17361.png)
8. 登録完了です！

#Botのプロバイダーを作成しよう！
1. 登録が完了すると以下のようなコンソールが表示されるので、「新規プロバイダー作成」をクリックします<img width="1440" alt="スクリーンショット 2019-02-07 16.48.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/b0f66a04-5af4-5b5c-b076-62051a900e1d.png">

2. プロバイダー名を入力して、「確認する」をクリックします
<img width="1440" alt="スクリーンショット 2019-02-07 16.52.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/27955150-8e65-4cc8-b8c6-e41f22463283.png">

3. 「作成する」をクリックします
<img width="1440" alt="スクリーンショット 2019-02-07 16.52.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/afb2e924-0fbb-6297-26fc-1a64410b937d.png">

4. 作成完了です！

#Botのチャネルを作成しよう！
1. プロバイダーの作成が完了すると以下のような画面が表示されるので、「Messaging API」を選択します
<img width="1440" alt="スクリーンショット 2019-02-07 16.53.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/76de7cd6-833b-d22b-5946-1fe01a70a4b5.png">

2. 必要事項を全て入力してから、一番下にある「入力内容を確認する」をクリックして、「作成」をクリックして下さい（業種や説明は適当で大丈夫です）
<img width="1440" alt="スクリーンショット 2019-02-07 16.55.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/2da43def-a864-098a-c610-85d2c19773fe.png">

<b>※プランについて</b>
「Developer Trial」は50人までしか友達追加される事が出来ませんが、PUSHMessageを利用する事が出来ます。「フリー」は友達追加数は無制限ですが、PUSHMessageを利用する事が出来ません。（2019年春にプラン改定でフリープランでもPUSHAPIが利用できるようになります。詳しくは[こちら](http://blog-at.line.me/archives/52626249.html)をご参照ください）
今回は「Developer Trial」を選択してください。

3.作成完了です！あとでまた使用する為、この画面は開いたままにしておいて下さい。

#Botを動かす環境を構築しよう！
1. [こちら](https://github.com/shinbunbun/2019-2-11-hands-on)にアクセスして、「Clone or download」→「Download ZIP」からbotのコードをzipファイルでダウンロードしてください
<img width="1425" alt="スクリーンショット 2019-02-07 22.11.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/d857058f-1939-8f6f-83cf-b16a876e31e0.png">

###Windowsの場合
2.ダウンロードしたファイルを右クリックして「プロパティ」を選択します
<img width="398" alt="スクリーンショット 2019-02-11 10.01.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/0511ae79-afbb-7195-2274-6f74990a7145.png">

3.「許可する」にチェックを入れて、「適用」→「OK」を押します
※これをしないと稀に動かないことがあるらしいです
<img width="435" alt="スクリーンショット 2019-02-10 23.30.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/af58535c-ee7b-e25d-457d-d5c2e5f044a0.png">

4.ダウンロードしたファイルを右クリックして「全て展開」→「展開」で解凍します
<img width="1440" alt="スクリーンショット 2019-02-07 22.12.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/0c4454c5-b243-f90c-fc48-d180661a13cf.png">

###Macの場合
2&3&4.ダウンロードしたファイルをダブルクリックして解凍します
<img width="1440" alt="スクリーンショット 2019-02-07 22.23.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/5053ecad-f47d-cc46-e0d8-ad9f28313a15.png">

###ここから共通
5.Visual Studio Code（ここからはVSCodeと表記します）を開いて下さい
6. 「OpenFolder」をクリックします
<img width="1440" alt="スクリーンショット 2019-02-08 17.48.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/29a58c94-748f-8d78-6cfc-cc5d4d5db7c6.png">
7. さっき解凍したフォルダー(2019-2-11-hands-on-master)を選択して、「フォルダーの選択」をクリックします
<b>※フォルダが2重になっている場合があります。その場合は必ず「index.js」のファイルがあるディレクトリの親フォルダ（一つ上のディレクトリ）を選択してください<b>
<img width="412" alt="スクリーンショット 2019-02-11 10.09.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/ae1be42b-8a54-bfea-00a2-bfa22687c812.png">


<b>ここからはコマンドを使用した作業をします</b>

8.「terminal」を選択して下さい
<img width="496" alt="スクリーンショット 2019-02-09 23.26.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/6d05e38b-b26b-6df1-23c6-993a6ea9707f.png">

9.「New Terminal」を選択して下さい
<img width="641" alt="スクリーンショット 2019-02-09 23.26.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/3470412f-7b93-bd76-1252-1a4220552401.png">

10.以下のように画面下部にターミナルが開かれるので、以下のコマンドを入力します

```terminal
npm i
```

<img width="1322" alt="スクリーンショット 2019-02-10 23.42.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/4099c27d-2ba6-f61f-83d6-b48ad6324e7a.png">


11.ngrokをインストールしていない人は以下のコマンドを入力して下さい

```terminal
npm install ngrok -g
```

12.作業フォルダが以下のような構成になっていればOKです
<img width="341" alt="スクリーンショット 2019-02-09 23.45.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/5bc7b7b7-e58b-bc1d-9bb7-fddafcaa8e95.png">

13.先程開いたLINEDevelopersのページを開いて、作ったbotを選択します
14. 下の方に行くと「アクセストークン（ロングターム）」という項目の隣に「再発行」というボタンがあるので、それを選択します
15. そのまま「再発行」ボタンを押します
<img width="1440" alt="スクリーンショット 2019-02-08 19.50.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/c5c22dad-9f39-32b6-fb36-5d3d680b009a.png">

16.表示された文字列をコピーします
17. VSCodeに戻り、「index.js」を選択します
<img width="1440" alt="スクリーンショット 2019-02-08 17.51.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/5757557b-302c-6d11-7d0a-2a0180643ad8.png">

18.6行目のシングルクォートの間（下の画像で「とーくん」入っているところ）に先程コピーしたアクセストークンを貼り付けます
<img width="482" alt="スクリーンショット 2019-02-10 1.10.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/3ad449bb-7646-12d4-553e-de1012283878.png">

19.LINEDevelopersのページに戻って、「Channel Secret」をコピーします
![スクリーンショット 2019-02-08 20.01.58.png](https://qiita-image-store.s3.amazonaws.com/0/260292/a6f6ed43-1896-2302-c6d7-eec80d1975dd.png)

20.index.jsの7行目のシングルクォートの間（下の画像で「しーくれっと」と入っているところ）に貼り付けます
<img width="482" alt="スクリーンショット 2019-02-10 1.10.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/3ad449bb-7646-12d4-553e-de1012283878.png">

21.control+Sボタンで保存します(Macはcommand+Sキー)
22.以上で環境構築は完了です！

#Botを動かしてみよう！
1. VSCodeのターミナルに以下のコマンドを入力して下さい

```terminal
node index.js
```

2.「Server running at 3000」と表示されたことを確認して下さい
※以下のような表示が出たら、そのまま「アクセスを許可する」を選択して下さい
<img width="1440" alt="スクリーンショット 2019-02-08 20.08.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/19319169-950d-7cbc-136d-081e6116602a.png">

###ngrokのPATHが通っている人(brewやnpmでngrokをインストールした人)

3.「terminal」を選択して下さい
<img width="496" alt="スクリーンショット 2019-02-09 23.26.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/6d05e38b-b26b-6df1-23c6-993a6ea9707f.png">

4.「New Terminal」を選択して下さい
<img width="641" alt="スクリーンショット 2019-02-09 23.26.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/3470412f-7b93-bd76-1252-1a4220552401.png">

###ngrokのPATHが通っていない人(ngrokの公式ページからexeやUnix実行ファイルをDLした人)
3 & 4. DLしたexeやUnix実行ファイルをダブルクリックで開いて下さい

###ここから共通
5.以下のコマンドを入力して下さい。以下のような画面が表示されれば成功です
※ngrokのURLは8時間で失効しますので、8時間たったらngrokを再起動した後にwebhookURLを再登録して下さい。

```terminal
ngrok http --host-header=localhost:3000 3000
```

<img width="620" alt="スクリーンショット 2019-02-09 15.40.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/5e5ac8c7-a2d3-9932-a6a8-409d9a48c0a4.png">

6.Forwardingの「https://」から先をコピーします
※このURLはngrokを再起動する度に変更されます
<img width="630" alt="スクリーンショット 2019-02-10 1.14.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/d0cee422-1500-7452-2e64-10ad5fdccaad.png">


7.LINEDevelopersのページに戻って下さい
8.「Webhook URL」という項目があるので「編集」を押します

<font color="Red">**※以下の9と10の順番を間違えると正しく設定が反映されないことがあります。必ず「URLを登録」→「webhook送信を利用するにチェック」の順番で行なってください。**</font>

9.先程コピーしたURLを貼り付けて、更新ボタンを押します（行末に/webhookを追加して下さい）
<img width="1104" alt="スクリーンショット 2019-02-09 15.50.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/a3ba1025-9656-05e7-1699-75be0710d499.png">

10.「Webhook送信」という項目があるので、「編集」を押します
<img width="1115" alt="スクリーンショット 2019-02-09 15.43.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/de735c30-d906-4737-08c1-74b251df6174.png">

11.「利用する」にチェックを入れて「更新」を押します
<img width="1100" alt="スクリーンショット 2019-02-09 15.44.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/9b703213-d02d-5302-b2b1-88e98f02eac4.png">

12.「自動応答メッセージ」という項目があるので「編集」を押します
<img width="1152" alt="スクリーンショット 2019-02-09 15.52.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/3a77935f-4dcc-afe7-e144-3db5a0aa9ae8.png">

13.「利用しない」にチェックを入れて「更新」を押します
<img width="1161" alt="スクリーンショット 2019-02-09 15.52.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/f44a6aaa-36b9-6764-19bf-4b38e5e5768d.png">

14.下の方にQRコードがあるので、これをLINE（スマホアプリ）から読み取ってbotを友達追加します
![スクリーンショット 2019-02-10 1.42.59.png](https://qiita-image-store.s3.amazonaws.com/0/260292/abe8b2de-a51a-f66d-b2c4-de16f4e09646.png)

15.実際にbotにメッセージを送信して、送ったメッセージがそのまま返ってきたら完成です！
エラーが発生した場合はindex.jsを動かしているterminalにエラー内容が表示されるので、エラー内容をコピーしてネットで検索すると解決方法が見つかることが多いです。
また、成功した場合は、上記のterminalにユーザーから送られてきたメッセージが表示されているはずですので、そちらもご確認ください。
#おまけ
以下のように65から68行目をコメントアウトして71行目から81行目のコメントアウトを外すと、「こんにちは」というメッセージが送られてきたら「Hello World」と返信して、「おはよう」と送られてきおたら「Good Morning!!」と返信するという事が出来ます（それ以外のメッセージが送られてきたら反応しません）
<img width="1059" alt="スクリーンショット 2019-02-11 10.13.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/5d55b8bc-b366-258a-53eb-e26c20f5d55f.png">

コードを編集した後は必ずcontrol+S（Macはcommand+S）キーを押して保存をして下さい。
また、コードを変更をサーバに反映させるために、「node index.js」を行ったterminalをcontrol+Cキーで終了してから、再度「node index.js」と入力して下さい。