APP Inventor で黙祷アプリを作ってみた (1/7)

よく終戦記念日などに、「黙祷」．．．１分後「黙祷おわり」っていうことをします。
これを行う Android アプリを作ってみます。

簡単なアプリなので、Eclipse や Android Studio による Java での開発ではなく、

MIT APP Inventor というツールで開発してみようとおもいます。

MIT APP Inventor とは、簡単に言うと．．．
・WEB上で
・部品を
・マウスで
・ドラッグ＆ドロップするだけで
Android アプリを簡単に作れちゃうというサービスです。
Java のプログラミングの知識は必要ありません。

元々、Google がやっていたようですが、現在は MIT に移行されています。
2014.01.04 現在、「APP Inventor2」になっており、
以前のバージョンより、より使いやすく簡単になっています。
（といっても、以前のバージョンは使ったことがない）

ではさっそく、黙祷アプリを作っていきましょう。

0.事前準備
※インストールなどの作業は別のサイトに詳しく載っているので割愛します。
といっても、Android 端末に「MIT AI2 Companion」というアプリをインストールしただけで、あとは特にインストールする必要がなかった。が、環境によりJavaのインストールとかが必要かもしれません。

※Android 端末を持っていて、パソコンと同じ WIFI で接続されている環境での作業手順です。

1.新しいプロジェクトを作る

まずは、新しいプロジェクトを作ります。
左上の「New Project ...」（画面上の赤い部分）をクリックします。

すると、Create new App Inventor project というダイアログが表示されるので、
Project name: に適当な名前を入力します。ここでは、「SilentPrayer」としました。

2.Android 端末と接続する

上部のメニューバーで「Connect」＞「AI Companion」をクリックします。

すると、Connect to Cpmpanion というQRコードが表示されたダイアログが表示されます。

Android 端末で「MIT AI2 Companion」を起動します。
「SCAN QR code」を選択し、パソコン画面のQRコードを読み取ります。
これで、Android 端末との接続が完了し、Web上で作業した内容がリアルタイムに Android 端末に反映されます。

3.画面をデザインする

マウスで部品（左側のPalette）をドラッグ＆ドロップして上記のような画面を作ります。
使っている部品は、以下です。（）内はPaletteの分類名。
・VerticalArrangement (Layout)
・Image (User Interface)
・Button x 3 (User Interface)
※画像は、title.pngというファイル名で 240x240 のサイズで作成しています。Image の Picture プロパティにセットします。

あと、Button の名前を以下のように変更しています。
・Button1 --> btnStart
・Button2 --> btnSettings
・Button3 --> btnUsage
※Blocks（プログラムみたいなもの）から参照する部品は Button1 という名前ではなく、分かりやすい名前に変更しておいたほうがいいでしょう。

使い方は適当に触っていたら分かると思います。
ちょっと、悩んだ箇所は．．．
・Imageのセンタリングってどうやるの？
--> VerticalArrangement を配置し、AlignHorizontal プロパティを Center にする。そして VerticalArrangement 上に Image を配置する。

4.新たなスクリーンを追加する

各ボタン（Start、設定、使い方）を押したときに表示される画面を追加します。
「Add Screen ...」ボタンをクリックし、名前を入力してOKボタンを押します。
それぞれ、scrPrayer, scrSettings, scrUsage という名前にしました。

5.ボタンを押したら別画面を表示する

次は、いよいよプログラム（Blocks）を作成します。
各ボタンを押したら別画面を表示するようにします。

メニューバーの「Blocks」をクリックし、モードを変更します。

まず、StartボタンがクリックされたらscrPrayerという画面を開くようにします。
(1)左側の Blocks の中の btnStart をクリック
ウインドウが表示されるので、その中の「when btnStart.Click」というブロックを Viewer にドラッグします。
(2)Blocks の Built-in の Control をクリックし、「Open another screen screenName」というブロックを(1)の do の中にドラッグします。パズルのようにちょうど合わさるようになっているので分かりやすいです。
(3)Blocks の Built-in の Text をクリックし、「A text string」という部品を(2)のscreenName の右側に配置します。
"　"の部分をクリックし、「scrPrayer」と入力します。
これで、Startボタンがクリックされたら scrPrayer という画面を開くようになりました。

同様に、
設定ボタンがクリックされたら scrSettings という画面を開く
使い方ボタンがクリックされたら scrUsage という画面を開くという Blocks も配置します。

6.Android 端末で動かしてみる
Android 端末にはデザインした画面が表示されていると思います。
Startボタンを押すと、scrPrayerという画面が表示されるハズです。
ただ、戻るキーを押すと MIT AI2 Companion 自体が終了してしまいます。

「Build」＞「App(save to my computer)」 で apk ファイルがダウンロードされるので、
これを Android 端末にインストールすれば、ちゃんと動きました。

長くなったので続きは、また。