ナカザンドットネット

それって私の感想ですよね

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

Android tips App Inventor

f:id:Nkzn:20100723224153j:image:w320

ということで、先日Googleから発表されたApp Inventor for Androidですが、幸運なことに昨日の早朝、私のところにユーザー権限が届きました。


とりあえず昨晩と今さっきゴニョゴニョ弄って、サンプルを作ったりするところまではいきました。

さて今回のエントリは

App Inventor for Androidの初期設定について、日本語でざっくりと説明したいと思います。
具体的にはGetting Started内の２つのドキュメントについてです。

大事な約束

  • 英語はむじゅかしいので、意訳とか直訳とかしません。
    • 意訳っぽいことはしますが文意を全て伝えきるほどのやる気はありません('A`)ﾒﾝﾄﾞｲ
  • つまり雰囲気です。
  • 大項目に沿って進めていきます。
  • 見落としとかあっても((；ﾟДﾟ)ｵﾚｼﾗﾅｲ
  • 僕の環境は特殊です。
OS Mac OS X 10.6 Snow Leopard
ブラウザ Safari 5.0
Android SHARP IS01 / Android 1.6

※Win, Linux環境については少し触れる程度にします。

Set up Your Computer and Phone

原文
まずは、お持ちのコンピュータ（私が実行したのはMacの雪豹のみ）とAndroidケータイの設定を行ないます。
「App Inventor for Android」(以下、App Inventor)自体はGmailやGoogleドキュメントのようにブラウザ上で動作する「Webアプリケーション」ですが、実際の開発ではお手元のコンピュータに『App Inventor Extras』というソフトウェアをインストールして、ブラウザ上のApp Inventorと連携させることになります。

Computer Setup

セットアップというより、動作環境の確認です。

※ブラウザからコンピュータへのアクセスを過剰に抑制するもの（ウィルス対策ソフトとか、ファイアウォールとか）により、App Inventorの動作が阻害される場合があります。お気をつけて。

  • Java
    • コンピュータに求められるもの：Java 6の実行環境(JRE 1.6ともいう)
    • Javaが入ってない人はwww.java.comから落としてインストールすること。
    • ブラウザ上でのJavaの動作確認とバージョンの確認は、下記のページへアクセスしてください。数秒待つとバージョンなどの情報が表示されます。

Javaのインストールとかイチイチ触れてられないので、割愛します。

Install the App Inventor Extras Software

それでは、ローカル側で動くApp Inventor Extrasをインストールします。
これがないとブロックエディタが開きません（実体験済み）
インストールのお作法自体はMac, Linux, Winの一般的な手順に沿っているので、インストール用ファイル(dmg, deb, exe)へのリンクと簡単な手順だけ貼っておきますね。

  • Mac OS X用dmgファイル
    • ファイルをマウント後、中身のpkgファイルをダブルクリックしてインストール実行。
  • Ubuntu/Debian用debファイル
    • sudo dpkg --install appinventor-extras_1.0-1_all.deb
  • Windows用exeファイル
    • exeファイルを実行。

その他、Windowsについては各端末ごとのドライバが必要になるらしいので、
「端末名 ドライバ」あたりでググッてみると何かしら見つかると思います。

Setting up your phone

ごく一般的な、Androidアプリ開発時にデバイスに対して設定する内容です。

  • 設定→アプリケーション→開発→「USBデバッグ」をチェック
  • 設定→アプリケーション→開発→「スリープモードにしない」をチェック*2
  • 設定→画面表示→「画面の向き」のチェックを外す*3


ここまで設定したら、AndroidケータイをUSBケーブルでコンピュータに繋いでみましょう。
Androidケータイの画面上部の通知エリアに、以下のメッセージが表示されていることを確認してください。

これでコンピュータとAndroidケータイの設定は完了です。

Connect App Inventor to Your Phone

原文
さてここからはApp InventorとAndroidケータイを繋げていく作業に入ります。
まずは、App Inventorの特徴について、おさらいしておきましょう。

  • ブラウザ上で動作するWebアプリケーションです。
  • ブラウザ上で貴方がデザインしたアプリは、即座にUSB経由で実機に反映されます。
  • 完成したアプリは、Androidアプリのファイル形式である.apkファイルとしてダウンロードすることができます。
Create a New Project

まずはApp Inventorのページにアクセスしてください。
http://appinventor.googlelabs.com

最初に開かれるのが【My Projects】画面です。
Googleドキュメントのトップページみたいですね。

f:id:Nkzn:20100724005725p:image

それでは、アプリケーションの新規作成を行ないましょう。
左上の「New」をクリックしてください。

f:id:Nkzn:20100724005747p:image

プロジェクト名は「HelloAppInventor」にしておきましょう。
ちなみに、プロジェクト名はスペース禁止です。たぶん半角英数のみしか使えません。

さて、プロジェクト名を決めてOKを押すと、【Designer】画面が開きます。

f:id:Nkzn:20100724005808p:image


では、この状態から実機でアプリを実行してみましょう。
画面右上の「Open the Blocks Editor」をクリックし、ブロックエディターを立ち上げてください。
※オンラインでJava Web Start構成ファイル（.jnlp）を落としてきて実行するので、数十秒かかります。
※もしかしたら自分で.jnlpファイルをクリックして実行しないといけないかも知れません。


f:id:Nkzn:20100724012458p:image


ブロックエディターが立ち上がったら、AndroidケータイとコンピュータがUSBケーブルで繋がっていること（通知バーに「USBデバッグが接続されました」が表示されていること）を確認して、「Connect to phone」ボタンを押してください。


f:id:Nkzn:20100724013355p:image


こんな風に、しばらく「Communicating...」が表示された後、


f:id:Nkzn:20100724013543j:image


実機にアプリが表示されます。
といっても、まだ何もコンポーネントを配置してないので、真っ白ですね（＾＾；

このままだと少し寂しいので、左側の「Palette」(パレット)からコンポーネント(部品)を選んで画面上に配置してみましょう。

f:id:Nkzn:20100724004936p:image


Labelコンポーネントを「Screen1」の白いエリアにドラッグ＆ドロップします。


f:id:Nkzn:20100724010824p:image


「Text for Label1」という初期値の入った文字ラベルを配置することができました。


次は、この文字を変更してみましょう。
スクリーン上に配置したコンポーネントについての設定は、画面右側の「Properties」で行ないます。
f:id:Nkzn:20100724011615p:image


今回変更するのは「Text」の属性だけです。
表示されている「Text for Label1」を消して、「Hello, App Inventor!」と書き込みましょう。


f:id:Nkzn:20100724014332j:image


反映されましたか？
ブラウザ側でコンポーネント（部品）のプロパティ（属性）を変更すると、即座に実機に反映されることが体験できたでしょうか。


まとめ

今回はここまでです。
本当に初期設定と呼べる部分までしかお話できませんでした。
次回はTutorialsのページを見ながら、ブロックエディターによるプログラミングを解説しようと思います。

*1:FirefoxにJavaScriptなどを抑制するプラグインを入れている場合はオフにしておいて下さい

*2:App Inventorでの開発には必須らしいです。普通にEclipseとかで開発する分には任意。

*3:これもApp Inventorのみ

*4:SDカードの有無で表示されないかも知れません