気象情報（例　石川県金沢市）を取得し、Insights Hubにデータ保存＆Dashboard表示してみました。

# はじめに
Siemens社オープンクラウドプラットフォーム "Insights Hub（旧名称　Mindsphere）" を利用して、石川県金沢市の気象情報（気圧、気温、湿度、風速、日照時間）を定期的に取得しデータ保存およびDashboard（折れ線グラフなど）表示に挑戦してみました。

# 今回のグラフ表示目標
　以下のようなグラフ表示を目指します。
 「気圧、気温、湿度、風速、日照時間」の前日分の折れ線グラフ表示と最大値or平均値等の表示です
![Kanazawa_Weather_Dashboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/6106414f-fcf6-320a-755a-4bf85a6962ac.png)



# データ取得対象
　〇対象：「石川県　金沢市」の「過去の気象データ検索」、「１０分ごとの値」
 　　　　　項目は気圧（現地）、気温、湿度、風速（最大）、日照時間の５項目とします。
　　　　「１０分ごとの値」ですので１日に１４４件あります。
    
　〇処理タイミング：  気象庁のサーバに負荷をかけないよう、
  　１日１回午前中に前日のデータを取得する処理とします。
   
　〇リンク先　例　2024年2月27日
https://www.data.jma.go.jp/obd/stats/etrn/view/10min_s1.php?prec_no=56&block_no=47605&year=2024&month=2&day=27&view=

　以下、少々長くなりますが、設定について説明させていただきます。
 　「事前準備」、「VisualFlowCreatorでの処理の構築」、「DashboardDesighnerでの設定」と進んでまいります。

# 事前準備　弊社で契約している"Insights Hub" 環境に　Asset　を作成します。

　手順としては以下となります。
 　【１】Aspectを作成
  　・Datapoint01からDatapoint05までの５項目を属性doubleで作成
  　今回は汎用的な名称で作成しました。
   
![Kanazawa_Weather_Aspect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/c2cb2c63-c9eb-9540-6521-82ab9003835f.png)

　汎用的な名称にするメリットはAspectの使いまわしによる設定工数の削減、
　デメリットは、Dashboardによる可視化やファイルデータ活用の際、
 　項目の内容がわからないので、手元に読替用のメモが必要になることです。
 
  【２】AssetType　Datapoint01-05　を作成
![Kanazawa_Weather_AssetType.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/b32ec0fe-8ece-8a21-995d-91e988e4d9dc.png)


  【３】Assetを作成　Typeを利用してDatapoint01_05_Kanazawaを作成
![Kanazawa_Weather_Asset.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/b9f0634f-007c-5ab8-1329-25e1d2d2fa96.png)

  
  　Datapoint01に気圧（現地）、Datapoint02に気温、Datapoint03に湿度、Datapoint04に風速（最大）、Datapoint05に日照時間を割り当てする方針です。


# VisualFlowCreatorでの処理の構築　フローの全体図
　VisualFlowCreatorはInsights Hubで利用できるNode-REDとなります。

フローの全体像は以下となります。
![Kanazawa_Weather_VisualFlowCreator_flow2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/5d78db8c-eeea-5934-c032-940710f912a8.png)


・１段目　「日付とURLの編集」、「HttpRequest」、「Html編集」
・２段目　「データのバックアップ」、「数値セット」、「Assetへのデータ保存」
　に分かれております。

# VisualFlowCreatorでの処理　１段目
【１】「Inject処理」
![Kanazawa_Weather_VFC_inject.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/aa71aabc-e89f-b4a6-7767-4b0e1e70b3a9.png)
・Repeat（繰り返し）　に　at a specific time
　　　　　（処理起動を手動にしたいときはNoneにします）
・at（時刻）　に　09:00
・Timezone　　に　Browser（Asia/Tokyo）
・OnWeekday　すべての曜日にチェックをつけています

【２】「日付とURLの編集」
![Kanazawa_Weather_昨日＆URL設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/88da1f58-742e-07c2-28d4-a36424b7fc38.png)

以下の処理をしております。
```
var urls = [];
const today = new Date();
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
var yy = yesterday.getFullYear();
var mm = ("00" + String(yesterday.getMonth() + 1)).slice(-2);
var dd = ("00" + String(yesterday.getDate())).slice(-2);
urls = "https://www.data.jma.go.jp/obd/stats/etrn/view/10min_s1.php?prec_no=56&block_no=47605&year=" + yy + "&month=" + mm + "&day=" + dd +"&view=";
msg.url = urls;
return msg;
```
・２行目　todayを取得
・３行目　yesterdayを計算　（todayから１日マイナス）
・５行目　yesterdayのyy（年）を編集しています
・６行目　yesterdayのmm（月）を編集しています
・７行目　yesterdayのdd（日）を編集しています
・８行目　Urlsに「石川県金沢市ー過去の気象データ検索ー１０分ごとの値」の固定値
　　　　　上記で計算したyy,mm,dd　をセットしています。
　　　　　※金沢の場合、prec_no=56&block_no=47605　となっています。
     　　　東京の場合は、prec_no=44&block_no=47662　で取得できると思います。
     
・９行目　msg.urlにUrlsをセットしています。


【３】「HttpRequest」
![Kanazawa_Weather_VFC_HttpReq.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/68b8609d-2209-fa9c-dbef-90ebc769c617.png)

・Method　に　「Get」を指定
・Return　に　「UTF-8　string」を設定


【４】「Html編集」

![Kanazawa_Weather_VFC_Html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/b885be40-a394-971f-d044-35ddbbb174e8.png)

・Selectorには　.data2_s　と　tr　と　tdを設定
・outputは　only the text・・・　要素のテキストのみ
　　　　　as a message・・・　　配列化した１つのメッセージ

【ご参考】Selector　の　data2_s　について
　「石川県金沢市　-　過去の気象データ検索　-１０分ごとの値」ページのソース表示を実施した以下の　78行目に　.data2_s　があり、今回Selectorに設定しました。
![Kanazawa_Weather_jma02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/2cb25f90-5a3d-403a-734f-a0649b1e4458.png)

【５】「Html編集」の後をdebugノードで表示
　以下の通り、１５４４個のメッセージが出ていることがわかります。

  ![Kanazawa_Weather_debug.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/976d6390-02b5-7025-c62d-eeab81524c77.png)

　●０項目目から１０項目目が　0:10時点のデータとなっております。
  　・０項目目　00:10　が　時刻
  　・１項目目　1016.2　が　気圧（現地）
　・４項目目　3.8　が　気温
　・５項目目　92　が　湿度   　
　・８項目目　2.8　が　風速 （最大）
　・１０項目目　""　が　日照時間（夜中のため数値は入っていません）
    
  　●１１項目目から２２項目目が　0:20時点のデータ　となります
   　●１４４分　×　１１項目　＝　１５８４件　のデータが抽出できたことになります。
   
# VisualFlowCreatorでの処理　２段目
【１】「データの退避」
![Kanazawa_Weather_CahgeData.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/d571ea62-2d2c-51b5-955a-f385f23f14ec.png)
・msg.payloadのデータをmsg.dataに退避します


【２】「数値セット」
![Kanazawa_Weather_Function数値セット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/b126dc95-ed2a-3e2f-b713-a9bc8a9dafd0.png)

以下に上記内容を表記しました。もう少し短いロジックになればよかったのですが、、、
ご容赦ください。
```
msg.topic = "xxxxxxxxx/Datapoint01_05";//asset id/aspect名

var ix1=0; 
var ix2=0;
var values = [];var date = [];var unixTime = [];
var hh = [];var mm = [];var utc = [];
const today = new Date();
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);

for (ix1 = 0; ix1 < msg.data.length;) {
    hh = msg.data[ix1].substring(0,2);
    mm = msg.data[ix1].slice(-2);
    date = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), hh, mm, 0);
    utc = new Date(date.getTime() + (-540 * 60 * 1000));
    unixTime = Math.floor(date.getTime() / 1000);
    
    if( isNaN(msg.data[ix1 + 10]) == true){ msg.data[ix1 + 10] = 0;}
    if( isNaN(msg.data[ix1 + 8]) == true){ msg.data[ix1 + 8] = 0;}
    if( msg.data[ix1 + 10] == ""){ msg.data[ix1 + 10] = 0;}
    values.push({ _time: utc, Datapoint01: msg.data[ix1 + 1], Datapoint02: msg.data[ix1 + 4], Datapoint03: msg.data[ix1 + 5],   Datapoint04: msg.data[ix1 + 8], Datapoint05: msg.data[ix1 + 10]});
    ix1=ix1+11;
    ix2=ix2+1;
}
msg.payload = values;

return msg;

```
・１行目　msg.topicにAssetIdとAspect名称をセット　※xxxxxにはasset idをセット
・７行目　todayを取得
・８，９行目　yesterdayを計算　（todayから１日マイナス）

・１１行目　For文　１５４４個のメッセージについて以下処理を実施
・１２行目　時刻をhhにセット
・１３行目　分をmmにセット
・１４行目　dateに　yesterday　と　hh　と　mm　を統合した時刻情報をセット
・１５行目　utc情報を計算　日本時間から世界時間へ変換（９時間（５４０分）マイナス）

・１８行目　・８項目目　風速　が　Nan　のとき　０をセット
・１９行目   ・１０項目目　　日照時間　が　Nanのとき　０をセット
・１９行目   ・１０項目目　　日照時間　が　""のとき　０をセット
・２０行目　Valuesに以下をセット
　　_time utc　15行目で計算した時刻情報
  Datapoint01: msg.data[ix1 + 1]　１項目目　　気圧（現地）
   Datapoint02: msg.data[ix1 + 4] 　４項目目　　気温
   Datapoint03: msg.data[ix1 + 5]   ５項目目　　湿度  
   Datapoint04: msg.data[ix1 + 8] 　８項目目　　風速 （最大）
   Datapoint05: msg.data[ix1 + 10]　１０項目目　日照時間

・２１行目　indexに　　ix1に　１１を加算
・２２行目　indexに　　ix2に　１を加算

・２４行目　msg.payload に valuesをセット;


【３】「Assetへのデータ保存」
![Kanazawa_Weather_VisualFlowCreator_write_timeseries.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/95e1762b-e9a5-c6c6-efbc-c9735e5619ab.png)


![Kanazawa_Weather_VisualFlowCreator_write_timeseries-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/e3e79e4d-3055-85a3-a23a-de009814a7c6.png)

上記の通り、
・Asset　Datapoint01_05_Kanazawa
・Aspect　Datapoint01_05
を選択します



。

# DashboardDesighnerでの設定
　次に、Dashboardの設定を実施します。
 　DashboardDesighnerはInsights Hubで利用できるGrafanaとなります。
  
   DashboardDesighnerで
   VisualFlowCreatorで処理し、Assetに保存したデータを呼び出します。
   Dashboardでは「気圧、気温、湿度、風速、日照時間」を表示しています。
   
・「気温」の「折れ線グラフ表示」は以下のように行いました。
![Kanazawa_Weather_DashBoard_Graph_Query.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/8667b624-64b2-b014-82de-838110a56ccc.png)
　「Query」
 　「Series」欄で
 　　「Datapoint01_05_Kanazawa」-「Datapoint01_05」-「Datapoint02」　を設定
 　「Function」　欄で
  　　「alias(気温)」を設定　・・・凡例表示が日本語で「気温」になります。
  

![Kanazawa_Weather_DashBoard_Graph_Visualizaton.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/0a8f1a20-eda1-91cd-3771-4e14513376a1.png)
  「Visualizaton」は「Graph」を選択
  「Drawmodel」は「Line」をOn

 ![Kanazawa_Weather_DashBoard_Graph_Gen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/140cab23-c86f-da17-8d8a-b8a4c85b2186.png)
 　「general」は「Title」に日本語で入力します。
  
・「気温」の「平均値の表示」について以下のように行いました。
![Kanazawa_Weather_DashBoard_Gauge_Visualizaton.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/56a1f27f-a9a5-a598-3a92-430d35a9b7a0.png)

   「Visualizaton」は「Gauge」を選択
   「Calc」を「Max（最大）」に設定しています
   　他に、「Last（最新値）」や「Mean（平均）」を選択可能です
   　「Query」は「気温」の「折れ線グラフ表示」と同じです

・右下の　テーブル　設定は以下のように行いました。
![Kanazawa_Weather_DashBoard_Table_Query.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/2de6c048-9c23-1513-58a5-d5033ccd7453.png)

　「Query」
 　「Series」欄で
 　　「Datapoint01_05_Kanazawa」-「Datapoint01_05」-「*」　を設定
   　　・・・　「*」を設定することで「Datapoint01_05」の５項目すべてが出力対象になります。

![Kanazawa_Weather_DashBoard_Table_Visualizaton.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/05ed816b-dd63-71e1-f48a-efc2424451d6.png)

   「Visualizaton」は「Table」を選択
    ちなみに、「Visualizaton」はいろいろとありますが、「Graph」、「Gauge」、「Table」を好んで使用しております
    
・前日、前々日の設定は以下で実施します。
![Kanazawa_Weather_DashBoard_Quick_Range.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/92f8e67e-e6ac-7bef-99b0-926b469ae1f0.png)
・Dashboard右上のQuickRangeで「yesterday」を選択します。
　Day before yesterday（前々日） などの設定も可能です。

 # おわりに　

　今後、今回作成したFlowをNode-REDに移植して動かしてみる予定です。
　データをテキストファイルに保存、DashboardはNode-REDのノードでの作成を予定しています。

  ちなみに、Insights hub上のVisualFlowCreatorでは処理計算時間に応じて課金が発生します。 弊社の環境では月に48時間まで、基本料金範囲内のプランとなっています。
  2024年2月は約0.1時間（６分未満）でした。１日あたり10秒以下で処理できておりました。

  留意点としては、気象情報のレイアウトが変更されてしまうと変更作業（VisualFlowCreator　２段目の【２】「数値セット」など）を実施する必要があるところです。
 
 # 参考資料
- [二酸化炭素濃度モニタリングリモートデモシステムの構築](https://qiita.com/hrsakuma/items/b29de6c1b482ee15f03b)
- [Node-Redを利用して基本的なデータ分析をやってみました](https://qiita.com/tota_nissho/items/f6d6d94eb23cd4d9240d)
- [Node-REDで作成した折れ線グラフ、ヒストグラム、散布図をMindSphere上のVisualFlowCreatorへ移植してみました](https://qiita.com/tota_nissho/items/4eb6a5197361d16f3941)