- イベント駆動型プログラミングについて学びます
- MIT App Inventorプラットフォームのさまざまなタイプのブロックを理解する
このレッスンのアクティビティ：
イベント
モバイルアプリは、イベント駆動型プログラミングに基づいています。
イベント駆動型プログラミングは、コードを上から下へ実行するのではなく、イベントを起点として実行します。一度にすべてのコードを実行するプログラムもありますが、モバイルアプリはユーザーがどのように操作するかによって実行が変わります。
モバイル・アプリケーションは、次のようなイベントに基づいて動作する。 イベントイベントとは、コードが実行されるきっかけとなるような出来事のことだ。例えば、ユーザーがボタンをクリックする。ユーザーがクリックしたときがイベントです。そして、そのイベントがトリガーとなってコードが実行されます。 イベントハンドラ.
ストップ＆ディスカッション
あなたがスマホを使うとき、どんなふうにやり取りし、そのときスマホが何をしているか考えてみてください。下の例を参考にしましょう。
- アプリのアイコンをクリックすると、アプリが開く。
- テキストメッセージの「送信」をクリックすると、メッセージが送信され、音が鳴る。
- アプリにログインしようとすると、アプリはパスワードの入力を求める。
まず、App Inventorプラットフォームのさまざまな部分を見てみよう。
App Inventorには、アプリのビルドに使用する2つのウィンドウがあります。Designer ボタン（画面右上）をクリックすると デザイナーに移動します。ここでユーザーインターフェイスは、ユーザーが操作できるアプリ内のすべてのものを指します。ボタン、ナビゲーションバー、テキストボックス、画像などです。
アプリインベンターデザイナーウィンドウ
パレット
パレットからコンポーネントを選び、ウィンドウの中央にあるビューアに追加する。コンポーネントの引き出しがいくつか用意されているので、いろいろ試してみてください。
ビューア
コンポーネントを ビューアにドラッグします。コンポーネントは上から下、左から追加されます。コンポーネントの表示位置を正確にコントロールするには、レイアウトコンポーネントとアライメントを使用する必要があります。
部品リスト
このリストには、画面上の要素の階層的なリストが表示されます。ビューアまたはこのリストで要素をクリックして選択することができます。
プロパティパネル
プロパティパネルでは、フォントサイズ、配置、色など、各コンポーネントのプロパティを設定できます。
目に見えない部品
非可視コンポーネントは画面に表示されませんが、アプリの一部です。ドラッグ＆ドロップすると、画面の下に表示されます。
誰かがあなたのアプリを使うとき、ボタンをクリックしたり、テキストを入力したりして、ユーザーインターフェイスと対話します。あなたのアプリが何をすべきかを決定し、それを実行するようにプログラムするのはあなたです。
ブロックエディター
Blocksをクリックすると ブロックエディターウィンドウが表示されます。ブロックエディターウィンドウでは左側のパネルから画面中央のワークスペースにブロックをドラッグすることでコーディングをすることができます。
左側には、ワークスペースにドラッグできるブロックがあります。これらは、コントロールやロジックなどのカテゴリー／引き出しに入っている。
ビューア
ここは、すべてのブロックをドラッグするワークスペースです。ブロックを移動させたり、ブロック同士をスナップさせたりすることができます。また、不要なブロックを削除することもできます。
コンポーネント・ブロック
アプリの各コンポーネントには、それぞれブロックのセットがあります。コンポーネントをクリックすると をクリックすると、ワークスペースにドラッグできるブロックが表示されます。
イベントハンドラ
App Inventorのイベント・ハンドラ・ブロックは金色で、開いたブロックの形をしているので、その中にブロックをスナップすることができます。これらのブロックは、そのイベントが発生したときにのみ実行されます。
ボタンがクリックされたとき
これはすでに使ったことがあるだろう。ユーザーが特定のボタンをクリックしたとき、アプリに別の画面を開いたり、メッセージを送信したりといった動作をさせたいでしょう。
画面の向きが変わった場合
ユーザーが携帯電話を縦向きから横向きにした場合、画面のレイアウトやコンポーネントのサイズを変更するなど、何かしたいことがあるかもしれません。
スライダーの位置が変更されたとき
スライダーは、ユーザーがそれをドラッグして、それに沿っていくつかの値を選択することができます。これは、他のコンポーネントへの変更をトリガーするかもしれません。例えば、スライダーを使ってお絵かきアプリのペンのサイズを大きくすることができます。
機能
関数は、何かを行うコードのブロックである。アプリ内で何度も実行することができます。App Inventorでは、ファンクション・ブロックは紫色で表示されます。言語によっては、関数をメソッドまたはプロシージャと呼ぶものもあります。実際、App Inventorでは一般的に次のように呼びます。 プロシージャ.これらは何かを行うので、アクションブロックと考えることができます。
TextToSpeech.Speak
TextToSpeechコンポーネントは、あなたが喋らせたいテキストを喋ることができます。
カメラ
Cameraコンポーネントは、携帯電話で写真を撮ることができます。
サウンド再生
Soundコンポーネントは、サウンドを再生することができます。
セッターとゲッター
緑色のブロックはコンポーネントとそのプロパティに関連する。
他のブロックにスナップできる薄緑色のブロックは、次のように呼ばれる。 ゲッターと呼ばれます。
セッターは濃い緑色で、スナップすることができ、末端には空きスロットがある。これでプロパティの値を設定できます。
ボタン1のテキスト
ボタン1のテキストが取得され、変数global greetingに格納される。
ボタン1のテキスト
Button1のTextには「I love coding」という文字が設定されています。I love coding "の文字がボタンに表示されます。
ラベルテキスト1
Label1 の Text は、Sound1 の Source に設定されている。つまり、サウンドファイル名がLabel1に表示される。
Sound1 のソース
ラベルのテキストを設定すると、基本的にラベル内の値が表示されるので、サウンドファイルの名前は Label1 に表示されます。
ラベル1のテキスト
TextToSpeechは、Label1のTextの内容を取得して話します。Label1に表示されているテキストがすべて音声になります。
Tip
ベストプラクティス生徒たちに、これは実際のコーディングとまったく同じであることを思い出させる。私たちが使っている奇妙な語彙（関数、ゲッター、セッター）は、まさにコーダーが使っているものです。
生徒への質問日常的に行っていることを思い浮かべることができますか？(例：ケーキを焼く、歯を磨くなど、繰り返しできるステップがあるもの）。関数はアルゴリズムによく似ています！
メンターTipsは、AmeriCorpsから提供されたものです。
データブロック
セッターを使用する場合、データ、つまりアプリで使用できる情報を表す他の組み込みブロックを使用することがあります。使用できるデータブロックの例を以下に示します。
数値
数値はアプリのデータとして使用できます。これらのブロックは、ブロックパレットの数学ドロワーにあります。
テキストまたは文字列
テキストは文字列と呼ばれることもあり、データとして使用できる。アプリ内で使用できる文字、単語、文章です。ブロックはブロックパレットのテキストドロワーにあります。
ブール値
このデータ型には、true(真)かfalse(偽)の2つの値しかありません。 これらのブロックは、何かの「状態」を設定したりテストしたりすることができ、条件式で使用されます。
アクティビティ：サウンドボード・チュートリアル
以下のビデオチュートリアルに従ってください。
、以下のビデオにあるDaveの指示に従ってください。
ビデオは1:11から始まります。上記のリンクを使用してスターター・プロジェクトをロードした場合は、これらの説明は必要ありません。
チャレンジ
アクティビティで、あなたはこれらを使用しました：
- イベントハンドラブロック
- 機能ブロック
Soundboardアプリに、セッターとゲッターのブロックを追加して、使ってみましょう。
ユーザーが関連するスピーチを再生するために画像をクリックすると、 背景の色が変わるようにしましょう。
ある特定の色に変更することはできますが、元の色である黒に簡単に戻すことはできません。代わりに画面の背景をランダムな色に変更するようにしましょう。
ヒント：「カラー」ドロワーをチェックして カラーブロックを作る.次にMathドロワーでランダムな整数ブロックを探す。色はRGB（赤、緑、青）の3つの数値で構成され、その範囲は0～255である。
振り返り
さまざまなコードブロックについて少し学んだところで、アプリのソリューションについて考えてみよう：
主な用語のおさらい
- ユーザーインターフェース - ユーザーが操作できるアプリ内のすべてのもの
- デザイナー- アプリにコンポーネントを追加したり、見た目をデザインしたりできるウィンドウ
- ブロックエディター- アプリのブロックをコーディングするウィンドウ
- イベント-コードが実行されるきっかけとなるような出来事
- イベントハンドラ- イベントが発生したときにアプリが何をすべきかを指示するコードブロック
- イベント駆動型プログラミング- コード全体を最初から最後まで実行するのではなく、イベントに基づいて実行されるプログラミング
- 関数- 何度も実行されるコードのブロック。
追加リソース
Dave WolberのApp Inventor初心者向けチュートリアルは、以下をご覧ください。 appinventor.org
