LoginSignup
4
3

More than 1 year has passed since last update.

UIFlow を使って鉄道遅延情報(JSON)の一部を M5StickC Plus のディスプレイ上に表示してみる

Last updated at Posted at 2022-05-01

「鉄道遅延情報のjson」の無料提供終了について

コメント欄で、「鉄道遅延情報のjson」の無料提供が終了したとのコメントをいただきました。

はじめに

今回の内容は、UIFlow を使ったブロックプログラミングで、HTTPリクエストを扱う話です。過去にも UIFlow で HTTPリクエストを扱うような内容を試してみたことがあったのですが、今回は取得する情報を「鉄道遅延情報のjson」にしている点が異なります。

●鉄道遅延情報のjson
 https://rti-giken.jp/fhc/api/train_tetsudo/

実際の動作(動画)

今回作ったものが動いている時の様子を動画で示します。

作ったものの挙動は、M5StickC Plus本体の Aボタンを押すと、ディスプレイ上に取得した情報の一部が日本語で表示されるというものです。

なお、このサイトからの情報取得を Node.js で行った話を記事にしたことがあるので、JavaScript で扱う話にご興味がある方は以下の記事をご覧ください。

●Node.js 18 から実験的にグローバルスコープで利用可能になった fetch API を試す(鉄道遅延情報の JSON を取得してみる) - Qiita
 https://qiita.com/youtoy/items/cce17c02085f7d42dc34

鉄道遅延情報のjson から情報を取得する

上で紹介した Qiita の記事でも扱った鉄道遅延情報のjson というサイトにアクセスしてみます。トップページにアクセスすると、その時点でサイトが提供している遅延情報を、簡単にページ上で閲覧することができます。
鉄道遅延情報のjson のトップ

この遅延情報は、情報提供元(鉄道コム)との間で調整して 10分ごとの更新という頻度にしているそうです。また、HTTPリクエストで情報を取得する場合は https://tetsudo.rti-giken.jp/free/delay.json という URL でアクセスする仕様になっています。

今回、この遅延情報の中の最初の項目で、キーが「name」となっている部分(路線名が書かれた部分)を UIFlow のプログラムで取得してみることにします。

UIFlow のプログラム

早速、UIFlow のプログラムの話に入ります。

最初にプログラム全体を示します。
UIFlow のプログラム

ここから、ブロックのプログラムについて補足をしていきます。

JSON を扱う部分

まず、ポイントになるのが「HTTPリクエストで JSON を取得して、1番目に出てくる路線名を取得する部分」です。

プログラムの該当箇所は、上記の画像の HTTPリクエストのブロックの部分(水色っぽいブロックの部分)です。最初に「GET」で「 https://tetsudo.rti-giken.jp/free/delay.json 」という URL にアクセスするよう指定しています。
そして、処理が成功した場合には、取得できたデータを JSON に変換しつつ「jsonData」という変数に格納しています。さらに、その中の最初の要素(1つ目の JSON)を別の変数「jsonData0」に格納しました。

その後、取得した JSON の中の「キー: name」となる部分を「railroadName」という変数に保存してから、「railroadName」の中身をディスプレイ上に表示させるようにしています。この時、日本語の文字列が入っているデータになるため、M5StickC Plus のディスプレイ上に設定するラベルは日本語が扱えるものにする必要があります。
具体的には、以下のように「Font」の指定を「Unicode 16」にしました。
フォントの指定

その他の部分

上で説明した部分以外の実装の補足は、以下に簡単に記載します。

  • 画面の向きのモードは横向き(「1」)を指定
  • 処理の途中で何ヶ所かディスプレイの背景色を変える処理あり(プログラムのどの部分を実行されているかを可視化するため)
  • ボタン押下のイベントを「ずっと」の中の「もし...であれば」の条件部分で取得(もちろん別のやり方もできるが、この後に、センサーから取得した情報を元に処理させるような変更を想定した実装)
  • JSON を取得する処理が 10秒より短い頻度で行われないようにウェイトを入れている(とりあえず 10秒を指定)
  • ずっとの処理は高頻度に繰り返す必要もなさそうなので、ボタンが押されていない時に 500ミリ秒間隔で繰り返すようにしている(この秒数に特別な意味はなく、適当に決めています)

このような内容になるよう、ブロックのプログラムを組んでいます。

そして、このプログラムを実行し、M5StickC Plus の Aボタンを押下すると、冒頭で紹介した動画のような結果を得られます。なおこの時に表示される内容は、もちろん遅延情報で取得できる内容によって変わるため、ご自身で試される場合は「鉄道遅延情報のjson」のページ上で最新の JSON の情報を確認しつつお試しください。

4
3
2

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
4
3