![[kaneko lab.]](https://www.kkaneko.jp/info/logo_png.png){kind=logo}
MIT App Inventor を使ってみる
【概要】
MIT App Inventor は，MIT が提供する Web ブラウザで動作する，ブロックを組み合わせる方式（ビジュアルプログラミング）で Android アプリと iOS アプリを作るためのツールである。デザイナ画面で画面部品（ボタン，ラベルなど）を配置し，ブロック・エディタ画面でブロックを組み合わせて動作を作る。作ったアプリは，スマートフォン／タブレットや，パソコン上のエミュレータで動作確認できる。本ページでは，プロジェクトの新規作成からブロック作成，エミュレータでの実行までを通して試す。
【目次】
【関連する外部ページ】
- MIT App Inventor 公式：https://appinventor.mit.edu/
- App Inventor 開発環境（ブラウザで開く）：https://ai2.appinventor.mit.edu/
- セットアップ手順（公式）：https://appinventor.mit.edu/explore/ai2/setup
- エミュレータの導入と起動（公式）：https://appinventor.mit.edu/explore/ai2/setup-emulator
- 動作環境（公式 System Requirements）：https://appinventor.mit.edu/explore/content/system-requirements
【サイト内の関連情報】
第1章 前準備
MIT App Inventor は Web ブラウザ上で動作する。デザイナとブロック・エディタはブラウザの中で動くため，パソコンに JDK や Android SDK を入れる必要はない。ただし，作ったアプリを動かして確かめるには，次のいずれかの方法を用意する。
- 方法1（推奨）：実機（Android デバイス）と無線 LAN（Wi-Fi）を使う
Android スマートフォンやタブレットに「MIT AI2 Companion」アプリを入れ，パソコンとデバイスを同じ Wi-Fi に接続して使う。パソコンへの追加ソフトのインストールは不要である。
- 方法2：エミュレータ（パソコン画面の仮想デバイス）を使う
Android 端末を持っていない場合は，パソコンにセットアップソフト（aiStarter を含む App Inventor Setup ソフトウェア）を入れて，画面上のエミュレータで動かす。本ページの第2章では，この方法（エミュレータ）を使う。
- 方法3：実機と USB ケーブルを使う
Wi-Fi 接続が使えない環境では，パソコンにセットアップソフトを入れ，USB ケーブルで Android 端末を接続して使う。
使用する Web ブラウザは Google Chrome または Mozilla Firefox（Safari も利用可）。Google アカウントでサインインして使う。エミュレータを使う場合は，あらかじめ App Inventor Setup ソフトウェア（aiStarter を含む）を 公式の手順 に従ってインストールしておく。
第2章 MIT App Inventor を使ってみる
- Web ブラウザで MIT App Inventor のページを開く。
- トップページの「Create Apps!」をクリックする。MIT App Inventor の開発環境（https://ai2.appinventor.mit.edu/）が開き，Google アカウントでのサインインが求められる。
- サインイン後に開くプロジェクト一覧画面の左上にある「Start new project」をクリックする。これは，プロジェクトの新規作成のため。
- プロジェクト名を入力し，「OK」をクリックする。プロジェクト名は，半角英数字とアンダースコアが使え，先頭は英字とする（空白や記号は使えない）。
- デザイナの画面が開く。デザイナは画面部品を配置して，アプリの見た目を作るための画面である。左側に部品一覧の「Palette（パレット）」，中央にスマートフォン画面を模した「Viewer（ビューワ）」，右側に部品の設定を行う「Properties（プロパティ）」が並ぶ。
- 試しに，Button（ボタン）と Label（ラベル）を，Palette から Viewer にドラッグ＆ドロップする。
- 今度は，画面右上の「Blocks」ボタンをクリックする。これでブロック・エディタの画面に切り替わる（デザイナとは Designer ボタンと Blocks ボタンで切り替える）。
- ブロック・エディタの画面が開く。左側の「Blocks」一覧の中に「Screen1」の下にコンポーネント（先ほどデザイナで配置した Button1，Label1 など）が並ぶ。ここでは「Button1」をクリックする。Button1 で使えるブロックの一覧が開く。
- 試しに，「when Button1.Click」ブロックを，作業エリアにドラッグ＆ドロップする。これは，ボタンが押されたときに動く処理を入れる入れ物（イベントハンドラ）である。
- 次に，左側の Blocks 一覧で「Label1」をクリックする。
- 試しに，「set Label1.FontSize to」ブロックを，作業エリアにドラッグ＆ドロップする。先ほどの「when Button1.Click」ブロックの中にはめ込む（くぼみと突起が噛み合う形になる）。
- 「Built-in」の下にある「Math」をクリックする。Math は，数値や四則演算などのブロックを集めた引き出しである。
- 試しに，「number（数値）」のブロックを，作業エリアにドラッグ＆ドロップする。先ほどの「set Label1.FontSize to」ブロックの右側にはめ込む。数値（例：30）を設定する。これで「ボタンを押すと，ラベルの文字サイズが指定した値に変わる」処理ができる。
- 実行して確かめる。あらかじめパソコン上で aiStarter を起動しておく（Mac は自動起動，Windows はデスクトップやスタートメニューのショートカットから起動）。App Inventor の画面上部にある「Connect」メニューを開き，「Emulator」をクリックする。エミュレータの起動には数十秒から数分かかる。
- 確認のダイアログが出たら「OK」をクリックする。
- エミュレータが起動すると，はじめは黒い画面が表示される。色付きの背景が出るまで待つ。さらに画面上部の SD カード準備の通知が消えるまで待つ。Android のロック画面が表示された場合は，鍵アイコンをドラッグしてロックを解除する。
- 画面が切り替わり，作成中のアプリがエミュレータに表示される。
- 初回の接続では，エミュレータ内のコンパニオン（MIT AI2 Companion）の更新を求められることがある。画面の案内に従って更新し，更新後にもう一度 Connect メニューから接続し直す。
- 接続が完了すると，作成中のアプリの画面（配置した Button と Label）が表示される。
- ボタン（Button1）をクリックすると，先ほど組んだブロックにより，ラベル（Label1）の文字の大きさが，設定した値に変わる。
