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

» 2011年04月15日 00時00分公開

[多田丈晃，株式会社ビーブレイクシステムズ]

関数の定義の仕方

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

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

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

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

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

計算式の使い方

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

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

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

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

イベントと関連付け

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

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

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

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

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

制御構文の使い方

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

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

　完成図さえあれば、組み立てるのはもう簡単ですね。ここでは、使っている制御構文の「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回以上ボタンを押すとクリック回数がリセットされるか確認してください。