MIT App Inventorで遊ぶ (New Weather App 4 曜日の表示2）

7日間の気象情報＋天気アイコンを表示。日付については、曜日も表示。UNIX timeより曜日を取得する方法については、こちらのウエッブサイト How to calculate the day of the week based on unix time に教えてもらった。即ち、

                              曜日数字 = (floor(UNIX Time /86400) + 4) % 7　（曜日数字と曜日の対応は以下のブロック・コード通り）

実行画面：

スクリーンのデザイン：

気象予報は下部に配置していたが、見にくいので地図の上に移動させた。左が旧レイアウト。右が新レイアウト。また、タイトルの下にcreditを追加した。

                    　　　　　　　

ブロック・コード：

データが整うまで時間が若干かかるので、Progress Dialogを表示。

関数getCoords（緯度経度の取得）、getDescriptions（気象情報の取得）、getCityName（対象都市名の取得）、getUnixTime（日付の取得）、getWeatherIcon（気象アイコンの取得）を実行。そして、地図が表示された後、気象情報等を７つのLabelに表示する関数showDailyDetailsを実行。対象都市名の表示、そして、Progress Dialogの解除。

変更点は、中ほどに変数 global dayOfWeekに該当の曜日の数字を割り当てている点。

曜日数字のデコードテーブル。一応、日本語版、英語版を作成。

関数showDailyDetails：day1Labelよりday7LabelまでのLabelに気象情報などを表示させる

　　　　　　　　　====== 以下省略 ======

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

前回までのブログ：

MIT App Inventorで遊ぶ　(New Weather App 3　お天気情報を表示）

MIT App Inventor で遊ぶ　(New Weather App2　Google Map）

MIT App Inventor で遊ぶ　(New Weather App1　データの確認）

MIT App Inventorで遊ぶ (New Weather App 3 お天気情報を表示）

今回は、日毎の気象情報を表示する場所を新たに設定して、データがうまく取得できているか確認しながら作成を続行。

実行画面：

スクリーンのデザイン：

スクリーンの下部にHorizontalScrollArrangement（左右にスクロール可能）を配置し、７日間の気象情報を表示するためのLabelをその中に埋め込んだ。

　　　　　　　　　　　　　　　

ブロック・コード：

GETリクエストのレスポンスから、対象都市名、日付を取得して気象情報（descriptions）と共に所定のLabelに表示する。追加部分は赤点線の部分。対象都市名の表示（最終的な）は日本語となる。今回はday1Labelのみ表示。

レスポンスより７日間のUNIX Timeを取得する関数getUnixTime（今回は初日のみ表示）

UNIX Timeより年、月、日を抽出し所定の形式に整える関数getDate。取得したUNIX Timeは秒単位なので、1000倍してミリ秒に。

レスポンスより対象都市を抽出する関数getCityName

なお、関数getUnixTimeと関数getCityNameのデータ抽出経路は以下の通り非常にシンプル。

　　　　　　　　　　　　　　　

 

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

前回までのブログ：

MIT App Inventor で遊ぶ　(New Weather App2　Google Map）

MIT App Inventor で遊ぶ　(New Weather App1　データの確認）

MIT App Inventor で遊ぶ (New Weather App2 Google Map）

試行錯誤を重ねながら作っているが、今回の最大の変更ポイントは、Map componentの代わりにGoogle Mapを使用したこと。

実行画面：

スクリーンのデザイン：

inputTextBoxは非表示にしてある。これは任意の都市名を入力して気象情報を検索するためのもの。

右端にある左右の矢印アイコン(changeModebutton)をタップすることにより、リストから選択するか都市名を入力するかを切り替える。

                                           

プログラム（ブロック）：

1. 初期化：

targetCity => 対象都市

dataList => 取得データ(Dictionary型)

listPickerMode => ListPickerの表示・非表示の状態を保存　（初期値はTrueで表示）

inputBoxMode => inputTextBoxの表示・非表示の状態を保存　（初期値はFalseで非表示）

citySelectionList => リスト表示する都市名を保存

2. 関数 "changeMode"を設定。ListPickerとinputTextBoxの現在のステータスを逆にする。

changeModeButton（左右向きのアイコン）をクリックすれば、関数 "changeMode"を実行し状態を逆にする。それに応じてListPicker及びinputTextboxの表示・非表示を設定する。ただし、inputTextBoxを利用した場合は、inputTextBoxをブランクにする。

3. 対象となる都市名の表示。

4. 「気象情報を取得」ボタンをタップしたら、対象都市名を設定して、関数 "getData"を実行する。

関数 "getData"がGETリクエストをするサーバーのURLを設定して、Web componentにGET リクエストを実行させる。

6. データを取得後、関数 "getCoords"（緯度経度データの取得）及び "getDescriptions" （天気情報を取得）を実行。

また、対象都市名は試験用testLabelに表示すると共にWebViewer1に緯度経度情報を含んだURLを渡し、Google Mapを表示させる。

Google Mapの利用方法については、[INTRO] 🗺️ Google Maps With App Inventor! に教えてもらった。このブログを書いたGordon_Luさんは、MIT App Inventor の Power User （全部で47名の人がPower Userのグループを構成しているらしい）。いつもPower Userの方にはお世話になっている。

Google Mapのデータタイプについては、Gordon_Luさんのブロックをそのまま使用させてもらった。

7. 関数 "getCoords"：

緯度経度データは、取得したデータのこの部分にあり。これは生データであるが、Dictionary型でデコードしたので目指すデータへのたどり方は同じだし、こちらの方がわかりやすい。（以下同じ）

city => coord => lon、city => coord => latとキーを辿っていけばそれぞれのデータを取得できる。

8. 関数 "getDescriptions"：

気象情報はこの部分。

list => weather => description とキーを辿っていけばデータに辿り着く。"list"の中に７日分のデータがあるのでindex1からindex7までデータを拾っていく。その結果は、変数weatherDescriptionsにリスト形式で保存される。

なお、左下端に今日の天気が確認のため表示させている。

＜後記＞

今回、Google Mapを使ってみてGoogle Mapがすごいことになっているのがわかった。経路、パノラミック・ビューなどなどが無料で又Google API keyなども不要で思いっきり使えるなんて！！！と今さらながら喜んでいるのは私だけ？色々遊んだ。また、別の機会にアプリの形で紹介したいと思う。（時代に取り残されそ〜〜〜。もう取り残されているが。。。）

 

MIT App Inventor で遊ぶ (New Weather App1 データの確認）

以前、天気予報アプリを作ったが、デザインを若干変更し、新しい要素も加え再度挑戦。

まずは、データが取得できているかをチェックし、データ構造を再度レビューしておく。

実行画面：

スクリーンのデザイン：

作成途中でデータの確認をするためのテスト用Labelを２つ作成した。

「都市を選択」=> selectCityListPicker

「気象情報を取得」=> fetchDataButton

左右矢印のアイコン => changeModeButton（リスト又は任意の都市名入力、いずれの方法で検索するかを設定するボタン）

   

ブロック・コード：

1.変数の設定、Screenの初期化

変数TargetCity => 対象都市

変数dataList => Dictionary型でデコードした取得データ

変数originalButtonColor => 上記スクリーンデザインにあるボタンの背景色（薄緑色）を初期値として割り当てる

変数disabledButtonColor => 無効にした時のボタンの背景色

selectListPickerに表示する都市名を設定

fetchDataButtonは無効に設定

fetchDataButtonの背景色にdisabledButtonColor（薄グレー）を設定

関数 "getData" を実行し、データを取得する

2. ListPickerで選択された都市を変数targetCityに割り当て、GETリクエストを所定のURLに対し行う。

3. GETリクエストの結果戻ってきたデータをDictionary形式でデコードしてtestLabel2に表示する。testLabel1には取得した生データを表示。

当初は、この「デコードする」（下の紫色のcomponent）という意味がわからず（一瞬見た目には同じデータ）、デコードせずにデータを扱おうとしてうまく行かず、なぜなぜと自問していたことがある。

以前もブログに書いたことがあるが、目で見てわかる変化は、デコード後のデータは、キーのアルファベット順に変更されている。左が取得した生データ。右がデコードされたデータ。

                                                        　　　　　　　　　

 

 

MIT App Inventorで遊ぶ (曜日の表示 1）

YouTube用にJournalアプリを手直しした際、若干のブロック・コードを修正した。

タイトルなどは英語表示だったので修正箇所はほとんどなかったが、表記以外にDateに関するブロック・コードを若干手直しした。

日本語版での、現在日時をフォーマットするブロックはいたって簡単。

このままだと、曜日の表示が日本語になってしまうので英語表示の方法を検討したが、妙案がなく、やむなく以下の通り、曜日の数字 (u) を現在日時より取得し、新たに作成したリストからそれぞれの曜日に変換した。こちらを参考にした。

1 => 月曜日、2 => 火曜日、3 => 水曜日、4 => 木曜日、5 => 金曜日、6 => 土曜日、7 => 日曜日　（０から始まらない）

なお、以下のやり方だと、Clock1.Now を3度コールしているので若干時間差が出てくるかもしれないが、無視できる程度であろう（？）。

二通りの日時のデコードを表した画面：

当然だが、日本語表記の曜日は、その後、曜日を英語表記に変更してもそのまま日本語表記のままとなる。日本語表記であろうが、英語表記であろうが、テキストとして保存されるので？

                

なお、試しにHHの代わりにkkを使用してみた。kk の場合は、1 ~ 24、HHの場合は、0 ~ 23 となるとのこと。