AcroRabbit

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

【MIT AppInventor2】続・小学生でもできるAndroidアプリ開発

「おもしろいアプリ思いついた!最高!でもすげーくだらないからAndroidStudio立ち上げる気もおきねぇwwww」

という経験が皆様にもあると思います。

そんな時に便利な開発環境があるので、ABC2015 Summerで発表させていただきましたので、こちらで詳しく解説を書いていきます―!

 

f:id:shunXnegi:20150720235008j:plain

abc.android-group.jp

 

ABCで発表したスライドはこちら

 

以前もこのブログで紹介したことがありますが、ソースコードを全く書かなくてもAndroidアプリが作れる開発環境、MIT AppInventor2(MIT AI2)というものがあります。

本当に最初から導入する場合はこちらの記事をよろしくお願いします。

shunxnegi.hateblo.jp

 

今回は、前回とはいろいろ違った機能を使ってアプリ開発を行います。

今回作ったアプリはこれ!

f:id:shunXnegi:20150720235648p:plain

ひまボタンEX - Google Play の Android アプリ

 

簡単に説明すると、

ひまでひまで仕方ない人がランダムに移動するひまボタンをただひたすらタップし続けるだけのアプリ

です。

まともな人間ならAndroidStudioを立ち上げる気も起きないでしょう。

ここでMIT AI2です!

MIT AI2ならソースコードを書かずに一瞬でクソアプリが生成出来るので最強なのです!

あと、個人的にはプログラミングをやったことのない小学生などの入門に最適だと思っています。

 

では、作っていきましょう!

といってもこのままではふわふわしすぎて作れないので、一応機能を書きだしていきます。

  • ひまボタンをタップするとランダムで位置が変わる
  • 1回タップするごとに1ポイントスコアが増加
  • 制限時間は30秒
  • ハイスコア記録可能
  • Twitterとかにハイスコアを共有できる

こんな感じでやっていきましょう。

まずはDesignerから。

今回のDesignerはこんな感じ。

 

f:id:shunXnegi:20150721001015p:plain

 

f:id:shunXnegi:20150721001807p:plain

大枠にLayoutのVerticalArrangementを。

一番上のスコアの部分はHorizontalArrangementの中にLabelを三ついれ、真ん中のLabelを空白にして横幅をFill parentに設定することでこのように調整しています。

 

f:id:shunXnegi:20150721001744p:plain

絵を動かすのに大事なのがCanvas

大抵はImageSpriteやBallとセットで使います。

Canvasの中にImageSpriteを入れて、ひまボタンの画像をセットしています。

 

f:id:shunXnegi:20150721002330p:plain

あと、今回は共有を行うためにSocialのSharingを、時間をはかるためにSensorsのClockをセットしています。

 

続いてBlocks!

 

f:id:shunXnegi:20150721002451p:plain

ここでは初期化処理を書いています。

タイトルはここでセットせずにDesignerでセットすることもできます(というかそっちの方がいいかも)。

タイマーが勝手に動き出さないように一応無効化しておきます。

 

f:id:shunXnegi:20150721002711p:plain

次に変数的な奴の宣言と初期化を行いましょう。

今回用意したのは

  • 時間をカウントするための変数
  • ボタンのX座標
  • ボタンのY座標
  • タイマーが動いているかどうかのフラグ
  • スコア
  • ハイスコア

です。

f:id:shunXnegi:20150721005456p:plain

変数的な奴はVariablesのinitializeで初期化することが出来ます。

getやsetで参照したり代入したりすることが出来ます。

 

ちょっと複雑ですが、ひまボタンをタップしたときの処理はこちらです。

f:id:shunXnegi:20150721005545p:plain

上から読んでいくと

・スコアを1増やす
・スコアの表示を変える
・X座標にランダムな値を入れる
・Y座標にランダムな値を入れる
・ボタンの座標を移動する
・もしカウンタが動いていないときは
 ・1000ミリ秒に1回処理をするようにする
 ・クロックを有効にする
 ・カウント中のフラグを立てる
 ・スコアを1にする

となっています。

書いていて思ったけど簡単なことしかしてないのであんまり説明することないですねw

 

つぎにカウンタが動いたときの処理です。

f:id:shunXnegi:20150721010306p:plain

こちらも上から読んでいくと

・残り時間を1減らす
・残り時間の表示を変更する
・もし残り時間が0なら
 ・クロックを無効にする
 ・カウント中のフラグを消す
 ・もしスコアがハイスコアより高ければ
  ・ハイスコアを更新する
 ・ハイスコアの表示を変える
 ・RESTERT GAMEと表示する
 ・残り時間を30に戻す

という処理を行っています。

注意すべき点は、カウンタを減らす処理を自分で書かなきゃいけない事でしょうか。

今回は1000ミリ秒に一回処理をするようにしたので1ずつ減らしていますが、例えば100ミリ秒に一回の処理をするようにした場合は、0.1ずつ減らすように書く必要があります。

 

最後に共有機能です。

f:id:shunXnegi:20150721011339p:plain

これだけ書くだけでTwitterやらLINEやらで共有できるようになります!

簡単!

 

ということでこちらが全体像です。

f:id:shunXnegi:20150721011452p:plain

たったこれだけの作業でアプリが出来ちゃいまいた!

30分ですよ30分!

 

こんな感じで、誰でも簡単に素早くアプリが作れる(個人の見解)なので、皆さんもぜひアプリ開発に挑戦してみてはいかがでしょうか!

 

ひまボタンEX - Google Play の Android アプリ

shunxnegi.hateblo.jp