チュートリアル

人工知能の機械学習モデルを使って画像を分類するアプリを作りましょう

クリックしてアプリが動いているところを見てください

[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、”WhatisThis”と名前を付けます。

エクテンションの追加

https://appinventor.tmsoftwareinc.com/download/LookExtension.aix から日本語化プロジェクトでハックしたLookExtension.aixをダウンロードし、LookExtension.aixをエクステンションパレットからImport extensionをクリックしてインポートします。LookExtension.aixはMITで開発されたエクステンションですが機械学習モデルによる推論をアンドロイドデバイス上で行うために、オリジナルのLookExtension.aixは動作しないアンドロイドデバイスが多く、日本語化プロジェクト所有のアンドロイドデバイスでは動作確認ができませんでした。MITオリジナルのLookExtension.aixが動作確認されているアンドロイドデバイスはこちらです。日本語化プロジェクトでハックしたLookExtension.aixはMITオリジナルのLookExtension.aixが動作しないデバイスではバックエンドにCPUを使用することにより推論速度は遅くなるものの、多くのアンドロイドデバイスで動作するようになっています。MITオリジナル版が動作しなくて日本語化プロジェクトハック版が動作することが確認されているアンドロイドデバイスは今のところ、Google Nexus 5、Moto G Play、Samsung Galaxy Tab 4 8.0です。このエクステンションで使っているモデルはサイズが小さいので精度はそれほど良くありません。

クリックして拡大

デザイン編集

レイアウトとコンポーネントの配置

下図のようにユーザーインターフェースパレットから状況ラベル、レイアウトパレットから縦並びレイアウトを配置し、縦並びレイアウトの中にユーザーインターフェースパレットからウェブビュー、レイアウトパレットから横並びレイアウト、その中にはユーザーインターフェースパレットから撮影ボタンを配置します。見えないコンポーネントとしてエクステンションパレットLookExtensionとメディアパレットからカメラをドラッグアンドドロップします。状況ラベルのテキストは「準備中」に、撮影ボタンのテキストは「イメージ撮影」にします。Look1のプロパティのInputModeをImageに、WebViewerをウェブビュー1にするのを忘れないでください。忘れると動きません。

クリックして拡大

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

エラーメッセージ

はじめにグローバル変数を定義します。組み込みブロック内の変数をクリックして”グローバル変数 変数名 を次の値で初期化”ブロックをドラッグアンドドロップします。変数名は「エラーメッセージ」にしてください。次に組み込みブロック内のリストをクリックして”リストを作成”を1個ドラッグアンドドロップしてグローバル変数ブロックに組み込みます。

“リストを作成”の左上にギアアイコンをクリックして要素をドラッグアンドドロップして要素が合計7個になるようにします。

“リストを作成”を7個ドラッグアンドドロップして”リストを作成”ブロックに組み込みます。あとは数学にある数字とテキストにある文字列をドラッグアンドドロップして下図のようにします。

“いつもLook1.Error”ブロックをドラッグアンドドロップして下図のように状況ラベルにエラーメッセージを表示するようにします。”結合する”ブロックは組み込みブロック内のテキストに、”ペア検索”ブロックは組み込みブロック内のリストにあります。”取得errorCode”ブロックは”いつもLook1.Error”ブロックのオレンジ色のerrorCodeをクリックすると取れます。

撮影ボタンクリックイベント

“撮影ボタンをクリックされたら“ブロックに“呼び出すカメラ1撮影する“ブロックと、“縦並び1見えるを“ブロックにロジックの偽ブロックを組み込んだものを組み込みます。

“いつもカメラ1撮影終了後“ブロックに“呼び出すLook1ClassifyImageData“ブロックと状況ラベルに「推論中」と表示するブロックを組み込みます。”取得イメージ”ブロックは”いつもカメラ1撮影終了後”ブロックのオレンジ色のイメージをクリックすると取れます。

Look1イベント

“いつもLook1ClasifierReady“ブロックに”撮影ボタン有効を”ブロックにロジックの真ブロックを組み込んだものと状況ラベルに「推論中」と表示するブロックを組み込みます。

“いつもLook1GotClasification“ブロックに“縦並び1見えるを“ブロックにロジックの真ブロックを組み込んだものと状況ラベルに結果リストの1番目を表示するブロックを組み込みます。”結果”ブロックは”いつもLook1GotClasification”ブロックのオレンジ色の結果をクリックすると取れます。

 
これで完成です。スマホでテストしてください。分類結果は英語で上部に表示されます。
クリックして拡大

ソースコードのダウンロード

App Inventorでこのサンプルを使用したい場合は、 ソースコードをコンピュータにダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[ローカルコンピュータからプロジェクト(.aia)をインポート]を選択し、ソースコードを選択してインポートしてください。

チュートリアル

新型コロナ感染者数を地図を使って検索するアプリを作ります

このアプリは実用的でGoogle Playで公開できるレベルのアプリです。ただし、新型コロナ関係のアプリはGoogle Playが受け付けないので、このアプリはこのままでは公開できません。

更新履歴

  • 初版 2/11/2021

使用しているテクニック

  1. RESTful API呼び出し
  2. JSONリストの扱い
  3. JSONリストのクイックソート
  4. GPS
  5. マップ
  6. TinyDB
  7. 手続き

ソースコード(aiaファイル)のダウンロード(有料)

チュートリアルを読んで手でアプリを入力すれば動くものが作れますが、入力する時間がもったいないという人のためにソースコードを2980円で販売しています。下の購入ボタンをクリックしてメールアドレス、クレジットカード番号、有効期限、CVCを入力すると、ダウンロードリンクがメールで送付されます。コンピュータにソースコードをダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[ローカルコンピュータからプロジェクト(.aia)をインポート]を選択し、ソースコードを選択してインポートしてください。売り上げ金はプロジェクトの運営に必要なクラウドコンピュータ使用料金、テスト用スマホ購入費用、人件費などに当てられます。プロジェクトの発展のためにご協力ください。

プログラムの構造(流れ)

スポンサー企業のTM Software, Inc.ではアメリカ合衆国のジョンズ・ホプキンス大学が公開している全世界の新型コロナ感染者数のデータをデータベースに取り込み、1日の新規感染者数と人口10万人あたりの新規感染者数の7日間移動平均を計算し、RESTful APIを使用してデータを自由にダウンロードできるようにしています。このアプリではこのAPIを利用して1)最新の全国コロナ感染者数データを取得して新規感染者数の7日間移動平均の上位20都道府県にマークを表示、2)表示されている地図をクリックするとその場所の新規感染者数と累積感染者数を表示、3)地名を入力するとその場所にマップをズームしてその場所の新規感染者数と累積感染者数を表示、4)GPSを利用して現在地の新規感染者数と累積感染者数を表示、します。

APIの呼び方と返される値

緯度と経度からその都道府県のコロナ感染者数の時系列データを取得

呼び方
https://covid19api.tmsoftwareinc.com/api/v1/latlngs?lat=35.685750628984465&long=139.75407754498727
返される値:JSONリスト
[{“country”:”Japan”,”state”:”Tokyo”,”county”:””,”city”:””,”cases”:49539,”newcases”:822,”7rate”:4.19,”deaths”:532,”date”:”2020-12-18″},
{“country”:”Japan”,”state”:”Tokyo”,”county”:””,”city”:””,”cases”:48717,”newcases”:678,”7rate”:3.95,”deaths”:532,”date”:”2020-12-17″},
{“country”:”Japan”,”state”:”Tokyo”,”county”:””,”city”:””,”cases”:48039,”newcases”:460,”7rate”:3.84,”deaths”:522,”date”:”2020-12-16″},
{“country”:”Japan”,”state”:”Tokyo”,”county”:””,”city”:””,”cases”:47579,”newcases”:305,”7rate”:3.73,”deaths”:513,”date”:”2020-12-15″},

地名から緯度と経度を取得

呼び方
https://covid19api.tmsoftwareinc.com/v1/geos?location=東京
返される値:JSON
{“lat”:35.6803997,”lng”:139.7690174}

最新の全国コロナ感染者数データを取得

呼び方
https://covid19api.tmsoftwareinc.com/api/v1/jabounds
返される値:JSONリスト
[{“state”:”Aichi”,”county”:””,”city”:null,”lat”:35.035551,”lng”:137.211621,”cases”:13535,”newcases”:238,”date”:”2020-12-18″,”sevenrate”:2.67},
{“state”:”Akita”,”county”:””,”city”:null,”lat”:39.748679,”lng”:140.408228,”cases”:94,”newcases”:0,”date”:”2020-12-18″,”sevenrate”:0.06},
{“state”:”Aomori”,”county”:””,”city”:null,”lat”:40.781541,”lng”:140.828896,”cases”:390,”newcases”:7,”date”:”2020-12-18″,”sevenrate”:0.35},
{“state”:”Chiba”,”county”:””,”city”:null,”lat”:35.510141,”lng”:140.198917,”cases”:8663,”newcases”:148,”date”:”2020-12-18″,”sevenrate”:1.88},
{“state”:”Ehime”,”county”:””,”city”:null,”lat”:33.624835,”lng”:132.856842,”cases”:372,”newcases”:2,”date”:”2020-12-18″,”sevenrate”:0.19},
{“state”:”Fukui”,”county”:””,”city”:null,”lat”:35.846614,”lng”:136.224654,”cases”:337,”newcases”:0,”date”:”2020-12-18″,”sevenrate”:0.11},

使用しているテクニックの詳細

RESTful API呼び出し方法

接続パレットにあるWebコンポーネントを使います。下のようにAPI呼び出しURLに必要な引数を結合してからWebコンポーネントのURLに設定し、WebコンポーネントのGetメソッドを呼び出します。

Getメソッドは非同期で呼び出されるので、下の「いつもテキストに受け取ったら」を使って別途受け取る結果の処理を行います。

JSONリストの扱い方法

「いつもテキストに受け取ったら」で受け取る「レスポンスコンテント」をWebコンポーネントのJsonTextDecodeWithDictionariesメソッドに渡して、連想配列(dictionary)のリストに変換します。

リスト内の要素を一つ取り出すときは「リスト内の順番の要素を取得」を、ループで全ての要素を取り出すときは「それぞれの項目リスト内の」を使います。

取り出した要素は連想配列(dictionary)なので、キーを指定して値を取得します。

JSONリストのクイックソート方法

リストをQuick Sortアルゴリズムを使ってソートします。Dataにはソートするリストをleftにはソートするリストの最初の順番(通常は1)をrightにはソートするリストの最後の順番(通常はリストの要素数)をcolumnにはキーを指定します。

以下がQuick Sortを行う手続きです。これは https://appinventorplus.wordpress.com/2017/04/12/quicksort-routine-for-your-app-inventor-apps/ 掲載の手続きを少し変更した物です。オリジナルの手続きはMIT App Inventor Galleryのここにあります。

クリックして拡大
クリックして拡大

GPS

GPSによる現在地の取得にはApp Inventor 2のセンサー関連パレットにある位置センサーコンポーネントを利用します。詳細はこちらを見てください。

マップ

マップはApp Inventor 2のマップ関連パレットにあるコンポーネントです。詳細はこちらを見てください。

TinyDB

TinyDBはApp Inventor 2のストレージパレットにあるコンポーネントです。詳細はこちらを見てください。

プロジェクトを作成

[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、”casemap”と名前を付けます。

デザイン編集

レイアウトとコンポーネントの配置

下図のようにレイアウトとコンポーネントを配置します。

クリックして拡大

 

  1. 使用するイメージファイルを2個メディアにアップロードします。ファイルはCaseMapIcon.pngcaution-4-01.pngです。それぞれをクリックしてダウンロードしてください。CaseMapIcon.pngはScreen1のプロパティのアイコンに選びます。Screen1のプロパティのアプリ名は「新型コロナ感染者数マップ」、タイトルは「新型コロナ感染者数マップ」にします。
  2. 見えないコンポーネントとして接続パレットにあるWebを3個(ドラッグアンドドロップすると自動的にWeb1, Web2, Web3という名前になります)、センサーパレットにある位置センサー、ストレージパレットにあるTinyDBをドラッグアンドドロップします。
  3. 縦並びレイアウトを配置し「縦並び外側」と名前を変更したあと、その中に上から順番に横並び日付、縦並び内側、横並びヘルプ、マップ関連パレットからマップ1、横並びボタン、横並び状況、横並びデータソースを配置します。
  4. 次に順番にレイアウトの中にコンポーネントを配置していきます。横並び日付の中には日付という名前でラベルを、縦並び内側の中には横並び現在地(中に現在地という名前でラベル)、横並び感染率(中に感染率ラベル、感染率という名前で2個のラベル)、横並び新規(中に新規ラベル、新規感染者数という名前で2個のラベル)、横並び累積(中に累積ラベル、累積感染者数という名前で2個のラベル)を配置します。各ラベルのテキストは上の図の値にしてください。
  5. 横並びヘルプの中には注意イメージという名前でイメージと、ヘルプという名前でラベルを配置します。注意イメージの画像ファイルはcaution-4-01.pngを選びます。そのままだと大きいので、高さと幅は16ピクセルにします。ヘルプのテキストは「感染者数を知りたい場所で長押ししてください」にします。
  6. マップ1の中にはマップ関連パレットからマーカー1を配置します。マップ1の中心の緯度、経度は35.685750628984465, 139.75407754498727にすると皇居が中心になります。マーカー1の緯度、軽度も同じ値にしてください。
  7. 横並びボタンの中には場所テキストボックス、場所検索ボタン、現在地ボタン、全国ボタンを配置します。場所検索ボタン、現在地ボタン、全国ボタンのテキストは上の図の値にしてください。
  8. 横並び状況の中には状況ラベルを、横並びデータソースの中にはデータソースラベルを配置します。データソースラベルのテキストは「ジョンズ・ホプキンス大学のデータを使用しています」にします。

 

ブロック編集機能を使用したプログラミング

グローバル変数定義

  • コロナAPI: 緯度と経度からその都道府県のコロナ感染者数の時系列データを取得するAPIのURL https://covid19api.tmsoftwareinc.com/v1/latlngs?
  • コロナAPI2: 地名から緯度と経度を取得するAPIのURL https://covid19api.tmsoftwareinc.com/v1/geos?
  • コロナAPI3: 最新の全国コロナ感染者数データを取得するAPIのURL https://covid19.tmsoftwareinc.com/api/v1/jabounds
  • 初期状況メッセージ: 状況ラベルの初期値
  • 全国緯度: 全国表示する際のマップの中心緯度
  • 全国経度: 全国表示する際のマップの中心経度
  • 全国ズーム: 全国表示する際のマップのズームレベル
  • 初期緯度: マップの中心緯度の初期値
  • 初期経度: マップの中心経度の初期値
  • 初期ズーム: マップのズームレベルの初期値
  • 初期住所: 現在地ラベルの初期値
  • データ無し: データがない時のメッセージ
  • ヘルプ: ヘルプラベルの初期値=「は新規感染者数/10万人が高い都道府県を示していて、タップするとその数値を表示します。地名を入力して場所検索ボタンをクリックするとその場所に移動して感染者情報を表示します。感染者数を知りたい場所で長押しても感染者数情報を表示できます。」
  • 新規感染者数: 新規感染者数
  • 感染率: 感染率
  • マーカーリスト: 全国表示の際に感染率の高い場所に表示するマップ内マーカーのリスト
  • 感染率マーカー: 全国表示の際に感染率の高い場所に表示するマップ内マーカーの一時的な格納変数
  • 緯度: マップの現在の中心緯度
  • 経度: マップの現在の中心経度
  • 地図ズーム: マップの現在のズームレベル
  • JSONリスト: APIから取得したJSONリストの格納変数
  • JSON要素: JSONリストから取り出したJSON要素の格納変数
  • JSONリスト2: APIから取得したJSONリストの格納変数2
  • JSON要素2: JSONリスト2から取り出したJSON要素の格納変数
クリックして拡大

都道府県名翻訳用連想配列定義

APIから返される都道府県名は英語なので、それを日本語に翻訳するために連想配列を定義してグローバル変数に格納しています。 

クリックして拡大
クリックして拡大

手続き

繰り返し使用するコードや複雑なコードは手続きで定義します。

  • JSONリストのクイックソート:こちらを見てください。
  • 感染者取得:緯度と経度からその都道府県のコロナ感染者数の時系列データを取得します。

  • 全マーカー表示、全マーカー非表示:マップ内マーカーをすべて表示したり、非表示したりします。

スクリーン初期化に伴う作業など

  1. ヘルプラベル、状況ラベル、現在地ラベルを初期化します。
  2. TinyDBから前回使用した緯度、経度、ズームレベルを取得しグローバル変数の緯度、経度、ズームに設定します。初回起動時はグローバル変数の全国緯度、全国経度、全国ズームを使用します。
  3. グローバル変数の緯度、経度、地図ズームでマップをパンします。
  4. 緯度と全国緯度が等しくない場合は初回起動ではないので、マーカーは現在地に表示し感染者取得手続きを呼び出します。そうでない場合は初回起動なのでマーカーを非表示にし、縦並び内側も非表示にして都道府県ごとの感染者数情報を表示しません。
  5. 最新の全国コロナ感染者数データを取得するAPIを呼び出します。
クリックして拡大

緯度と経度からその都道府県のコロナ感染者数の時系列データを取得した時の処理

感染者数の時系列データの取得にはWeb1コンポーネントを使用してAPIを呼び出しています。結果は非同期で返ってくるので、その際の処理を定義します。

  1. 返ってきた結果をグローバル変数のJSONリストに格納します。
  2. もしリストの長さが0ならば、縦並び内側を非表示にして都道府県ごとの感染者数情報を表示しません。状況ラベルにはデータ無しと表示します。
  3. そうでなければ、縦並び内側を表示にして状況ラベルは空白にします。引き続き以下の手順を実行します。
  4. JSONリストの最初の要素をJSON要素に格納します。
  5. もしJSON要素のcountryキーの値がJapanでは無いならば現在地ラベルにcountry+state+cityを結合した文字を、countryキーの値がJapanならばstateを都道府県名翻訳用連想配列を使って日本語に翻訳して現在地ラベルに表示します。
  6. JSON要素のdateキーの値を日付ラベルに表示します。
  7. もしJSON要素の7rate(新規感染者数の7日間移動平均)キーの値が-1(未定義)で無いならばグローバル変数の感染率にその値を格納し、そうでなければ「不明」を格納します。引き続き感染率ラベルにグローバル変数の感染率を表示します。
  8. もしJSON要素のnewcases(新規感染者数)キーの値が-1(未定義)で無いならばグローバル変数の新規感染者数にその値を格納し、そうでなければ「不明」を格納します。引き続き新規感染者数ラベルにグローバル変数の新規感染者数を表示します。
  9. 累積感染者数ラベルにJSON要素のcases(累積感染者数)を表示します。
  10. TinyDBに緯度、経度、ズームレベルを格納します。
クリックして拡大

地名から緯度と経度を取得した時の処理

地名からの緯度と経度の取得にはWeb2コンポーネントを使用してAPIを呼び出しています。結果は非同期で返ってくるので、その際の処理を定義します。

  1. 返ってきた結果はリストでは無いのでグローバル変数のJSON要素に格納します。
  2. もしJSON要素のlatキーの値がnot foundで無いならばグローバル変数の緯度、経度にlatキーの値、lngキーの値を設定するとともにグローバル変数の地図ズームに初期ズームの値を設定し、グローバル変数の緯度、経度、地図ズームでマップをパンします。引き続きマーカー1を緯度、経度の場所に表示し、感染者数取得手続きを呼び出します。
  3. そうでなければ状況ラベルに「この場所は見つかりませんでした」と表示します。
クリックして拡大

最新の全国コロナ感染者数データを取得した時の処理

最新の全国コロナ感染者数データの取得にはWeb3コンポーネントを使用してAPIを呼び出しています。結果は非同期で返ってくるので、その際の処理を定義します。

  1. 返ってきた結果をグローバル変数のJSONリスト2に格納します。
  2. もしリストの長さが0ならば、縦並び内側を非表示にして都道府県ごとの感染者数情報を表示しません。状況ラベルにはデータ無しと表示します。
  3. そうでなければ、JSONリスト2をsevenrate(新規感染者数の7日間移動平均)で降順にクイックソートします。
  4. JSONリスト2の1番目から20番目まで以下の通りループ処理します。
  5. ローカル変数のJSON項目にJSONリスト2の現在の要素を設定します。
  6. JSON項目のdateキーの値を日付ラベルに表示します。
  7. JSON項目のlatキーの値、lngキーの値の位置にマーカーを作成してグローバル変数の感染率マーカーに格納し、マーカーのイメージをcaution-4-01.pngに設定し、マーカーのタイトルにstateキーの値を都道府県名翻訳用連想配列を使って日本語に翻訳したものとsevenrateキーの値を結合した文字列を設定します。そしてマーカーの情報ボックスを有効にします。
  8. もしも1番目(新規感染者数の7日間移動平均が国内最大)ならばマーカーの情報ボックスを表示します。
  9. 作成したマーカーを上書きして消さないようにグローバル変数のマーカーリストに感染率マーカーを追加します。
クリックして拡大

マップ関連の処理

マップ1が長押しされたら緯度、経度をグローバル変数の緯度、経度に格納し、マーカー1をその場所に移動して感染者数取得手続きを呼び出します。

マップ1の境界が変わったら(ドラッグ、パン、ズームされたら)状況ラベルに初期状況メッセージを表示します。

ボタンクリック処理

場所検索ボタン

  1. 入力された地名から緯度、経度を取得するAPIを呼び出します。
クリックして拡大

現在地ボタン

  1. 位置センサーの緯度が0でなければ(位置情報が取れていれば)位置センサーの緯度、経度をグローバル変数の緯度、経度に、グローバル変数の地図ズームに初期ズームの値を設定し、グローバル変数の緯度、経度、地図ズームでマップをパンします。引き続きマーカー1を緯度、経度の場所に表示し、感染者数取得手続きを呼び出します。
  2. そうでなければ状況ラベルに「GPS準備中」と表示します。
クリックして拡大

全国表示ボタン

  1. グローバル変数の全国緯度、全国経度、全国ズームでマップをパンした後、全マーカーを表示し、1番目(新規感染者数の7日間移動平均が国内最大)のマーカーの情報ボックスを表示します。
クリックして拡大

チュートリアル

我々は米国在住で日本国内のクラウドファンディングサイトが利用できませんので、米国のPatreonというクラウドファンディングサービスを利用しています。英語サイトなのでわかりにくいところもあるかと思い、ご支援方法をまとめました。

Patreonページを表示

https://www.patreon.com/appinventorjapan をクリックして下のようなPatreonページを表示します

ログイン

ページ右上 Login をクリックすると下のように表示されますので、Sign upからPatreonアカウントを作るか、Continue with Google, Continue with Apple, Continue with Facebookのいずれかをクリックしてそれぞれのアカウントを使ってログインしてください。

初めてログインした時は居住地を聞かれますので、日本にお住いの場合は Japan 、その他の国の場合はお住いの国を選んで Submit をクリックします。

レベルを選択して支援金お支払い方法の入力

支援金額によって特典の異なる5種類のレベルがありますので、支援したいレベルを決めて、紫色のJoinボタンをクリックします。

支払い方法入力画面が表示されますので、一番上のChoose what you pay(支援額)に支援金額を入力します。この支援金額は選択したレベルの月額費用の最低金額が表示されていますが、それ以上の金額を支払いたい場合はここで金額をご自分で入力できます。次に、カード情報を記入し Pay With Card ボタンをクリックして決済をします。CVVはカード裏面(アメリカンエクスプレスは表面)にあるセキュリティコードです。こちらをご覧ください。Postal Codeには郵便番号をハイフン無しで入力してください。PayPalアカウントをお持ちでクレジットカード決済をご希望ではない場合にはそちらを選択してください。

 

これで完了です。お疲れ様でした。以降毎月1日に同じ金額が課金されます。

チュートリアル

スピナーもリストピッカーもいくつかの要素の中から一つを選ぶことが出来るコンポーネントです。ここではスピナーとリストピッカーの違いを調べてみます。

[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、”Spinner_ListPicker”と名前を付けます。

デザイン編集

ユーザインタフェースパレットから、 リストピッカーコンポーネントとスピナーコンポーネントをScreen1にドラッグアンドドロップします。レイアウトパレットから、 横並びコンポーネントを2個ドラッグアンドドロップし、その中にラベルコンポーネントを2個ドラッグアンドドロップして以下のように配置します。

リストピッカーコンポーネントとスピナーコンポーネントのプロパティで”文字列から要素を生成”に”AAA,BBB,CCC,DDD,EEE”を入力しましょう。選択要素は”CCC”にします。

リストピッカーコンポーネントとスピナーコンポーネントのプロパティはリストピッカーのボタン部分以外はほとんど同じです。

ブロック編集機能を使用したプログラミング

リストピッカーコンポーネントとスピナーコンポーネントで選択されている要素をラベルに表示します。まずはアプリ起動時に表示するように”いつもScreen1.初期化したら 実行する”ブロックで選択要素をラベルのテキストに設定します。選択要素を”CCC”にしているので”CCC”が表示されます。

リストピッカーコンポーネントで要素が選択された時に選択された要素が表示されるように”いつもリストピッカー1.値が戻ったら 実行する”ブロックで選択要素をラベルのテキストに設定します。

スピナーコンポーネントで要素が選択された時に選択された要素が表示されるように”いつもスピナー1.選択されたら 実行する”ブロックで選択要素をラベルのテキストに設定します。

スピナーにはイベントは”いつもスピナー1.選択されたら 実行する”しかなく、あとはプロパティの取得、設定だけです。

リストピッカーにはいろいろなイベントがありますが、”フォーカスされたら”と”フォーカスされなくなったら”は動いていません。他のイベントは動いています。

結論

機能的にはあまり差は無いのでデザインの好みで使い分ければ良いのでは無いでしょうか?リストピッカーはApp Inventor 2に固有のコンポーネントで、Androidにはありません。スピナーはAndroidにもあります。

 

チュートリアル

更新履歴

  • 初版 7/5/2019
  • 二版 7/17/2019: ボールのプログラミングに方位センサーの角度の説明を追加。ブラックホールのプログラミングの箇所「ヘディングを80度増やしている」→「ヘディングを180度増やしている」に修正。

スマホのセンサーを使ったゲームを作りましょう

スマホらしく方位センサーを使ったゲームを作ります。スマホを傾けて紫色のボールをころがしてゴールにボールを入れて得点します。途中にあるブラックホールに落とさないようにうまくコントロールする必要があります。

[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、”RollingBall“と名前を付けます。

Screen1のタイトルを”ボールころがしゲーム“にします。ボール(3DPurpleBall.png)ブラックホール(3DBlackHole.png)5点ゴール(5pnt.png)10点ゴール(10pnt.png)20点ゴール(20pnt.png)の画像をそれぞれクリックしてパソコンにダウンロードします。3種類の音のファイル(success.mp3failure.mp3over.mp3)もクリックしてダウンロードしてください。 このチュートリアルでは段階的にアプリの組み上げ、テストを繰り返してアプリを作っていきます。ここで行うように段階的に作っていく方がバグの少ないアプリを作れます。

ボール部分

まずは紫色のボールを動かす部分からです。

コンポーネントを追加

描画とアニメーションパレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップして名前を”フィールドキャンバス“にし、幅は”画面いっぱいに表示”、高さは”70%”にします。次に同じ描画とアニメーションパレットから、 イメージスプライトコンポーネントをフィールドキャンバスにドラッグアンドドロップして名前を”ボール“にし、先ほどパソコンにダウンロードした3DPurpleBall.pngをアップロードして画像に設定します。他のプロパティは下のように設定してください。

  • 有効:チェック
  • 描画間隔(ミリ秒):10
  • ヘディング:0、この値はプログラム内で変更します
  • 速さ:0.0、この値はプログラム内で変更します
  • 見える:チェック

さらにセンサーパレットから、 方位センサーをビューアーにドラッグアンドドロップします。

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

方位センサーでボールを動かす

ブロック編集機能の左側にある方位センサー1パネルをクリックして開き、”いつも方位センサー1.方位が変わったら”ブロックをドラッグアンドドロップし、ボール.ヘディングとボール.速さに方位センサー1.角度方位センサー1.Magnitudeを下図のようにはめ込みます。方位センサーの角度-180180の範囲の数値で、スマホ画面を水平から真右に傾けると0、左に傾けると-180、スマホの上側に傾けると90、手前に傾けると-90になります。方位センサーのMagnitude01の範囲の数値で、スマホ画面が水平なら0、垂直なら1になります。

ここまででテストしてみましょう。Companionアプリをつないで実際にスマホを傾けてボールが動くことを確認してください。うまく動きますか?

ゴール部分とテキスト部分

コンポーネントを追加

描画とアニメーションパレットから、 イメージスプライトコンポーネントを3個フィールドキャンバスにドラッグアンドドロップし、フィールドキャンバスの上部に並べます。そして名前を左から順番に”ゴール1“、”ゴール2“、”ゴール3“にします。そして10pnt.pngをアップロードして”ゴール1“の画像に、20pnt.pngをアップロードして”ゴール2″の画像に、5pnt.pngをアップロードして”ゴール3″の画像に、それぞれ設定します。それぞれのゴールが見えるようになったら下図のように並べてください。

レイアウトパレットから、横並びコンポーネントをフィールドキャンパスの下にドラッグアンドドロップし、その中にユーザーインターフェースパレットから6個のラベルをドラッグアンドドロップして横に並べます。左から順番に名前を”ラベル1“、”点数“、”ラベル2“、”残り時間“、”ラベル3“、”最高得点“にします。そしてテキストを順番に点数、0、残り時間、秒、最高得点、0にします。

レイアウトパレットから、横並びコンポーネントを”横並び1″の下にドラッグアンドドロップし、その中にユーザーインターフェースパレットからボタンコンポーネントを配置します。”横並び2″のプロパティで水平方向並びを中央揃えに幅を画面いっぱいに表示にします。あとはボタンの名前をリスタートに、テキストもリスタートにします。

ユーザーインターフェースパレットからラベルコンポーネントを”横並び2″の下にドラッグアンドドロップし、名前をステータスに、テキストを”スマホを傾けてボールをコントロールして得点します。”に、フォントサイズを10にします。メディアパレットからコンポーネントを3個ビューアーにドラッグアンドドロップし、それぞれ成功音、失敗音、終了音と言う名前にします。再生ファイルにsuccess.mp3、 failure.mp3、 over.mp3の3個の音ファイルをアップロードして指定してください。ここまでで下図のようになります。

ブロック編集機能を使用したプログラミング

はじめにグローバル変数を定義します。組み込みブロック内の変数をクリックして”グローバル変数 変数名 を次の値で初期化”ブロックを5個ドラッグアンドドロップします。組み込みブロック内の数学から青い0ブロックをドラッグしてそれぞれのブロックにはめ込みます。変数名と数字を以下のように変更してください。

組み込みブロック内の手続きをクリックして”渡す 手続き 実行”ブロックをドラッグアンドドロップし、”手続き”を”得点”に変更し、ブロックの左上にある青いアイコンをクリックして渡す引数を下図のように追加します。Xをクリックして引数の名前は”点数“にしてください。

以下のようにブロックを組み上げます。成功音を鳴らした後、ボールを初期位置に戻し、点数をグローバル変数の得点に追加して現在の得点を表示しています。点数はこの”得点”手続きを呼ぶときに渡されています。

ボールがいずれかのゴールに入ったら”得点”手続きを呼び出して点数を増やし、新しい点数を表示します。このためにブロック編集機能の左側にあるボールパネルをクリックして開き、”いつもボール.衝突したら 実行する”をドラッグアンドドロップします。衝突した相手が何点のゴールかによって点数が違うので、もしならばブロックを使います。この処理をしている間にボールが隣のゴールに入って重複得点しないように、はじめにボール.有効を偽にし、最後にボール.有効を真にします。

ここまででテストしてみましょう。Companionアプリをつないで実際にスマホを傾けてボールを動かしてゴールに入れてください。点数はうまく増えていますか?

タイマーの追加

コンポーネントを追加

いつまでもこのゲームをプレイできるといくらでも点数を取れてしまい、面白くありません。そこで時間制限を設けます。そのためにセンサーパレットのタイマーコンポーネントを使います。タイマーコンポーネントをビューアーにドラッグアンドドロップしてください。タイマーイベント間隔を1000ミリ秒に設定します。タイマー有効がチェックされていることも確認してください。

ブロック編集機能を使用したプログラミング

組み込みブロック内の手続きをクリックして”渡す 手続き 実行”ブロックをドラッグアンドドロップし、”手続き”を”ゲームオーバー”に変更します。後は以下のようにブロックを組んで手続きを作ってください。

ブロック編集機能の左側にあるタイマー1パネルをクリックして開き、”いつもタイマー1.タイマー 実行する”をドラッグアンドドロップし、以下のようにブロックを組んでください。

このままでは残り秒数が0秒なので、初期化ブロックを作ります。組み込みブロック内の手続きをクリックして”渡す 手続き 実行”ブロックをドラッグアンドドロップし、”手続き”を”初期化”に変更します。後は以下のようにブロックを組んで手続きを作ってください。

次にブロック編集機能の左側にあるScreen1パネルをクリックして開き、”いつもScreen1.初期化したら 実行する”をドラッグアンドドロップし、この中に”呼び出す 初期化手続き”をはめ込みます。

ブロック編集機能の左側にあるリスタートボタンパネルをクリックして開き、”いつもリスタート.クリックされたら 実行する”をドラッグアンドドロップし、この中に”呼び出す 初期化手続き”をはめ込みます。

ここまででテストしてみましょう。ゲームオーバーになったらリスタートボタンをクリックしてもう一度プレイしてみてください。

ブラックホール部分

このままでは簡単にゴールにボールを入れられてしまうので、障害物としてブラックホールを2個置き左右に逆向きに往復するようにします。ボールがブラックホールに触ったらスタート地点までボールが戻ってしまうようにします。

コンポーネントを追加

描画とアニメーションパレットから、 イメージスプライトコンポーネントを2個フィールドキャンバスにドラッグアンドドロップします。そして名前をそれぞれ”ブラックホール1“、”ブラックホール2“にします。そして3DBlackHole.pngをアップロードして”ブラックホール1“、”ブラックホール2“の画像に設定します。描画間隔はいずれも10ミリ秒、ヘディングは”ブラックホール1“が0(右向きに移動)、”ブラックホール2“が180(左向きに移動)、速さは”ブラックホール1“が4、”ブラックホール2“が3、Yは”ブラックホール1“が60、”ブラックホール2“が150、Xはいずれも130に設定してください。

ブロック編集機能を使用したプログラミング

ブロック編集機能の左側にあるブラックホール1パネルをクリックして開き、”いつもブラックホール1.端に到達したら 実行する”をドラッグアンドドロップし、以下のようにブロックを組んでください。”ブラックホール2″もまったく同じに組み上げます。ブラックホールが端に到達したらヘディングを180度増やしているので折り返して動き続けます。

次にボールがブラックホールに落ちた時の処理をプログラムします。

組み込みブロック内の手続きをクリックして”渡す 手続き 実行”ブロックをドラッグアンドドロップし、”手続き”を”ブラックホールに落下”に変更します。後は以下のようにブロックを組んで手続きを作ってください。

すでにプログラムしてある”いつもボール.衝突したら 実行する”ブロックに以下の赤枠ブロックを追加します。

ここまででテストしてみましょう。少しは難しくなりましたか?

最高得点の記録

コンポーネントを追加

最高得点を記録するにはアプリが終了しても得点を記憶しておく仕組みが必要です。App Inventor 2 にはそんな時に使えるTinyDBと言うコンポーネントがあります。ストレージパレットから、 TinyDBコンポーネントをビューアーににドラッグアンドドロップして、名前を”最高得点DB“に変更します。

ブロック編集機能を使用したプログラミング

すでにプログラムしてある”いつもScreen1.初期化したら 実行する”ブロックに以下の赤枠ブロックを追加します。最高得点は”score”というタグでTinyDBに保存してあることにして、アプリ起動時にその値を取得して表示しています。

次に最高得点が得た時に保存するコードです。すでにプログラムしてある”ゲームオーバー”手続きに以下の赤枠ブロックを追加します。

最後にセンサーがあるかチェック

このゲームでは方位センサーを使っているので、方位センサーの無いスマホではプレイできません。そこで方位センサーがあるかどうかをチェックして無ければエラーメッセージを表示します。”いつもScreen1.初期化したら 実行する”ブロックを以下のように変更してください。

これで完成です。スマホでテストしてください。面白いですか?
 

ソースコードのダウンロード

App Inventorでこのサンプルを使用したい場合は、 ソースコードをコンピュータにダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[ローカルコンピュータからプロジェクト(.aia)をインポート]を選択し、ソースコードを選択してインポートしてください。

チュートリアル

簡単なゲームを作りましょう

[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、”MoleMash”と名前を付けます。

デザイン編集

Screen1のタイトルを”もぐらたたき”にします。モグラの画像をここをクリックしてパソコンにダウンロードします。

コンポーネントを追加

描画とアニメーションパレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップします。その下にユーザーインターフェースパレットから、ラベルボタンをドラッグアンドドロップします。

キャンバス1のプロパティの高さと幅を300ピクセルに変更し、ラベルは名前を”点数”にテキストを”点数:0″に設定します。ボタンは名前を”リセットボタン”にテキストを”リセット”に設定します。

さらにメディアパレットから、 コンポーネントをビューアーにドラッグアンドドロップします。コンポーネントを使ってモグラがたたかれた時にスマホをバイブレートさせます。

タイマーコンポーネントを追加

モグラは定期的にジャンプして位置を変えます。このためにセンサーパレットのタイマーコンポーネントを使います。タイマーコンポーネントをビューアーにドラッグアンドドロップしてください。タイマーイベント間隔を700ミリ秒に設定してこの間隔でモグラが動くようにします。タイマー有効がチェックされていることも確認してください。

イメージスプライトを追加

イメージスプライトを使ってモグラを描画します。イメージスプライトはキャンバスの中を移動する画像です。イメージスプライトには速さ、ヘディング(進む方向)、描画間隔を指定でき、タッチされたかを検出することもできます。

描画とアニメーションパレットから、 イメージスプライトコンポーネントをキャンバス1にドラッグアンドドロップして名前をモグラにします。引き続きプロパティを以下のように設定してください。

  • 画像:先ほどダウンロードしたmole.pngをアップロードして使います。
  • 有効:チェック
  • 描画間隔(ミリ秒):使わないので500のままにしてください
  • ヘディング:0、これも使いません
  • 速さ:0.0、これも使いません
  • 見える:チェック
  • 高さ、幅:自動

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

手続きの追加

繰り返して使用するコードを手続きとして定義することができます。ここでは以下の二つの手続きを作ります。

  • モグラを動かす:キャンバス上ランダムな場所にモグラを動かします。
  • 点数更新:点数を更新します。

モグラを動かす

組み込みブロック内の手続きをクリックして”渡す 手続き 実行”ブロックをドラッグアンドドロップし、”手続き”を”モグラを動かす”に変更します。ブロック編集機能の左側にあるモグラパネルをクリックして開き、”設定 モグラ X”と”設定 モグラ Y”を実行の横にはめ込みます。さらに下図にあるようにランダム分数や掛け算、引き算などのブロックを組み込みブロック内の数学からドラッグしてきて組み上げます。キャンバス1の高さ、幅、モグラの高さ、幅も使用します。

点数更新

まず、点数を保持するためにグローバル変数を定義します。組み込みブロック内の変数をクリックして”グローバル変数 変数名 を次の値で初期化”ブロックをドラッグアンドドロップし、変数名を”点数”に変更した後、組み込みブロック内の数学から青い0ブロックをドラッグしてはめ込みます。次に、組み込みブロック内の手続きをクリックして”渡す 手続き 実行”ブロックをドラッグアンドドロップし、”手続き”を”点数更新”に変更します。ブロック編集機能の左側にある点数パネルをクリックして開き、”設定 点数 テキスト”を実行の横にはめ込んだ後、組み込みブロック内のテキストから”結合する”ブロックをドラッグして空白テキストと”取得 グローバル 点数”を使って下図のように組み上げます。

タイマーの追加

タイマーを使ってモグラが動き続けるようにします。ブロック編集機能の左側にあるタイマー1パネルをクリックして開き、”いつもタイマー1.タイマー 実行する”をドラッグアンドドロップし、組み込みブロック内の手続きをクリックして”呼び出す モグラを動かす“ブロックを下図のようにはめ込みます。

モグラ.タッチされたらハンドラーの追加

モグラがタッチされたら点数を1点増やし、新しい点数を表示します。このためにブロック編集機能の左側にあるモグラパネルをクリックして開き、”いつもモグラ.タッチされたら 実行する”をドラッグアンドドロップします。そして下図のようにグローバル 点数を1増やす、音1を使ってバイブレートする、”呼び出す 点数更新“、”呼び出す モグラを動かす“、をはめ込みます。

点数リセット

点数をリセットするには下図のように組み上げます。

 
これで完成です。スマホでテストしてください。面白いですか?
 

ソースコードのダウンロード

App Inventorでこのサンプルを使用したい場合は、 ソースコードをコンピュータにダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[ローカルコンピュータからプロジェクト(.aia)をインポート]を選択し、ソースコードを選択してインポートしてください。

チュートリアル

郵便番号を検索するアプリを作ります

このチュートリアルは初心者用ではありません。わかりにくい点などありましたらTwitter(@AppInventorJPN)またはFacebookページFacebookグループでお知らせください。随時更新します。標準のApp Inventor 2日本語版にSQLiteエクステンション、Zipエクステンション、Fileエクステンションを追加して使用しています。また、簡単なSQL言語を使用しています。App Inventor 2日本語版でどこまでのアプリを作れるかの実験だと考えてください。

更新履歴

  • 初版 6/11/2019
  • 二版 6/23/2019: Android 8.0.0以降のファイル書き込み許可をサポートするために更新。更新部分は都度その旨表示
  • 三版 6/28/2019: フィードバックに基づき修正。更新部分は都度その旨表示
      • いつもAfterUnzip内ImportDatabaseブロックのコメントを削除(aiaファイル内)

ソースコードのダウンロード

ソースコードを見ながらこのチュートリアルを読んだ方がわかりやすいと思います。ここをクリックして、コンピュータにソースコードをダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[ローカルコンピュータからプロジェクト(.aia)をインポート]を選択し、ソースコードを選択してインポートしてください。  

プログラムの構造(流れ)

SQLite自体はAndroidに標準装備です。

  1. あらかじめSQLiteの全国郵便番号データベースファイル(約12万件)を作成しておき、このファイルのzip圧縮ファイルをアセットとしてアプリに同封します。App Inventorではアセットとしてアップロードできるファイルのサイズは5MB程度が上限なので、圧縮しています。全国郵便番号データベースファイルの圧縮前ファイルサイズは8.5MB、圧縮後ファイルサイズは2.3MBです(三版修正:圧縮前->圧縮後)。万が一、アセットにファイルが無い時あるいは圧縮ファイルサイズが5MBを超えた時に備え、指定サーバーからzip圧縮ファイルをダウンロードして使用する機能も持っています。
  2. zip圧縮データベースファイルを解凍後、SQLiteにインポートし、データベースから都道府県のリストを作成してスピナーで表示します。
  3. 都道府県が選択されたら指定都道府県内の市町村リストを作成してスピナーで表示します。
  4. 市町村が選択されたら指定市町村内の町域リストを作成してスピナーで表示します。
  5. 町域が選択されたら定都道府県内指定市町村内指定町域の郵便番号を表示します。

郵便番号データベースファイルの作成(App Inventorは使いません)

https://www.post.japanpost.jp/zipcode/dl/roman-zip.html より全国一括のzip圧縮データファイルをダウンロードします。解凍後、表計算ソフトでローマ字列を削除し、代わりに通し番号の列を追加します。また文字コードがShift JISなので、UTF-8に変換してからcsvで保存します。

SQLiteデータベースのテーブル構造を定義し、以下のようにテーブルを作成するSQL文を作ります。

BEGIN TRANSACTION;
CREATE TABLE IF NOT EXISTS “japanzip” (
    “id” INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT UNIQUE,
    “zip” TEXT,
    “prefs” TEXT,
    “city” TEXT,
    “street” TEXT
);
COMMIT;

SQLite GUI管理ツール(たとえばDB Browser for SQLite)を使って、テーブルを作成後csvファイルをインポートしてデータベースを作成します。ここではjapanzip.sqliteという名前でデータベースを作成し、japanzip.zipというファイルに圧縮しました。japanzip.zipはここからダウンロードしてください

プロジェクトを作成

[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、”ZipJapan”と名前を付けます。

エクテンションの追加

  1. GitHub からAppInventor extension for SQLiteをローカルパソコンにクローンし、org.bennedum.SQLite.aixをエクステンションパレットからImport extensionをクリックしてインポートします。
  2. https://puravidaapps.com/zip.php  からTaifunZip extension (aix file)をダウンロードし、com.puravidaapps.TaifunZip.aixをエクステンションパレットからImport extensionをクリックしてインポートします。
  3. https://puravidaapps.com/file.php  からTaifunFile extension (aix file)をダウンロードし、com.puravidaapps.TaifunFile.aixをエクステンションパレットからImport extensionをクリックしてインポートします。

デザイン編集

レイアウトとコンポーネントの配置

下図のように縦並びレイアウトを配置した後、その中に横並びレイアウト、ラベル(タイトル、初期化ラベル、住所ラベル、郵便番号ラベル)、スピナー(選択ドロップダウン)、テキストボックス(郵便番号)、ボタン(初期化ボタン、リセット)を配置します。選択ドロップダウン、初期化ラベル、初期化ボタン、住所ラベル、郵便番号ラベル、郵便番号はプロパティの見えるからチェックを外してください。さらに、見えないコンポーネント類としてエクテンションに追加したSQLite、 TaifunZip,、TaifunFileと接続パレットにあるWeb、ストレージパレットにあるファイルをドラッグアンドドロップします。最後にファイルをアップロードをクリックしてjapanzip.zipをアップロードします。

初期化ラベル、初期化ボタン、ファイルコンポーネントは二版にて追加。

 

ブロック編集機能を使用したプログラミング

グローバル変数定義

三版でsreetを削除

  • asset_fn: アセットにアップロードしたデータベースファイルのパス
  • unzipped_fn: 解凍したデータベースファイルのパス
  • unzip_fn: 解凍するためにはストレージ領域にファイルをコピーする必要があります。コピー先のデータベースファイルのパス。
  • downloaded_fn: ダウンロードしたデータベースファイルのパス
  • download_url: データベースファイルをダウンロードするURL
  • 郵便番号:
  • 町域選択: 町域選択メッセージ
  • 市町村選択: 市町村選択メッセージ
  • 都道府県選択: 都道府県選択メッセージ
  • app_dbfile: SQLiteデータベースファイル名
  • prefs: 選択済み都道府県格納用
  • city: 選択済み市町村格納用
  • column: 現在表示中のコラム名
三版でdownload_urlのフルURLを追加

都道府県リスト手続き

郵便番号検索の入り口である都道府県リストの表示は繰り返し行われるので手続きを作っています。やっていることはSQLiteデータベースをopenして”select distinct(prefs) from japanzip”と言うSQL文を実行して重複しない都道府県名を取得し、その結果からスピナーを作っています。後はグローバル変数とラベルの初期化作業をしています。二版で住所ラベル.見えるを追加しています。

スクリーン初期化に伴う作業など

Screen1.アクセス許可と初期化ボタン.クリックされたらの処理が二版にて大幅に変更されています。

  1. スクリーンが初期化したらファイルの読み書き許可を求めます。2回目以降の起動時はデータベースファイルが存在するので、直接都道府県リスト手続きを呼び出し、郵便番号検索を始めます。
  2. ファイルの読み書き許可が得られてなおかつデータベースファイルが存在しない場合は、以下のブロックで実際にzipjapan.txtと言う名前のダミーファイルの書き込みを行ってから初期化ラベルと初期化ボタンを表示します。Android 8.0.0以降ではファイルが実際に書き込まれるまでファイルの読み書き許可が実際には与えられないので、このような作業が必要になっています。
  3. 初期化ボタンがクリックされたらアセットにデータベースファイルが存在するか調べて、存在する場合はストレージ領域にファイルをコピーした後に解凍します。アセットにデータベースファイルが存在しない場合はWebコンポーネントを使ってデータベースファイルをダウンロードします。
  4. ダウンロードが成功したら、ストレージ領域にファイルをコピーした後に解凍します。
  5. 解凍が成功したらSQLiteにインポートします。
  6. リセットボタンがクリックされたら直接都道府県リスト手続きを呼び出し、最初から郵便番号検索をやり直します。

 

 

郵便番号検索

  1. 検索はスピナーで”項目が選択されたら”イベントで処理します。グローバル変数columnに入っているのがprefsならばSQLiteデータベースをopenして”select distinct(city) from japanzip where prefs=都道府県名”と言うSQL文を実行して選択された都道府県内の重複しない市町村名を取得し、その結果からスピナーを作っています。
  2. グローバル変数columnに入っているのがcityならばSQLiteデータベースをopenして”select distinct(street) from japanzip where city=市町村名 and prefs=都道府県名”と言うSQL文を実行して選択された都道府県内の選択された市町村内の重複しない町域名を取得し、その結果からスピナーを作っています。
  3. それ以外ならば選択された都道府県内の選択された市町村内の選択された町域の郵便番号を”select zip from japanzip where street=町域名 and city=市町村名 and prefs=都道府県名”と言うSQL文を実行して取得し、郵便番号のフォーマットを調整後に表示します。

スマホでテストしてください!

チュートリアル

お絵かきアプリを作りましょう

[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、”Doodle”と名前を付けます。

デザイン編集

キャンバスを追加

描画とアニメーションパレットから、 キャンバスコンポーネントをScreen1にドラッグアンドドロップします。

キャンバスの高さと幅を”画面いっぱいに表示”に変更します

キャンバス1のプロパティの高さと幅を”画面いっぱいに表示”に変更します。

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

キャンバス.ドラッグイベントの追加

ブロック編集機能の左側にあるキャンバス1パネルをクリックして開きます。 “いつもキャンバス1.ドラッグされたら”ブロックを作業領域(右側の空き領域)にドラッグアンドドロップします。

キャンバス.線を描画の追加

キャンバス1パネルにある“キャンバス1.線を描画”ブロックを“キャンバス1.ドラッグされたら”ブロックの中にドラッグアンドドロップします。

“キャンバス1.線を描画”を完成します

キャンバス.ドラッグイベントはユーザーが画面上で指を動かしている間に何度でも繰り返し発生するので、前のX、前のYから現在のX、現在のYに線を描くようにします。
 
これで完成です。スマホでテストしてください。好きな絵を描いてみましょう。
 

ソースコードのダウンロード

App Inventorでこのサンプルを使用したい場合は、 ソースコードをコンピュータにダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[ローカルコンピュータからプロジェクト(.aia)をインポート]を選択し、ソースコードを選択してインポートしてください。

チュートリアル

スマホを振ると話す機能としゃべる言葉の入力機能の追加

ここではスマホを振るとしゃべる機能としゃべる言葉を入力する機能を追加します。

App Inventorを起動してログインし、TalkToMeプロジェクトを開いてください。App Inventorは前回開いたプロジェクトを自動的に開くので、もうTalkToMeプロジェクトが開いてあるかもしれません。

デザイン編集

加速度センサーを追加

センサーパレットから、 加速度センサーコンポーネントをドラッグしビューアーに配置します。ドロップすると、ビューアー下部の見えないコンポーネントとマークされた領域に表示されます 。

ブロック編集

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

加速度センサーの揺れたらイベントをプログラム

ブロック編集機能の左側にある加速度センサー1パネルをクリックして開きます。 “加速度センサー1.揺れたら”ブロックを作業領域(右側の空き領域)にドラッグアンドドロップします。

揺れた時に何をさせるか

“ボタン1.クリックされたら”ブロックの中にある紫のブロックをマウスでクリックしてからパソコンのコピーキー(MacだとCommand-C)を押して、ペーストキー(MacだとCommand-V)を押します。コピーされた紫のブロックを “加速度センサー1.揺れたら”ブロックにはめます。

揺れた時にしゃべる言葉を変更します

“加速度センサー1.揺れたら”ブロックの言葉を変更します。

ここでテストしてください!

どんな言葉でもしゃべれるようにしましょう

デザイン編集

テキストボックスを追加

ユーザインタフェースパレットから、 テキストボックスコンポーネントをScreen1のボタン1の上にドラッグアンドドロップします。

ブロック編集

テキストボックスに入力された言葉を取得します

テキストボックス.1パネルにある緑色のブロックはプロパティを取得・設定をするもの(ゲッター、セッター)です。テキストボックス.1.テキストをドラッグドロップします。

テキストボックスの言葉をしゃべるようにします

“渋谷で食事にしよう”テキストブロックを抜き出し、代わりにテキストボックス.1.テキストをはめ込みます。”渋谷で食事にしよう”テキストブロックはビューアー右下にあるゴミ箱に捨ててください。

スマホでテストしてください!

ソースコードのダウンロード

App Inventorでこのサンプルを使用したい場合は、 ソースコードをコンピュータにダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[ローカルコンピュータからプロジェクト(.aia)をインポート]を選択し、ソースコードを選択してインポートしてください。

チュートリアル

話しをするアプリを作りましょう

[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、「TalkToMe」と名前を付けます。

デザイン編集

ボタンを追加

ユーザインタフェースパレットから、 ボタンコンポーネントをScreen1にドラッグアンドドロップします。

ボタンのテキストを変更

ボタン1のプロパティのテキストにある “ボタン1のテキスト”を削除し、”話して!”と入力します。

テキスト音声化コンポーネントの追加

パレットの下にあるメディアパレットをクリックしてテキスト音声化コンポーネントをドラッグし、ビューアーに配置します。ドロップすると、ビューアー下部の見えないコンポーネントとマークされた領域に表示されます 。

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

ボタンクリックイベントの追加

ブロック編集機能の左側にあるボタン1パネルをクリックして開きます。 “ボタン1.クリックされたら”ブロックを作業領域(右側の空き領域)にドラッグアンドドロップします。

テキスト音声化の追加

テキスト音声化1パネルをクリックして開きます。“テキスト音声化1.しゃべる”ブロックを“ボタン1.クリックされたら”ブロックの中にドラッグアンドドロップします。

テキスト音声化のメッセージの追加

何をしゃべるかを入力します。組み込みブロックからテキストブロックを選択し、メッセージにはめ込みます。

テキストブロックに言葉を入力します。

スマホでテストしてください。