前回は、App Inventorの動作環境のセットアップについて解説した。
今回は、実際にサンプルプログラムを作成してみる。
ただ、ここで紹介する内容は、
App Inventorのチュートリアルに書かれているものなので、
役に立つことと言えば「日本語で解説している」ことくらいだ。
■準備
すでにApp Inventorの開発環境が整っていることが条件。
整っていない場合、以下からセットアップをしてください。
http://blog.mikuriya.biz/archives/664
■今回作るもの
猫の描かれたボタンをクリックすると、「ニャー」と鳴くアプリケーション。
■App Inventorの開発手法のおさらい
・デザイン面は、ウェブ上で編集する。
・処理面は、Java Web Startによってローカル環境で編集する。
では、ここからがサンプルアプリケーションの作成手順です。
■はじめる前に
ChromeだとJava Web Startがうまく起動しなかったため、
Firefoxで開発を行なった。
このアプリは、画像ファイルと音声ファイルを使用する。
画像ファイル「kitty.png」
音声ファイル「meow.mp3」
■AVD(Android Virtual Device)を開く
前回セットアップしたAndroid SDKのtoolからandroid.batを起動する。
 |
| 送信者 blog画像 |
■Virtual Deviceを起動する
これも前回セットアップしたAVDを選択し、StartからLaunch。
Launch Optionsもデフォルトのまま起動する。
 |
| 送信者 blog画像 |
 |
| 送信者 blog画像 |
 |
| 送信者 blog画像 |
■App Inventorでプロジェクトを作成する。
App Inventorの画面右上の「My Projects」へ移動する。
 |
| 送信者 blog画像 |
本来は開発したAndroidアプリのプロジェクトが一覧に表示されるが、
何も作成していないので、殺風景な感じ。
「New」からプロジェクト名を設定する。ここでは「HelloPurr」と記入する。
OKをクリックすると、開発画面へ自動的に移動する。
 |
| 送信者 blog画像 |
■スクリーン名を変更する
Viewerに「Screen1」と書かれている部分をクリック。
PropertiesのTitleを「Pet the Kitty」に修正する。
 |
| 送信者 blog画像 |
■ラベル(タイトル)を追加
スクリーン上にテキストを挿入する場合は「Palette – Basic – Label」を使用する。
ドラッグ＆ドロップでLabelをViewer上に持ってくる。
その後、以下のオプションを変更。
PropertiesのBackgroundColorをBlue
PropertiesのFontSizeを20
PropertiesのTextをHello Kitty!
PropertiesのTextColorをYellow
 |
| 送信者 blog画像 |
■ボタンの追加
猫の描かれたボタンを作成するためにまずはボタンを作成する。
「Palette – Basic – Button」をドラッグ＆ドロップでViewer上に持ってくる。
その後、以下のオプションを変更。
PropertiesのFontSizeを20
PropertiesのTextをThis is Pet!
 |
| 送信者 blog画像 |
■ボタンに画像を挿入
ボタンに猫の画像を埋め込みたいので、まずは先ほど作成したボタンをクリック。
PropertiesのImageがNone…になっているので、
クリックして猫の画像を設定する。
 |
| 送信者 blog画像 |
すると、ボタンに猫の画像が挿入される。
 |
| 送信者 blog画像 |
■ボタンクリックで音楽を流す準備
猫の描かれたボタンをクリックすると、
「ニャー」と鳴くアプリケーションであるため、
音声ファイルを定義しておく必要がある。
先述した「開発手法のおさらい」にも書いたが、
「どれをクリックするとどれが動く」といった処理系は、
ブラウザ上で設定できないため、
ブラウザ上では、とりあえず「このアプリでは音声ファイルを使用するよ」とだけ定義する。
「Palette – Media – Sound」をドラッグ＆ドロップでViewerに設置する。
Viewerの下にSoundマークが設置されるので、
それをクリックしPropertiesのSourceに音楽ファイルを指定する。
 |
| 送信者 blog画像 |
 |
| 送信者 blog画像 |
■Open the Blocks Editorを開く
ひとまず、これでデザインや材料準備は終了した。
ここからJava Web Startによる処理部分の開発にはいる。
画面右上の「Open the Blocks Editor」をクリックすると、
jnlpファイルをダウンロードする画面がでるので、
Java Web Start Launcherで開くを選択。
※冒頭で説明したが、必ずAVDを開いておくこと。
 |
| 送信者 blog画像 |
たまに「Could not create the Java virtual」というエラーがでて、
起動に失敗することがある。
なんか起動の順番が重要っぽいので、
その場合は、ブラウザやらAVDやら一通り閉じて、
AVD起動→Firefox起動→Open the Blocks Editor→Java Web Start起動
をやってください。
■Open the Blocks Editorで処理部分の編集
猫の描かれたボタンをクリックすると、
「ニャー」と鳴くアプリケーションなので、
今回の処理は、
「ボタンをクリックと猫の音声ファイルが再生される」部分だ。
画面上部のMy Blocksをクリックする。
 |
| 送信者 blog画像 |
Button1をクリックすると、なんかパズルみたいなのがいろいろでてきた。
 |
| 送信者 blog画像 |
「ボタンをクリックと猫の音声ファイルが再生される」処理なので、
Button1.Clickをフィールド上に設置。
 |
| 送信者 blog画像 |
「ボタンをクリックと猫の音声ファイルが再生される」処理なので、
Sound1からSound1.PlayをButton1.Clickにパズルのようにはめる。
 |
| 送信者 blog画像 |
 |
| 送信者 blog画像 |
これで、処理部分が完成した。
■動作チェック
処理部分が完成したので、AVDでアプリの動作確認を行なう。
Open the Blocks Editorの画面右上「Connect to phone」をクリック。
 |
| 送信者 blog画像 |
AVDにアプリが登場！
 |
| 送信者 blog画像 |
これで終了だ。
最大の難所は、やはりJava Web Startを立ち上げられるかどうかだろう。
それができれば、誰でも簡単にandroidアプリが開発できる。
