micchy's blog: App Inventor構築と使い方(基本のみ)

AppsInventorの設定(環境構築)と基本的な使い方(チュートリアルレベル)を紹介します。

セットアップから始め、ボタンを押すと音が鳴るアンドロイドアプリの作り方を説明します。

まず必要環境について、

OS：
　Macintosh (with Intel processor): Mac OS X 10.5, 10.6
　Windows: Windows XP, Windows Vista, Windows 7
　GNU/Linux: Ubuntu 8+, Debian 5+

ブラウザ：
　Mozilla Firefox 3.6 以上
　Apple Safari 5.0 以上
　Google Chrome 4.0 以上
　Microsoft Internet Explorer 7 以上

今回はOSはWindows 7 ブラウザはGoogleChromeを使用しました。

あと使用するにあたりGoogleアカウントが必要になるので、持ってない人は登録しましょう。
持っている人はあらかじめGoogleアカウントでGoogleにログインしてください。

まず環境構築。

まずJava JREをインストールします。
既に入っている方が多いと思いますが、その方はスルーしてください。

http://www.java.com/ja/download/

中央の無料のJavaのダウンロードをクリックし、ダウンロードしたファイルを実行してインストールをしてください。

次にAppsInventorの公式サイトにアクセスしエミュレーターのセットアップファイルをダウンロードします。

http://appinventor.googlelabs.com/learn/setup/

ページの下の方にある自分のOSと同じページからダウンロードを行ってください。
今回はWindowsなので、Instructions for Windowsを選択。
ダウンロードしたら、実行して指示に従ってインストール。

これで環境構築は終了です。

いよいよ開発に移ります。
ブラウザ上で開発をするので、

http://appinventor.googlelabs.com

にアクセスしてください。Googleアカウントでログインしていないとダメなので注意してください。

すると以下のような画面に移ります。

[New]をクリックして新規プロジェクトの名前を決めてください。

すると以下のような画面に移ります。

まずはボタンの設定から

①②Buttonを選択し中央のScreenにドラッグアンドドロップする
③右下のImageをクリックする(今回は青い×の画像を選びました)
④Addを押す
⑤適当な画像ファイルを選択を押しボタンに配置する
⑥Textを消す

以上の操作を行えば下のようになります。

続いてSoundをいれます。

①②Mediaの中のSoundをScreenにドラッグアンドドロップ
③Sourceを選択しファイルから適当な効果音を選ぶ

以上でデザインは完成です。

続いてエディタを開いてエミュレーターとコネクトします。まずはエディタから

右上のOpen Block Editorをクリックしエディタを開きます。
Chromeの場合一度ダウンロードするのでそれを開いてください。
開くと、画面のようにJavaのウィンドウがでるのでしばらく待ってください。
また警告が出ますがOKを押して大丈夫です。

次にエディタが開いたら「Use the emulator」を選択肢OKを押し、エミュレーターを起動します。
エミュレーターは起動に少し時間がかかります。