App InventorでAndroidアプリ簡単作成Blocks Editor

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


App Inventorの最終編

App Inventorの実践編でビジュアル的な部分はできていると思いますので、ここでは、Blocks Editorでの処理に入りたいと思います。

ソフトウェア等のインストールができていない方は、App Inventorの準備編をご覧下さい。

まず、App Inventorの右上にある「Open the Blocks Editor」というところをクリックします。



セキュリティ保護のため、このサイトによる、このコンピューターへのファイルのダウンロードがInternet Explorerによりブロックされました。オプションを表示するには、ここをクリックして下さい...という表示が出たら、構わず、そこをクリックして、ファイルのダウンロードを選択して下さい。

一度、この作業を行っても、何も起こらないことがありますので、その場合は、もう一度、App Inventorの右上にある「Open the Blocks Editor」をクリックします。



ファイルのダウンロードの確認画面が出ますので、「開く」の方をクリックします。

すると、JAVAが立ち上がって、しばらくすると、Blocks Editorが起動します。



上記では既にアイテムを配置していますが、最初は何も配置されていません。(画像をクリックすると、別窓で拡大します)

上記では、スイッチとして使うvariableの初期値に0を設定しています。variableという名前は変更してもいいのですが、分かりやすいようにデフォルト状態の名前をそのまま使っています。

そして、Button2をクリックしたときの処理を組み立てています。

Button2がクリックされたときに、もし、variable(スイッチ)=0のときは、
Label3のTextに、「あー、忙しい、忙しい!最近、よく肩が凝るな。」と表示させ、
variable(スイッチ)に1を代入するという処理を行います。

もし、variable(スイッチ)=0以外のときは、elseの方が実行され、
Label3のTextに、「私は内閣掃除大臣、カン直腸だ!」と表示させます。

text部分の日本語は文字化けして□□□になりますので、まずメモ帳に文章を書いておき、 それをコピーして、Ctrl+「v」キーでペーストして下さい。

Blocks Editorでは文字化けしますが、実機やエミュレーターではきちんと日本語が表示されます。

ここで、App Inventorの実践編で用意しておいた、メモ帳をもう一度、表示しておきます。



パーツについては、左側のBuilt-InやMy Blocksのところからドラッグ&ドロップして配置します。

スイッチとして使っているvariableについては、Built-InのDefinitionのところにあります。基本的にはパーツは色で区分されており、欲しいパーツがどこにあるかすごく分かりやすくなっています。(以下の画像ではtextの色がnumberと同じようになっていますが、画像の圧縮で色が若干変になっているところがあります)



新しく使うパーツの場合は、Bulit-Inのどこかにあり、My Blocksのところには、App Inventorで配置したボタンや、スイッチとして新しく配置したvariableの処理部分などのパーツがあります。



Built-InのMathのところには、numberや、variable = 0にするための「=」のパーツなどがあります。

説明の順番が順序立てになっていなくてちょっと分かりにくいと思いますので、今から少し順序立ててやりたいと思います。

まず、App Inventorで配置したButton2の処理を組み立てる場合は、My Blocksをクリックすると、App Inventorで配置したパーツや、Buit-Inで配置したMy Definitionsが表示されますので、Button2をクリックして、アクションの部品を右側の広大なスペースにドラッグ&ドロップします。

今回はButton2がクリックされたときの処理を組み立てるので、Button2.Clickを選びます。



次に、Button2がクリックされたときに、スイッチの値(variable)によって、2つの処理をさせるので、Built-InのControlを選択して、ifelseという部品をドラッグ&ドロップして、はめ込みます。はめ込むと、カチッと音が鳴ります。繋ぎ手の分かるパーツ画像なので、間違いなく繋げられると思います。



Built-InのMathのところにあるvariable = 0にするための「=」のパーツは先程説明しましたので、省くとして、次に、スイッチとして作ったvariableの取り扱いについて少し説明したいと思います。



初期値では、画面上のように、variableにnumber0を繋げて、0を代入していますが、このvariableの数値を参照したり、このvariableの数値に数字を代入するには少し法則があります。

Built-Inで設定したDefinitionについては、My Definitionsに格納されており、値を参照するときはglobalを使い、数値を代入するときなどにはset globalを使います。

難しいよ!覚えられない!と嘆く必要はなく、形を見ればすぐに分かりますし、形に合わないと、パズルは組み立てられませんので、覚えなくても直感的にできると思います。

次にテキストですが、Built-InにあるTextをクリックして、textをドラッグ&ドロップしてはめ込みます。下記の画像では色が変になっていますが、部品は色で区別されています。



Blocks Editorでは、日本語が文字化けしてしまいますので、日本語を使う場合はメモ帳に文章を書いておき、それをコピーして、「Ctrl」+「V」で貼り付けるようにしましょう。

あとは要領は同じなのですが、ImageやButtonの画像を変更するときは、textをくっつけて、ファイル名を入力します。ここでは、siji5.pngと入力して、支持率5%を表示するようにしています。



Imageの場合の画像はPictureで、Image1.Pictureというようになりますが、Buttonの場合の画像はImageなので、Button1.Imageというようになっています。



これらのプロパティについては、App InventorでProperties(プロパティーズ)を確認してもらえば分かるかと思います。

基本的にこれだけ分かれば、あとは応用で組み立てられると思います。まずは触ってみることです。思ったより、簡単にできると思います。

Blocks Editorで組立が終わったら、android-sdk-windows → toolsのフォルダにあるandroid.batファイルをダブルクリックして、Android SDK and AVD Managerを立ち上げ、エミュレーターを起動して、動作確認をします。

エミュレーターの起動の仕方については、App Inventorの準備編をご覧下さい。

Android SDK and AVD Managerについては、Blocks Editorを立ち上げる前から起動しておいた方がいいのですが、あまりアプリケーションをたくさん立ち上げすぎると重くなりますので、エミュレーターで動作確認をするときになって起動してもいいかと思います。



エミュレーターはConect to Deviceのところから登録されているものを選択して、接続します。しばらく、Conect to Device横のアイコンがチカチカ光って、チカチカが終わると、接続が完了していますので、エミュレーターの画面からキーロックを解除することで、作ったソフトが立ち上がります。



配布などする場合は、App Inventorの右上にあるPackage for PhoneからShow Barcodeを選ぶと、しばらくしてからQRコードが表示されます。



Androidマーケットに登録する方法などについては、私はまだスマートフォンを持っていないので、実機を手に入れたときに検証したいと思います。

このアプリを遊びたい方は、以下のQRコードをバーコードリーダーで読み取って下さい。




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

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