App Inventor for Androidで使う基本的な部品を知るApp Inventorでアプリ開発はどこまでできるのか(2)(3/3 ページ)

» 2011年04月15日 00時00分 公開
[多田 丈晃株式会社ビーブレイクシステムズ]
前のページへ 1|2|3       

関数の定義の仕方

 次に、この変数の数値を1ずつ加える関数を作りましょう。タブ[Build-In]の下にある[Definition]から[Procedure]をドラック&ドロップします。太字になっている[Procedure]をクリックすると、編集可能な状態になるので、関数名を「addClickCount」に変更します。

 続いて、先ほど定義した変数「clickCount」に値を設定する部品をこの関数のブロックに連結します。タブ[My Blocks]をクリックし、その下に表示される[My Definitions]をクリックします。すると、今までになかった部品が表示されているのが分かります。

ALT

 先ほど、「[My Definitions]にはブロックエディタ内で定義した変数や関数に関係するものが入る」とお話しました。今までの操作の中で変数と関数を作成したので、いくつかの部品が使えるようになっています。今見えるものは、上から順に、以下のことを行う部品です。

  1. 関数「addClickCount」の呼び出し
  2. 変数「clickCount」の参照
  3. 変数「clickCount」の設定

 よって、ここでは一番下にある部品をドラック&ドロップで関数「addClickCount」に連結します。以下のようになっているでしょうか。

ALT

計算式の使い方

 次に、変数「clickCount」に設定する値を定義します。関数「addClickCount」では変数「clickCount」に1を加えた値を設定したいので、計算式を使います。

 タブ[Build-In]の下にある[Math]をクリックすると、数値を操作するためのさまざまな部品が表示されます。その中から[+]と書かれた部品を探し、先ほど置いた変数「clickCount」に値を設定する部品にはめ込みます。

 この[+]の部品には、2つの値を設定できます。ここに変数「clickCount」と数値の1を設定すれば変数「clickCount」の値を1増やす処理が実現できます。ひとまず、設定の手順の説明は後回しにして、完成すると以下のようになります。

ALT

 今まで説明してきた中に出てきた部品を使っているので、説明がなくても分かるかもしれません。念のため説明しますと、[+]の部品の1つ目に設定したのは変数「clickCount」の値を参照する部品です。これは、タブ[My Blocks]の下にある[My Definitions]の中にあります。2つ目に設定した値はタブ[Build-In]の下にある[Math]をクリックすると出てきます。

イベントと関連付け

 これでクリック回数を数える関数はできました。次に、ボタンをクリックしたときのイベントと関連付け、新しく作ったラベルに変数「clickCount」の値を反映するようにしましょう。そうすれば、クリック数を画面上に表示できます。以下のようにブロックを組み立てていきましょう。

ALT

 もう、ここまで読み進めてくると、完成図さえ見れば説明は不要かもしれません。前回のサンプルから存在する部分はそのままに、関数の呼び出しと新しいラベルへの値の設定を追加しています。

 まず、作成した関数を呼び出す部品はタブ[My Blocks]の下にある「My Definition」をクリックすると、見つかります。新しいラベルの値を設定するための部品もタブ[My Blocks]の下にある「Label2」をクリックすると、見つかります。変数「clickCount」の値を参照する部品はタブ[My Blocks]の下にある[My Definitions]の中にあります。

 必要な部品が見つかったら先の図のように、はめ込んでください。

 では、これでクリックした回数を表示する機能は実現できました。ここで、いったん作ったアプリを動かして動作を確認してください。動かし方は前回と同じですので、分からない方は一度戻って動かし方を確認してください。

制御構文の使い方

 ここまでで、変数と関数の使い方は理解できたと思います。次に「if」文と同じ制御構文を使って10以上で回数をゼロにリセットするように改造します。

 制御構文に関する部品はタブ[Build-In]の下にある[Control]にあります。なお制御構文は、「if」のような「条件分岐」だけでなく「for」文や「while」文のような「繰り返し」も存在します。この中から「ifelse」と書いてある部品を取り出しましょう。制御構文の部品以外は前に説明したものを使いますので、今回は先に完成図からお見せします。

ALT

 完成図さえあれば、組み立てるのはもう簡単ですね。ここでは、使っている制御構文の「ifelse」を中心に説明します。この部品には3つの部品が接続できるようになっています。接続個所には、どういうものを付けてほしいかが書かれています。それらの意味は以下の通りです。

表4 「ifelse」に接続できる部品
接続個所 意味
test trueまたはfalseが返る条件式
then-do testの条件式を判断した結果がtrueの場合に実行する内容
else-do testの条件式を判断した結果がfalseの場合に実行する内容

 今回の場合、「test」に変数「clickCount」が10以上なら、という条件にしています。この「〜以上なら」の判断を行っている部品は初めて出てきましたが、これはタブ[Build-In]の下の[Math]にあります。

 次に、「then-do」には変数「clickCount」にゼロを設定しています。これで、10以上ならゼロに戻ります。最後に、「else-do」では先ほど関数の「addClickCount」に直接接続していた部品たちを置いています。先ほどの説明の通り、変数「clickCount」の値を1増やしています。

 上の図のように制御構文を作ったら、またアプリを動かして10回以上ボタンを押すとクリック回数がリセットされるか確認してください。

次回は、センサを使ったAndroidアプリを作る

 今回は基本的な部品に関する使い方を学びました。普通のプログラミング言語のように変数や関数、制御構文が使えることが分かりました。これで、App Inventorでアプリを作る基礎知識が身に付きました。

 ブロックを組み立てることに慣れると、ブロックをつなぐだけで思う通りのアプリができるのが快感になってくると思います。それだけでも、App Inventorは十分楽しいツールだと思います。

 今後は今回学んだことを踏まえてApp Inventorを使ったAndroidケータイらしいアプリ作りを学んでいきましょう。次回は、センサを使ったアプリ作りで

筆者プロフィール

多田 丈晃(ただ たけあき)

2008年より、株式会社ビーブレイクシステムズに在籍。さまざまな現場を渡り歩くさすらいのIT芸人。好物は流行りの新技術。悩みは興味のある新技術があっても研究に手が回らないこと。今はApp Inventorに感銘を受け、日夜研究にいそしむ毎日。


前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。