MIT App Inventorであのアプリを作ってみる (KanooPizza 1）

ド○ノ・ピザのスマホアプリに似たようなものを作ってみる。機能がたくさんあるので、少しずつ追加していきたい。途中で投げ出すかもしれないが。最初で最後？でも、まずは、トライ！（東京都世田谷区に限定したアプリ）

MIT App InventorのアプリにJavaScriptを組み込む（連携させる）ことができるので、今回は、初めての試みとして、ネット上にもサンプルが豊富にある携帯電話番号のチェックに使ってみた。関数と変数の名前、そして返り値を変えただけで、ほぼそのまま使わせてもらった（と言ってもいい）ウエッブサイト、YouTubeのチュートリアルなどは以下の通り。

1.  Integrate a JavaScript code in an App Inventor Application

2. MIT App Inventor Help : Javascript, not working

3. 携帯電話番号の正規表現

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

アプリ実行のビデオ：

スクリーンのデザイン：

メインの画面、右２つの画面は配達を選んだ際に届け先を指定する画面。

一番右のaddressDetailScreenには、下部にJavaScriptとの仲を取り持ってくれるWebViewerが設定されている。表示はされない。

            

ブロック・コード：

＜メイン画面Screen1＞

CornerRadiusというextensionを使って下部にある２つのボタンのコンテナーVerticalArrangement4の４隅を丸角に設定。

最初に、VerticalArrangement4の背景色を「なし」(0)に設定しているが、これは、Designerの画面でBackgroundcolorをNoneに設定しても同じ。CornerRadiusのextensionはVerticalArrangement4に言わばoverlayのように上から丸角の背景色を設定するので、もし、すでに背景色が白の角のあるVerticalArrangement4が設定されていたら、丸角が表示されないので。

教えてもらったウエッブサイトはここ。

こういうことらしい。エフェクトは、適用する順番が重要ということか。

「配達」ボタンをタップしたら、selectDeliveryScreenへ遷移。

＜selectDeliveryScreen＞

1. 1〜42 （丁目）までのリストを作成する関数。（この種のアプリでは、通常、郵便番号で地域を特定すれば、その地域での丁目の候補がリスト形式で表示されているので、その可能性について検討する予定。そのようなAPIサービスがなければ無理だが。）

2. chomeListPickerに関数makeOneToFortyTwoで作成したリストを設定する。

3. 「戻る」ボタンをタップすれば、メインのScreen1に戻る。

4. ハイフンなしで入力する郵便番号の桁数が７であればOKで、その場合は、ポストくんの所定のURLに郵便番号と共にGETリクエストを行う。もし、7桁で出なければ、再入力を促すメッセージを表示。

5. 取得するデータの例（赤字、下線は当方にて追加）：

{
   "postcode_type":"area",
   "jis":"13112",
   "old":"156",
   "new":"1560051",
   "prefecture_kana":"トウキョウト",
   "city_kana":"セタガヤク",
   "suburb_kana":"ミヤサカ",
   "prefecture":"東京都",
   "city":"世田谷区",
   "suburb":"宮坂",
   "street_address":null,
   "office":null,
   "office_kana":null,
   "office_roman":null,
   "post_type":null,
   "is_separated_suburb":0,
   "is_koaza":0,
   "is_chome":1,
   "is_include_area":0,
   "status":0,
   "reason":0,
   "prefecture_roman":"Toukyouto",
   "city_roman":"Setagayaku",
   "suburb_roman":"Miyasaka",
   "handling_post_office":null,
   "multiple_numbers":null,
   "created_at":"2024-06-01T15:52:52.000Z",
   "updated_at":"2024-06-01T15:52:52.000Z"
}

prefecture, city, suburbの各データを抽出しshowAddressLabelに表示する。取得に失敗した場合は、再入力を促すメッセージを表示。

6. chomeListPickerより何丁目であるかの数字を取得して、「丁目」を付加してchomeLabelに表示。また次のscreenに移るボタン「＞＞」を表示する。

7. AddressDetailScreenへ遷移する際、郵便番号、丁目も含む住所を渡す。

＜addressDetailScreen＞

1. 受け取った郵便番号を変数zipCodeに格納。addressLabelに郵便番号＋住所を変数receivedAddressに格納し表示。

 

2. 戻るボタンの動作設定。戻り先はselectDeliveryScreen。

3. 「お届け先の確認」ボタンをタップすると、キーボードを隠し、変数checkPhoneNumberを実行。

訂正がある場合。訂正後「訂正する」ボタンをタップした時は、一旦address1Labelを削除の上、関数checkPhoneNumberを実行。

4. 関数checkPhoneNumberの内容。

WebViewStringに携帯電話の番号を設定し、JavaScriptが記述されているcheckPhoneJavaScript.htmlをコールする。

あとは、WebViewStringを受け取ったJavaScriptが実行され、OKの場合は１、そうでなければ２をWebViewStringに設定する。（内容は、下のJavaScriptコード）

WebViewStringに変更があった場合は、受け取る値により処理を行う。１の場合は、そのままaddress1Labelに住所（前のscreenより受け取った住所にこのscreenで入力した住所を加えたもの）と携帯電話番号を表示する。それ以外の場合は（この場合は２）、携帯電話番号の再入力を促すメッセージを表示する。

checkPhoneJavaScript.htmlの内容は以下の通り。（他の方が作成したコードを表示するのは抵抗があるが、関数名、変数名、返り値を変更し、余分な箇所を削除しているので、ここにコードを表示しても特に問題はないだろう。）

ポイントは赤枠で囲んだ部分。

このアプリ作成はいばらの道のような感じがする！次の段階に進めるのか？？？

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

Background Image of the main screen : Photo by The Nix Company on Unsplash.