Edited at

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


はじめに

資料は2部構成になっています。

後半の資料はこちらです。

プログラミング未経験者向け Node.js で LINE Bot 開発講座 資料2(テンプレートメッセージ編)


LINEDevelopersにログインしよう!



  1. LINEDevelopersにアクセスします

  2. 真ん中のログインボタンをクリックしますスクリーンショット 2019-02-07 16.36.47.png

  3. 「LINEアカウントでログイン」を選択します
    スクリーンショット 2019-02-07 16.40.27.png

  4. 「QRコードログイン」を選択します
    スクリーンショット 2019-02-07 16.41.42.png

  5. LINE(スマホアプリ)からQRコードを読み取ると以下のような画面が出るので、「ログイン」をクリックします

    スクリーンショット 2019-02-07 16.40.27.png


  6. PCに以下のような画面が表示されるので、この数字をLINE(スマホアプリ)上に表示される入力フォームに入力するとログインが完了します

    スクリーンショット 2019-02-07 16.44.02.png


  7. 開発者情報を入力してから、「確認画面へ進む」をクリックし、「この内容で作成する」をクリックします

    スクリーンショット 2019-02-07 16.47.16.png


  8. 登録完了です!



Botのプロバイダーを作成しよう!


  1. 登録が完了すると以下のようなコンソールが表示されるので、「新規プロバイダー作成」をクリックしますスクリーンショット 2019-02-07 16.48.46.png


  2. プロバイダー名を入力して、「確認する」をクリックします

    スクリーンショット 2019-02-07 16.52.11.png


  3. 「作成する」をクリックします

    スクリーンショット 2019-02-07 16.52.48.png


  4. 作成完了です!



Botのチャネルを作成しよう!


  1. プロバイダーの作成が完了すると以下のような画面が表示されるので、「Messaging API」を選択します

    スクリーンショット 2019-02-07 16.53.03.png


  2. 必要事項を全て入力してから、一番下にある「入力内容を確認する」をクリックして、「作成」をクリックして下さい(業種や説明は適当で大丈夫です)

    スクリーンショット 2019-02-07 16.55.38.png


※プランについて

「Developer Trial」は50人までしか友達追加される事が出来ませんが、PUSHMessageを利用する事が出来ます。「フリー」は友達追加数は無制限ですが、PUSHMessageを利用する事が出来ません。(2019年春にプラン改定でフリープランでもPUSHAPIが利用できるようになります。詳しくはこちらをご参照ください)

今回は「Developer Trial」を選択してください。

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


Botを動かす環境を構築しよう!



  1. こちらにアクセスして、「Clone or download」→「Download ZIP」からbotのコードをzipファイルでダウンロードしてください
    スクリーンショット 2019-02-07 22.11.34.png


Windowsの場合

2.ダウンロードしたファイルを右クリックして「プロパティ」を選択します

スクリーンショット 2019-02-11 10.01.50.png

3.「許可する」にチェックを入れて、「適用」→「OK」を押します

※これをしないと稀に動かないことがあるらしいです

スクリーンショット 2019-02-10 23.30.18.png

4.ダウンロードしたファイルを右クリックして「全て展開」→「展開」で解凍します

スクリーンショット 2019-02-07 22.12.28.png


Macの場合

2&3&4.ダウンロードしたファイルをダブルクリックして解凍します

スクリーンショット 2019-02-07 22.23.39.png


ここから共通

5.Visual Studio Code(ここからはVSCodeと表記します)を開いて下さい

6. 「OpenFolder」をクリックします

スクリーンショット 2019-02-08 17.48.32.png

7. さっき解凍したフォルダー(2019-2-11-hands-on-master)を選択して、「フォルダーの選択」をクリックします

※フォルダが2重になっている場合があります。その場合は必ず「index.js」のファイルがあるディレクトリの親フォルダ(一つ上のディレクトリ)を選択してください

スクリーンショット 2019-02-11 10.09.28.png

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

8.「terminal」を選択して下さい

スクリーンショット 2019-02-09 23.26.14.png

9.「New Terminal」を選択して下さい

スクリーンショット 2019-02-09 23.26.22.png

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

npm i

スクリーンショット 2019-02-10 23.42.36.png

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

npm install ngrok -g

12.作業フォルダが以下のような構成になっていればOKです

スクリーンショット 2019-02-09 23.45.57.png

13.先程開いたLINEDevelopersのページを開いて、作ったbotを選択します

14. 下の方に行くと「アクセストークン(ロングターム)」という項目の隣に「再発行」というボタンがあるので、それを選択します

15. そのまま「再発行」ボタンを押します

スクリーンショット 2019-02-08 19.50.06.png

16.表示された文字列をコピーします

17. VSCodeに戻り、「index.js」を選択します

スクリーンショット 2019-02-08 17.51.13.png

18.6行目のシングルクォートの間(下の画像で「とーくん」入っているところ)に先程コピーしたアクセストークンを貼り付けます

スクリーンショット 2019-02-10 1.10.21.png

19.LINEDevelopersのページに戻って、「Channel Secret」をコピーします

スクリーンショット 2019-02-08 20.01.58.png

20.index.jsの7行目のシングルクォートの間(下の画像で「しーくれっと」と入っているところ)に貼り付けます

スクリーンショット 2019-02-10 1.10.21.png

21.control+Sボタンで保存します(Macはcommand+Sキー)

22.以上で環境構築は完了です!


Botを動かしてみよう!


  1. VSCodeのターミナルに以下のコマンドを入力して下さい

node index.js

2.「Server running at 3000」と表示されたことを確認して下さい

※以下のような表示が出たら、そのまま「アクセスを許可する」を選択して下さい

スクリーンショット 2019-02-08 20.08.52.png


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

3.「terminal」を選択して下さい

スクリーンショット 2019-02-09 23.26.14.png

4.「New Terminal」を選択して下さい

スクリーンショット 2019-02-09 23.26.22.png


ngrokのPATHが通っていない人(ngrokの公式ページからexeやUnix実行ファイルをDLした人)

3 & 4. DLしたexeやUnix実行ファイルをダブルクリックで開いて下さい


ここから共通

5.以下のコマンドを入力して下さい。以下のような画面が表示されれば成功です

※ngrokのURLは8時間で失効しますので、8時間たったらngrokを再起動した後にwebhookURLを再登録して下さい。

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

スクリーンショット 2019-02-09 15.40.18.png

6.Forwardingの「https://」から先をコピーします

※このURLはngrokを再起動する度に変更されます

スクリーンショット 2019-02-10 1.14.13.png

7.LINEDevelopersのページに戻って下さい

8.「Webhook URL」という項目があるので「編集」を押します

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

9.先程コピーしたURLを貼り付けて、更新ボタンを押します(行末に/webhookを追加して下さい)

スクリーンショット 2019-02-09 15.50.07.png

10.「Webhook送信」という項目があるので、「編集」を押します

スクリーンショット 2019-02-09 15.43.23.png

11.「利用する」にチェックを入れて「更新」を押します

スクリーンショット 2019-02-09 15.44.50.png

12.「自動応答メッセージ」という項目があるので「編集」を押します

スクリーンショット 2019-02-09 15.52.42.png

13.「利用しない」にチェックを入れて「更新」を押します

スクリーンショット 2019-02-09 15.52.47.png

14.下の方にQRコードがあるので、これをLINE(スマホアプリ)から読み取ってbotを友達追加します

スクリーンショット 2019-02-10 1.42.59.png

15.実際にbotにメッセージを送信して、送ったメッセージがそのまま返ってきたら完成です!

エラーが発生した場合はindex.jsを動かしているterminalにエラー内容が表示されるので、エラー内容をコピーしてネットで検索すると解決方法が見つかることが多いです。

また、成功した場合は、上記のterminalにユーザーから送られてきたメッセージが表示されているはずですので、そちらもご確認ください。


おまけ

以下のように65から68行目をコメントアウトして71行目から81行目のコメントアウトを外すと、「こんにちは」というメッセージが送られてきたら「Hello World」と返信して、「おはよう」と送られてきおたら「Good Morning!!」と返信するという事が出来ます(それ以外のメッセージが送られてきたら反応しません)

スクリーンショット 2019-02-11 10.13.59.png

コードを編集した後は必ずcontrol+S(Macはcommand+S)キーを押して保存をして下さい。

また、コードを変更をサーバに反映させるために、「node index.js」を行ったterminalをcontrol+Cキーで終了してから、再度「node index.js」と入力して下さい。