GoogleのApp InventorでAndroidアプリ簡単作成

Googleが無料で提供しているApp Inventorを使って、Androidアプリを簡単に作成してしまうためのメモです。


App Inventorの実践編

App Inventorの準備編でソフトウェア等のインストールはできていると思いますので、いよいよ実践編に入りたいと思います。

まず、App InventorのページへGoogleアカウント(Gmailアドレス)とパスワードでサインインします。

そして、「New」をクリックして、Projectの名前を入力します。



ここでは、アドベンチャーゲームを作ろうと思うので、「advgame」としました。名前を入力したら、OKボタンをクリックして下さい。



すると、以下のような画面が立ち上がります。



まず、この画面ではビジュアル的な部分を作成します。

左側のPalette(パレット)から真ん中のViewer(ビューアー)にパーツをドラッグ&ドロップで配置し、右側のProperties(プロパティーズ)でパーツの要素を変更するという仕様になっています。Components(コンポーネンツ)には配置したパーツが表示されます。最初から、Screen1というのが配置されています。

さて、いきなりボタンなどを配置していってもいいのですが、画像などのファイルをアップロードすると、エラーが出て、すぐに反映されないことがありますので、まず、画像や音声ファイルがあればアップロードしておくようにしましょう。

エラーが出てもアップロードを続け、全部アップロードしたら、いったん画面を閉じて、しばらくしてから戻ってくると、アップロードが完了していることが多いです。

Componentsの一番下にあるMediaのAddボタンをクリックすることで、アップロードすることができます。



今回、「カン掃除大臣」というアドベンチャーゲームを作るので、以下のような画像をWindows付属のペイントで描いてみました。ファイル形式は、.pngにしています。.pngにしておいた方が無難だと思うので、PNG形式で保存することをオススメします。

メイン画像(200x240ピクセル)  ゲームオーバー画像       クリア画像
  
(kan.png)                (kan1.png)              (kan3.png)

支持率のグラフ(40x240ピクセル)×4
               
(siji20.png) (siji15.png)  (siji10.png)   (siji5.png)

今回は簡単なアドベンチャーゲームなので、使う画像はこれだけです。

では、早速、メイン画面を作っていきましょう。

分かりやすいように、最初に完成図をお見せしておきます。



スマートフォンで表示すると、結構感じが変わりますが、最初に表示される画面はこういった感じです。

コマンドが、話す、見る、意見、買う、飲む、蹴る、揉む、渡す、掃除、辞任の10個があり、各コマンドに2つの結果を用意しているだけの簡単なアドベンチャーゲームです。

各パーツの配置は、Paletteから必要なものをViewerのスマートフォン画面にドラッグ&ドロップするだけです。



このアプリの場合は、画像を表示するだけのImage(イメージ)が1つと、クリックなどができるButton(ボタン)が11、そして、文字が表示できるLabel(ラベル)3つで構成されています。



その他、TableArrangement(テーブルアレンジメント)というのを3つ使っているのは、普通にボタンなどのパーツを並べると、縦にしか並ばないためで、TableArrangementを下に敷いて、そこにボタンなどを横に並べています。

TableArrangementは、Screen Arrangementのところにあり、それをドラッグ&ドロップして、ボタンを並べる下地を作るという感じです。



TableArrangement1では、話す、見る、意見、買う、飲む、蹴るの6つのボタンを並べていますので、Columns(列)に6を入れ、Rows(行)には1を入力しています。



以下、パーツの設定について、いくつか例をあげて説明していきます。

まず、Button2の「話す」ですが、Textのところに「話す」と入力するだけです。



次に、Button1のカン掃除大臣の画像ですが、Imageのところをクリックして、アップロードしておいた「kan.png」を選択し、画像を使うので、Textは空白にし、Width(横幅)に「200pixels」、Height(高さ)に「240pixels」を入力します。



次に、Label3のテキスト表示部分ですが、Textに「ボス、何をしますか?」と入力するだけです。



次に、Image1の支持率の画像ですが、Pictureのところをクリックして、アップロードしておいた「siji20.png」を選択するだけです。



あと、Screen1のTitleを変更することにより、アプリの名前を変更することができます。ここでは、タイトルを「カン掃除大臣」に設定しています。



はい、簡単でしょ? ボタンなどのパーツの配置だけなら、小学生でも軽くできると思います。

ここからはちょっとだけ難しいですが、今回は簡単なアドベンチャーゲームなので、スイッチは1個だけしか使いませんし、初心者の方でも理解はしやすいのではないかと思います。

まず、イベントを処理するBlocks Editorですが、日本語が文字化けしてしまいますので、メモ帳に文章を書いておき、コピー&ペーストするようにしましょう。

ただし、Blocks Editorでは右クリックでのコピー&ペーストができないので、メモ帳で入力文字をコピーした後、「Ctrl」+「V」でペーストすることができます。コントロールボタンを押しながら、「V」キーです。ペーストですが、「P」キーではありません。



上記のメモ帳を見てもらうと分かると思いますが、スイッチは1個だけで、各ボタンをクリックしたときのイベントは2つしか用意していません。

例えば、B2(Button2)の「話す」の場合、 if=0(スイッチが0)のときに 「あー、忙しい、忙しい!最近、よく肩が凝るな。」とLabel3のテキストに表示させて、 s=1(スイッチに1を代入すると)という内容です。

s=0以外のとき(s=1,s=2,s=3,s=4,s=5,s=6,s=7等)は、elseの
「私は内閣掃除大臣、カン直腸だ!」とLabel3のテキストに表示させます。

メモ帳上では、ifやelse等と勝手に書いていますが、これは分かりやすくするためで、Blocks Editorではパネルをはめるだけなので、とても簡単です。

とにかく、Blocks Editorでは日本語が文字化けして使えませんので、日本語を使う場合は、その文章をメモ帳などに書いておいた方がいいかと思います。

日本語を使わなくても、アドベンチャーゲームなどを作る場合は、上記のようにメモ帳に流れを書いておくと、スイッチ処理で戸惑わなくていいかと思います。


App Inventorの最終編へ

【App Inventorと全く関連のない趣味リンク】
  • 激安パソコン中古ノートPC等の通販
  • エアロパーツ通販・格安カー用品
  • 簡単・骨盤ダイエット通販レッツあご勇
  • 発毛剤・育毛シャンプーの口コミ効果
  • 安定ヨウ素剤で放射能体内被曝対策

  • ★当サイトはリンクフリーです。ご自由にリンクしていただいて結構です。
    Googleが提供しているApp Inventorを使って、Androidアプリを簡単に制作してしまうためのメモです。
    Copyright 2011 GoogleのApp Inventorを使ってAndroidアプリを簡単制作. All rights reserved.