Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

資料は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」と入力して下さい。

shinbunbun_
そこら辺に転がってるただの高三
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした