以前の投稿「ついに完成 計算アプリ “Calculation Time”」でタブレット向けの算数アプリ開発について書きましたが、今回は Chromebook 向けのアプリ開発です。
また、ただ単にタブレット → Chromebook 向けとターゲットとなるデバイスが変わっただけではなく、今回は「すぐに教育の現場で活用できる」という点に注力しています。
もう少し詳しく説明すると、タブレット向けのアプリはただ単に計算問題を解かせるだけのものでした。授業で活用するためには、教師自身が考え、工夫をし、授業を組み立てる必要がありました。ICT を教育現場で活用することに不慣れな彼らにとっては、非常にハードルの高いことです。そこで今回は、以下の方針でアプリを作成することにしました。
- 90日間で完結する算数プログラムとして提供(1日15分×90日)
- 動画を使って、わかりやすく使い方を提示
- オフラインでも使用可能
教師の経験ややる気や質に大きく左右されずに、できるだけ質の高い算数教育を生徒たちに提供することを目指します。
そこで現在、アプリ開発のための技術的な知識を勉強中です。今回はHTML5 + CSS3 + JavaScript を使います。ちなみに前回はJava でした。どれも超基礎的なことは昔大学でやりましたが、ほとんど覚えていないので、総復習中です。1~2週間ほど書籍やWeb サイトで勉強しながら、そして、実際に作ってみながらの作業です。以下に挙げる本番開発で必要な技術要素については一通り実装/実現できるようになりました。
- レイアウト(Css3のFlexbox)
- ポップアップ表示
- 画面遷移(値を渡す)
- 外部ファイルからのデータの読み込み
- カウントアップ機能
- スケジュール処理(○秒後に処理実行)
- 動画コンテンツ(YouTube)の再生
- フォントの変更
- Web への公開 → Chromebook への配信
多少なりとも HTML あたりを触ったことがある人にとって、上記はそれほど難しいとは感じないでしょう。しかし、けっこう苦労しました。というのも、今回はただの Web アプリではなく、Chrome Packaged Apps という形で開発しているため、Chrome に特化した様々なお作法があるんです。例えば、スケジュール処理に setTimeout() は使えないとか。そんなこんなでできたアプリのスクショが以下です。
ただ必要な要素を詰め込んだだけのコンテンツなので、特に意味はありません。
さ、これから本番開発に入っていきたいと思います。