AcroRabbit

今日皆を一番の笑顔にするブログ

自称小学生のぼくがMIT App Inventor 2で1時間でAndroidアプリ作る

自称小学生のねぎちゃん「へぇ、最近の小学生はAWS使ってJava書けてフォトショとか使えるのかぁ。すごいなぁ。同じ小学生として僕も何かしたいなぁ…そうだ!僕小学生だけどたまたまNexus5持ってるしケータイのアプリ作ってみよう!でもソースコードとかいうのが必要らしい。難しそう!

…!?

ソースコード無くても作れるの!?すげぇ!」

ってことで今日はMIT App Inventor 2(MIT AI2)でのAndroidアプリ開発をやっていきますー!

MIT AI2はchromeブラウザ上で動くアプリで、ソースコードを全く書く必要がなく、各種センサとかも使えて、Wi-Fiつないでいればリアルタイムで更新が端末に反映されるというものです。すげぇ!

(この内容は第32回プログラミング生放送勉強会にてさせていただいたLT(資料はこちら)の内容を詳しく説明したものになります)

 

 

小学生でもできるAndroidアプリ開発

皆さん!とりあえずGoogleアカウント持ってますか?

もってない人は頑張ってとってください!いまや小学生にもGoogleアカウントは必要なのです!とりましたか?とりましたね!では続きです!MIT AI2のウェブページにアクセスすると右上にCreateボタンがあるので押してください。

f:id:shunXnegi:20141226155228p:plain

そうするとこんな画面が出てくる気がしますが気にせず許可しましょう。

f:id:shunXnegi:20141226155534p:plain

次の画面でAcceptするとアンケートを答えるかって聞かれます。どっちでもいいので答えたい人は答えましょう!で、Continueを押すとこんな感じの画面になると思います。

f:id:shunXnegi:20141226160621p:plain

[Start new project]ボタンを押してかっこいい名前を付けましょう!

f:id:shunXnegi:20141226160757p:plain

…エラー出た。名前はちゃんと英語でつけろってことか…

そして本題です!今回はMIT AI2のページでも紹介されているサンプルアプリであるPaint Potの作り方を紹介していきます。

PaintPot (Part 1) for App Inventor 2 | Explore MIT App Inventor

f:id:shunXnegi:20141226162408p:plain

このアプリは、ネコの顔に赤青緑の線を引いたり点をうったりでき、書いたものを消したり、点を打つ大きさを変えたり、背景の写真をカメラで撮ったりできるアプリですん。

MIT AI2にはDesignerとBlocksという概念があります。DesignerはレイアウトXMLに相当するもので、画面のデザインや使用するセンサなどを指定します。またBlocksはJavaソースコードに相当するもので、ボタンやセンサや画面などの処理をブロックを組み立てて作っていきます。まずはDesignerから作っていきます。

f:id:shunXnegi:20141226163951p:plain

これがDesignerの画面です。左側のPaletteから、LayoutからHorizontalArrangementを2個、Drawing and AnimationからCanvasを1個持って来てこんな感じに並べましょう

f:id:shunXnegi:20141226164500p:plain f:id:shunXnegi:20141226164504p:plain

f:id:shunXnegi:20141226164602p:plain

 左からボタンを持って来てレイアウトの中にセット!今回は上に3個、下に4個置きます。

f:id:shunXnegi:20141226165937p:plain

次に先ほど置いたCanvasをクリックしてPropertiesから大きさを変更しましょう。今回は横幅をFill parentに、縦幅を300ピクセルに設定しました。Propertiesからボタンの色やテキストも変更できます。ついでにボタンごとの呼び名もわかりやすいように変えておくといいと思います。Componentsから対象のボタンを選択して、下のRenameから変更できます。

f:id:shunXnegi:20141226170357p:plain

次にCanvasのBackgroundImageを選択します。猫の画像が必要ということで今回はペイントで書いてきました。ご自由にお使いください。

f:id:shunXnegi:20141226171017j:plain

最後にMediaからCameraを持って来てDesignerでの作業は終了になります。

f:id:shunXnegi:20141226171056p:plain

次はいよいよBlocksでの作業になります。右上のBlocksと書いてあるボタンを押してBlocks編集画面へ移動します。まずはなぞった部分に線を引いていく処理を作ります。左側のCanvasからwhen canvas1 .Draggedというブロックを持ってきます。その中に同じくCanvasから持ってきたcall Canvas1 .DrawLineをセットします。次に始点と終点の座標は下の図のようにセットしてください。これだけで画面に線が引けるようになりました!

f:id:shunXnegi:20141226173856p:plain

次にタッチしたところに点を打てるようにします。…って言ってもやることはさっきとほとんど一緒です。こんな感じ。点の大きさはMathのとこから数字を持って来て、とりあえず5をセットしました。

f:id:shunXnegi:20141226174328p:plain

さて、次はボタンを押たときに線や点の色を変更できるようにします。対象のボタンのとこからwhenなんとか .ClickBlockを持って来て、Canvasから色をセットするブロックを、色は左のColorsから持ってきましょう。また、似たような処理はCtrl+C Ctrl+Vでコピペすることが出来ます。

f:id:shunXnegi:20141226174814p:plain

次にWipeボタンを押したときに画面に書いたものが消せるようにしましょう。…って言ってもこれだけ!

f:id:shunXnegi:20141226174928p:plain

次に画面をタッチした時に打つ点の大きさを変えたいのですが、先ほど点の大きさは5と決めてしまったのでこのままでは変えることが出来ません。そこで、今回は変数のような途中で値が変わる数字を作ります。左のVariablesからinitialize globalなんとかを持ってきましょう。ここには初期値として数字や文字列や色とかいろいろセットすることが出来ますが、今回は2をセットします。

f:id:shunXnegi:20141226175141p:plain

変数の呼び出しはVariablesのgetなんとかで出来ます。点を打つ処理のところをこんな感じにしましょう。

f:id:shunXnegi:20141226175414p:plain

次にボタンを押したときにドットの大きさを変更できるようにします。これはVariablesのsetなんとかを呼び出せば出来ます。

f:id:shunXnegi:20141226175637p:plain

最後にカメラを使えるようにしましょう。といってもMIT AI2ではカメラ画面をそのまま使えるわけではなく、端末のカメラアプリを起動して、戻り値としてカメラの画像を受け取ることになります。Cameraからcall Camera1.TakePictureを持って来て、カメラで写真をとったらCanvasの背景に設定するようにします。

f:id:shunXnegi:20141226175848p:plain

これでPaintPotは完成です!駆け足になりましたが、こんな感じですぐできちゃいます!では次に作ったアプリを端末で動かしてみましょう。端末で動かす方法は3種類くらいありますが、今回は一番簡単で一番早い、Wi-Fiを使った方法を説明します。この場合、開発しているPCとAndroid端末は同じWi-Fiに接続している必要があります。まずはAndroid端末にストアからMIT AI2 Companionをインストールします。そしてScan QR Codeボタンを押します 

f:id:shunXnegi:20141226181015p:plain

…って言ってもスキャンするQRがないじゃないか!今から作りましょう!いったん端末は置いといてAI2の画面に戻ります。左上の方のConnectタブを開いてAI Companionボタンを押すとQRコードが出てきます。

f:id:shunXnegi:20141226181244p:plain

これをさっきのアプリで読みこんで、connect with codeボタンを押すと…f:id:shunXnegi:20141226181503p:plain

うごいた!写真をとるとこんな感じです

f:id:shunXnegi:20141226181545p:plain

こんな感じでなんか1時間でアプリ作れちゃった!(ちなみに僕がスクリーンショットとりながら作ってたら20分で出来ました)

こんな感じで今やゲームだけでなくAndroidアプリだってソースコードを書かなくても作れる時代!子供のころからアプリ開発に親しんでたら将来すごいデベロッパーになる人がいっぱい出てくるかもしれませんね!本当に簡単に作れるので皆様もぜひやってみてください!