Hatena::ブログ(Diary)

ジャンク☆ニュース 臥龍 このページをアンテナに追加 RSSフィード

2010-09-04

初めてのApp Inventorの使い方 初めてのApp Inventorの使い方を含むブックマーク 初めてのApp Inventorの使い方のブックマークコメント


誰でも簡単にXperiaなどで動くAndroidアプリが作れると評判のApp Inventorの使い方を簡単に説明します。


1.セットアップ

まず、JDKの最新をダウンロードしてインストールする

http://java.sun.com/javase/ja/6/download.html

リンク先の「Java Platform, Standard Edition」の「JDKダウンロード」をクリック。後は指示に従いダウンロード


以下からApp Inventorファイルダウンロードしてインストールする。

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

※上記URLを開き、自分OSにあわせて以下のリンククリックする

Instructions for Mac OS X

Instructions for GNU/Linux

Instructions for Windows


以下のWEBアプリ開発環境を開く

http://appinventor.googlelabs.com/ode/Ya.html


※詳しくは以下のNkznさんの記事を参照してみてください。

App Inventor for Androidの初期設定をざっくりと解説してみる。」

http://d.hatena.ne.jp/Nkzn/20100723#1279903671




2.プロジェクト作成・プログラミング


プロジェクト作成】

1.App Inventorの「My Projects」をクリック

2.「New」をクリックプロジェクト名を入れて「OK」


【画面作成】

App Inventorで右の「palette」から部品を中央画面にドラッグする。プロパティなどは右にでる。リネームやデリートもこの画面で設定可能。


プログラム作成】

1.エミュレーターを起動する。

Windowsならc:\program filses\appinventor-extras/commands-for-Appinventorのrun-emulator.bat

Linuxだと

/usr/google/appinventor-extras/commands-for-Appinventorのrun-emulator

2.App Inventorの「Open the Blocks Editor」をクリック。ブロックエディタが起動する

3.ブロックエディタの「My Blocks」をクリック自分が画面に置いたコンポーネントが表示される。

コンポーネントクリックすると、コンポーネントが持つ、イベントプロパティ、メソッドを表示する


※各コンポーネントの解説は、コンポーネントクリックしたときに出る?マークをクリックし、一番下のリンククリックすると詳細な説明が出る。


例えば、ボタンを押すと、ラベルに「Hello World」と出す場合、

3.1 Web開発環境で画面に「Label」と「Button」をドラッグ

3.2 ブロックエディタで「My Blocks」をクリック

3.3 「Button1」をクリック。「When Button1.Click」をクリック。(これがイベント処理関数になる)

3.4 「Label1」をクリック。「set Label1.Text」をクリック。「When Button1.Click」にはめ込む

3.5 画面の何もない所をクリック「Text」をクリック。出てきた「Text text」を「set Label1.Text」の「to」にはめ込む。

3.6 「Text text」の右の「text」の部分をクリックし「Hello World」に書き換える。

3.7 ブロックエディターで「Connect to phone」をクリック

3.8 エミュレータ上でプログラムが動く

(実機で動かしたいときはWEB開発環境で「Package for Phone」で「Show Barcode」を選ぶ。「Download to this computer」を選ぶとapkファイルダウンロードできてネットで公開できる)


変数の使用方法】

1.ブロックエディターで「built-in」をクリック、「Definition」をクリック

2.「def variable」をクリック 

3.「variable」をクリック、ここに変数名を入れる。

4.「?」をクリック「123」なら数字変数(number)、「text」なら文字変数(text)になる。それぞれ123とtextの部分をクリックすると初期値を編集できる。

5.以後、変数を使いたいときは「MyBlocks」-「My Definitions」をクリックする。使用可能な変数を表示する。関数などを使った場合もここに引数を表示するのでそれを使う。



※詳しくは以下のsepiablueさんの記事を参考にしてみてください。

App Inventor for Androidを始めよう!使い方その2」

http://sepiandroid.blog100.fc2.com/blog-entry-43.html

3.参考ソース

picpieさんのサイトです。色々ソースが公開されています。

http://piezdowe.blogspot.com/

忍者手裏剣ゲーム」のソースコードが見れます。

http://www.suavestudio.com/downloads/NinjaShurikenBattle.zip

ゲーム作りたい人の参考になると思います。

このゲーム自身は、以下からダウンロードできます。

http://www.suavestudio.com/downloads/NinjaShurikenBattle.apk



※公開されたソースの読み方。

ブラウザ側上段のMy Projects クリックプロジェクト一覧を出し、

中断 More Actionsをクリックすると、Upload Sourceが現れるので

それをクリックして、zipファイルをそのままファイル選択してアップロードすればOK

同じような方法で、ダウンロードもできます。

トラックバック - http://d.hatena.ne.jp/garyo/20100904/p1