チュートリアル

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

[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、”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.クリックされたら”ブロックの中にドラッグアンドドロップします。

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

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

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

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

チュートリアル

最初のアプリを作る:こんにちはCodi

コンピュータとAndroidデバイスを設定し、デザイン編集機能とブロック編集機能がどのように機能するかを学んだので、「こんにちはCodi」アプリを作成する準備が整いました。 この時点で、ブラウザでデザイン編集機能またはブロック編集機能が開いており、AndroidデバイスまたはAndroidエミュレータのいずれかがブロック編集機能に接続されているはずです。 (これらが実行されていない場合は、App Inventor 2のセットアップ手順を参照してください。)[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、"HelloCodi"と名前を付けます。

HelloCodi:ハチをタップして、ハチの話を聞きましょう!

HelloCodiは、あなたが非常に短時間で構築できるシンプルなアプリです。 あなたはCodiの絵が写っているボタンを作成して、それがクリックされた時にスマホが賑やかな音を立てるようにボタンをプログラムします。

HelloCodiをビルドするには、Codi the beeのイメージファイルが必要です。 次のリンクをクリックして、これらのファイルをコンピュータにダウンロードしてください。 ダウンロードするには、リンクをクリックした後、画像を右クリックして[名前を付けて保存]を選択します。 ファイルをデスクトップまたはダウンロードフォルダ、あるいは後で簡単に見つけられる場所に保存します。

  • Codi画像: codi.jpg (右クリックして保存)
  • 蜂の音: Bee-Sound.mp3 (右クリックして保存)

アプリをデザインするためのコンポーネントを選択する

 

App Inventor コンポーネントは、 デザイン編集ウィンドウの左側の[ パレット]というタイトルの下にあります。 コンポーネントは、Androidスマホでアプリを作成するために使用する基本要素です。 レシピの材料のようなものです。 画面にテキストを表示するだけのラベルコンポーネントや、アクションを開始するためにタップしたボタンコンポーネント(#1左)など、一部のコンポーネントは非常に単純です。

静止画やアニメーションを保持できるキャンバス、Wiiコントローラのように動作してスマホを動かしたり振ったりしたときに検出する加速度センサー、テキストメッセージを送信するコンポーネント、音楽やビデオを再生するコンポーネント、ウェブサイトなどから情報を取得するコンポーネントなどがあります。

 

アプリケーションでコンポーネントを使用するには、それをクリックしてデザイン編集ウインドーの中央にあるビューアーにドラッグする必要があります。 コンポーネントをビューアーに追加すると(下の赤字1)、コンポーネントはビューアの右側にあるコンポーネントリストにも表示されます。

コンポーネント (下の赤字2)は調整可能なプロパティを持っています。 これらのプロパティは、コンポーネントがアプリケーション内で表示または動作する方法を変更します。 コンポーネントのプロパティ (下の赤字3)を表示および変更するには、最初にコンポーネントの一覧から目的のコンポーネントを選択する必要があります。

コンポーネントを選択してプロパティを設定する手順

HelloCodiには、あなたがダウンロードしたハチの画像を表示するボタンコンポーネントがあります。

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

ステップ1b:ボタンにハチの画像を表示するには、[ プロパティ]ウィンドウの[イメージ]で、[ 無し ]をクリックして[ファイルをアップロード ]をクリックします(赤字2)。イメージファイルを選択するためのウィンドウがポップアップします。 [ファイルを選択]をクリックして、 先ほどダウンロードしたcodi.jpgファイルのフォルダーに移動します(赤字3)。 codi.jpgファイルをクリックし、[開く]をクリックして、[OK]をクリックします。

ステップ2:ボタン1のテキストプロパティを変更します。 “ボタン1のテキスト"を削除し、ボタンのテキストプロパティを空白のままにして、ハチの画像の上に文字が書き込まれないようにします。

次にで画面いっぱいに表示を選びOKをクリックします。

ステップ3:

  • レイアウトパレットから横並びコンポーネントをビューアーにドラッグアンドドロップして、ハチの画像の下に配置します(赤字1)。
  • 水平方向並びでで中央揃えを選びます(赤字2)。
  • で画面いっぱいに表示を選びOKをクリックします(赤字3)。
  • ユーザインタフェースパレットからラベルコンポーネントをビューアーにドラッグアンドドロップして、横並びコンポーネントの中に配置します(赤字1)。 コンポーネントのリストの横並び1コンポーネントの下にラベル1と表示されます。

プロパティペインの下で、

  • ラベル1のテキストプロパティに「ハチを触って」と入力します(赤字2)。 ビューアーとAndroidデバイスでテキストが変更されているのがわかります。
  • フォントサイズを30にします(赤字3)。
  • 背景色の下のボックスをクリックして 好きな色に変更します(赤字4)。
  • テキスト色を好きな色に変更します(赤字5)。 (注:背景色テキスト色が同じ場合は、テキストを読むことができません。)

ここでは、背景色はシアンに、テキスト色は青に設定されています。

ステップ4: パレットの下にあるメディアパネルをクリックしてコンポーネントをドラッグし、ビューアーに配置します(赤字1)。 ドロップすると、ビューアー下部の見えないコンポーネントとマークされた領域に表示されます 。メディアペインの[ファイルをアップロード]ボタンをクリックします。(赤字2)以前にダウンロードしたBee-Sound.mp3ファイルの場所を参照して、このプロジェクトにアップロードします(赤字3)。 [プロパティ]ペインの下にある[ソース]プロパティに[なし]と表示されていることを確認します。[なし]をクリックして、音1コンポーネントの再生ファイルをBee-Sound.mp3 (赤字4)に変更します。

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

これまでは、Webブラウザウィンドウにあるデザイン編集機能で 、アプリケーションの画面とコンポーネントを配置してきました。 アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

ブロック編集機能が表示されたら、ブロックを使用してアプリケーションのプログラミングを開始します。

音を鳴らす

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

これらの茶色のブロックはイベントハンドラブロックと呼ばれます。[ボタン1.クリックされたら]がイベントハンドラーの場合 、イベントハンドラブロックは、ボタンが押された、電話が揺れている、ユーザーがキャンバスの上で指をドラッグしているなど、特定のイベントへの応答方法を指定します。

ステップ2a:音1パネルをクリックして音1.再生ブロックをドラッグし、 “いつもボタン1.クリックされたら"ブロックの “実行する"セクションに接続します。 ブロックはパズルのピースのようにつながっており、つながったときにクリック音が聞こえます。

紫色のブロックはコマンドブロックと呼ばれ、イベントハンドラの本体に配置されます。 イベントハンドラが実行されると、その本体内で一連のコマンドが実行されます。 コマンドは、イベント(ボタン1をクリックするなど)がトリガーされたときに実行されるアクション(音の再生など)を指定するブロックです。

この時点でブロックは次のようになっているはずです。

これで、 コマンドブロックイベントハンドラ内にあることがわかります。 この一連のブロックは、 “ボタン1をクリックすると、音1が再生されます"ということを意味します。イベントハンドラはアクションのカテゴリ(ボタンがクリックされているなど)のようなもので、コマンドはアクションの種類とアクションの詳細(音の再生など)を指定します。

ブロックとその機能の詳細についてはApp Inventorの組み込みブロックを参照してください。

それでは試してみてください! ボタンをクリックすると、Codiの羽音が聞こえます。 おめでとうございます、あなたの最初のアプリが起動しました!

注意:一部のデバイスの音コンポーネントには既知の問題があります。 「OSエラー」が表示されて音が再生されない、または再生が非常に遅い場合は、デザイン編集機能に戻って、音コンポーネントの代わりにPlayerコンポーネント(メディアにあります)を使用してみてください。

アプリをパッケージ化する

デバイス(エミュレータまたはスマホ/タブレット)がApp Inventorに接続されている間、アプリケーションはデバイス上でリアルタイムに実行されています。 あなたがブロック編集機能からエミュレータ/スマホ/タブレットを切断すると、アプリは消えます。 デバイスを再接続することでいつでも元に戻すことができます。App Inventorに接続せずにアプリを実行するには、アプリを「 パッケージ化 」してアプリケーションパッケージ(apkファイル)を作成する必要があります。

アプリをスマホに “パッケージ"したり、他の人に送信したりするには、画面上部の[ ビルド ]タブをクリックします。 [ビルド]の下で、次の2つの選択肢から選択できます。

1. アプリ(QRコードを提供する): バーコードスキャナーを使用して、スマホまたはタブレットにアプリをインストールするために使用できるバーコード(QRコード)を生成できます。

注:このバーコードは、Googleアカウントに関連付けられているため、自分のデバイスでのみ機能します。 アプリをバーコードで他の人と共有したい場合は、.apkファイルをコンピュータにダウンロードし、サードパーティ製のソフトウェアを使用してファイルをバーコードに変換する必要があります。

2. アプリ(私のコンピュータに保存):アプリをapkファイルとしてコンピュータにダウンロードできます。他のデバイスに手動でインストールすることで、好きなように配布して共有できます。

ここで学んだこと

これまでに取り上げた主なアイデアは次のとおりです。

  • あなたは、コンポーネントを選択し、それに何をすべきか、いつそれをすべきかを伝えることによってアプリを構築します。
  • デザイン編集機能を使用してコンポーネントを選択し、各コンポーネントのプロパティを設定します。 一部のコンポーネントは表示されていますが、表示されていないものもあります。
  • コンピュータからメディア(音や画像)をアップロードしてアプリに追加できます。
  • ブロック編集機能を使用して、コンポーネントの動作を定義するブロックを組み立てます。
  • いつも … 実行する …ブロックはイベントハンドラを定義し、 イベントが起きた時に何をするかを定義します。
  • 呼び出す …ブロックはコンポーネントに動作を指示します。

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

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