Development of a Web Application for Learning Physics

物理学習用ウェブアプリケーションの開発
Development of a Web Application for Learning Physics
濱田 朔実
Sakumi Hamada
法政大学情報科学部ディジタルメディア学科
E-mail: [email protected]
Abstract
This extended abstract reports on a Web application I
developed to demonstrate how to make full use of
information technology for purposes of e-learning. I
chose physics as the subject because physical phenomena
can well be simulated on the computer, for instance, by
using animation, movies and pictures.
The application is written in HTML, CSS and
JavaScript, and works on any terminal with a browser
such as a PC, a laptop, an iPhone, an iPad and an
Android. I avoided to use Flash because it does not work
on iOS.
This software is provided with various functions
including quizzes, a dictionary, note-taking and a
comment box. The comment box is linked to Facebook so
that the user’s comments and questions can be shared
with other Facebook users. Possibly, the user may receive
an answer to the question from his or her friend. I hope
the user will enjoy this application and enjoy learning
physics.
1. はじめに
1990 年代後半から急速に普及し始めたインターネット
は, 今や, 社会の至る所に応用され, 現代社会にとっ
て必要不可欠なものとなっている. しかしながら, 学習
の分野に対する応用はやや遅れている. 90.8%の大学が e
ラーニング又は ICT 活用を重要と考える一方, 実際にそ
れをビジョンやアクションプランに挙げている大学は
40.8%にとどまっている [1]. 又, 2010 年に iPad が登場
したのをきっかけに, 電子書籍や電子教科書への期待が
高まったが, 規格の問題やコンテンツ数の少なさなども
あり, 本格的な普及には至っていない.
情報技術は非常に大きい可能性をもっている. それに
も関わらず, それが十分に生かされていないとしたら残
念である. そこで本研究では, どのようにすれば, 情
報技術を学習の分野に活用できるか考慮し, それに基づ
いて, 実際に物理学習用ウェブアプリケーションを開発
した.
2. アプリケーション開発にあたっての考慮点
2.1. ウェブアプリケーションとネイティブアプリ
ケーション
Supervisor: Prof. Yukiko Sasaki Alam
ウェブアプリケーションはウェブブラウザ上で動作す
るアプリケーションで, ウェブブラウザが動作する端末
ならば, 基本的にどの端末でも動作することになる. 一
方, ネイティブアプリケーションは特定の端末のみでし
か動作しない. iPad で電子書籍が注目されたが, iPad は
iBooks という独自のアプリケーションを採用し, Android
や Kindle, パソコンなど他の端末で閲覧することができ
ない. このようなことは製作者, 消費者双方にとって不
利益となる. 以上のようなことからウェブアプリケーシ
ョンの方が有利な点が多いと考え, ウェブアプリケーシ
ョンで開発することにした.
2.2. Flash に関して
一時期, Flash はウェブブラウザ上でリッチな表現と機
能を実現する技術として, 盛んに利用された. しかし,
iOS 上で動作されなくなったのをきっかけに, 徐々に
HTML5 に置き換わりつつある. Flash の開発元である
Adobe 社自身も 2011 年 11 月にモバイル向けの Flash の開
発を中止した. 動作しない端末があってはウェブアプリ
ケーションの利点を損なうので, Flash は一切使わず,
標準規格である HTML と CSS, JavaScript のみで開発す
ることにした.
2.3. 動作環境について
ウェブアプリケーションの利点はどこでもどの端末で
も同じように動作することである. このため, 開発する
アプリケーションはパソコン, タブレット, スマートフ
ォンすべての端末で同じように動作するようにする.
2.4. デジタルならではの表現
電子書籍の利点は, 持ち運びが楽, 印刷, 輸送, 資
源などのコスト削減など様々なものがあるが, 大きな利
点として, デジタルならではの高い表現力がある. 具体
的には, 動画, 音声, 入力に対する動的な出力である.
現在ある電子書籍のほとんどが, 紙の書籍を元に電子化
されたもので, デジタルの利点を十分に活かしていると
は言えない. 筆者は電子書籍が普及しない理由はここに
あると考える. このアプリケーションではデジタルの利
点である, 動画, 音声, 動的な出力をすべて利用する.
2.5. インターネットの利点
インターネットを利用することで, 地域や学校に限定
されず, 世界中の人と交流することができる. これを活
かす手段として, アプリケーションにコメント機能を付
ける. コメント機能をつけることで, 感想を他の人と共
有したり, わからないことを質問することができる. コ
メントする際は, Facebook などの SNS アカウントでログ
インする. これにより, コメントした人の身元がわかり,
スパムのようなコメントを排除することができる. また,
例えば, 質問に答えた人が大学の教授だということがわ
かれば, その回答の信頼性が増すだろう. さらに, コ
メントを Facebook などに自動的に投稿することで, アプ
リケーションを利用していない友達にもコメントを見て
もらうことができる. 友達の中に質問に関して詳しい人
がいれば答えを得られるだろう.
インターネットには様々な情報と知識が日々更新され
蓄積されている. しかも, そのほとんどは無料で閲覧す
ることができる. これを活かすひとつの手段として
Wikipedia[2]にリンクした辞書機能を付ける. わからない
単語があれば, その単語をクリックすることで即座に
Wikipedia で確認することができる. Wikipedia は世界中
の人々がそれぞれの知識を提供し, 構築しているもので
ある. それを利用することで, 自分が一から辞書を作る
必要がなくなる.
2.6. メモ機能
勉強の際, 紙の教科書だと書き込みをすることがある.
それをアプリケーションでも再現する方法としてメモ機
能を付ける.
3.アプリケーション
3.1. ホーム画面
図2
使い方の説明のポップアップ画面
3.2. 画面構成
ホーム画面でアイコンをクリックすると, アプリケー
ションを起動することができる. 上部の白い部分にメイ
ンのコンテンツが配置され, 左右にある矢印ボタンでペ
ージを移動する. 下部の黒い部分にナビゲーションバー,
コメントボタン, メモボタン, ヘルプボタンが配置さ
れている. タブレットやスマートフォンなどのポートレ
ート表示でも問題が出ないような構成にしている. ナビ
ゲーションバーでは現在どのページを表示しているか確
認することができる. 又, 任意の場所をクリックするこ
とで, そのページへ飛ぶことができる[図 3].
ホーム画面にはアイコンと概要説明, ヘルプボタンが
配置されている. アイコンは本を思わせるような表現と
し, このアプリケーションが, 本のページをめくってい
くような進め方をするということを暗に示している[図 1].
アイコンの下のヘルプボタンをクリックすると使い方
の説明がポップアップ表示される[図 2].
図3
画面構成
3.3. アニメーション表示
図1
ホーム画面
コンテンツの一部はアニメーションするようになって
いる. 図 4 の例では, 地球と月がそれぞれアニメーショ
ンで回転している[図 4]. なお, 地球と月は NASA[3]と
壁紙宇宙館[4]が提供しているものを加工して使用してい
る.
3.6. コメント機能
コメントボタンをクリックすると, ポップアップでコ
メントの画面が表示され, ここから, コメントすること
ができる[図 7].
図4
アニメーションの例
3.4. 辞書機能
わからない単語をクリックするとポップアップで辞書
が表示され, その単語の意味を確認することができる[図
5].
図7
コメント用のポップアップ画面
3.7. メモ機能
メモボタンを押すとポップアップでメモ用の画面が表
示され, メモを記入することができる[図 8].
図5
辞書機能のポップアップ画面
3.5. クイズ機能
選択式のクイズにクリックして答えると音声とともに
正解か不正解の画面が表示される[図 6].
図8
メモ用のポップアップ画面
3.8. シミュレーション機能
図 9 に示されている画面内の左側のバーを操作して重
力加速度の値を変えることができる. 重力加速度の違い
によってボールの落下運動がどのように変化するのかを
シミュレーションによるアニメーションで確認できる[図
9].
4. 開発中に発生した問題と解決法
このアプリケーションは, 本のページを 1 枚 1 枚めくっ
ていくように進めていく構成になっている. しかし, ペ
ージ 1 枚に対して HTML ファイルをひとつ割り当てると,
ページを進める度にリンク先を呼び出し, 1 回 1 回
HTML ファイルを読み込むことになる. こうすると, ペ
図6
クイズ正解画面
5. 動作テスト
5.1. 動作環境
以下に挙げる環境で動作テストをした.
Windows Vista 上 で の Firefox 9, Firefox 2, Google
Chrome 16, Internet Explorer 9, Internet Explorer 8.
Windows 7 上 で の Firefox 9,
Google Chrome 16,
Internet Explorer 9.
Mac OS X 上での Google Chrome 16, Firefox 9, Safari 5.
iPad iOS 4 上での Safari 4, IS03 Android2.2 上のブラウ
ザ 2.2.
通信環境は IS03 Android2.2 のみ 3G 回線で, 他に関し
てはすべて Wi-Fi となっている.
図9
シミュレーション機能
ージを進める度に, 読み込みが発生し, 待たされること
になる. これを避けるため, すべてのページをひとつの
HTML ファイルに配置して ul 要素とし, 任意のページを
div 要素でマスキングするようにした. CSS にて overflow
プロパティのバリューを hidden とすることで, 任意のペ
ージのみを表示することができる. 結果, 待ち時間は実
質 0 となった.
しかし, この手法を使うことによって HTML ファイル
内の要素数が多くなった結果, 物理シミュレーションの
動作に影響を及ぼし, 落下運動のアニメーションに支障
をきたすという問題が発生した. そこで, 物理シミュレ
ーションの部分のみを別の HTML ファイルにわけること
にした. しかし, HTML ファイル間で JavaScript などの値
の受け渡しができないため, 一旦, 物理シミュレーショ
ンのページに移動すると, そこから元の HTML ファイル
内の任意のページに移動することができない. これを解
決するため, 物理シミュレーションの HTML ファイルか
らの呼び出しの際に, アドレス後尾に?32 のように?と任
意のページ番号を付け足し, 物理シミュレーション以外
のページが配置されている受け取り側の HTML ファイル
で JavaScript を実行し, アドレスをロケーションサーチ
して解析し, ?以降に記述されている番号を取り出し,
任意のページに移動できるようにした.
また, iPad や Android などのタブレット端末で実行し
た際, iframe 内の overflow がスクロールできず表示され
ないという問題が発生した. これはタッチパネル入力と
いうマウス入力とは違ったタブレット端末特有の入力方
法に起因するものである. この問題を回避するため, タ
ッチパネル入力の端末に対しては表示するページを変え
ることにした. 端末から HTML ページのリクエストを受
け取ったら, 端末のユーザーエージェントを JavaScript
で解析し, タッチパネル入力ならば, ページ移動のリク
エストを端末側に返し, タッチパネル用の HTML ページ
に移動させる. タッチパネル用の HTML ページでは
iframe ではなく直接リンク先へ移動させることで解決と
した.
5.2. 結果
Firefox 2, Internet Explorer 8 の２つを除いたすべての
環境で, アプリケーションのすべての機能が正常に動作
した. ただし, IS03 Android2.2 上では, ページの読み
込み, クイズ選択の入力に対する反応, 物理シミュレー
ション, それぞれにおいて遅れが確認された. Firefox 2
に関しては, div 要素に適用した Mouse Events に対する
反応がなかった. Internet Explorer 8 に関しては, 透過
PNG の表示が正常に行われず, 音声の再生も行われなか
った.
6. 結論
正常に動作しなかった Firefox 2, Internet Explorer 8 は
ともに旧バージョンであり, それぞれの最新バージョン
である Firefox 9, Internet Explorer 9 では正常に動作した.
また, Microsoft 社は Internet Explorer の自動アップデート
を 2012 年 1 月から開始するなどしているため, 今後こ
のようなバージョンの問題は減っていくと考えられる.
これらのことから, 音声, 動画, 入力に対する動的
な出力, SNS 機能 を HTML, CSS, JavaScript のウェ
ブ標準で実現したこのアプリケーションは, パソコン,
タブレット, スマートフォンそれぞれで利用可能である
と結論できる.
このように情報技術を利用すれば, 紙の教科書よりも
高機能な学習教材を気軽に個人が開発することができる.
例えば, 教師が自身の生徒に対して個人的に学習教材を
作成し, 提供することも可能だろう. そしてその教材は
学校, 自宅, 外出先問わず利用出来る. ウェブアプリ
ケーションを利用することで情報技術の恩恵をより多く
受けることができる.
文
献・URL
[1] 放送大学学園, ICT 活用教育の推進に関する調査研
究
http://www.code.ouj.ac.jp/wp-content/uploads/ICT2011.pdf
[2] Wikipedia
http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4
%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8
[3] NASA http://www.nasa.gov/home/index.html
[4] 壁紙宇宙館 http://powerforce.moo.jp/