ID-Blogger

Google App InventorでAndroidアプリの作り方

以前の「Google App Inventorの初期設定の仕方」の記事に引き続き、今回はGoogleAndroidアプリケーション開発ツールApp Inventorを使って実際にAndroidアプリの作り方をご紹介したいと思います。
App Inventorにまだ登録していない方は前回の記事を読んでから作業を行ってください。

今回作ってみるAndroidアプリは、App InventorのPVにもある様な画像をクリックすると音が鳴るアプリ「HelloAndroid」です。Hello world的なカンジですね。
かなり簡単な内容で恐縮なんですが、こうやって作るんだな~という参考にしていただければと思います。

ちなみに自分の開発環境は前回同様Windows Vista+Google Chromeになっているのでその点を念頭に読んでください。

まずは全セキュリティをOFFに

では早速アプリ開発に...の前にまずはファイアーウォール・アンチウイルス等のセキュリティは全てOFFにしましょう。
ちょっとコワイのですが何らかのセキュリティが起動しているといちいちチェックに引っかかったり、正常に通信出来なかったりとまったく開発が進まなくなります。

App Inventorに新規アプリ「HelloAndroid」を登録

アプリ開発を始めるにあたって、App Inventorにこれから開発する新規アプリ「HelloAndroid」を登録します。
という事は基本的に開発したアプリのデータはApp Inventorのサーバー上に保存されるという事になりますのでご注意ください。

Google App Inventorのプロジェクト管理画面
  1. GoogleアカウントでログインしてApp Inventorの開発画面にアクセス
  2. 「My Projects」をクリックしてプロジェクト管理画面へ
  3. 左上にある「New」ボタンをクリック
  4. 新規アプリの登録ウィンドウが開くので「HelloAndroid」と入力(スペースは不可)
  5. 「OK」ボタンをクリック

まぁどうってコトない内容ですね。

素材画像「Droid君(通称)」を準備

何らかの画像が必要なんですが、今回はみんな大好き「Droid君(通称)」の画像を使ってみようかと思います。
ちなみになぜ通称なのかというと...

えっ!Droidじゃないの?『残念ながら、Android のロボットについては正式名称はありません。』byグーグル・広報部ご担当者さま。:破壊的イノベーションでキャズム越え:ITmedia オルタナティブ・ブログ

大変お世話になっております。
お問合せをいただきましてありがとうございます。
残念ながら、Android のロボットについては正式名称はありません。

あまりお役に立てず申し訳ないのですが、ご理解賜れれば幸いです。
どうぞよろしくお願いいたします。

グーグル株式会社 広報部

だそうですw

それはそうとDroid君(通称)の画像ファイルなんですが、AndroidのImages and Goodiesのページにあります。ただし今はjpg形式のデータしか置いてないみたいなので、私はWikipediaのAndroid robot.svgからファイルデータを貰ってきました。

この画像を元にPhotoshopなどの画像エディタを使って横幅250ピクセル程度の画像を準備します。

音声素材「Hello world.mp3」を準備

次に音声素材を準備しますが、ついでなので簡単な音声素材の作り方をご紹介。
打ち込んだ英文テキストを音声読み上げしてmp3に変換してしてくれるvozMe - From text to speechというサイトがあります。

http://vozme.com
  1. vozMeにアクセス
  2. 「Femail voice」で女性の声を選択
  3. 「Enter text in English」のテキストボックスに「Hello world」と入力
  4. 「Create mp3」ボタンをクリック
  5. 新規ウィンドウが開くので「Download mp3」のリンクの上で右クリックしてmp3ファイルをダウンロード

こんな簡単に音声素材が作れます。なんで女性の声を選んだのかというと、そちらの方が発音が良かったからですw

アプリ開発

画面を見るだけで概ね使い方は分かるかと思いますので、細かく説明する必要はナイかと...。
というのでは投げっぱなし過ぎるので簡単な説明を書いておきます。

Google App Inventorのデザイン画面
  1. App Inventorの開発画面にアクセス
  2. 「Design」をクリックしてアプリ開発画面へ
  3. 最初の画面「Screen1」の設計
    1. Components>Screen1を選択(ViewerからでもOK)
    2. Properties>Titleにアプリタイトル「Hello Android」と入力
  4. Droid君ボタン「Button1」の設計
    1. Palette>Basic>Buttonを「Screen1」にドラッグして配置
    2. Components>Screen1>Button1を選択(ViewerからでもOK)
    3. Properties>Imageから準備したDroid君の画像をAddでアップロードして背景に指定
    4. Properties>BackgroundColorを「None」に指定
    5. Properties>Textを空欄にする
  5. Hello world音声「Sound1」の設計
    1. Palette>Media>Soundを「Screen1」にドラッグして配置
    2. Components>Screen1>Sound1を選択(ViewerからでもOK)
    3. Properties>Sourceから準備したHello world音声をAddでアップロードしてソースに指定

これで基本的な画面の開発は完了です。ドラッグ&ドロップでどんどんパーツを配置していくだけなので簡単です♪

Android携帯の接続 or Androidシミュレーターの起動

さていよいよBlocks Editorでプログラミングを...となるのですが、その前にAndroid携帯の実機を接続しておくか、Androidシミュレーター起動しておく必要があります。
Blocks Editorを起動する前にAndroid携帯の実機を接続 or Androidシミュレーターの起動をしておかないと認識されないので注意しましょう。

Andoroidシミュレーターの画面

詳細については前回の「Google App Inventorの初期設定の仕方」の記事をご覧ください。

Blocks Editorでプログラミング

ボタンをクリックしたら音声を鳴らすという基本的な機能をプログラミングしていきますが、App InventorのプログラミングにはBlocks Editorを使います。

App InventorのBlocks Editorでプログラミング
  1. アプリ開発画面の「Open the Blocks Editor」ボタンをクリック
  2. 「AppInventorForAndroidCodeblocks.jnlp」というJava起動ファイルがダウンロードされるので任意の場所に保存
  3. 「AppInventorForAndroidCodeblocks.jnlp」をダブルクリックしてBlocks Editorを起動
  4. My Blocks>Button1>Button1.Clickをフィールドにドラッグして配置
  5. My Blocks>Sound1>Sound1.PlayをButton1.Clickにドラッグして配置

これでプログラミングは完了です。これまたドラッグ&ドロップでどんどんパーツを配置していくだけなので簡単です♪

Android端末で動作確認

事前に接続してあるAndroid携帯実機 or 起動してあるAndroidシミュレーターを使って動作確認を行ないます

AndroidシミュレーターでBlocks Editorの動作確認
  1. Android端末の画面ロック解除を確認
  2. Blocks Editorの「Connect to phone」ボタンをクリック
  3. Android端末で動作確認

ボタンクリックするだけであっという間にAndroid端末で動作確認ができます。
アプリ開発画面やBlocks Editorで変更を行うと一瞬で反映されているハズです。もし反映されていない場合はBlocks Editorの「Restart Phone App」ボタンをクリックしてください。

Android端末にダウンロード

Blocks Editorも同時に起動している状態で、アプリ開発画面の「Package for Phone」から3つのダウンロード方法が選べます。

  1. QRコードからダウンロード
    Googleアカウント(App Inventorのアカウントかも?)でログインが必要です
  2. PCにダウンロード
    「HelloAndroid.apk」というファイルで生成されました
  3. 接続中のAndroid端末にダウンロード
    Blocks Editorで接続している必要があります

これで無事にAndroidアプリの開発ができました!

あまり細かなプログラミングなんかができるワケではないのですが、かなり敷居が低いのは確かだと思います。
ご興味のある方は是非チャレンジしてみていただければと思います。