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

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

MIT App Inventor で遊ぶ (Weather App 6)

2024-03-19 07:25:21 | 日記

任意の都市名をインプットしての検索、地図上で都市の場所を確認、地図画面上で国名の付記。

OpenWeatherMapのデータには、都市名とアルファベット2文字国コードが含まれているので、ISO国コードリスト(JSON形式)を作成の上アプリにインポートし国名を取得。

iso country codesでググれば、データが取得できる。csv形式でダウンロードして変換ウエッブサイトでJSON形式にしたような記憶がある。例えば、元データは、(ウィキペディアだと思う)

ISO 3166-1国名コード https://www.asahi-net.or.jp/~ax2s-kmtn/ref/iso3166-1.html

CountryCode.org https://countrycode.org/

ウィキペディアISO 3166-1 https://ja.wikipedia.org/wiki/ISO_3166-1

今回使用した国コードリスト(JSON形式)は以下のようなもので、キーの値は適当に決めた。(一部のみ表示)

[
 {
   "countryNameJp": "アイスランド",
   "countryNameEn": "Iceland",
   "ThreeDigit": "ISL",
   "TwoDigit": "IS",
   "Area": "北ヨーロッパ"
 },
 {
   "countryNameJp": " アイルランド",
   "countryNameEn": "Ireland",
   "ThreeDigit": "IRL",
   "TwoDigit": "IE",
   "Area": "西ヨーロッパ"
 },

...........

以下続くが省略。

 

実行画面:

スクリーンのデザイン:

今回新たに追加したのは、地図画面で都市名の右に国名を追加する点。従って、スクリーン・デザインで追加点はなし。

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

1. 同梱のファイルを読み込むためにnon-visible componentとしてFileをインポートしている。

アプリに同梱のiso_countryCode.jsonを読み込む。

Screen1よりは、緯度、経度、都市名、アルファベット2文字の国コードを変数startValueとして受け取っている。

緯度と経度の情報をそれぞれのLabelに表示させる。

同緯度経度を中心とする地図を表示させる。

地図中にズームのアイコンを表示させる。

都市名を当該Labelに表示させる

2. 国コードファイルよりアルファベット2文字の国コードリストを作成。(makeTwoDigitList)

受け取ったアルファベット2文字国コードの、2文字国コードリストの中でのindex(dataIndex)を取得する。

国コードファイルより日本語の国名リストを作成。(makeCountryNameJpList)

dataIndexをキーにして、日本語の国名リストより該当の日本語国名を取得する。(findCountryNameJp)

日本語の国名を都市名の右側に()で囲み、設定したLabelに表示させる。

(もう少しスマートな方法があると思う)

3. makeTwoDigitList

国コードリストのアイテム数は250あったので、ループでアルファベット2文字コードを取り出しリストにする。

(アイテム数は、具体的な数字ではなくlength of listブロックを使った方がベター)

4. makeCountryNameJpList

上記と同じ方法で、日本語国名リストを作成。(右上のバッグの切れ端は無視)

5. findCountryNameJp

countryNameJpListより日本語国名を取得。

6. 戻るボタンをタップすれば、Screen1に遷移する。

<現在、復習も兼ね、新しいデザインとコード(ブロック)で天気予報アプリ作成にチャレンジ中>