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

https://www.catch.jp:443/wiki/index.php?Programing%2FMIT%20App%20Inventor2

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 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」プロジェクトをダブルクリックすると、アプリの開発画面が表示される
s_first_project.png

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」で、プログラムを保存する
s_hellow_world.png

実行する方法

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

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

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にアクセス
  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デバイスで読み取る
s_connect.png

これで、作成したアプリが、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が起動して、自動的に対象アプリが表示されるはず。

s_emulator.png

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

  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にアクセス
  4. AndroidデバイスにMIT AI2 Companionをインストール
  5. aiStarterを実行しておく (Windowsの場合)
  6. PCとAndroidデバイスをUSBケーブルで接続。うちの場合、Androidデバイスの充電ケーブルが、じつはUSBケーブルになる。接続するとAndroidデバイスは、「mass strage device」モードになる(PCには外部ドライブとして表示されない)。

参考


  トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
添付ファイル: files_emulator.png 1527件 [詳細] files_connect.png 1450件 [詳細] files_hellow_world.png 1715件 [詳細] files_first_project.png 1586件 [詳細]
Last-modified: 2014-01-12 (日) 17:30:09 (1738d)