10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Node-RED×LINE botでお天気通知botを作る

Last updated at Posted at 2020-10-20

#概要

この記事は2020/10/20に開催される「Node-REDで色々試すハンズオン Tec-Nomad ・ ビジュアルプログラミング交流会 コラボ」の資料です。

次の三つの要素を使用し、お天気通知LINE botを作ります!

完成すると次のように一定時間間隔でお天気を通知するLINE botが作れます!

image.png

image.png

##ハンズオンの流れ

  1. お天気APIから気象情報を取得
  2. LINE botの準備
  3. お天気情報をLINEに通知

#システム構成
enebularの上でNode-REDをうごかします。Node-REDでは一定周期で気象データをOpenWeatherMap APIを利用し取得します。取得したデータはNode-REDのフローで定型文にフォーマットします。フォーマットされたデータをLINE Messaging APIを利用してLINEアプリに通知する仕組みです。
image.png

#1. お天気APIから気象情報を取得
###1-1. お天気APIの準備

今回は気象情報取得のために「OpenweatherMap API」を利用します。

サインイン後、「API keys」のタブを選択。
image.png

API key を控えておきます。(コピー)
image.png

###1-2. 気象データを取得する
ここまでに他のフローを作成していた場合、フローが混同しないように新しいワークスペースを作成します。何も作っていない場合はこの手順を省力できます。

enebularのNode-REDで新しいフワークスペースを作成します。
Node-REDエディタの右上にある**+**マークをクリックすると、作成する事ができます。
image.png

次に気象データを取得するためにOpenWeatherMapノードを追加します。
(OpenWeatherMap APIにはhttpリクエストで取得する方法もありますが、専用ノードがあるのでそちらを使用します。)

次の図の①→②の順にクリックします。
image.png

ノード管理画面が表示されますので、次の図の①~③のように進めます。
①ノードを追加タブを選択。
②検索欄に”openwe”と入力。
③ノード名 node-red-node-openweathermap のノードを追加。
image.png

ノードの追加が完了すると、ノードパレットにOpenWeatherapノードが追加されます。

image.png

###1-3. 気象データ取得のフローを作成
気象データを取得して確認するには次の3つのノードを使用します。

  • injectノード
  • openweather mapノード(ノード両端に端子があるノード)
  • debugノード

これら3つのノードを次のように接続します。
image.png

次にopenweather mapノードの設定を開き、必要事項を入力します。
image.png

  • API key : OpenWeatherMap APIのAPI keyを入力します。
  • Language : Japaneseを選択します。
  • Current weather for : そのままにします。
  • Location : City, Countryのままにします。
  •  City : Tokyoにします。(後ほど変えて遊んでみてください!)
  •  Country : Japanにします。(後ほど変えて遊んでみてください!)

設定ができたらフローのデプロイを行い、injectノードのボタンを押してみましょう。
ボタンを押す度、デバッグ画面にデータが表示されれば気象データの取得に成功しています。
image.png

データはjson形式となっており、ツリーを開くと様々なデータのまとまりであることが分かります。代表的なデータを次の表に示します。

データ名 概要
weather 天気(英語)
detail 詳細天気(日本語)
tempc 気温(摂氏)
humidity 湿度
pressure 気圧

ここまでで気象データの取得は完了です!

#2. LINE botの準備
###2-1.LINE botの作成
メッセージを通知させるLINE botを作成します。次のURLにアクセスしてLINE Developersのサイトを開きます。
https://developers.line.biz/console/?status=success

Providersを作成していない場合は、
Line Messaging APIで簡単Line Bot作成(超初心者向け
を参考にプロバイダの作成を行います。

プロバイダー名を入力します。
image.png

プロバイダを作成後、画面を下にスクロースしていくと、
Create Messaging API channelとあるので選択します。
image.png

LINE botの初期設定画面が表示されます。
アイコンも設定できますが、今回は必須事項のみ設定します。

項目 概要
Channel name Messaging APIのチャンネル名
Channel description チャンネルの説明
Category このチャンネルのカテゴリ
Subcategory カテゴリの詳細

設定例です。
image.png
image.png

ここまで設定できたら画面を下にスクロールし、許諾にチェックを入れて作成します。
image.png

###2-2.LINE Messaging APIを利用したフローを作成
LINEのメッセージ通知にはおまじないのようなコードが必要ですが、専用のノードがありますので活用します。
パレットの管理からノードの追加で、次の名称のノードを追加します。

node-red-contrib-line-messaging-api

次のように検索すると引っかかります。
image.png

LINE messaging APIノードの追加が完了すると、ノードパレットに次の3つのノードが追加されます。
image.png

この中のPush Messagieノードを次のようにフローへ接続します。
image.png

次にPush Messageノードの設定をします。
ここで、LINE Developersで作成したLINE botの情報を入力します。
必要な情報は次の3つです。

  • Channel Secret
  • Access Token
  • Channel ID

上述の3項目は、LINE Developersで作成したLINE botのページに記載があります。

SecretはBasic settingsタブの最も下にあります。
image.png

Channel IDはBasic settingsのタブににあります。
image.png

Access TokenはMessaging APIタブの最も下にあります。
ISSUEと書かれた黒井ボタンをクリックすると発行されます。
image.png

設定が完了したらデプロイします。

###2-3.LINE botへの通知を試す
LINE DevelopersのLINE botの画面に戻り、Messaging APIタブを開きます。
下にスクロースしていくとQRコードが表示されていますので読み取ります。
これにより、作成したLINE botを友達追加できます。

image.png

Node-REDの画面に戻りinjectノードのボタンをクリックすると、作成したLINE botからメッセージが通知されます。

image.png

#3. お天気情報をLINEに通知
#3-1.通知文の定型フォーマットを作成する
今回は取得したお天気情報の中から、現在の気温を抜き出します。
定型フォーマットにするため、templateノードを使用します。

次のようにtemplateノードを、openweather mapノードの後に接続します。
image.png

templateノードの設定を次のようにします。
image.png

ただ今の気温は {{payload.tempc}} ℃です!

これにより、openweather mapノードで取得したデータの中から、気温(摂氏)を抜き出して定型文を作成します。

以上で、injectノードのボタンをクリックすると、現在の東京の気温が通知されるLINE botの完成です!

image.png

#おわりに
現状だとinjectノードのボタンを押す必要があったり、東京の気温だけなので、まだまだ拡張することができます!

皆さんの想像力を膨らませてアレンジしてみましょう!

10
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?