ビジュアルプログラミング言語 MIT App Inventor2 メモ

Programing ＞ MIT App Inventor

このページは、クリエイティブコモンズ CC BY-SA 3.0で提供しています。

MIT App Inventorは、Androidアプリをマウスや指先だけで作成できるビジュアル プログラミング言語。

これは、MIT App Inventoの入門記事です。

以下、書きかけ

概要を知る †

App Inventorは、Androidアプリをマウスや指先で作れるビジュアルプログラミング言語。

プログラムの部品をドラッグ＆ドロップで組み合わせるだけで、Androidアプリができる。

もともとGoogleが開発したものが、2012年1月にオープンソース化されて、現在はMITのプロジェクトとして公開されている。

2013年12月に、App Inventor2が公開された。

• App Inventor - Wikipedia 日本語
• Front Page | Explore MIT App Inventor 公式サイト（英語）

App Inventor2の特徴 †

• Webブラウザだけで、作成可能（Java不要。IE非対応）

サンプルアプリ †

(準備中)

はじめ方 †

まずPCで「Hello World」を作ります。

準備するもの †

• PC
• Webブラウザ(ChromeかFirefoxを奨励。IEはサポート外)
• Google アカウント（MITのAppInventorでプロジェクトを保存する場合。Androidデバイスにヒモづいているはず。
• Androidマシン（スマホ or タブレット）
• 無線LAN(WiFi) あると便利

最初のプロジェクト †

1. WebブラウザでAppInventor2ページにアクセスしたら、Googleアカウントでのログイン
2. ポップアップウィンドウが表示されたら、「Continue」ボタンをクリック
3. 次のポップアップ「Welcome to AppInventor2」が表示されたら、ウィンドウ外をクリック
4. 「New Project」ボタンをクリック
5. 「Create New App Inventor Project」で、プロジェクト名(例：first)を入力して「OK」
6. 「first」プロジェクトをダブルクリックすると、アプリの開発画面が表示される

Hello World †

1. 左はしの「Pallete」-「User Interface」（パレット - ユーザーインターフェース）にある「Button」(ボタン)ブロックを画面中央のVewer(ビューワ)エリアまでドラッグ。この「Button」(ボタン)ブロックは、”Text for Button1”と表示される
2. ”Text for Button1”が選択された状態で、「Properties」(プロパティ)エリアの"Text"(テキスト)を「Text for Button1」から「OK」に変える
3. 画面右上の「Blocks」ボタンをクリックする。これで、プログラム編集画面になる
4. 左はしの「Blocks」エリアから、次の3つのブロックを取り出して組み立てる
   • 「Screen1」-「Button1」：When Button1 Click do
   • 「Screen1」-「Button1」：Set Button1 Text to
   • 「Built in」-「Text」：”_"
5. Textブロックの中身を"Hello World"に変更する
6. 「Project」-「Save」で、プログラムを保存する

実行する方法 †

実行する方法は、次の3つ。

• Androidデバイス+WiFiがある => Androidデバイス+WiFiで実行
• Androidデバイスがない => エミュレータで実行
• AndroidデバイスはあるがWiFiがない => Androidデバイス+USBケーブルで実行

• 3つの方法（英語）
• General Connection Help | Explore MIT App Inventor

Androidデバイス+WiFiで実行 †

あなたが作ったアプリをあなたのAndroidデバイスで実行するため、あなたのAndroidデバイスに「App Inventor コンパニオン(MIT AI2 Companion - App Inventor Companion App for your device)」を入れておこう。

1. PCでConnect your Phone or Tablet over WiFi | Explore MIT App Inventorにアクセス
2. 表示されていたQRコードをAndroidデバイスで読み取り、GooglePlayにアクセス
   • MIT AI2 Companion - Google Play の Android アプリ
3. AndroidデバイスにMIT AI2 Companionをインストール
4. PCのAppInventor2で、「Connect」-「AI2 Companion」を選択。QRコードが表示される
5. AndroidデバイスにMIT AI2 Companionを起動する
6. Androidデバイスで「Scan QR code」を選択
7. PCに表示されたQRコードを、Androidデバイスで読み取る

これで、作成したアプリが、Androidデバイスで実行できました。

• 公式サイトの英語の説明

エミュレータで実行 †

Androidデバイスがなくても、30人くらいのクラスだったら、これで自分たちのプロジェクトをPC上に作って、エミュレータで実行できる。

PCには、AI2 Setupの最新バージョンをインストールすること。

1. AI2 Setupをインストール（この中に、Androidエミュレータが入っている）
   • Setup on Windows インストール先のファイルパス(C:\Program Files\AppInventor)をメモしておくこと。
   • Setup on Mac OS X
   • Instructions for GNU/Linux (coming soon)
2. aiStarterを実行しておく (Windowsの場合)
3. PCのAppInventor2で、「Connect」-「Emulator」を選択
4. Androidエミュレータが起動したら(6-7分くらいかかった)、カギマークを横にドラッグ
5. Androidエミュレータ上の「AI2 Companion」アイコンをクリック

これで、Androidエミュレータ上のAI2 Companionが起動して、自動的に対象アプリが表示されるはず。

私の場合、うまく接続できなかったので、こんなふうにした

1. Androidエミュレータの「Menu」ボタンをクリックして、AI2 Companionを停止する
2. PCのAppInventor2で、再度「Connect」-「Emulator」を選択

• 公式サイトの英語の説明

USBケーブルで接続 †

Androidデバイスはあるけど無線LANが使えないなら、PCとAndroidデバイスをUSBケーブルで接続して、プログラムを実行できる。

あなたが作ったアプリをあなたのAndroidデバイスで実行するため、あなたのAndroidデバイスに「App Inventor コンパニオン(MIT AI2 Companion - App Inventor Companion App for your device)」を入れておこう。また、PCには、AI2 Setupの最新バージョンをインストールすること。

1. PCに、AI2 Setupをインストール（この中に、Androidエミュレータが入っている）
   • Setup on Windows インストール先のファイルパス(C:\Program Files\AppInventor)をメモしておくこと。
   • Setup on Mac OS X
   • Instructions for GNU/Linux (coming soon)
2. PCでConnect your Phone or Tablet over WiFi | Explore MIT App Inventorにアクセス
3. 表示されていたQRコードをAndroidデバイスで読み取り、GooglePlayにアクセス
   • MIT AI2 Companion - Google Play の Android アプリ
4. AndroidデバイスにMIT AI2 Companionをインストール
5. aiStarterを実行しておく (Windowsの場合)
6. PCとAndroidデバイスをUSBケーブルで接続。うちの場合、Androidデバイスの充電ケーブルが、じつはUSBケーブルになる。接続するとAndroidデバイスは、「mass ｓｔｒａｇｅ device」モードになる（PCには外部ドライブとして表示されない）。

• PCで接続テストにアクセスする。

• Connecting to a phone or tablet with a USB cable | Explore MIT App Inventor

参考 †

• Front Page | Explore MIT App Inventor 公式サイト（英語）
  • MIT App Inventor 2
  • App Inventor Classic

• 日本App Inventorユーザー会

• 連載インデックス「App Inventorでアプリ開発はどこまでできるのか」 - ＠IT
• プログラマでない人のためのAndroidアプリ作成入門 〜App Inventor〜
• App Inventor Idea Book