- 追加された行はこの色です。
- 削除された行はこの色です。
[[Programing]] ＞ MIT App Inventor
#title(ビジュアルプログラミング言語 MIT App Inventor2 メモ)
このページは、[[クリエイティブコモンズ CC BY-SA 3.0:http://creativecommons.org/licenses/by-sa/3.0/]]で提供しています。
----
MIT App Inventorは、Androidアプリをマウスや指先だけで作成できるビジュアル プログラミング言語。
これは、MIT App Inventoの入門記事です。
以下、書きかけ
#contents
*概要を知る [#z55bc18e]
-[[App Inventor - Wikipedia:http://ja.wikipedia.org/wiki/App_Inventor]]
App Inventorは、Androidアプリをマウスや指先で作れるビジュアルプログラミング言語。
プログラムの部品をドラッグ＆ドロップで組み合わせるだけで、Androidアプリができる。
もともとGoogleが開発したものが、2012年1月にオープンソース化されて、現在はMITのプロジェクトとして公開されている。
*サンプルアプリ [#k1e7321b]
2013年12月に、App Inventor2が公開された。
*使ってみる [#ad87de3f]
-[[App Inventor - Wikipedia:http://ja.wikipedia.org/wiki/App_Inventor]] 日本語
-[[Front Page | Explore MIT App Inventor:http://appinventor.mit.edu/explore/]] 公式サイト（英語）
--[[App Inventor Classic | Explore MIT App Inventor:http://appinventor.mit.edu/explore/classic.html]]
**App Inventor2の特徴 [#i8116d5f]
-Webブラウザだけで、作成可能（Java不要。IE非対応）
**サンプルアプリ [#k1e7321b]
(準備中)
*はじめ方 [#c9cc5960]
まずPCで「Hello World」を作ります。
**準備するもの [#h6bb3882]
-PC
-Webブラウザ(ChromeかFirefoxを奨励。IEはサポート外)
-[[Google アカウント:https://accounts.google.com/SignUp?hl=ja]]（MITのAppInventorでプロジェクトを保存する場合。Androidデバイスにヒモづいているはず。
-Androidマシン（スマホ or タブレット）
- 無線LAN(WiFi) あると便利
**最初のプロジェクト [#edebebd5]
+Webブラウザで[[AppInventor2:http://ai2.appinventor.mit.edu/]]ページにアクセスしたら、Googleアカウントでのログイン
+ポップアップウィンドウが表示されたら、「Continue」ボタンをクリック
+次のポップアップ「Welcome to AppInventor2」が表示されたら、ウィンドウ外をクリック
+「New Project」ボタンをクリック
+「Create New App Inventor Project」で、プロジェクト名(例：first)を入力して「OK」
+「first」プロジェクトをダブルクリックすると、アプリの開発画面が表示される
#ref(s_first_project.png)
**Hello World [#a355446f]
+左はしの「Pallete」-「User Interface」（パレット - ユーザーインターフェース）にある「Button」(ボタン)ブロックを画面中央のVewer(ビューワ)エリアまでドラッグ。この「Button」(ボタン)ブロックは、”Text for Button1”と表示される
+”Text for Button1”が選択された状態で、「Properties」(プロパティ)エリアの"Text"(テキスト)を「Text for Button1」から「OK」に変える
+画面右上の「Blocks」ボタンをクリックする。これで、プログラム編集画面になる
+左はしの「Blocks」エリアから、次の3つのブロックを取り出して組み立てる
--「Screen1」-「Button1」：When Button1 Click do
--「Screen1」-「Button1」：Set Button1 Text to
--「Built in」-「Text」：”_"
+Textブロックの中身を"Hello World"に変更する
+「Project」-「Save」で、プログラムを保存する
#ref(s_hellow_world.png)
*実行する方法 [#c74c19a7]
実行する方法は、次の3つ。
-Androidデバイス+WiFiがある => Androidデバイス+WiFiで実行
-Androidデバイスがない => エミュレータで実行
-AndroidデバイスはあるがWiFiがない => Androidデバイス+USBケーブルで実行
-[[3つの方法（英語）:http://appinventor.mit.edu/explore/ai2/setup.html]]
-[[General Connection Help | Explore MIT App Inventor:http://appinventor.mit.edu/explore/ai2/connection-help.html]]
**Androidデバイス+WiFiで実行 [#v982247c]
あなたが作ったアプリをあなたのAndroidデバイスで実行するため、あなたのAndroidデバイスに「App Inventor コンパニオン(MIT AI2 Companion - App Inventor Companion App for your device)」を入れておこう。
+PCで[[Connect your Phone or Tablet over WiFi | Explore MIT App Inventor:http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html]]にアクセス
+表示されていたQRコードをAndroidデバイスで読み取り、GooglePlayにアクセス
--[[MIT AI2 Companion - Google Play の Android アプリ:https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3]]
+AndroidデバイスにMIT AI2 Companionをインストール
+PCのAppInventor2で、「Connect」-「AI2 Companion」を選択。QRコードが表示される
+AndroidデバイスにMIT AI2 Companionを起動する
+Androidデバイスで「Scan QR code」を選択
+PCに表示されたQRコードを、Androidデバイスで読み取る
#ref(s_connect.png)
これで、作成したアプリが、Androidデバイスで実行できました。
-[[公式サイトの英語の説明:http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html]]
**エミュレータで実行 [#efabea62]
Androidデバイスがなくても、30人くらいのクラスだったら、これで自分たちのプロジェクトをPC上に作って、エミュレータで実行できる。
PCには、AI2 Setupの最新バージョンをインストールすること。
+AI2 Setupをインストール（この中に、Androidエミュレータが入っている）
--[[Setup on Windows:http://appinventor.mit.edu/explore/ai2/windows.html]] インストール先のファイルパス(C:\Program Files\AppInventor)をメモしておくこと。
--[[Setup on Mac OS X:http://appinventor.mit.edu/explore/ai2/mac.html]]
--Instructions for GNU/Linux (coming soon)
+aiStarterを実行しておく (Windowsの場合)
+PCのAppInventor2で、「Connect」-「Emulator」を選択
+Androidエミュレータが起動したら(6-7分くらいかかった)、カギマークを横にドラッグ
+Androidエミュレータ上の「AI2 Companion」アイコンをクリック
これで、Androidエミュレータ上のAI2 Companionが起動して、自動的に対象アプリが表示されるはず。
#ref(s_emulator.png)
私の場合、うまく接続できなかったので、こんなふうにした
+Androidエミュレータの「Menu」ボタンをクリックして、AI2 Companionを停止する
+PCのAppInventor2で、再度「Connect」-「Emulator」を選択
-[[公式サイトの英語の説明:http://appinventor.mit.edu/explore/ai2/setup-emulator.html]]
**USBケーブルで接続 [#kdcd2ada]
Androidデバイスはあるけど無線LANが使えないなら、PCとAndroidデバイスをUSBケーブルで接続して、プログラムを実行できる。
あなたが作ったアプリをあなたのAndroidデバイスで実行するため、あなたのAndroidデバイスに「App Inventor コンパニオン(MIT AI2 Companion - App Inventor Companion App for your device)」を入れておこう。また、PCには、AI2 Setupの最新バージョンをインストールすること。
+PCに、AI2 Setupをインストール（この中に、Androidエミュレータが入っている）
--[[Setup on Windows:http://appinventor.mit.edu/explore/ai2/windows.html]] インストール先のファイルパス(C:\Program Files\AppInventor)をメモしておくこと。
--[[Setup on Mac OS X:http://appinventor.mit.edu/explore/ai2/mac.html]]
--Instructions for GNU/Linux (coming soon)
+PCで[[Connect your Phone or Tablet over WiFi | Explore MIT App Inventor:http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html]]にアクセス
+表示されていたQRコードをAndroidデバイスで読み取り、GooglePlayにアクセス
--[[MIT AI2 Companion - Google Play の Android アプリ:https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3]]
+AndroidデバイスにMIT AI2 Companionをインストール
+aiStarterを実行しておく (Windowsの場合)
+PCとAndroidデバイスをUSBケーブルで接続。うちの場合、Androidデバイスの充電ケーブルが、じつはUSBケーブルになる。接続するとAndroidデバイスは、「mass ｓｔｒａｇｅ device」モードになる（PCには外部ドライブとして表示されない）。
-PCで[[接続テスト:http://appinventor.mit.edu/test/]]にアクセスする。
-[[Connecting to a phone or tablet with a USB cable | Explore MIT App Inventor:http://appinventor.mit.edu/explore/ai2/setup-device-usb.html]]
*参考 [#f8728d08]
-[[Front Page | Explore MIT App Inventor:http://appinventor.mit.edu/explore/]] 公式サイト（英語）
--[[MIT App Inventor 2:http://ai2.appinventor.mit.edu/]]
--[[App Inventor Classic:http://appinventor.mit.edu/explore/classic.html]]
-[[日本App Inventorユーザー会:http://www.app-inventor.jp/]]
-[[連載インデックス「App Inventorでアプリ開発はどこまでできるのか」 - ＠IT:http://www.atmarkit.co.jp/fsmart/index/appinventor.html]]
-[[プログラマでない人のためのAndroidアプリ作成入門 〜App Inventor〜:http://libro.tuyano.com/index2?id=315001]]
-[[App Inventor Idea Book:http://piezdowe.blogspot.jp/]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
