＜追加訂正＞
0, 0の位置が上にずれている問題は、単にグラフの初期設定が適切になされていなかったためと判明。初期設定後は以下の通りとなった。Expenses Memo 2は、訂正追加済み。
グラフの初期設定とは以下の部分で、XFromZeroにチェックが入っていた。チェックを外すと期待通りに表示された。なお、YFromZeroのチェックを外すと、縦棒が左によってしまって、最初の縦棒の表示幅が半分になってしまった、
問題だった点：
以下のように0, 0の位置が上にずれていた。
*************************************************************************
前回までのブログ：
＜追加訂正あり＞
費用の推移を見るためのグラフを追加してみたが、グラフに関する知識不足のためこれが精一杯というところ。
今回は棒グラフ。円グラフにも挑戦予定。
なお、削除機能も追加した。
アプリ実行のビデオ：
（データ取得がうまくいかず、何度もRefreshボタンをタップしている場面がある。基本的にデータ取得のブロック・コードに欠陥があるかもしれない。）
スクリーンのデザイン：
グラフを表示するスクリーンに遷移するためのボタンを追加。
componentとしては、Char1およびChartData2D1を追加。ChartData2D1はデータまわりに関係するcomponentで、Chart1の中に組み込む必要がある。真ん中のcomponentsリストを見ると、Chart1の中にChartData2D1が組み込まれているのがわかる。
右端がグラフを表示するために新たに追加したスクリーン
ブロック・コード：
＜追加したブロックのみ＞
Screen1：
グラフのアイコンがついたchartButtonをタップした時の動作を設定。遷移先としてchartScreen2を指定。chartScreen2に渡すデータとして、日付、金額、項目名のデータ（リスト形式）を設定。
削除機能については、ListViewの当該列をタップしたら、選択のダイアログが表示され、「削除する」をタップしたら、当該データのタグを取得。
取得したタグをキーにしてDeleteを所定のURLに対し実行する。REST APIを使うととても簡単。
chartScreen2：
データポイント（要するに、棒グラフの棒の部分）をタップすると日付、金額（実際には、これらに加え項目も）を確認できる旨を表示する。
Screen1より渡されたデータ(get start value)はリスト形式で３つのデータを含んでいる、index 1は、日付のリスト、index 2は、金額リスト、index 3は項目リスト。
ChartData2D1.AddEntryの使い方が分からず、試行錯誤の結果、x(軸)は、連続する数字（注後記）、Y(軸)は、棒の長さ（この場合金額）を当てはめれば、うまく棒グラフを表示する事ができた。（間違っているかもしれないが、結果はOK）
そして、x軸のラベルは、別途Chart1.Labelsで日付を表示することができた。（すべての日付が表示されるわけではないが）
今回は、スクリーン・オリエンテイションをPortrait（縦長）にしたが、Landscape Mode （横長）だとうまくいくかもしれない。
***********************************************************
＜注＞
当然であろうが、連続する数字が0から始まる場合（左側）と、1から始まる場合（右側）では以下のような違いがあった。最終版は左側を採用。なぜか分からないが、0, 0の位置が上にずれている。
＜追加訂正＞
0, 0の位置が上にずれている問題は、単にグラフの初期設定が適切になされていなかったためと判明。初期設定後は以下の通りとなった。
***********************************************************
棒グラフの棒をタップしたら、日付、金額、項目をグラフの下に表示するようにした。
戻るボタンは単純にメインのScreen1に戻る設定。
************************************************************
前回のブログ：
MIT App Inventorで遊ぶ (Expenses Memo 1）
映画関係者の一覧リストを表示するボタンの位置の座りが良くなかったので、全体のレイアウトを若干変更するとともに、地域と言語（要するに、言語の選択？）を選択できるようにした。デフォルトは、英語(USA)にした。
アプリ実行のビデオ：
スクリーンのデザイン：
言語（地域）選択のボタンおよびスター検索ボタンを下部に移動（タブ形式に変更）
言語（地域）選択ボタンは、左側の画像では４つしかないが、実際には右側のcomponentsパネルの通り５つある。(JP=日本,USA=米国,FR=フランス,KR=韓国,CN=中国)
ブロック・コード：
追加部分のみ。
1. The Movie DBのサンプルURL何度を見ると、region, country, language(lang)の３つのパラメーターが使われているので、それに倣って作っているもの。それぞれISOのコードを使用。
region => ISO 3166-1 （2文字コード）
country => ISO 3166-1 (Country Name)
language(lang) => ISO 639-1 （2文字コード）
変数searchOptionsにこれらのオプションを定義。
2. それぞれの言語（地域）選択ボタンをタップした時の動作を設定。変数にコードを設定するだけ。
jpButtonと同様のボタンが他に４つ設定されている。（usButton, frButton, krButton, cnButton）
なお、５つのボタンの動作内容は同じなので、generic componentsを使えば、ブロック・コードもスマート（５つのブロックが１つとなる）になるが、タップした時の設定動作が、これら５つ以外のボタンにも適用されてしまう。今回は、これら５つ以外にもボタンがあるので、Copy&Pasteで重複コードとした。
3. GETリクエストのURLにlangOptions, regionOptions, countryOptionsをセットする。
なお、下部のタブメニューにある家マークのボタンにはまだ動作は設定していない。
*********************************************************************
前回までのブログ：
MIT App Inventorで遊ぶ (THE MOVIE DB ３）
MIT App Inventorで遊ぶ (THE MOVIE DB ２）
MIT App Inventorで遊ぶ (THE MOVIE DB 1-2）
MIT App Inventorで遊ぶ (THE MOVIE DB １）
映画関係者のIDを使って、プロフィールを検索してみる。
アプリ実行のビデオ：
スクリーンのデザイン：
左がメイン画面。右が映画関係者のプロフィールを表示する画面。
ブロック・コード：追加部分のみ。
＜メイン画面＞-------------------------------------------------------------
映画関係者のListViewの当該rowをタップしたら、プロフィール画面が表示される。
ListViewをタップしたら、リストの中でのindexが返されるので、それを基にidListとstarsListより当該関係者のID及び名前を取得。これらデータを遷移時に「startValue」としてプロフィール画面（DetailScreen）へ渡す。
＜プロフィール画面（DetailScreen）＞-------------------------------------------------------------
1. Backボタンをタップしたら、メイン画面（Screen1）に戻る。
2. メイン画面よりはIDと名前を受け取る(get start value)が、名前については、sctorNameLabelに表示（タイトル部分）。
3. 受け取ったIDをキーにして所定のURLに対しGETリクエストを行い、プロフィールを取得する。言語は英語を指定。他の言語の場合データが不足しているケースが多いので。
4. 取得したデータは、dictionaryのキーを指定してname, birthdayなど個々の詳細を所定のLabelに表示していく。
特に問題となるような点はなかった。
Expense Trackerなどの名前の経費明細、経費節約アプリの作り方が、YouTubeなどで紹介されているが、簡単な経費明細アプリを作ってみた。経費明細を入力し、FirebaseのRealtime DBに保存し、リストで一覧表示するシンプルなアプリ。
このアプリは、時々反応が鈍い時があるが、再度データを読み込むと特に問題なくデータ取得、表示できるので、今は無視しても良いだろう。多分、タイミングが合わない時などにエラーが出ているのだと思われる。
実行画面：
検索したら、その項目だけの合計金額にリアルタイムで変更していけばいいのだが。。。多分無理かな。
スクリーンのデザイン：
左がメイン画面で費用の明細が表示される。
右は費用の内容をインプットし、データベース (Googleが提供するFirebase Realtime DB) に保存する画面。
「＋」ボタンをタップすれば、内容入力画面に遷移。
「Done」ボタンをタップすれば、メイン画面に遷移。
ブロック・コード：
＜メイン画面Screen1＞
1. 「＋」ボタンをタップすると、費用の内容を入力するInputScreenに遷移。
2. 「getDetail」(getButton)をタップした時の動作。変数を初期化した後、関数getTagListおよびgetDataを実行。
3. 関数resetVariablesの内容
4. 所定のURLに対しGETリクエストを行う。（shallow=trueとすれば、各データのキーでもあるtagの値のみを返してくれる）
5. 返ってきたデータから、データの個数を取得し、データ自体はtagListに格納する。
6. 所定のURLに対しGETリクエストを行いデータを取得。
7. 取得したデータを基に、各項目のデータのリストを作成する。関数makeDateList, makeItemList, makeTypeList, makeAmountListを実行し、最後にそれらを統合するmakeDataForListViewを実行。そして、ListViewにデータを表示。
8. 関数makeDateListの実行内容：
tagListをキーにしてデータを読み込み、さらにそれぞれの項目（この場合Date）をキーにして値を取得。（以下同じ考え方）
9. 関数makeItemListの実行内容：
10. 関数makeTypeListの実行内容：
11. 関数makeAmountListの実行内容：
コンマ付きのリストは表示用のamountListに、コンマなしの金額はbareAmountに格納し、順番に加算し合計金額を算出。加算する場合、コンマのような余計なもの（Text）があると計算できないため。
12. 関数makeDataForListViewの実行内容：
＜サブ画面inputScreen＞
1. 変数の設定：
itemlList は Item ListPicker で表示するアイテムリスト。
typeList は Tyoe ListPicker で表示する費用のタイプリスト
2. メイン画面に戻るボタン（Done) の設定
3. inputScreenの初期化。itemListPicker及びtypeListPickerの表示項目を設定。
4. DatePickerで日付を選択した後の動作設定。selectDateLabelに表示するとともに変数dateに値を格納。
5. ItemListPickerでアイテムを選択した後の動作設定。itemLabel に表示するとともに変数itemに値を格納。
6. TyoeListPickerで費用の種類を選択した後の動作を同様に設定。
7. 変数とLabelをリセットする関数resetVariablesAndLabelsを設定。
8. 所定のURLに費用の内容（日付、費用項目、費用の種類、金額）をPostする。そして、キーボードを非表示にする。
9. Postが成功したら、resetVariablesAndLabelsを実行し、すべて初期化する。
簡単にできるかな、と思ったが、色々なところでかなり手こずった。
また、なかなかグラフを使用する機会がないので、もし可能なら費用の推移などをグラフ表示できればいいのだが。。。
