- イベント駆動型プログラミングについて学びます
- Thunkableプラットフォームのブロックの種類を理解します
このレッスンのアクティビティ：
イベント
モバイルアプリは、イベント駆動型プログラミングに基づいています。
イベント駆動型プログラミングは、コードを上から下へ実行するのではなく、イベントを起点として実行します。一度にすべてのコードを実行するプログラムもありますが、モバイルアプリはユーザーがどのように操作するかによって実行が変わります。
モバイルアプリは、イベントに基づいて動作します。 イベントとは、コードが実行されるきっかけとなるような出来事のことです。例えば、ユーザーがボタンをクリックする。これはイベントです。そして、そのイベントが起こったときに実行されるコードを イベントハンドラと呼びます。
ストップ＆ディスカッション
あなたがスマホを使うとき、どんなふうにやり取りし、そのときスマホが何をしているか考えてみてください。下の例を参考にしましょう。
- アプリのアイコンをクリックすると、アプリが開く。
- テキストメッセージの「送信」をクリックすると、メッセージが送信され、音が鳴る。
- アプリにログインしようとすると、アプリはパスワードの入力を求める。
まずはThunkableプラットフォームの様々な部分を見てみましょう。
Thunkableには、アプリを作成するために使用する2つのウィンドウがあります。一番上のメニューバー（画面左上）のDesignをクリックすると デザイナーウィンドウに移動します。デザイナーウィンドウはユーザーインターフェースをデザインできるウィンドウです。ユーザーインターフェースとは、ユーザーが操作できるアプリ内のすべてのものを指します。例えばボタン、ナビゲーションバー、テキストボックス、画像などです。
デザイナー画面
コンポーネント一覧
アプリに追加したすべてのコンポーネントが、画面ごとに階層化されてここに表示されます。
ワークスペース
この中央のワークスペース にあるスマホの上にコンポーネントをドラッグします。コンポーネントを配置する場所やサイズを変更することができます。
コンポーネントの追加
このパネルからビジュアルコンポーネントをワークスペースにドラッグします。
プロパティパネル
プロパティパネルでは、各コンポーネントのプロパティを設定することができます。 プロパティは、幅、高さ、色など、各コンポーネントに設定できるさまざまな特性です。モックアップ上でコンポーネントを選択し、プロパティパネルでそのプロパティを変更することができます。
誰かがあなたのアプリを使うとき、ボタンをクリックしたり、テキストを入力したりして、ユーザーインターフェイスと対話します。あなたのアプリが何をすべきかを決定し、それを実行するようにプログラムするのはあなたです。
ブロックエディター
Blocksをクリックすると ブロックエディターウィンドウが表示されます。ブロックエディターウィンドウでは左側のパネルから画面中央のワークスペースにブロックをドラッグすることでコーディングをすることができます。
左側にはブロックパレットがあります。上部にはUIコンポーネントがあります。アプリの各コンポーネントには、それぞれブロックのセットがあります。コンポーネントをクリックすると、ワークスペースにドラッグできるブロックが表示されます。
コーディングワークスペース
ここは、すべてのブロックをドラッグするワークスペースです。ブロックを移動させたり、ブロック同士をスナップさせたりすることができます。また、不要なブロックを削除することもできます。
コアブロック
コアブロックは、アプリで使用する標準的なコーディングブロックです。種類によって分類され、色分けされています。
アプリの特徴
これらは、アプリに追加できる目に見えない機能です。クリックして追加し、プロパティを設定したり、その機能のコードブロックをドラッグすることができます。
イベントハンドラ
Thunkableのイベントハンドラブロックは金色で、開いたブロックの形をしているので、その中にブロックをスはめ込むことができます。これらのブロックは、そのイベントが起こった時だけ実行されます。
ボタンがクリックされたとき
これはすでに使ったことがあるだろう。ユーザーが特定のボタンをクリックしたとき、アプリに別の画面を開いたり、メッセージを送信したりといった動作をさせたいでしょう。
ListViewerの項目がクリックされたとき
ListViewerはドロップダウンメニューのようなものなので、このイベントはユーザーがリストの項目を選択したときに発生します。アプリはクリックされた項目に対して何かを行う必要があります。
画面が開いたとき
このイベントは、アプリが最初に起動したときや、アプリが別の画面に切り替わったときに何かをしたいときに使用します。変数を設定したり、クラウドから情報を更新したりできます。
機能
関数は、何かを行うブロックの集まりです。このブロックはアプリ内で何度も実行することができます。Thunkableでは、関数ブロックは紫色で表示されます。プログラミング言語によっては、関数をメソッドやプロシージャと呼ぶこともあります。 関数は何かを行うので、アクションブロックと考えることができます。
話す
この機能により、アプリはあなたがしゃべらせたいテキストをしゃべります。
タイマースタート＆サウンド再生
タイマーコンポーネントは、カウントを開始することができます。 また、サウンドを再生することもできます。
セッターとゲッター
緑色のブロックはコンポーネントのプロパティに関係します。
この薄緑色のブロックはプロパティの値を取得するために利用するのでゲッターと呼ばれます。
ボタン1のテキスト
テキストが取得され、変数 numberChoice に保存される。
タイマー1の時間（秒
タイマーの秒数を取得し、Lablel1のテキストに格納することで、ラベルにその値が表示されます。
この濃い緑色のブロックはプロパティの値を設定するために利用するのでセッター と呼ばれます。このブロックははめ込むことができ、末端には空きスロットがあります。
ボタン1のテキスト
Button1のTextには "Click me!"という文字が設定されている。
ラベル1.テキスト
Label1のTextには、Timer1のTime（Time in Seconds）が設定される。
タイマー1のインターバルミリ秒
タイマー1のIntervalMilliseconds（タイマーが切れる頻度）は3000、つまり3秒に設定されています。
Tip
ベストプラクティス生徒たちに、これは実際のコーディングとまったく同じであることを思い出させる。私たちが使っている奇妙な語彙（関数、ゲッター、セッター）は、まさにコーダーが使っているものです。
生徒への質問日常的に行っていることを思い浮かべることができますか？(例：ケーキを焼く、歯を磨くなど、繰り返しできるステップがあるもの）。関数はアルゴリズムによく似ています！
メンターTipsは、AmeriCorpsから提供されたものです。
データブロック
セッターを使用する場合、データ、つまりアプリで使用できる情報を表す他の組み込みブロックを使用することがあります。使用できるデータブロックの例を以下に示します。
数値
数値はアプリのデータとして使用できます。これらのブロックは、ブロックパレットのコアセクションの数学ドロワーにあります。
テキストまたは文字列
テキストは文字列と呼ばれることもあり、データとして使用できます。アプリで使用できる文字、単語、文章です。このブロックは、ブロックパレットのCoreセクションのTextドロワーにあります。
ブール値
このデータ型には、true(真)かfalse(偽)の2つの値しかありません。 これらのブロックは、何かの「状態」を設定したりテストしたりすることができ、条件式で使用されます。
アクティビティ：サウンドボード・チュートリアル
以下のビデオチュートリアルに従ってください。
次に、以下のDaveのビデオに従って、イベントハンドラと関数を使って、スピーチを再生するアプリを作りましょう。
チャレンジ
アクティビティで、あなたはこれらを使用しました：
- イベントハンドラブロック
- 機能ブロック
Soundboardアプリに、セッターとゲッターのブロックを追加して、使ってみましょう。
ユーザーが関連するスピーチを再生するために画像をクリックすると、 背景の色が変わるようにしましょう。
ある特定の色に変更することはできますが、元の色である黒に簡単に戻すことはできません。代わりに画面の背景をランダムな色に変更するようにしましょう。
ヒント：色の引き出しで、ランダムな色を得る方法を確認してください。
振り返り
さまざまなコードブロックについて少し学んだところで、アプリのソリューションについて考えてみよう：
主な用語のおさらい
- ユーザーインターフェース - ユーザーが操作できるアプリ内のすべてのもの
- デザイナー- アプリにコンポーネントを追加したり、見た目をデザインしたりできるウィンドウ
- ブロックエディター- アプリのブロックをコーディングするウィンドウ
- イベント-コードが実行されるきっかけとなるような出来事
- イベントハンドラ- イベントが発生したときにアプリが何をすべきかを指示するコードブロック
- イベント駆動型プログラミング- コード全体を最初から最後まで実行するのではなく、イベントに基づいて実行されるプログラミング
- 関数- 何度も実行されるコードのブロック。
追加リソース
Dave WolberのThunkableチュートリアルをもっとチェックするには、以下をご覧ください。 draganddropcode.com
学生アンバサダー、ミーナクシ・ナイールのUdemy無料講座 Thunkableコースも素晴らしいリソースです！
