＜Sudoku 2 への追加＞
Public API (DOSUKU) より数独の問題と解答を取得した際、問題のレベルに関する情報も得ることができる。
アプリ実行のビデオ：
スクリーンのデザイン：
「Start」ボタンの右側にレベルを表示するLabel(Level)を追加。
ブロック・コード：
1. 取得したJSONデータよりレベルのデータ（キーは、difficulty）を抽出し、levelLabelに内容を表示する関数getDifficutyData。
2. 関数getdifficultyDataの実行
*******************************************************************
前回までのブログ：
ListViewとLabelをTextBoxに統合。データはPublic APIより直接取得。Nextボタンをタップすれば次の新しいSudokuを楽しむことができる。
ブロックはSudoku1 と比べると随分とシンプルなものとなった。（まだ、コピー＆ペーストのブロックは多いが）
Public APIは、前回と同様こちらを利用。
アプリ実行のビデオ：
Sudokuのやり方があまりわかっていないので、解答を見ながらやってみたデモのためのビデオです。
スクリーンのデザイン：
「Cheat Sheet」ボタンの下に解答が表示されるスペースがある（最初は非表示）
ブロック・コード：
1. 「Start」ボタンをタップ＝＞表示を「Next」に変更＝＞背景色を橙色系に変更＝＞「Fetching Data ...」を画面に表示＝＞所定のURLに対しGETリクエストを行う。
2. 問題なくデータを取得した場合
＝＞データをデコードの上、変数JSONDataに格納し、データの抽出、設定などの所定の関数を実行。
＝＞データは９列９行で、行毎にvalueデータ（0と数字で構成される最初の数字データ）を抽出して、変数valueDataRow1〜valueDataRow9に格納する関数makeValueDataByRow
********************** 変数への値の設定はvalueDataRow9まであるが、以下省略 ********************
＝＞各行のデータをそれぞれのTextBoxに表示する関数enterNumberToRow1〜enterNumberToRow9
＝＞解答データを抽出する関数makeSolutionData
＝＞解答データを解答を表示するLabelの各行に割り当てる関数makeSolutions
List形式のsolutionData（例えば、[1,2,3,4,5,6,7,8,9]）をテキスト（例えば、コンマ区切りではない 1 2 3 4 5 6 7 8 9)に変換している。
************ solutionRow1Label〜solutionRow9Labelまであり。以下省略。********************
3. 「Cheat Sheet」をタップすると、解答欄を格納しているコンテナーVerticalArrangement3の表示を有効にし、「Cheat Sheet」ボタンは無効にしておく。
なお、「Start」ボタンをタップする前は、当然解答データもないので、その場合は、「First off, tap "Start button"」を表示する。
「X」をタップすると、VerticalArrangement3の表示を無効にし、「Cheat Sheet」ボタンを有効にする。
*******************************************************************
前回までのブログ：
最近アプリ作成の基本的な考え方、作り方などで大変参考にしているYouTuber 「Code with Ania Kubów 」の「5 API Projects in 5 hours」というのを視聴していたら、（JavaScriptではあるが、あまり言語は関係ない）「数独」のアプリ作成が紹介されていた。面白そうなので、MIT App Inventorで可能なのかチャレンジしてみた。
私自身、数独はやったことがないので、これでいいのか、よくわからない。。。
Public APIが公開されているので、ネット経由データを取得しても良いが、今回は、あらかじめダウンロードしたJSONファイルをアプリに同梱して、そのファイルからデータを読み込んだ。したがって、1種類のみ。ネット経由だと、GETリクエスト毎に異なった数独を取得できる。
アプリ自体はとてもシンプルだが、ブロック・コードを大量にCopy & Pasteしなくてはならなかったので、非常に面倒であった。
アプリ実行のビデオ：
ちょっと見にくいが。。。
スクリーンのデザイン：
tablet sizeで画面キャップチャー。
ブロック・コード：
あまりにブロックが多数なので、適宜省略。
1. 遊び方を表示。同梱のsudoku1.json（後記の参考）を読み込む。ListPickerとLabel（9列9行なので各81個ある）の体裁を設定する関数makeListOfListPickers, makeListOfLabels, setListPickers, setLabelsを実行する。
2. 読み込んだJSONファイルの最初に表示する数字（いくつかの数字と0）を行毎に分けて変数に格納。
******* 途中省略 *******
3. 変数solutionListに解答リストを格納。JSONファイルの「solution」をキーにしているリストを9行分読み込んで同変数に追加。
4. 上記2.で読み込んだ最初に表示する0といくつかの数字のデータを行毎にLabelに表示。9行あるのでsetRow1 〜 setRow9まである。
************* 〜 setRow9まであるが省略 *****************
5. 全てのListPickersをリストにして、変数listOfListPickersに格納。
************* 以下〜 p81まであるが省略 ****************
そして、generic componentを使って一気に画像（上向きと下向きの三角形のアイコン）を当てはめ、サイズの設定等を実行。
6. ListPickerと同様に、ListPickerの下に設定している「数字を表示するLabel」もリストとして変数listOfLabelsに格納。
************* 以下〜 l81まであるが省略 ****************
同様に、フォントサイズ、サイズなどをgeneric componentを使って一気に設定。
7. ListPickerより数字を選択した際、既に数字が選択されている場合は、数字を入れ替えるかどうかを確かめる。
Yesの場合は、新たに選択した数字に入れ替える。
8. 解答は、一番下にある「Cheat Sheet」というボタンをタップすれば、解答が設定されているコンテナーVerticalArrangement102の表示が有効となり、解答が表示されることになる。回答をリスト形式で保存してあるsolutionsListから順番に数字を指定のLabelに表示させる。Labelは、s1 〜 s81まである。
また、「X」ボタン(closeSolutionButton)が表示される。
*************** 以下省略 **************
9. 「X」ボタンをタップすると、解答を格納しているVerticalArrangement102の表示が無効となり、解答も非表示となる。
また、「X」(closeSolutionButton)が非表示となる。
ブロックを見ると何かごちゃごちゃしているが、JSONファイルより取得した数字を順番に表示し、1〜9の数字をListPickerから選んで表示しているだけ。簡単に図式化すれば以下。
ListPickerとLabelを一つにして入力可能なTextBoxにすれば、もっとスッキリした画面になったようだし、ブロックも少なくなったと思われる。これを作るきっかけとなった Ania Kubów のアプリのデザインにひっぱられた感じ。
＜参考＞
取得したJSONデータ「sudoku1.json」は以下の通り。9列9行あるが、9列1行目のみ。valueが最初に表示される数値。solutionが解答。
{
"newboard":{
"grids":[
{
"value":[
[
0,
7,
0,
0,
0,
0,
0,
3,
0
],
... 省略（８列分）
],
"solution":[
[
1,
7,
6,
2,
8,
9,
4,
3,
5
],
... 省略（８列分）
]
}
]
}
}
左右上下のボタンをタップすると、その方向にpacmanが一コマずつ動く仕様になっていた。これを変更し、ボタンをタップすると、その方向に行けるところまで自動で動くようにした。もちろん、分岐点で方向の違うボタンをタップすれば、今度はその方向に動いていくことになる。
アプリ実行のビデオ：
スクリーンのデザイン：
画面の下部に、一コマずつ動かすボタンを新設した。（右側の図）
ブロック・コード：
Pacmanが動く部分と追加した部分のみ。
1. Clockのintervalを格納する変数clockTimeIntervalを設定した。今後、レベル設定などにも使えるかもしれない。
2. 上下左右のボタンがあるが、たとえば左矢印ボタンをタップした場合、前回と異なり、新たに設定したleftClockを有効にさせる。
3. leftClockが有効になると、matrixList上、Pacmanの左側のコマが「1」である限り繰り返し30px（一コマ）ずつ左へ（負数）動く。
なお、前回までのPacmanは、新設のoriginalLeftButton(「Left」)通り、タップすると、一コマ（30px）ずつ進むようになっていた。
***********************************************
前回までのブログ：
MIT App Inventorであのアプリを作ってみる (Pacman 3）
MIT App Inventorであのアプリを作ってみる (Pacman 2）
MIT App Inventorであのアプリを作ってみる (Pacman 1）
＜訂正＞
従来、「MIT App Inventor」と表記してきたが、正しくは「MIT App Inventor 2」（または、「AI2」）と表記すべきらしい。
今回は、支払い関係の部分を追加した。前回の課題はそのまま。無理矢理アプリを終了させたような感じが否めないが。。。
機能的には、配達時刻の選択とか、客の囲み込みの一つの手段である「顧客の登録」とか、まだまだ重要な部分が欠落しているが、このアプリ自体はここまでかもしれない、という感じもする。でも、この注文情報をネット経由（Firebaseなどの外部DB経由）で受け取る店側のアプリを作っても面白いかもしれない。
アプリ実行のビデオ：
スクリーンのデザイン：
赤点線内の部分。（非表示の部分も多い）
ブロック・コード：
1. 支払い方法のうち、クレジットカードにチェックを入れた場合、クレジットカードの詳細を入力する項目が表示される。（実際にはVerticalArrangement18というコンテナー内に設定されている）
また、同時に「現金」のチェックボックスを無効にする。
2. カード番号の入力欄の右に「目」のアイコンがあり、これをタップすると入力した番号が表示され確認できる。
また「目」にバツのアイコンをタップすると番号を目隠しできる。目隠しするのは、TextBoxのattributeであるPasswordVisibleをfalseに設定するだけ。
3. セキュリティーコード入力欄の右側にある「？」ボタンをタップすると、同コードの説明が表示される。
4. 「現金」のボックスにチェックを入れると、メッセージが表示され、メッセージ・ウインドウのボタン（OK）をタップするとアプリの最初の画面に戻る。
5. 一方、クレジットカード決済の場合は、「お支払いの確定」ボタンをタップすると、「カード会社との交信中」である旨のメッセージが表示され、約２秒後に「ご注文ありがとうございました」のメッセージが表示される。「OK」をタップするとアプリの最初の画面に戻る。
Clock1を使ってダミーの加算動作を3回させて、後のメッセージを約２秒程度表示を遅らせて（700ミリ秒X3）、２つのメッセージを連続的に表示している。
メッセージ・ウインドウの「OK」ボタンをタップすると、最初の画面に遷移する。
*************************************************************
前回までのブログ：
MIT App Inventorであのアプリを作ってみる (KanooPizza 4）
MIT App Inventorであのアプリを作ってみる (KanooPizza 3）
