所要時間

2時間

難易度

★★☆

概要(機能・動作)

APSソーメンタイマー(JavaScript版)

スタートボタンを押すと、タイマーが1分20秒からカウントダウンしていきます。区切りのタイミングで(1分、30秒、10秒、0秒)音声が流れます(※スピーカーがあるPCのみ)。

学習項目

  • JavaScriptの「1秒経過したら指定した処理を実行する」という仕組みと、「処理を実行する毎に、変数の値を1ずつ減らし、0になったら終了」という条件分岐構造を使い、カウントダウンタイマーを実現する仕組みを理解する
  • 条件分岐の仕組みを用いて、キリのいい経過時間が経過したタイミングで処理を行わせる
  • HTML,CSSを変更して、アプリケーションの見かけを変更する

身に付く力

  • 知識・技能
    • タイマー制御を使ったアプリケーションを通じて、コンピュータ上の動画の実現方法を理解する。
    • 条件(残り時間)によって実行する処理を変える条件分岐制御を理解する。
  • 思考・判断・表現
    • 既存のソフトウェア(カウントダウンタイマー)の動作の特徴を理解した上で、機構を応用できる問題を発見し、適切な表現を適用して、動作するアプリケーションとして実現する。
  • 態度
    • アプリケーションの動作に加えて、適切な文字による表現、音声による表現を、結果を確認しながら、丁寧に粘り強く加えていくことができる。

学習活動(カスタマイズ)の内容

  1. 1秒ごとに画面にメッセージを追加表示するようにします。
  2. 変数で設定しているタイマーの時間を変更します(80秒から120秒)。1.と2.のカスタマイズを通じて、カウントを数えている仕組みを理解することができます。
  3. 処理を繰り返す間隔を、1秒(1000ミリ秒)から5秒(5000ミリ秒)に変更します。コンピュータにタイマー実行させる仕組みを学ぶほか、量のスケールを表す接頭辞を学ぶ機会にすることができます。
  4. 残り半分(40秒)になったらメッセージを表示するようにします。条件分岐構造に、分岐の枝を追加します。フローチャートによる条件分岐構造の表現を学べます。
  5. アプリケーションのタイトルを変更します。HTMLを書き換えることで、画面表示を変更できることを学びます。次の6.のカスタマイズと合わせて、作品制作に応用できる知識・技能が身に付きます。
  6. 画面の色(背景色、文字色)を変更します。

特徴

残り時間を管理しながら、作業や勉強に取り組む機会は多いです。そんな機会に役立つアプリケーションがカウントダウンタイマーです。

このAPSでは、音声を組み込むことで、単純なカウントダウンタイマーにはないアクセントを付け加えています。

音声ファイルを作成し、Monaca Educationのプロジェクトにアップロードすることで、音声の再生メカニズムについての詳細を知らなくても、オリジナルのカウントダウンタイマーを制作することができます。

作品制作への応用

このAPSをもとにして、生徒に単元「プログラミング」に関連する作品制作を行わせることができます。1時間程度の簡単な制作から、企画・設計に1時間、制作に2時間かけるなど、大きな作品制作にすることも可能です。

簡単な制作としては、カスタマイズの⑤、⑥の通り「カップラーメンタイマー」(3分=180秒)にする方法があります。背景色・文字色、アプリケーションのタイトル、カウントダウンする秒数を変更することで、一人一人異なったアプリケーションにすることができます。

基本的なアプリケーションの構造はそのままで、カウントダウンタイマーの振る舞いを持つプログラムを作ることができます。例えば、「囲碁・将棋の早指し(30秒)タイマー」や、「ポモドーロ・テクニック(※)のタイマー」などです。 

※ポモドーロ・テクニックは、集中して作業や勉強をする時間と、休憩する時間を繰り返すことで、仕事・勉強のペースを生み出す時間管理術です。25分の集中時間、5分の休憩を1セットとして、4、5セットごとに長めの休憩を取るようにします。

作品制作に応用する場合、次のような活動が必要になります。

  • 企画・設計
    • どんなアプリケーションにするかアイデアを出します。
    • アプリケーションの具体的な動作を考え、フローチャートなどを書いて、動作を設計します。
    • 必要な改修内容を考え、アプリケーションタイトルを決めたり、背景色・文字色を決めたり、音声を収録・編集したりします。
  • 制作
    • APSのプロジェクト「おみくじ(JavaScript版)」をインポートして、制作します。

作品制作に利用できる素材集

アシアルが運営するWebサイト「あんこエデュケーション」では、作品制作に利用できる画像素材を公開しています。

あんこエデュケーション・素材配布ページ

https://anko.education/material

これらの素材は、クリエイティブ・コモンズのCC BY-NC 4.0で公開しており、生徒の皆さんにも利用していただけます。

上記の素材配布ページには、音声ファイルはありません。スマートフォンやタブレット、PCの機能を使って、音声を録音し、ファイルを作成することができます。作成した音声ファイルを、Monaca Educationを使用するPCに移動し、適切なファイル名をつけた上で、Monaca Educationの画面からアップロードします。

APS資料のダウンロード:先生向けサポートページ

APSのプロジェクト以外の資料は、プランごとに用意されている先生向けサポートページからダウンロードできます(サポートページはパスワードで保護されています)。

プランの詳細や、各サポートページのパスワードについては、アシアルまでお問い合わせください。

ベーシックプラン

https://edu.monaca.io/basic

スタンダードプラン

https://edu.monaca.io/standard

APSプロジェクトのインポート

APSプロジェクトをMonaca Educationにインポートするには、下記のアプリプログラミングシートのサポートページにアクセスし、該当のAPSのインポートボタンをクリックします。

アプリプログラミングシートのサポートページ

https://edu.monaca.io/template/aps