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

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

MIT App Inventor で遊ぶ (Weather App 4)

2024-03-17 07:39:07 | 日記

東京、パリ、ロンドン、ニューヨークなども場合、場所の見当はつくが、例えばmomoという都市が地球上のどこにあるのか知っている人は少ないのでは。

OpenWeatherMapより取得するデータに都市の緯度、経度情報があるので、それを利用して地図を表示してみる。

アプリの実行画面:

スクリーンのデザイン:

今回は、screenを追加した。

Screen1とScreen2(地図)。Screen1には「Get map」ボタンを追加。

  

 

プログラム(ブロック):以下の3つに絞ってレビューする。

1. screen1で緯度・経度情報を取得する部分:

取得したデータのこの部分を抽出することになる。

["coord", [["lat",35.6895], ["lon",139.6917]]]はキーと値のペアーのdictionary型で考えれば、coordがキーとなり、その値である [["lat",35.6895], ["lon",139.6917]]は、{"lat": 35.6895}と{"lon": 139.6917}のキー/値のペアーと考えられる。

したがって、以下のブロックを2度使えば、緯度と経度の値を取得できる。

そして、緯度と経度の値を変数(List)に格納する。

             以下途中省略。。。

2. Get mapボタンをタップした時のブロック:

都市が選択されている場合、もう一つのScreenであるmapScreenに変数lonLatDataの値(startValueに包んで?)を渡す。

3. screen2のブロック:

screen1より受け取ったstatrValue(今回はList形式)のindex1とindex2の値を使って、地図を表示していく。「call Map1.PanTo」ブロックで、start valueとして渡された緯度と経度が地図の中心にくるよう地図を表示する。

(list形式の場合、list内のデータのindexは1から始まる。素人フレンドリー。他のプログラム言語だと0から開始が普通のようだが)

また、緯度と経度をそれぞれのLabel(Label_lon及びLabel_lat)に表示する。

戻るボタンをタップするとScreen1へ遷移する。