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

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

MIT App Inventor で遊ぶ (Weather App 2)

2024-03-14 21:02:32 | 日記

スクリーンデザイン:

これに加え、non-visible componentsとしてWebとClockを使用。Clockは日付、時間を扱うため。

緑色の小さな長方形はスペース確保のためのもので、不要なものもある。

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

若干の補足:

1. responseCodeが200であればリクエストが成功したので、以下を実行、200を取得できなかった場合は、「Could not access web server」を表示(日本語で表記しても良いが)。response codeとは

2. 日付データは、キー「dt」とペアーとなっている値。また、OpenWeatherMapの日付データはいわゆるUnix time(こちらを参照)となっているが、MIT App Inventorには変換用のブロックが用意されている。また、MIT App Inventorはミリ秒を時間の単位としているので、Unix timeを1000倍する必要もある。

3. ミリ秒単位のunix timeから日付を取得し、その日付の「年」、その日付の「月」、その日付の「日」をjoinブロックで連結の上 日付データとして表示。

4. 天気のデータは、「weather」=> 「description」とたどればOK。

    現在の温度は、「main」=> 「temp」とたどればOK。

    湿度は、「main」=> 「humidity」とたどればOK。

    weather iconのファイル名(拡張子を除く)は、「weather」=>「icon」とたどればOKで、取得したデータと2x.pngを連結して作成。@が必要なはずだが、@を挿入するとうまくいかない。OpenWeatherMapのWeather Conditions

    ウエッブサイトの説明では、iconのURLは https://openweathermap.org/img/wn/10d@2x.png となっているが、上記のブロックで全く表示に問題はない。むしろ、上記のようにブロックを作成しないと動かない。なぜかわからない。

<訂正:上記の取り消し線の部分は勘違いがあり誤り。実際には、全てのアイコンの画像(18種類)をアプリに予めインポートしてあり、その画像ファイルを呼び出したもの。ファイル名は。例えば、01d2x.png。2024/3/16記>

以下のように、それぞれたどってブロックを組んだ。全てdictionary型でデータをデコードした方が簡単だったかな?

MIT app Inventorの場合、DictionaryというかJSONデータは、例えば{A:B}は、[[A,B]]とデコードされる。Aがキーで、Bは値。

5. OpenWeatherより取得したデータをlist形式、またはdictionary形式、いずれでデコードするかについては、プログラム(ブロック)の中で混在しており整合性に欠けている。動けばいいや、という感じで作成しているのでこれは仕方ないが。

   

******************************************************:

なお、前回、データの言語を指定できると書いたが、日本語、英語、フランス語をそれぞれ指定した時の実行画面は以下の通り。ラベル表記を言語に合わせて変更できるようにすれば各国語対応のアプリになる。=>トライ予定。

日本語版(赤の四角形で囲んだ部分に注目。ラベル等は英語表記のまま。AI Companionで表示しスクリーンキャプチャーしたものを使用で、タイトルなどの体裁がアプリとは異なる。)

フランス語版(赤の四角形で囲んだ部分に注目。ラベル等は英語表記のまま)

デフォルト(英語版)(赤の四角形で囲んだ部分に注目。ラベル等は英語表記のまま)

<次回は、決められたリストの中から選ぶだけではなく、サーチ・ウィンドウを設定し、任意の都市の本日の天気を検索できるようにする>

 


MIT App Inventor で遊ぶ (Weather App 1)

2024-03-14 20:49:01 | 日記

まずは、東京の本日の天気を表示するだけの簡単アプリを作成。

では若干の説明。。。

1. Public API:OpenWeatherが提供するhttps://openweathermap.org/api

2. 天気予報の正確性:なんとも言えないが、非常に手軽に全世界の都市の天気予報のデータを取得できる

3. 費用:1日当たり1,000 API callsまで無料。ちょっと遊ぶ程度であれば問題なし。API callについてはこちらを参照。

4. API key:利用するには、Sign upしてAPI keyを取得する必要がある。=> sign upページ

5. 利用するAPI:今回は、本日の天気であるCurrent Weather Data(最終的には5 Day / 3 Hour Forecast を利用したアプリを作成)

    言語も指定できるので便利。&lang=とすればOK。に2桁の国コードを挿入する。

    今回は、lang指定なしのデフォルト(英語)でリクエスト。

6. 利用するURL: https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

    上記URLにオプションのパラメーターとして、一応、mode(データのフォーマット)とunits(単位)を追加する。

    https://api.openweathermap.org/data/2.5/weather?q=tokyo&mode=json&appid={API key}&units=metric

 ({API key}には取得したAPIkeyを挿入)

7. まず取得するデータおよびMIT App Invnetor でデコードされたデータの内容を念のためチェックしておく。(最初はこれを行わずプログラム(ブロック)を作成しようとしたので随分と手間取ったし、時間を無駄に浪費した。)

データ内容チェックのためのテストアプリのスクリーンデザイン、プログラム(ブロック)、スクリーンショットは以下の通り。

スクリーンデザイン:

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

「Get Weather Data」ボタンをタップした時の画面。スクリーンショット:

 

データをそれぞれ見ていくと、取得したJSONデータ(この生データはパソコンで整形ツールあるが。。。):

    MIT App Inventorのdictionary型でデコードしたデータ。元データと同じだが、キーのアルファベット順に再構成。

    MIT App Inventorのlist型でデコードしたデータは以下。キーのアルファベット順に再構成。最初はこのデコードを利用してやっていたが、本当に大変だった。普通のプログラマーの方なら問題はないかもしれないが、表示したいデータがどこにあるのか見つけるのがまず大変。整形ツールがあればいいのだが。。。

受け取るデータとデコード後のデータの内容がわかったので、後はアプリを作成することになる。