集中企画

暮井慧といっしょ♪ 夏休みプログラミング！第1回

「App Inventor」でパズルチックにAndroidアプリ開発！（前編）

（12/08/02）

　はじめまして！　私、暮井慧（くれいけい）。突然だけど、「App Inventor」って知ってる？　これ使うと、Androidアプリが簡単に作れちゃうんだけど、興味あるよね？　私といっしょにやってみようよ！

著者プロフィール

暮井慧（くれい　けい）　17歳　都内の公立高校に通う女子高生。部活は、情報処理研究会。身体を動かすのも好きで、気が向いたときはなぜか体育会系の部活に混ぜてもらっていろんなスポーツをすることも。IT・開発系コミュニティ“プログラミング生放送”のマスコットキャラクターとして活動中。

「こんにちは～！　暑い日ばっかりで、夏真っ盛りって感じだよね。汗だくになるのは嫌だけど、夏の陽差しって気持ちいい！　あ、日焼けと熱射病には要注意だけどね。みんなも対策しなきゃダメだよー。あと、陽射しは気持ちいいんだけど、まぶしすぎてケータイの液晶見にくいよね！」

Twitter:@pronama

App Inventorって？

　App Inventorは、Androidアプリの開発環境なんだ。テキストのコードとか書かなくても、ブロックの組み合わせでプログラミングして、簡単にアプリが作れるんだよ。アプリ開発の「最初の一歩」としてトライしてみるには、うってつけなんだよね！　Webブラウザーからいますぐに始められるから、とにかくやっちゃおう！

　どんなアプリでも作れるわけじゃないけど、カメラやGPS、電話のコールとか携帯電話の機能も使えるし、TwitterやWebサービスなんかにもアクセスできて、変わったところではレゴマインドストームとも連携できるの。ちょっとしたツールやゲームなんかを作るのに向いてると思うよ。

　App Inventorのアプリ開発環境を見てみるね。開発環境は……ばばーん！　こんな感じの構成ですっ！

App Inventor Designer（App Inventor デザイナー）
App Inventor Blocks Editor（App Inventor ブロックエディター）
Android Emulator（Android エミュレーター）
App Inventor Servers（App Inventor サーバー）

　App Inventor デザイナーは、アプリに使う部品を選んで、画面に配置したり、部品の設定をしたりするところなの。ボタンやテキストボックスみたいな基本的な部品から、ゲーム向けの部品まで、いろいろ用意されているよ。

　App Inventor ブロックエディターは、部品がどんな風に動くかプログラミングするところなんだよ。ブロックを組み合わせてプログラミングするのが特徴だね。

　Android エミュレーターはね、作ったアプリの動作をすぐに確認できるすぐれものなんだよ。このエミュレーターがあればAndroidケータイがなくても動きが見られるし、アプリを組み立てている最中でも、すぐに変更が反映されるから便利だよ。もちろん、Androidケータイを使って開発もできるよ。

　そしてもうひとつ、これわりと大事なとこなんだけど、App Inventor サーバーっていうWebサービスがあって、デザイナーやブロックエディターとつながってるの。App Inventorは原則、インターネットにつながる環境で開発しなきゃいけないんだよね。あ、原則ね。原則。で、作ったアプリのデータはWebサービスに保存されるの。

MIT App Inventor: 　App Inventorは、Googleが開発・提供していたWebサービスなんだけど、2011年に終了しちゃって、今はMIT（マサチューセッツ工科大学）メディアラボのモバイル教育センターがサービスを提供してるの。だから今回使うのは、MIT App Inventorだよ。App Inventorは、オープンソースで公開されているから、実はがんばりさえすれば誰でも自分のApp Inventor環境を作れるよ。開発も続いていて、日々進化してるの。

開発環境を準備しよう！

　ちょっと使ってみたくなった？　なったよね！　それじゃ、必要な環境をそろえてみよう！　App Inventorは、Windows/Mac/Linux で動くけど、ここではWindowsで使うことを前提にするね！　だって窓の杜だし！　うん、窓の杜だし!!

　まずはApp Inventor Setupをインストールしよっか。やり方は、下に書いてあるURLのWebページにアクセスして、［Download］リンクからインストーラーをダウンロードして、インストールしてね。

　これで完了！　あ、でもちょっと待った。もしあなたのPCにJavaがインストールされてなかったら、Javaのインストールも必要なんだよね。この後いろいろやってくけど、もしそのときブロックエディターが起動しなかったら、Javaをインストールしてね。

　それとね、言い忘れてたけど、App Inventorは基本的に全部英語なの。でも、みんな中学校で英語習ったから大丈夫だよね！　え？　あんまり自信ない？　うんうん。そういう人のために日本App Inventorユーザー会とかね、日本のコミュニティもあるから、日本語での情報共有もできるよ。

はじめての App Inventor！

　さっそく、App Inventorを使っていくよ！　http://beta.appinventor.mit.edu/ にアクセスして、Androidアプリを作ろう！　最初は、ボタンをクリックしたらメッセージを表示するだけの超簡単なやつ。最初だし、軽めのやつ行ってみよう♪

　App Inventorを使うにはGoogleアカウントでログインしなきゃいけないんだよ。あとね、App InventorはGoogleのサービスではないから、App InventorがGoogleアカウントにアクセスできるよう許可する必要があるの。だからページにアクセスしたらまず［MIT AppInventor Experimental］を許可してね。

アプリの作成

　アプリは、プロジェクトという単位で管理するの。新しくプロジェクトを作るには、［New］ボタンをクリックして、プロジェクトの名前を入力してね。プロジェクトの名前は、半角英数字しか使えないよ。

　［OK］ボタンをクリックすると、App Inventor デザイナーの画面に移動するよ。

App Inventor デザイナーで画面をデザイン

　みんな移動した？　じゃあ画面をよく見てね。デザイナーは、次のエリアから構成されてるよ。

アプリに使う部品を選ぶ「Palette（パレット）」
アプリの画面を表す「Viewer（ビューワー）」
画面に配置した部品を一覧できる「Components（コンポーネント）」
それぞれの部品の設定を行う「Properties（プロパティ）」
アプリで使う画像なんかを登録する「Media（メディア）」

　ちなみに私は、コンポーネントのことを部品って呼んでるよ。だってコンポーネントって言うのも書くのも長いし！　だから、App InventorのWebサイトなんかでは読み替えて考えてね。あと文字の大きさとか部品に設定できる項目は、プロパティって呼ぶよ。

部品の配置と設定

　パレットの“Basic”にあるButton（ボタン）とLabel（ラベル）を、ビューワーにドラッグ＆ドロップで追加してみて！　Labelは文字を表示するための部品だよ。

　これがアプリの画面になるの。追加した部品はドラッグして位置を変えられるけど、基本は、画面左上に詰めた感じに配置されるよ。基本のまんまでどんどんドロップしていくと、ぎゅうぎゅうになるよ。ぎゅうぎゅう。

　で、今度はコンポーネントエリアを見てほしいんだけど、部品を追加すると、コンポーネントエリアにも表示されてるよね？　部品には自動で名前がついて、Button1とLabel1になってるはず。アプリの画面そのものにも名前がついてて、Screen1って名前になってるよね？　コンポーネントエリアでは部品の名前を変えられるよ。あと、部品の削除もここでできるからね。

　コンポーネントエリアで部品をクリックするか、ビューワーの部品をクリックすると、プロパティエリアでその部品の設定（プロパティ）を変更できるようになるの。アプリにあわせて、いろいろ変えてみてね。今回は、次のプロパティだけ変更してみるよ。

部品の名前	プロパティ	変更した値
Screen1	Title	おみくじ
Button1	FontSize	24
	Text	おみくじを引く
	Width	Fill parent
Lable1	FontSize	24
	Text	（元のテキストを消して空白にします）
	TextAlignment	center
	Width	Fill parent

　わりと簡単でしょ？　設定したあとは、こんな感じになるよ。

App Inventor ブロックエディターで部品の動きを表現

　次はね、ブロックエディターで、部品の動きをプログラミングしてみよっか。ボタンをクリックしたときにラベルにメッセージを表示するよう、ブロックを組み立てるよ。

　ブロックエディターを開くには、デザイナーの右上の方にある［Open the Blocks Editor］ボタンをクリックするの。“AppInventorForAndroidCodeblocks.jnlp”というファイルがダウンロードできるから、起動してね。起動するとき、警告ダイアログが出るから、確認して実行してね。

　左のエリアからブロックを選んで、中央のエリアにドラッグ＆ドロップして組み立てていくんだ。まさにジグソーパズル感覚！　だよ！　あ、うちのお父さんは「学研の電子ブロックみたいだ」って言ってたけど、なんのことかわからなかったよ私。みんなは知ってる？

　おっとと、話が横道行っちゃったね。ごめんごめん。本題に戻るね。

　左のエリアの“Built-In（ビルトイン）”からは、最初から用意されている基本的なブロックが選べるよ。Built-Inにあるブロックは、Definition（定義）、Text（文字列）、Lists（リスト）、Math（数学）、Logic（論理）、Control（制御）、Colors（色）の種類があるの。それぞれの種類をクリックすると、実際のブロックを選べるよ。

　“My Blocks（マイブロック）”の方をクリックすると、デザイナーで追加した部品に応じたブロックが出てくるよ。

ブロックの組み立て

　それじゃあ、実際に組み立てていこう！　まず、ボタンがクリックされたときを表すブロックを選ぶよ。

　My Blocksから、Button1をクリックして、Button1に関わるブロックを見てね。この中の“Button1.Click”ブロックが、名前の通り、ボタンをクリックしたときを表すブロックなんだ。このブロックをドラッグ＆ドロップして中央のエリアに置いてね。

　この形の緑色のブロックは、クリックしたときとか、フォーカスが移動したときとか、
いわゆる「イベント」を表すブロックなんだよ。わりと重要なブロック！

　でね、このわりと重要な緑のブロックに、クリックしたときに行う処理を追加していくよ。

　ここでやりたいのは、ラベルを使ってメッセージを表示すること。だから、My BlocksのLabel1のブロックを見てみて。

　デザイナーでLabel1のテキストを変更したときのプロパティは、Textだったよね。“Label1.Text”ブロックがあるからこれをドラッグ＆ドロップしよう。“Label1.Text”ブロックはふたつあるけど、パッと見た感じButton1.Clickと組み合わさりそうな方を選んで！　こーゆーのもジグソーパズルっぽいよね！

　濃い水色のブロックは、部品のプロパティを変更するためのブロックで、今はこっちを選ぶんだよ。薄い水色の方は、プロパティの値を使うためのブロックなんだ。

　表示するメッセージは、Built-Inブロックにある文字列ブロックで作るよ。一番上の“text”と書かれたブロックをドラッグ＆ドロップしてね。このブロックは、Label1.Textブロックと組み合わせてね。

　太字の“text”部分は編集できるから、ここに表示するメッセージを書いてね。ただし、ブロックエディター上では日本語は表示できないの。見ての通り、日本語で入力してもお豆腐状態なんだよね。しかくい。とてもしかくい。でもアプリを動かしたときにはちゃんと表示されるから、書いてみて。

　ブロックの組み立てはここまでー！　みんな、お疲れ様♪

　これって、パッと見てブロックの形で組み合わせができるかどうかわかるから、かなり簡単だと思わない？　いいでしょこれ！

Android エミュレーターでアプリの動作確認

　さーて、いよいよアプリを動かしてみよっか！　ブロックエディターの右上の方にある［New emulator］ボタンをクリックすると、Androidエミュレーターが起動するの。一緒に、エミュレーターの説明が書いてあるウィンドウも開くよ。

　エミュレーターが使えるようになるまで少し時間がかかるから、ちょっと待ってね。ロックスクリーンが表示されたら、鍵アイコンを横にスライドさせて、ロックを解除。図の右の画面が表示されたら、エミュレーターが使えるよ。

　どう？　表示された？　完全にAndroidケータイだよねこれ！

アプリの実行

　アプリをエミュレーターで動かすには、ブロックエディターの［Connect to Device...］から［emulator-5554］をクリックするんだよ。5554の数字は、違う場合もあるからね。クリックすると、［Connect to Device…］に表示が変わって、しばらくしたらエミュレーターでアプリが起動するよ。