FC2ブログ

App Inventorでタイマーを使ってみよう 1日目 (初心者、入門編、サンプル)

今回はタイマー機能を使ってみましょう。5秒後、10秒後等と指定するとその時間に音を鳴らすというアプリです。
いわゆるキッチンタイマーというやつですね。
電卓より簡単だと思います。こっちを先にやればよかったですね。
今回は二日に分けて、
1日目:表面を作る
2日目:ブロックを作る。完成
でやりたいと思います。
その前に基本的なブロックの使い方を忘れた方はこちらへ。
App Inventor徹底解説

では表面を作っていきます。今回使うのは「Clock,Sound,TextBox,Button,Label」です。全て「Basic」にあると思います。
App Inventor for Android3

まずボタンを二つ配置し、名前を開始と停止にします。さらに文字を大きくしておきます。
次に「あと0秒」という部分を作ります。ここは一つのラベルにしてもいいのですが、あとあと面倒なので3つのラベルを横に並べ「あと・0・秒」という感じにします。(上の図参照)
Screen ArrangementのHorizonArrangementを使用してください。これは水平にいくつか並べる時に使います。
App Inventor for Android

続いて「Sound」を配置します。これは名前通り音を鳴らすときに使います。
まず時間が来たら鳴らす音が必要です。これは検索で「音 フリー」等で検索して、短めの音(私のは1秒)をダウンロードしといてください。
であはMedia→Soundで置いてみましょう。置いても目には見えませんが、右の欄には追加されていますね。
次に右下辺りにある「Media Add」という部分を見てください。ここは自分のデータをアップロードできます。大きすぎるファイル(普通の4分ぐらいの曲とか)は無理です。
先程ダウンロードしたファイルをアップロードしましょう。
アップロードしたあとは上の図のようにSound1のSourceをそのファイルに変更します。
App Inventor for Android2

次は「Clock」です。これも名前通りで時間に関する操作ができます。
これも配置しても目には見えません。配置したら一番右の「TimerEnable」のチェックをはずしておきます。
これはチェックを入れるとタイマーが動く、入れないと動かないという設定です。あとで「開始ボタン」を押したときにタイマーを動かしたいので、初期ではチェックをはずしておきます。
App Inventor for Android4

最後に「TextBox」を配置します。これはアプリを使用している人がキーボードから文字や数字を入力できます。 まず上に「目標時間を入力してください」というラベルを置いておきます。
その下に「Basic→TextBox」で配置します。いつものようにFontsizeを見やすい30ぐらいにしておきましょう。
これでタイマーの表面は完成しました。必要な部品はこれだけなのでボタンの配置場所や色や大きさはお好みで調整してください。
明日はブロックエディターを作っていきます。(電卓より簡単です)

広告


App Inventorでタイマーを作ってみよう 2日目 ブロックエディター
スポンサーサイト



App Inventorでタイマーを作ってみよう 二日目 ブロックエディター サンプル

さて今日はApp inventorでタイマーを作ってみよう二日目です。
一日目がお済みでない方はこちらへ。
タイマーを作ってみよう 一日目

本日は一日目に作った物の中身、ブロックエディターを作っていきます。
今回は結構簡単にできます。こんな感じです。
Greenshot_2011-04-26_16-41-56.png

まず変数を3つ宣言しますす。(jikan,mokuhyou,syuuryou)
それぞれ、
開始ボタンを押した時間=jikan、これはあとで1ずつ増えていきます。
テキストボックスに入力した目標時間=mokuhyou
音を鳴らし終わる時間=syuuryou
です。
では順番にブロックを見ていきましょう。大きく3パートに分かれています。
赤四角
ここは開始ボタンを押したときの動作です。
まずjikanに初期値である0をいれます。
次にmokuhyouにテキストボックスに入力した数字を入れます。
次にsyuuryouに音を鳴らす時間を入れます。後ろの「5」というのが鳴らす時間です。この場合5秒鳴らすことになります。
最後にClock1を「true」にします。これはClock1を起動させると理解してもらえればいいと思います。
緑四角
次に停止ボタンを作ります。これはバグ対策みたいなものですので、なくても使えます。
単純にClock1を「false」にする、つまり止めるだけです。
青四角
今回の動作のメインの部分です。
まず大枠のClock1.TimerというのはClock1が「ture」の間ずっとこの中にある動作をずっと行います。
動作を行う間隔はWebの方のTimerIntervalで調整できます。初期値は1000msつまり1秒間隔で行います。
ではこの中身を見ていきましょう。
繰り返し部分始まり
label2のテキストを(syuuryou - jikan = 残り時間)にする。

jikanを1増やす。(1秒経過させる)

(jikan > mokuhyou)つまりテキストボックスに入力した時間が来たときです。この時に音を鳴らします。(Sound1.play)

(jikan > syuuryou)つまりsyuuryouに達したときに音を止めます。(Sound1.stop)
syuuryouは(mokuhyou + 5)でしたので、上の音を鳴らすした5秒後に止まりますね。さらにClock1を「falase」にして止めます。これで繰り返しから抜けます。
繰り返し始めに戻る
これで完成です。私は設定した音が1秒だったのでこれで良いですが、もし5秒の音を使いたい場合は、
1個目の「ifのtest」の部分を「>」ではなく「=」にしてみて下さい。そうすれば上手くいくと思います。


広告



こんな簡単にキッチンタイマーができちゃいましたね。しかし動くもののおしゃれなタイマーという感じではないですね。そんなかたは下のこだわりのタイマーを作ろうへどうぞ。
App Inventorでこだわりのタイマーを作ろう1日目
次回はこのタイマーを応用して簡単な10秒ゲームを作りたいと思います。お楽しみに。
簡単な10秒ゲームを作ってみよう

App Inventorで電卓を作るとういのもありますので、もしまだの方は是非試してみてください。
App Inventorで電卓を作ってみよう 1日目

最新記事

全記事表示リンク

カテゴリ

最新コメント

最新トラックバック

月別アーカイブ

QRコード

QR

プロフィール

びーさん1582

Author:びーさん1582
FC2ブログへようこそ!

最新記事
カテゴリ
全記事表示リンク

全ての記事を表示する

広告
ブログランキング

FC2Blog Ranking

アクセスランキング
[ジャンルランキング]
携帯電話・PHS
388位
アクセスランキングを見る>>

[サブジャンルランキング]
Android(Google)
92位
アクセスランキングを見る>>
FC2カウンター
ブログランキング
人気ブログランキングへ
関連ページへのリンク
検索フォーム
RSSリンクの表示
リンク
相互リンク募集中です

名前:
メール:
件名:
本文:

ブロとも申請フォーム

この人とブロともになる