まあまあ元気になる話:ITmediaオルタナティブ・ブログ (RSS) まあまあ元気になる話

IT業界での少し気分がアップする出来事、心持ち役立つこと、ややイイ話

プログラミング知識の無い人でも、レゴを組み立てるようにAndroidアプリを開発できるという「App Inventor」。
前回では、小学6年生の娘と「絵をタップすると音が出るアプリ」を作ってみました。

他には、どんなものが作れるのでしょうか。
App Inventorのチュートリアル
http://appinventor.googlelabs.com/learn/tutorials/index.html
では、ベーシックとして4つ、アドバンスとして9つのアプリの作り方が掲載されています。

ベーシックの4つのアプリを一通り作成してみましたので、どんなものなのか、ご紹介します。

1. HelloPurr

Tuto1_hellopurr_1_xperia

前回、小六の娘とやってみた「子猫の絵をタップするとミャオと鳴くアプリ」です。

Part1とPart2に分かれていて、Part1では、子猫の画像をはったボタンを押すと、ミャオと鳴くまで。
Part2で、ゴロゴロ(振動)したり、Android端末を振ったときにも、ミャオと鳴くようにします。

「Designer」でコンポーネントを選択し、「Blocks Editor」で、そのコンポーネントの振る舞いを定義する、
というアプリの組み立て方の基本が解ります。

「Designer」では、こんな感じでコンポーネントを配置します。

Tuto1_hellopurr_2_designer

「Blocks Editor」では、「Designer」で選択したコンポーネントに関するブロックが用意されているので、それを選んで、カチッと組み合わせていきます。

Tuto1_hellopurr_3_blockseditor

使用するコンポーネント:
Label(ラベル)、Button(ボタン)、Sound(音声)、AccelerometerSensor(加速度センサ)

所要時間:約20分


2. PicCall

電話をかけるアプリです。

Tuto2_piccall_1_xperia

電話帳から、かける相手を選択することもできます。

Tuto2_piccall_2_xperia

Tuto2_piccall_3_xperia

まず、写真を押すと、固定の電話番号に電話をかけるアプリをつくり、次に、電話帳から相手を選択できるようにします。
選択した相手の電話番号、写真が表示され、タップすると電話をかけることができます。

「Designer」の画面。

Tuto2_piccall_4_designer

「Blocks Editor」で組み立てたブロック。

Tuto2_piccall_5_blockseditor

使用するコンポーネント:
Button(ボタン)、PhoneCall(電話をかけるコンポーネント)、PhoneNumberPicker(電話帳から選択できるコンポーネント)

所要時間:約30分


3. PaintPot

お絵描きアプリです。

Tuto3_paintpot_1_xperia

赤、青、緑と色を選択しながら、スクリーンに指で絵を描けます。
タッチするとドット(小さい円)、そのまま動かすと、線が引けます。
描いた絵をクリアする[Wipe]ボタンもあります。

Tuto3_paintpot_2_xperia

Part2までやると、[Big dots] 、[Small dots]ボタンで、ドットの太さを変更できるようになります。

Canvasでの描画、タッチ、ドラッグのイベントの使い方などが解ります。
また、Part2では、グローバル変数を定義して、使っています。

「Designer」の画面。

Tuto3_paintpot_3_designer

「Blocks Editor」で組み立てたブロック。

Tuto3_paintpot_4_blockeditor

「small」、「big」、「dotsize」が、グローバル変数です。
グローバル変数の使い方は、プログラムの知識が無い人には、ちょっと難しいかも知れません。
まあ、そういう概念を学習させるためのソフトなのかも知れませんが。

使用するコンポーネント:
Button(ボタン)、Canvas(描画のためのキャンバス)、HorizontalArrangement(水平に配置するためのコンポーネント)

所要時間:約50分


4. MoleMash

もぐらたたきゲームです。

Tuto4_molemash_1_xperia

ランダムに動くもぐらをたたくと、ブルブルっときて、スコアに点が加算されます。
Resetボタンを押すと、スコアがクリアされます。

Tuto4_molemash_2_xperia

Canvas上での画像表示、タイマーによるアニメーションや乱数、四則演算などを使っています。
また、処理をブロックとして定義できるProcedures(プロシージャ)を使います。

「Designer」の画面。

Tuto4_molemash_3_designer

「Blocks Editor」で組み立てたブロック。

Tuto4_molemash_4_blockeditor

「MoveMole」、「UpdateScore」が、定義したProcedures(プロシージャ)です。
プロシージャを使わなくても、作ることができますが(そのやり方は書いてありません)、
何度も同じものを作らなくてはいけないのはちょっと面倒、というとき便利です。
ブロックはコピペもできるのですが、プロシージャを使った方が、見た目もスッキリして分かりやすくなると思います。

使用するコンポーネント:
Label(ラベル)、Button(ボタン)、Sound(音声)、Canvas(描画のためのキャンバス)、ImageSprite(アニメーション用イメージ)、Clock(タイマーとして使用)

所要時間:約40分


ちなみに、小学6年生の娘が一番気に入ったのは、PaintPot。
Xperiaで動かしてみると、さっそく、猫にメガネを描き込んでいました。

レゴを組み立てるように小学生でも作れる、とのことでしたが、娘が作ったのは前回の「HelloPurr」までで、それ以降のチュートリアルはやっていません。

猫にたくさんのいたずら描きをしていた娘に、
「これ(PaintPot)、作ってみる?」
と、「Blocks Editor」での完成画面を見せてみましたが、
「わっ、すご! こんないっぱい(のブロックを組み立てるのは)、ムリ、ムリ」
とキョヒられてしまいました。
うーん、プログラミングの前に、レゴをやらせた方が良いかも知れません。

yoji

Special

- PR -
コメント
squier0225 2012/07/07 15:55

HelloPurrを作成したのですが、表示も違うし、鳴きません?
DesignerかBlocks Editor又はプロパティの設定で間違いがあるのか、まったくわかりません。

♪ねっとらんなー 2014/03/19 11:44

はじめまして、ネットランナーといいます。
ネットでfacebook無料診断アプリの作り方を
調べていたらここにたどり着きました。
はじめての人でもわかるアプリ作成の
ぺーじないかなー
とてもわかりやすい内容ですね
でもPCでつくりたいしなー
60近いし何か残したいです。
おじゃましました。
あなたに感謝!(^v^)


コメントを投稿する
メールアドレス(必須):
URL:
コメント:
トラックバック

http://app.blogs.itmedia.co.jp/t/trackback/77444/25272965

トラックバック・ポリシー


» このブログのTOP

» オルタナティブ・ブログTOP



プロフィール

<!-- include:/murayama/profile_name.html -->村山 要司<!-- /include:/murayama/profile_name.html -->

村山 要司

メディアックパソコンスクール鶴ヶ峰教室オーナー。SVラーニング代表。日本大学非常勤講師。
著書に「楽しく学べるAndroidプログラミング」など。

詳しいプロフィール

Special

- PR -
最近のトラックバック
カレンダー
2014年10月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
カテゴリー

オルタナティブ・ブログは、専門スタッフにより、企画・構成されています。入力頂いた内容は、アイティメディアの他、オルタナティブ・ブログ、及び本記事執筆会社に提供されます。


サイトマップ | 利用規約 | プライバシーポリシー | 広告案内 | お問い合わせ