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

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

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

2024-04-29 07:33:18 | 日記

日の出、日の入りの時刻はUNIX timeで取得できるが、そのまま普通の時刻に変換すると、東京以外の都市の時刻は全くデタラメな時刻が表示されてしまった。各都市の日の出、日の入りの時刻はネットで簡単に検索できるのでチェックは簡単だ。だが、全く合わない。

timeZoneといういわゆるGMTとの時差(ではないようだが)も同様にUNIX timeで提供されている。当然プラスもあればマイナスもあるので、単純に日の出、日の入りの時刻にプラスすれば(マイナスの場合はマイナス)良いかもと思ったが、うまくいかなかった。

東京だけが正しい日の出、日の入りの時刻になっているということは、もしかしてと思い色々と試行錯誤を重ね、ネット上でも検索しまくった結果、以下のフォーミュラーで計算すれば、いずれの都市の日の出、日の入り時刻もネット上で検索した時刻と合致することが「偶然」わかった。

         日の出時刻 = sunrise UNIXTime + timezone UNIXTime - 32400

なるほどこれだと、東京の場合、timezone UNIXTimeが32400 (60*60*9=32400で9時間に相当)なので、日の出時刻 = sunrise UNIXTimeとなり、何ら調整することなく正しい時刻となるのか。

あまり知識がなかったため、ここまで辿り着くのには結構時間がかかってしまった。

ここで、新たな問題、というよりは疑問が湧いてきた。日付は時分まで見ないので気にならなかっただけで、日付もUTC(Universal time coordinated)なので調整しておいた方がいいのではないかと。。。これは、もう少し検証した上で調整の要否を考える予定。

OpenWeather Mapの説明によれば、

          dt => Time of data forecasted, unix, UTC   (日付)

          timezone => Shift in seconds from UTC

          sunrise => Sunrise time, Unix, UTC

          sunset => Sunset time, Unix, UTC

となっており、調整は不可避のようにも思える。

実行画面:

上記実行画面の4/27ケープタウンの日の出時刻を一応Googleで検索した時刻とチェック。

       

                            

スクリーンのデザイン:

日の出、日の入り時刻を追加。ちょっと、アイコンが見にくいが。もう少し改善する余地はあると思う。

                                                      

ブロック・コード:

変数sunriseTime(UNIX time)、sunsetTime(UNIX time)及びsunrisetimeList(list形式)、sunsettimeList(list形式)を作成し初期化。

関数getSunriseSunsetを作成。内容は、OpenWeatherより取得したデータより、sunrise及びsunsetの時刻(UNIX time)を7日分取得し、それぞれの変数(sunrisetimeList、sunsettimeList)に格納。

関数getTimezone:上記同様、timezoneのデータを取得。

関数showSunriseTime(パラメーター:index => 何日目かを設定)

関数showSunsetTime(パラメーター:index => 何日目かを設定)

関数showDailyDetails(1日目の部分のみ):

赤点線部分の通り、関数showSunriseTime(1日目なのでindexパラメーターは1)及び関数showSunsetTime(パラメーターは同じ)を実行し、結果をそれぞれのLabelに表示する。

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

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

前回までのブログ:

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 データの確認)


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

2024-04-27 07:44:00 | 日記

対象都市の国名を表示できるようにした。

以前作ったWeather Appでも国名を表示できるようにしたが、その際は、非常にまどろっこしいやり方で国名をJSON形式のファイルより取得した。今回は、もう少しスマートに取得できるようにした。

実行画面:

スクリーンのデザイン:

スクリーンのデザインで特に変更はなし。

ブロック・コード:

JSON形式のファイル(iso_countryCode.json)より国名を取得し、Labelに表示する部分のみ。

気象情報の表示が終了した後で、JSON形式の国コードファイルを読み込む。(赤枠部分)

iso_countryCode.jsonのファイル内容は以下。(最初のデータのみ)

OpenWeather Mapより取得したデータよりアルファベット2文字の国略号を取得する。(以前のWeather Appと同じ)

   

JSONファイルの内容を変数JSONに格納。

関数getCountryNameを実行して国名(日本語)を取得。

selectedCityLabelに都市名と共に国名を括弧内に表示する。

関数getCountryNameの内容:

パラメーターabbrevを取る。全データ(250件)の中でキーTwoDigitに対する値が、パラメーターabbrevと同じものがあれば、キーcountryNameEnとcountryNameJpに対する値(日本語国名及び英語国名)を変数countryNameEn及びcountryNameJpに割り当てる。

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

以前のWeather Appの時の国名取得方法(ブロック・コード)は以下の通り。<まどろっこしい>

1. JSON形式のISO 国コードを読み込む。(赤線部分で今回と同じ)

2. 読み込んだファイルを変数JSONに格納。

関数makeTwoDigitEnListを実行して、アルファベット2文字の国略号リスト(twoDigitList)を作成。

twoDigitListの中での対象都市の略号(アルファベット2文字 -countryAbbrevEn-)のインデックスを取得し変数dataIndexに格納。

関数makeCountryNameJpListを実行し、日本語国名リストを作成。

関数findCountryNameJpを実行し、日本語国名リストの中での上記dataIndexに該当する日本語の国名を取得。その日本語の国名を都市名と共に表示する。

OpenWeatherより取得したデータより、対象都市のアルファベット2文字の国略号を取得(今回と同じ)

関数makeTwoDigitEnList:JSON形式の国コードファイルよりアルファベット2文字の国略号リストを作成

関数makeCountryNameJpList:JSON形式の国コードファイルより日本語国名のリストを作成

関数findCountryNameJp:上記日本語国名リストのdataIndexに該当する日本語の国名を取得。

(以上、備忘録的に記録only)

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

前回までのブログ:

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 データの確認)


MIT App Inventorで遊ぶ (サッカーゲーム 1)

2024-04-25 11:05:58 | 日記

以前作成した「お店屋さんごっこアプリ」に続く「骨折り損のくたびれもうけ」的アプリをもう一つ。時間ばかりかかった(ている)。画像を含む四角形の領域による衝突判定(と思う)なので、難しい。予期せぬところですぐに衝突してしまう。

サッカーゲームアプリ。と言っても、シュートゲームのようなもの。

基本機能を何とかして揃えたんだが。。。

今回も、「かわいいフリー素材集 いらすとや」さんにお世話になった。ゴールキーパー、ゴール、サッカーボール。

実行画面:

スマホの画面録画が、横向きのアプリの時は非常に小さくなってしまう。編集段階で編集アプリのズームで拡大させているのでさらに画質が悪くなってしまった。

スクリーンのデザイン:

実行画面を見た方がわかりやすい。

      

ブロック・コード:

アプリが実行されると、ボタン、ゴールなどのサイズと位置が初期化されるが、若干の余裕時間(400ミリ秒)を設定した。

「舞台装置」(ゴール、キーパー、ボタンなど)のサイズ、位置を初期化する関数setScreen。

Startボタンをタップした時の動作。ボールを非表示にして、ゴールキーパー(woamn_footballer.png)を表示し、ボールの位置を決めてからまたボールを表示するといったまどろっこしいやり方。でも、最初に非表示にしないとうまくいかない。そこまでやってから、ゴールキーパーを左右に動かすClockを作動させる。

ゴールキーパーを左右に動かすClockの内容。ちょっと手こずったが、変数moveDirectionを設定して動く方向を変えるようにしたら期待通りの動きとなった。

ここでは、多分(ド)素人がよくする間違いをした。右方向に動いている場合、x2まできて反転し左に10pixels動くが、これだと又最初の条件に合致してしまい、右に動いてしまい、結局x2でまごまごしている状態が続くのみ。えっえっえっという感じだった。

(追記:MIT App Inventorでは、Clockとif〜elseで一定条件下での反復動作を実現することが多いようです。)

左のボタンをタップした時のボールの動き。現在のボールのx座標にランダムな数字を加算して目標のx座標を設定して角度をつけるようにした。目標のy座標は-180(上の方向に180pixelsいったところ)。

右のボタンをタップした時のボールの動き。上記に同じ。

ボールをタップした時のボールの動き。y軸をまっすぐ上に進む

 

ボールがキーパーand/orゴールと衝突した時の対応:

1. ボールがキーパーと衝突(キャッチ)した時は、Failure(失点)を加算するが、この時はゴールとも衝突しているはずので、得点が0超の場合は1点減点。でないと、セーブされたのに得点したことにもなってしまう。

2. ボールがゴールだけに衝突した時は、得点が加点される。このあたりは現実にはなかなかうまくいかないことがある。

なぜか失敗することがある。うまく点数が加点されないとか。

でも、そんなことよりも、よく考えると、このアプリのコンセプトは最初から間違っているような気がしてならない。

ゴールキーパーが自動的に左右に動いて、左右のボタンでシュートするのではなく、ランダムに飛んでくるシュートボールをゴールキーパを左右に動かすことによりセーブする、という方が面白い。

もう一度最初から作り直すのが良さそう。でも、せっかく作成したので備忘録的にブログにアップだけはしておく。

 


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

2024-04-24 12:18:12 | 日記

今回は、気象情報の下に気温を表示。

実行画面:

スクリーンのデザイン:

Day1Temp〜Day7Tempまでの7つのLabelを追加。各Labelに最高気温と最低気温を表示。

                                   

ブロック・コード:

気温を追加した部分のみ。

GETリクエストの結果、データを取得後、関数getMaxMinTemp(青地に白の?がついてるcomponent)を実行する。

関数getMaxMinTempの内容:

list => temp => max 又は min へとたどればそれぞれの値を取得できる。7日分のデータを、maxTempとminTempの変数にリスト形式で格納する。

JSONファイル(データ自体は古いもの)で見ると。。。

種々のデータを表示する関数showDailyDetailsに、Day1Temp〜Day7TempのLabelを追加し、体裁を整えた上で表示する。小数点1位まで表示としている。

<残された課題>

都市名の右側に国名及び日の出、日の入り時刻の表示。これが終わればNew Weather Appも一応完成となるが、あと追加するとしたら、対象都市のデータ(もし、世界中の都市のデータが手に入ればの話だが)を参考までに見られるようにするのもいいかなと思う。

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

前回までのブログ:

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 データの確認)


MIT App Inventorで遊ぶ (Count Numbers App 4 最高得点の保存)

2024-04-23 12:47:03 | 日記

前回は、制限時間(20秒)を設定したが、今回は、正しくタップした数の最高点を保存し、毎回その過去の最高点と比較できるようにした。もし、過去の最高点より多くのタップ数を記録した場合は、その数が最高点として保存される。

説明より見る方が早い。

実行画面:

終了時のMessage Dialogには、OKボタンをタップしたら、リセットされるとなっているが、リセットされなかったので要修正。Message Dialogの内容ももう少しわかりやすくしたい。

スクリーンのデザイン:

Clear DBボタンを追加。これは、最高点を格納しているTinyDB(MIT App Inventorに備え付けの簡単なデータベースで、タグと値で構成されている)のデータを初期化するためのボタン。間違って過去の最高点を消さないように、「長押し」にした。(ブロック・コードの通り)

                                           

ブロック・コード:

最高点の保存、読み出し、DB削除の部分のみ。(TinyDB1と書かれたcomponent)

制限時間(20秒)を過ぎれば、Message Dialogが表示され、過去の最高点と比較表示される。また、今回の得点が過去の最高点より多い場合は、最高点が書き換えられ、最高点として表示される。

長押し(LongClick)するとTinyDBのデータが全て削除される。このcomponentは若干問題が生じる場合もあり、対応策要検討。

アプリが立ち上がった時の初期化項目の一つとして、TinyDBに「maxScore」をキーとして保存されている値を変数maxScoreに割り当てる。(初めての場合、値は、"")

startボタンをタップした時、TinyDBより過去の最高点を取得。