![[kaneko lab.]](https://www.kkaneko.jp/info/logo_png.png){kind=logo}
MIT App Inventor のサンプル画面集
前準備
Java 25（Temurin 25 JDK） のインストール
Eclipse Temurin（Adoptium）のインストールを行い、Javaのプログラムをコンパイル・実行する環境を整える。扱う環境は、Windows搭載パソコンである。現時点(2026年6月)での最新LTS版である Java 25（Temurin 25 JDK）を推奨する。
[Windows での Java 25（Temurin 25 JDK） のインストール手順を見るには、ここをクリック]
Windows での Java 25（Temurin 25 JDK） のインストール
以下のいずれかの方法で Java 25（Temurin 25 JDK）をインストールする。JDKがインストール済みの場合、この手順は不要である。
方法 1：winget によるインストール
【インストールコマンドの実行方法】
管理者権限でコマンドプロンプトを起動する（手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。そして、コマンド全体をコマンドプロンプトにコピー＆ペーストする。
Temurin の Windows インストーラー（.msi）は、ユーザー単位ではなくマシン単位でインストールされる（1台に1つのインストール）。そのため、システム全体（全ユーザー向け）にインストールするには管理者権限が必要である。インストール完了後、コマンドプロンプトを再起動するとPATHが反映される。
REM Java 25（Temurin 25 JDK） をインストール（PATH と JAVA_HOME を更新）
winget install --id EclipseAdoptium.Temurin.25.JDK -e --silent --accept-source-agreements --accept-package-agreements --override "ADDLOCAL=FeatureMain,FeatureEnvironment,FeatureJarFileRunWith,FeatureJavaHome INSTALLDIR=\"C:\Program Files\Eclipse Adoptium\jdk-25\" /quiet"
上記の --override 内の指定の意味は次のとおりである。FeatureEnvironment はPATH環境変数の更新、FeatureJavaHome は JAVA_HOME 環境変数の更新、FeatureJarFileRunWith は .jar ファイルとJavaアプリケーションの関連付けである。INSTALLDIR はインストール先フォルダの指定である。
方法 2：インストーラーによるインストール
- Adoptium公式サイト（https://adoptium.net/temurin/releases/）にアクセスし、Version として「25 - LTS」、Operating System として「Windows」を選び、
.msi形式のWindows用インストーラーをダウンロードする。 - ダウンロードした
.msiファイルを実行し、インストールプログラムを起動する。 - ライセンス条項を確認し、同意できる場合はチェックを入れて次へ進む。
- 「Installation Scope」画面では「Install for all users of this machine」を選ぶ
- 「Custom Setup（カスタムセットアップ）」画面で、インストールする機能を選択する。既定では「Add to PATH（PATH環境変数への追加）」と「Associate .jar」（.jarファイルの関連付け）が有効になっている。さらに、ツリー内でバツ印（×）が付いている「Set JAVA_HOME variable（JAVA_HOME環境変数の更新）」をクリックして有効に変更することを推奨する。これらを有効にしないと、コマンドプロンプトから
javaコマンドを実行できなかったり、開発ツールがJDKを見つけられなかったりする。 - 「次へ (Next)」をクリックし、続いて「インストール (Install)」をクリックしてインストールを開始する。完了後「Finish」で閉じる。
インストールの確認
コマンドプロンプトで以下を実行する。
java --versionバージョン番号（例：openjdk 25.x.x）が表示されればインストール成功である。「'java' は、内部コマンドまたは外部コマンドとして認識されていません。」と表示される場合は、インストールが正常に完了していないか、PATHが反映されていない（コマンドプロンプトを再起動して再度確認する）。
あわせて、コンパイラと JAVA_HOME も確認しておくとよい。
javac --version
echo %JAVA_HOME%その他
- 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」という文字列が表示されている。これは英語の音声入力が正しく処理された結果を示している。