75才からのモバイルアプリ作成

MIT App Inventorを使ったアプリ作成

MIT App Inventor で遊ぶ (Weather App 5)

2024-03-18 07:33:13 | 日記

今までは、本日の天気情報であったが、一週間の天気予報を表示させる。

以前、dictionary型又はlist型のデコードのことに触れたが、今回のブロック(プログラム)は、list型でのデコードを前提に作ってしまったため非常にわかりにくい内容となってしまった。今のままでアプリは期待通りに動くので、いまさら一からやり直す気はない。が、もう一度やってみようと考えている。

実行画面(いつも省略しているフォルダーから選択する場面から):

スクリーンデザイン:

ListView componentでスマートに表示したかったが、出来なかった(多分可能)。代わりに7つのLabel(一週間分)をVerticalScrollArrangementの中に埋め込み(スクロールが可能となる)、一日ごとのお天気情報をLabelに表示させた。

下記Viewerでは3日目のweatherDataLabel3までしか表示されていないが。

 

プログラム(ブロック):

non-visible componentsは、Web、Notifier、Clock。

作成していて問題となったのは、都市により情報のアイテム数が異なる点。

以下URLの都市名に都市名を、APIKeyに取得したAPI Keyを挿入しデータを取得する。

https://api.openweathermap.org/data/2.5/forecast/daily?q=都市名&mode=json&appid=APIKey&units=metric

問題点は、取得したデータを見ればわかる通り、例えばLondonとTokyoでは一日分の天気情報のアイテム数が異なる。

左が、London、右がTokyo。最後尾のデータに注目。Tokyoには "rain" はない。

今、ここまで書いてきてようやく気がついたが、これは降雨量だと思われるので、場所ではなく天気により(その日により)アイテム数が異なってくるらしい。OpenWeatherMapで確かめたら、やっぱり降雨量であった。

このJSONデータをそのまま使うのなら最後尾のデータを無視すれば良いかも。でも、このデータをMIT App Inventorのlist型でデコードすると、キーのアルファベット順に並べ替えられてしまうので、無視は出来なかった。

そのため、14キー型と13キー型(rainなし)に応じデータの処理を行ったため、ブロック数が2倍になってしまった。

他にも解決方法はあろうが、素人プログラマーとしては、なんとか動くように力技でやるしかなかったのが実情。

今、MIT App Inventorの画面でブロッックを見ているが、いままでのようにブロックをみていくのは現実的ではないので、注目すべき点に絞ってみる。

やっぱり、「天気予報アプリ」シリーズが一応終わったら、もう一度作り直そうと考え始めている。

1. テストをしている段階で、情報を取得し表示するまで若干時間を要したので、ShowProgressDialogブロックを使った。「気象情報を取得する」ボタンをタップするとprogress dialogが開き、「サーバーよりデータ取得中」を表示。その後データをリクエストする。

途中省略。。。

procedureに処理を任せている部分が多く、これだけ見ても意味のないブロックではあるが。。。これが1日分でこれを7日分表示することになる。

途中省略。。。

最後の7日目のデータが表示されたら、ProgressDialogを無効にすることにした。

今回より天気のアイコンはOpenWeatherMapのデータベースより取得することにしたのでそのURLを作成。dictionary型でデコードすればもっとブロックが簡単になったが。

次回は「天気予報アプリ」の最終回。このシリーズを終わらせ、もう一度天気アプリを一から作り直したい。