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

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

MIT App Inventorで遊ぶ (New Weather App 8-1 国情報 Any component利用)

2024-05-06 08:58:59 | 日記

データの数が条件によって(この場合国によって)変動する場合がある。例えば、公用語とか国境を接する国とかは、必ずしも1つではなく複数の場合もある。このような場合にこそAny component (generic component) の出番かもしれないと思い、早速使ってみた。New Weather Appに(半ば無理やり)当該国の国情報を追加してみた。

今回もDynamicComponent (extension) を利用する。また、国情報は countryinfoapi のデータを使った。

実行画面:

スクリーンのデザイン:

左が、国情情報を見るための「i」ボタンを追加したScreen1。

右が国情報を表示するinfoScreen。当初、国旗も表示する予定だったが、間違いが多いので非表示とした。ブロック・コードはそのまま。

 

                                   

ブロック・コード:

国情報を表示するinfoScreenのブロック・コードのみ。

1. infoScreenの初期化:

メインのScreenより遷移する際に日本語および英語の国名を受け取るが、それらはリスト形式「get start value」に格納されている。日本語の国名については、タイトルに表示(countryLabel)。

英語の国名を使ってcountryinfoapiに対しGETリクエストを行い、国情報を得る。

また、アプリにインポートされているカントリーコードのファイル(iso_countryCode.json)を読み込む。

2. countryinfoapiより受け取ったデータをDictionary形式でデコードして変数JSONに格納。

取得したデータより必要なデータを抽出する関数getCountryDetailsを実行する。

3. 一方、同梱のカントリーコードのファイルもDictionary形式でデコードして変数countryListJSONに格納。

4. 受け取った国情報をアイテムごとに格納する変数を初期化。空のリストで初期化しているのは、複数のデータがある場合。

関数getCountryDetailsは、全てのデータが入っている変数JSONよりキーを指定して各アイテムのデータを取得。

5. 関数showCountryDetailsは、上記の通り各変数に格納されたデータをそれぞれのLabelに表示させる。

人口と面積は値を3桁ずつにカンマで区切る。

言語と陸路で国境を接する国は、別途の関数で処理する。

国旗は、svg形式の画像である。MIT App InventorのcomponentであるImageは、svg形式の画像を表示できないので、PixZ1というextensionを使って表示させた。(しかし、ちょっと画像がひどかったので、非表示にした)

6. 陸路で国境を接している国はアルファベット3文字コードで提供される。それら3文字コードをカントリーコードと照らし合わせ、英語国名と日本語国名のリストとして変数countryNameEnListおよび変数countryNameJpListに格納する関数。パラメーター(abbrev)として3文字コードを受け取る。

7. 3文字コードリストのそれぞれのアイテムを上記関数にて英語名、日本語名に変換する関数。

8. 英語国名リスト(countryNameEnList)に格納された国名をLabelに表示させる関数setLabels。extensionである DynamicComponentsを利用して国の数に合わせて表示する。

9. 言語の場合、上記のような3文字コードを国名に変換するというような処理は必要ないので、取得した言語のデータを直接generic Label componentに表示させている。

10. 右上端にある「X」をタップするとメインのScreen1に戻る。

                               ==============================================

<追記>国旗については、APIがいくつかあることがわかったので、追加する予定。

generic componentは便利ではあるが、LabelのpropertyであるFontBold(太字)を設定できないのは不便である。(知らないだけかもしれないが)TextColor, backgroundColor, Width, Height, FontSizeなどは設定できるのだが。。。

 

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

前回までのブログ:

MIT App Inventorで遊ぶ (New Weather App 7 日の出、日の入りの時刻表示)

MIT App Inventorで遊ぶ (New Weather App 6 国名の表示)

MIT App Inventorで遊ぶ (New Weather App 5 気温の表示)

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

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

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

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

 



コメントを投稿