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

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

MIT App Inventor 2で遊ぶ (Weather App New 5)

2025-01-10 20:20:13 | 日記

最高・最低気温、日の出・日の入時間、湿度を表示。ブロック・コード的には、復習。特別目新しい事項はないが、関数実行の順序などで勘違いし解決するのに随分時間を使った。(例えば、変数Aに値を設定する関数A-funcが実行される前に変数Aを使うなど、初心者がよくやる行き当たりばったりのコーディングからくる間違い。)

日の出・日の入時間については、以前と同様、time zoneによる補正を行った。日付 (date) についても、一応補正を行った。実質的には何も変わらないが。

アプリ実行のビデオ:

スクリーン・デザイン:

変更点は、右上端に配置していた日の出・日の入時間の表示ボタンを削除したこと。

                                     

ブロック・コード:

最高・最低気温、日の出・日の入時間、湿度を表示する部分のみを要約の形で。

1. デコードする前のDBより取得したJSONデータは以下の通り(最初の関係する部分のみ)。単位は、時間・日付はUnix Time、温度は°C、湿度は、%。

                               

=>該当都市のtime zone(GMTとの時差)を取得し、変数targetCityTimeZoneに格納

=>日の出、日の入時間を取得し、7日間のデータを変数sunriseTimeListおよび変数sunsetTimeList(省略)に格納。

関数getSunriseDate(赤黄点線内):取得した日の出時間 (Unix Time)をHH:mmフォーマットに変換する前に、(日の出時間 (Unix Time) + time zone) - 32400 を計算して補正の上、1000倍(MIT App Inventor2が扱うミリ秒へ換算)してからフォーマットしている。

なお、今回、同様の補正を日付に対しても行った。

=>最低・最高気温を取得

キー、値を順番に辿って7日間のデータを取得し、変数maxTempListおよび変数minTempListに格納

=>湿度を取得

キー、値を順番に辿って7日間のデータを取得し、変数humidityListに格納

2. 日本語と英語の切り替え機能を備えているので、見出しなどを日英両言語でリスト形式であらかじめ設定した。

変数sunriseLabelおよび変数sunsetLabel(後者は省略)

変数maxTempLabelおよび変数minTempLabel(後者は省略)

変数humidityLabel

3. 上記1.のデータと2.の見出しを、選択された言語に応じListViewに表示。

ListView1に表示するデータは、「call ListView1.CreateElement」ブロックを利用するのが便利。データの挿入口は3つあるが、その内 detailText「サブテキスト」に取得したデータを挿入。

スクリーンでそれぞれのデータを見ると以下の通り。今回追加したのは、サブテキストの部分。

実際のブロック(最高気温の部分のみ、他のデータはこの下に続く)を見ると、以下のように選択された言語に応じ、ラベルをピックアップしデータと結合して表示する。

                                            *********************以下続くが省略*********************                           

\nは改行マークだが、MIT App Inventor2 の場合、この改行マークではなくHTMLの br を使用しないと改行しない場合がある。この場合分けの基準は不明、と言うか私が知らないだけと思う。

                                  *******************************************************************************

前回までのブログ:

MIT App Inventor 2で遊ぶ (Weather App New 4)

MIT App Inventor 2で遊ぶ (Weather App New 3)

MIT App Inventor 2で遊ぶ (Weather App New 2)

MIT App Inventor 2で遊ぶ (Weather App New 1)



コメントを投稿