MIT App Inventor のサンプル画面集
前準備
- JDK のインストールが済んでいること.
- Android SDK のインストールが済んでいること.
- MIT App Inventor のインストールが済んでいること.
キャンバス
ブロックエディタの画面である。キャンバス上をドラッグしたとき(PaintCanvas.Dragged)に線を描画する(DrawLine)処理が実装されている。また、各色のボタン(ColorBlackなど)がクリックされた際に描画色(PaintColor)を変更する処理、および「Clear」ボタンがクリックされた際にキャンバスを消去する処理が定義されている。
デザイナ画面である。画面上部には描画領域となる「PaintCanvas」が配置されている。その下部には、描画色を選択するための4つのボタン(黒、赤、緑、青)が横並び(TableArrangement2)で配置され、さらにその下にキャンバス消去用の「Clear」ボタンが配置されている。
Androidエミュレータ上での実行画面である。キャンバス部分に黒色で「Android」という文字が描かれ、その下には緑、赤、青の各色を用いてキャラクターのイラストが手描きされている。
音声プレーヤー
ブロックエディタの画面である。「PlaySound1」から「PlaySound4」までの4つのボタンがクリックされたときに、それぞれ対応する音声コンポーネント(Sound1からSound4)を再生する(Play)処理が組まれている。
デザイナ画面である。画面には「Play Sound 1」から「Play Sound 4」までの4つのボタンが縦一列に配置されている。非表示コンポーネントとして4つのSoundコンポーネントが登録されており、右下のMedia欄には動物や虫の鳴き声のmp3ファイルが確認できる。
エミュレータ上での実行画面である。デザイナ画面で配置された4つの音声再生ボタンが、実際のUIとして画面いっぱいに表示されている。
ボールゲーム
ブロックエディタの画面である。タイマー(Timer.Timer)のイベント発生時に、ボール(Ball)の位置を更新する処理が記述されている。加速度センサー(AccelerometerSensor)のX軸およびY軸の傾き値を用いて数式ブロックが組まれており、端末の傾きに応じてボールの座標(Ball.X, Ball.Y)を動かすロジックとなっている。
デザイナ画面である。中央の描画領域(Field)の中に、黒い円形のBallコンポーネントが1つ配置されている。画面下部には、非表示コンポーネントとして加速度センサーとタイマーが組み込まれている。
エミュレータ上での実行画面である。白い背景の描画領域内の中央付近に、黒いボールが1つ表示されている。
方位
ブロックエディタの画面である。方位センサー(OrientationSensor)の値が変化した際(OrientationChanged)の処理が実装されている。イベントから取得した方位角(azimuth)の値を、画像スプライト(Droid)の進行方向(Heading)に代入することで、画像の向きを制御している。
デザイナ画面である。中央のキャンバス(Field)の中に、緑色のAndroidキャラクターの画像(Droid)が配置されている。非表示コンポーネントとして「OrientationSensor」が追加されている。
エミュレータ上での実行画面である。画面中央に緑色のAndroidキャラクターが表示されており、端末の向きに合わせてこの画像が回転する仕組みとなっている。
メッセージ
ブロックエディタの画面である。「SubmitButton」がクリックされたときに、Notifierコンポーネントの「ShowAlert」を呼び出す処理である。警告メッセージとして表示されるテキストは、「Welcome to "Android World", 」という文字列、テキストボックスの入力値(TextBox.Text)、「 !!」の3つを結合(join)して生成されている。
デザイナ画面である。画面上部から「What's your name?」というラベル(Label)、名前を入力するためのテキストボックス(TextBox)、そして「Submit」ボタンが配置されている。画面下部には非表示コンポーネントとして「Notifier」が追加されている。
エミュレータ上での実行画面である。テキストボックスに「FOO」と入力してSubmitボタンを押した状態が示されており、画面下部に「Welcome to "Android World", FOO !!」というトースト通知(アラート)が表示されている。
コンパス
ブロックエディタの画面である。方位センサー(OrientationSensor1)の方位角(azimuth)の変化に応じた条件分岐が組まれている。方位角の値が「45度以下または315度以上ならNORTH(北)」、「45度より大きく135度以下ならEAST(東)」、「135度より大きく225度以下ならSOUTH(南)」、「225度より大きく315度以下ならWEST(西)」というテキストを、それぞれラベル(Label.Text)にセットする論理構造になっている。
デザイナ画面である。画面中央に上向きの大きな矢印画像(Arrow)が配置され、その下に方位を表示するための「Direction」という初期テキストのラベルが配置されている。非表示コンポーネントには「OrientationSensor1」が組み込まれている。
エミュレータ上での実行画面である。中央に黒い上向きの矢印と、その下に「Direction」の文字が表示されている。
音声認識
ブロックエディタの画面である。「StartRecording」ボタンがクリックされると、SpeechRecognizerコンポーネントの「GetText」が呼び出されて音声認識が開始される。音声のテキスト化が完了したとき(AfterGettingText)に、ラベル(Label1.Text)へ「You spoke 」という文字列と認識結果(result)を結合して表示する処理が定義されている。
デザイナ画面である。画面左上に音声認識を開始するための「Record」ボタンが配置されている。画面下部には非表示コンポーネントとして「SpeechRecognizer」が組み込まれている。
エミュレータ上での実行画面である。「Record」ボタンの下に、音声認識の結果として「You spoke hello」という文字列が表示されている。これは英語の音声入力が正しく処理された結果を示している。