Messaging API を取得したら次にやること～ 初心者でも絶対に作れるLINE-bot～

#概要
「初心者初心者書いてるけど、難しいやん!」のみなさまお待たせしました!
Messaging APIを取得した後、Nod-REDでLINE-botができるまで、PC初心者が解説。
私と同じ「JSON？トークン？それ誰やねん!」レベルの方向けですのでご安心を♪

#準備物(検索してここまではやってね)
①LINEプロバイダ－・Messaging APIチャネル・bot設定
②Heroku・Node-REDの準備
③OpenWeatherMapのAPIキー取得
私はスクールでやりましたが、一般の方は頑張って検索!!

#まず完成図
ここまで一緒に頑張ろう(^_-)-☆　絶対できる!!
![LINEbot画像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/aa9d824d-1c00-48e6-1ff8-5b89f4b2fb13.png)

#Nod-REDの全体図
ややこしそうに見えても超シンプル!中身も含めて一個ずつ解説するから安心してね!
![nodered.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/33257d41-9460-8e8e-5dbb-8df13dd13f18.png)

#解説①Switchコード
打ち間違いがないかよく確認!!
プロパティmsgの中身は　『payload.events[0].message.text』だよ!
![switch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/f17824f6-7c49-1d89-26d4-146f623ba99f.png)

#解説②template
沖中・平岡・溝口は中身の名前を変えるだけ　「入れません」は中身が違うからよく見てね!
Switchと一緒で、プロパティmsgの中身は　『payload.events[0].message.text』だよ!
![template.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/530430a9-b9f0-4645-a188-8d75f88fcc9e.png)

#解説③function左側
コードの意味は後でじっくり考えるとして、まずは下記をコピーして使おう!
3つあるけど全部中身は同じコードです。

![function-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/fb1a8c94-e9f7-12db-70e5-3d4510c642ff.png)

```js
// LINEサーバーからの情報を「msg.line」に移動させる
msg.line = msg.payload;
// msg.payloadにメッセージ本体を入れる
msg.payload = msg.payload.events[0].message.text;

return msg;
```

#解説④http request
ここは特に丁寧に解説するのでゆっくりやろう!　まずは画像を確認!
![request.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/5c31a6da-7762-2d54-5904-779e460e0135.png)

3つとも中身は全く同じでOKです!
気になるURLの中身はこちら

>https://api.openweathermap.org/data/2.5/weather?q=Hiroshima&units=metric&APPID=ここにOpenWeatherMapで取得したAPIキーを入力

URL内の『ここにOpenWeatherMapで取得したAPIキーを入力』にキーを入力
お察しの通りURL内の「Hiroshima」の所を知りたい都市名に打ち換えれるよ!!
でも今日は広島のままでやろう!!

#解説⑤function右側
ここが最難関!!　でも大丈夫!!　まずはコピーして、意味は後日考えよう!!
ちなみに私もそうしたし、正直今も意味がよくわかってないですw
![function-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/d63f45de-0557-94ed-cfae-94befe0b9f26.png)

中身は

```js
 let text2 = "okinaka"
 if (msg.payload.name === "Hiroshima" ){
    text2 = "広島"
 }
 
// http requestの結果を取得する
const result ="沖中さんご来店ありがとうございます☺\n"
+text2+ 'の無人店舗周辺の天気は\n'
+"『"+msg.payload.weather[0].icon+"』\n"

+ "最高気温はなんと\n"
+"『"+msg.payload.main.temp_max+ "℃』です\n"

+"とても暑くなってきましたね🌞\n"+

"そんな日にぴったりのおすすめレシピはこちらです!"
+"https://www.maxvalu.co.jp/recipe/";
// LINEサーバーからの内容を復元する


msg.payload = msg.line;
// 返信メッセージをhttp requestの結果にする
msg.payload.events[0].message.text = result;

return msg;
```

注1)〇〇〇さんご来店ありがとう～のところは3つそれぞれ書き換えてね!
　　3つのfunction上からそれぞれ　沖中・平岡・溝口　に(画像は1つめの沖中)

注2)2～3行目も都市名変えて検索した人は書き換えよう!　簡単簡単!!
　　if (msg.payload.name === "Hiroshima" ){
    　　text2 = "広島"

#解説⑥change
大丈夫!! これで終わりだもう1歩!!
![change.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/2f98f076-d7d3-a0d7-c348-52291c644158.png)

取得できるデータは英数字だから、それを日本語の表現に置き換える!!

![change2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e3d78c8e-3667-035e-bdba-1f2708b1690a.png)

↑ここのURLから引っ張った表です
https://www.sglabs.jp/openweathermap-api/

『01d』　っていう文字があったら　『快晴』　に書き換える　という単純な指示。
画像に沿って『追加』ボタンで『change』内容を登録しよう!!

#最後にチェック
ReplyMessageの中のシークレットとアクセストークン入れましたか？
デプロイボタン押しましたか？

できたら早速LINEで試そう!!
![LINEbot画像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/eedaf0f5-0a36-58f6-42f3-a73b05ff37ae.png)

#おわりに
一緒に試してくれてありがとう!　もしできなかったらコメント待ってます!
答える自信全くなしですが、超初心者コメントこそむしろウェルカムです♪
初心者同士、これからもお互い頑張ろう!!