集中企画

（12/08/09）

　こんにちは～！　簡単にAndroidアプリが作れちゃう「App Inventor」を使ってみるよ。前編は見てくれたよね？　じゃ、続きやろっか！

著者プロフィール

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

「みんなはもう海行った？　私は先週友だちと行ってきたよ！　ところで、防水ケータイって真水や水道水じゃないと機能しないんだね。友だちが教えてくれなかったら海で使っちゃうとこだったよー。みんなも注意してね！　え？　そんなの常識？」

Twitter:@pronama

コンプガチャを作るよ！

　今回は、簡単なゲームを作ろうー！　前回のアプリより、全然友達に自慢できると思うよ♪　作るのは、ボタンをクリックするとランダムでアイテムが手に入って、全部そろえると「伝説のアイテム」が手に入るっていう、射幸心を煽る感じのやつ。なぜかみんなが夢中になってしまう罪なゲームだよ♪

　それじゃアプリを作っていくよ。でもその前にちょっと注意。前回で出た使い方は説明しないからね？　心配な人は前回の内容もチラチラ見ながら進めてね！　別タブとかでね！

　新しくアプリを作るには、新しいプロジェクトを作るんだよ。App Inventorデザイナーの［My Projects］をクリックして、［New］ボタンで新しいプロジェクトを作ってね。

アプリの画面構成

　アプリの画面構成はね、2行×3列のマスを用意して、ここに手に入れたアイテムを表示することにするよ。アイテムは計6種類にしとこう。そして、その下に、6つ全部コンプリートした時に手に入る「伝説のアイテム」の表示エリアを用意しておくよ。

　ボタンは2個配置して、アイテムがランダムで手に入るボタンと、コンプリートしたときにクリックすると伝説のアイテムが手に入るボタンとして使うよ。

アプリ画面の作成

　まず、デザイナーで必要な部品を配置して設定するよ。

　画像を表示する部品は、BasicにあるImage（イメージ）を使うんだけど、はじめに画像を表形式に配置するために、［Screen Arrangement］のTableArrangementを、ドラッグ＆ドロップしよう。TableArrangementは、部品を表形式に配置するための部品だよ。

　TableArrangementのプロパティに、Columns（列）とRows（行）があるから、ここをそれぞれ3に変更しちゃおう。

　次に、部品のImageをドラッグして、TableArrangementの中に、うまく並べて配置するんだよ。Imageは、7個（アイテム6個と伝説のアイテム1個を表示する用）配置してね。Image7は伝説のアイテムにするから、下の段に置いとこう。

　あと、Buttonは2個、ドラッグ＆ドロップするんだよ。

　アプリでメッセージを表示するのに、今回はNotifier（通知）という部品を使ってみるね。［Other stuff］にあるNotifierをドラッグ＆ドロップしてみて。この部品は画面に配置できない部品で、ドロップするとNon-visible components（非表示の部品）としてビューワーにアイコンが表示されるよ。

　部品の配置はとりあえず以上だよ。次は、アプリで使うアイテムの画像を追加していこー。Mediaエリアの［Add…］ボタンをクリックして、画像を追加。必要な画像は、7個のアイテム画像（item1.png～item7.png）と、空のマスを表す画像（blank.png）だよ。適当に用意してね！　大きさは106×106ピクセルがちょうどいいかも。

　最後に、Image1～Image7のプロパティのPictureから、空のマス画像を選んで設定しておいてね。ほかの部品もあわせて、下の表みたいな感じでよろしく！

　これでアプリ画面の完成！　ここまでやれば、デザイナーは、下の図みたいになってるはずだよ。チェックチェック。

ガチャをまわす

　さてさて次は、ブロックを組み立ててアプリの動作を決めていくよ。ブロックエディターを起動っ！

　ランダムにアイテムを選ぶ処理だけど、どんなふうにプログラミングするかというと、ボタンがクリックされたとき、1～6のどれかの値をアプリの内部で作って、その値によってどのアイテムが手に入るか決めることにするよ。

「変数」を使ってランダムな数値を保存

　というわけでまずは、ランダムに作った1～6どれかの数値を覚えておく仕組みを用意するよ。いわゆる「変数」を使うんだよね。Definition（定義）ブロックの中に「variable（変数）」ブロックがあるので、これをエディターにドロップ。「variable」部分は、名前だから、わかりやすく「ItemNo」って名前に変えておくよ。これで、ItemNoという名前の変数ができて、ここに好きな値を覚えさせておけるよ。

　このままだと何も値が入っていない状態だから、仮の値を入れないとね。ここ最初に空っぽだとエラー出ちゃうから。Mathブロックの種類に、数値を表す「number（数値）」ブロックがあるからこれをくっつけて……はじめの値は123になってるけど、これはあくまで仮で、実際には使われない数字だからこのままでOKだよ。

　どんどん行くよ～♪　次はボタンをクリックしたときの処理ね。ボタンクリックのブロックは前回やったからもうわかるでしょ？　My BlocksからButton1の「Button1.Click」ブロックを配置するんだよ。

　じゃあね、このボタンをクリックしたときに、ランダムに1～6の数値を作って、ItemNoにその値を入れるようにするよ。My Blocksの「My Definitions」のブロックをみると、「ItemNo」ブロックができてるのがわかるよね？　「set global」と書かれている方が、ItemNoに値を入れるブロックだよ。Button1.Clickブロックとも合いそうな形してるよね。

　ランダムに数値を作るっていう「random intenger（ランダムな整数）」ブロックが、Mathブロックにあるからこれをつなげてみて。ドロップすると、はじめから1と100のnumberブロックがくっついているよね。これは1から100までのランダムな値って意味だから、1から6に変えてね。

　ここまでで「ボタンをクリックしたらItemNoに1～6のどれかの数値が入る」って動作ができるようになるんだけど、OKかな？　くじ引きにたとえると、ここまででもう6種類のくじのうちどのくじを引いたのかは決まってるって感じだよ。

「条件分岐」を利用して数値ごとに表示する画像を変更

　そしたら次は、ItemNoの数値によって6パターンの処理をさせよう～！　ItemNoが1だったら、1番目のアイテムの画像を表示して、手に入れたっていうメッセージを表示するよ。ItemNoが2なら2番目のアイテム、ItemNoが3なら3番目のアイテム……っていう感じで、要するにくじ引きの結果を見せるパート、みたいなね。

　じゃあね、実際どうすればいいのか説明するよ。簡単だよ♪　もし～だったら～するっていうブロックは、Controlブロックの「if」ブロックを使うんだよ。「もし～だったら」の条件は、「test」部分に、条件となるブロックをつなげるの。「～する」の処理は「then-do」部分に「～する」のブロックをつなげればいいんだよ。

　はじめは、ItemNoが1だったら、1番目のアイテムの画像を表示（Image1のPictureプロパティの変更）して、あとメッセージの表示だよね。メッセージの表示はNotifier1を使うよ。

　説明がちょっと長くなっちゃったけど、ここまでを組み立ててみよう。いっぱいブロックを使うよー。うん、おもしろくなってきたよね！　図を参考に、お茶でも飲みながらゆっくりのんびり組み立ててみて。

　ifブロックの「test」部分ににつなげたブロックは、「ItemNoが1と等しかったら」って意味だよ。Mathブロックの「=」ブロックを使って同じ値って意味の条件を作ったんだ。

　Image1.Pictureブロックにつなげたtextブロックは、文字列を「item.png」に変更してね。これで、部品のImage1のPictureプロパティをitem1.pngにするってことだね。

　Notifier1.ShowMessageDialogブロックにつなげたtextブロックの文字列も図のように変更してね。「message」、「titile」、「buttonText」のそれぞれは、メッセージダイアログの、メッセージ、タイトル、ボタンのテキストを表してるよ。どんな結果になるかはこの後見てみよー！

　ここまでできたら、1回アプリを動かしてみたくなるよね？　なるよね？　私はなるんだけど、みんなもなるよね？　というわけでAndroidエミュレーターを起動して、アプリを実行っ！

　「ガチャをまわす」ボタンを何度もクリックしたら、6分の1の確率で、メッセージダイアログが表示されて、アイテムがゲットできるはずだよ！

　あとは、同じような処理を2番目から6番目のアイテムまですればオッケーだね。下の図を見ながらブロックを組み立てて。

　あとね、いいこと教えよう！　ifブロックをクリックして、［Ctrl］＋［C］、［Ctrl］＋［P］とキーボード入力（Ctrlキーを押しながら、Cキーを押して、Pキーを押す）すると、一連のブロックをコピーできるんだよー。キーボードショートカットってやつ。ラクできるし効率も良くなるから、うまく使ってみてね。

　はい、おつかれさまー。ここまでで、ガチャをまわすボタンの処理はできたよ。実際にアプリを実行してみて、何回もボタンをクリックしたら、そのうちアイテムが6個そろうはずだよ。よっぽど運が無いと朝までかかっちゃうかもしれないけどね！

伝説のアイテムをゲット

　あとは、6個のアイテムをコンプリートしたときに伝説のアイテムを手に入れる処理だね。これがないと、コンプガチャとは言えないからね！

　で、こっちの処理もボタンのクリックが起点となるから、まずはButton2.Clickブロックを配置しよう。

　6個コンプリートしてたら「伝説のアイテム」の画像を表示しつつ「おめでとう」のメッセージも表示して、コンプリートしてなかったら「残念」のメッセージだけ表示するっていう、分岐の処理を作るよ。こういうときは、Controlブロックの「ifelse」ブロックを使うの。

　「test」部分に、「コンプリートしたら」っていう条件を、ブロックを組み合わせて作るね。「then-do」部分が、コンプリートしたときの処理、つまりアイテムの表示（部品Image7のPictureプロパティの設定）と、メッセージの表示。「else-do」部分が、まだコンプリートしていないときの処理で、「残念」のメッセージだけを表示するよ。

　「then-do」と「else-do」に組み合わせるブロックは、もうわかった？　これまでやってきたことほとんど同じだから、わかるよね？　Notifier1の「message」部分は、適当に考えてメッセージを書いてね。

　じゃあ、「test」部分につなげるコンプリートした条件はどうやって作ろっか？　これはねー、部品のImage1～Image6のPictureプロパティが、item1.png～item6.pngになっているかどうかをチェックして、判断するのが良さげだよね。「Image1.Pictureの値がitem1.pngと等しい」っていうブロックは作れる？　「=」ブロックを使って、図のようにするんだよ。

　Image2～Image6も同じように作れるよね？　これらがぜんぶ成立してるかどうか判別するためには、Logicブロックの「and」ブロックを使うんだ。図みたいに組み合わせてみてね。andブロックは、ブロックをつなげるたびに、ひとつつなげる箇所がふえていくから何個でも条件となるブロックをつなげられるよ。で、つながっているすべてが成立してないと、このカタマリ全体としては成立してないことになるんだよね。逆の言い方をすると、ひとつひとつがすべて成立してたら、このカタマリが成立してることになるのです。つまり「アイテム6個そろってるよ！」っていう状態ね。

　このとき、ブロックの組み立てる順番によっては、エラーメッセージが表示されるけど、気にせずすすめてね。細かいことは気にしちゃダメなんだよ♪

さー、ようやく、やっとのことで、ブロックの組み立てはこれで終わりだよ。ほんとにお疲れ様。ここまでつき合ってくれてありがとう！　最後まで頑張ってくれた人には、きっといいことあるよ！

　じゃあいよいよ実際にアプリを動かしてみて、コンプリートする前とした後に、ボタンをクリックしてみて動作を確認してみて。どうかな？　ちゃんと動くよね？　それで、ちゃんと動くとなんかこう、楽しい気持ちになってくるよね！！

改良その1　データの保存

　ここまでで一応アプリは完成したんだけど、改良についてちょっとだけ触れておくね。少し難しいかもしれないけど、ブロックを組み立てた図と、プロジェクトのファイルも用意しておくから、いろいろいじってみて。プロジェクトファイルの使い方は最後に紹介するよ。

　ひとつは、アプリの状態の保存について。今のプログラムだと、アプリを終了すると集めたアイテムは0に戻っちゃう。がーん！　まるでセーブできないゲームみたいだよ！　やっぱり手に入れたアイテムを保存しておいて、アプリが起動されたときに復元できるといいよね。

　アプリのデータを保存するには、部品の「TinyDB（データベース）」を使うんだ。App InventorデザイナーのBasicのところにあるよね。これをビューワーに、ドラッグ＆ドロップして追加してね。TinyDBも非表示の部品だよ。

　TinyDBを使うと、「tag（タグ）」を使ってデータを保存できるの。たとえば、AっていうタグにBっていうデータを保存するには、次のようにブロックを組むだけだよ。らくちん。

　Aのタグのデータを参照してLabelのTextプロパティに表示するのは、こんな感じだね。

　これを少し変えて、ItemNoをタグに使って、ガチャで出たアイテムの番号を保存するのに使うと……、こんなふうに、ボタンをクリックしたときに、出た番号を保存するよ。

　数値が「出た」ってことだけわかればいいから、保存するデータはなんでもいいよ。ここでは「true」っていうLogicブロックにある値を使ってるよ。

　アプリが起動したときにTinyDBのデータをチェックして、入手済みのアイテムを表示させるには、次のようにブロックを組むとできるよ。「アプリが起動したとき」っていうのは、「Screen1.Initialize」ブロックを使ってチェックすればいいんだよ。

　まだ、Image1の分しかブロックを組んでないよ。でも、後はみんなわかるよね？　これでセーブができるね！　しかもオートセーブ！

改良その2　別スクリーンの表示

　もうひとつの改良は、ガチャをまわしたとき、メッセージダイアログの表示じゃなくて、専用の画面にしたくない？　今回ここまで、1画面だけでアプリを作ってきたけど……実は！　誰にも聞かれなかったからあえて黙ってたんだけど！　別の画面（スクリーン）を増やすこともできるのです！

　スクリーンを追加するには、App Inventorデザイナーの［Add Screen］ボタンをクリックしてね。同時にひとつのスクリーンしか表示できないから、ビューワーの[Screen1]、[Screen2]のボタンで切り替えるんだよ。ブロックエディターも、デザイナーで表示しているスクリーンのブロックだけ表示されるよ。

　この新しく作ったスクリーンに、メッセージダイアログの代わりになる画面を作って、Screen1からガチャをまわすボタンをクリックしたときに、新しいスクリーンを表示するようにしてみようかな。

　ここで注意点がふたつあるよ。ひとつは、スクリーンから別のスクリーンにある部品を操作したり、別のスクリーンで定義した変数を使ったりはできないの。例外として、別のスクリーンを開いたり閉じたりするときに、ひとつだけtextブロックやnumberブロックを使って値を受け渡しできるから、これをうまいこと利用しなきゃダメなんだよね。

　注意点その2。スクリーンを切り替える動作はエミュレーターでは確認できないんだよ。動作を確認するには、最後の方で説明するけどAndroidケータイのアプリ形式にして、Androidケータイでね。

　Screen2の画面構成は次のように作るよ。部品は、Image、Label、Buttonを配置してね。それぞれ、アイテムの画像、入手メッセージ、スクリーンを閉じるためのOKボタンに使うよ。プロパティはこちら！

　ブロックの組み立てだけど、別のスクリーンを開くにはControlブロックの「open another screen」を使うの。開くスクリーンに値を渡すには「open another screen with start value」ブロックを使うよ。Screen1のブロックを編集するときは、デザイナーでScreen1を表示しておいてね。

　「screenName」部分には、スクリーンの名前を書いたtextブロックを、「startName」部分には、渡す値になるブロックをつなげるよ。ここでは、Screen2を開いて、ItemNoの値を渡すってことね。

　次は、Screen2の方！　デザイナーでScreen2を表示しておいてね。Screen2の方で、受け取った値は、Controlブロックの「get start value」ブロックで参照できるよ。この値を使って、スクリーンが開いたとき、画像の表示やメッセージの表示を切り替えればいいよね。スクリーンが開いたときは「Screen2.Initialize」ブロックが使えるよ。値によって表示を変える処理はもうできるよね？

　スクリーンを閉じるときは、Controlブロックの「close screen」ブロックだよ。OKボタンのクリックと組み合わせて。

　Screen1の方に戻って！　ほかのスクリーンが閉じたときする処理は「Screen1.OtherScreenClosed」ブロックが使えるよ。Screen2を閉じた後に、Image1～Image7のPictureプロパティを設定するよ。下の図はImage1の分しか組んでないからね。

　最後に、改良したScreen1とScreen2のブロックを載せておくね。ばばーん！　あちこち変えてるからよく見てね。

ちょっと便利な機能

　アプリを作るときに便利な機能を、ちょっとだけ紹介しておくよ。

　エミュレーターを起動してアプリを実行しているときに、ブロックを右クリックして、［Do It］メニューがクリックできるブロックをさがしてみて。

　Do Itをクリックすると、そのブロックの処理だけをすぐに実行できるの。確認したい動作だけをすぐに見られるから、使ってみてね。今回のアプリの場合だと、ガチャをまわさなくても、アイテムを手に入れたときの動作確認なんかができるってことだよ。

　もうひとつは、ブロックを右クリックして［Watch］メニューをクリックしてみて。Watch機能を使うと、ブロックがもっている値や状態を表示してくれるの。たとえば、「random integer」ブロックを「Watch」しておけば、アプリを動かしたとき、ランダムで選ばれた数値がわかるよ。

こーゆーのを使うといろいろラクできるから、うまく活用してみてね。

アプリを共有！

　さてさてお待たせしました！　せっかく作ったアプリ、友達に見せたいよね？　見せたいに決まってるよね！　というわけで、作ったアプリを友だちに渡す方法を話しておくね。App Inventorで作ったプロジェクトを渡す方法と、Androidのアプリとして渡す方法があるよ。

ソースのダウンロードとアップロード

　プロジェクトを渡す方法は、つまりプログラミングしたソースコードを渡すってことで、もちろん相手もApp Inventorを使ってる必要があるよ。友達と一緒にアプリを作るときなんかに使うと便利な方法だよね。プロジェクトは、ファイルとしてPCにダウンロードできるの。このファイルをメールとかスカイプとかUSBメモリとかで友達に渡して、友達は自分のアカウントでApp Inventorにログインして、そこにプロジェクトをアップロードすれば、あなたが作ったプロジェクトを友達も使えるよ。

　プロジェクトのダウンロードとアップロードは、App Inventorデザイナーで［My projects］をクリックして、プロジェクトの一覧の画面でできるよ。

　ダウンロードするときは、ダウンロードするプロジェクトのチェックボックスにチェックをつけて、［More Actions］から［Download Source］をクリックすると、zipファイルがダウンロードできるよ。これを相手に渡してね。

　アップロードするときは、同じくプロジェクト一覧の画面から、［More Actions］から［Upload Source］をクリックして、アップロードするZipファイルを選んでね。

　今回、私が作ったアプリのプロジェクトも公開しておくから、みんなのApp Inventorにアップロードして使ってみてね。