Comments
Description
Transcript
物理学習用ウェブアプリケーションの開発
平成 23 年度 卒業研究論文 物理学習用ウェブアプリケーションの開発 所属：法政大学情報科学部ディジタルメディア学科 学籍番号：08k1131 氏名：濱田朔実 指導教官：佐々木アラム幸子教授 提出日：平成 24 年 i 要旨 本研究では、情報技術をどのように活用すれば学習の分野へ活かせるかを考察し、それ に基づいて実際に物理学習用ウェブアプリケーションを開発した。 学習の題材としては物理分野の重力を選んだ。物理は計算や動きのある要素を含み、数 値計算やインタラクティブな表現を得意とするコンピュータによく合うと考えたからであ る。 アプリケーションの主な機能としては辞書機能、アニメーションで表されたシミュレー ション機能、コメント機能、メモ機能、クイズ機能となっている。 アプリケーションはサーバサイドの技術に JSP を用い、クライアントサイドに関しては HTML、CSS、JavaScript のみで構成している。Flash に関しては、iOS 上で動作しない 等の理由から使用していない。このため、インターネットに繋がったほとんどのブラウザ 上で動作する。デスクトップやラップトップなどのキーボードを備えた一般的なコンピュ ータだけでなく、タブレットやスマートフォンなどの携帯端末上でも動作する。 ii 目次 1. はじめに ............................................................................. 1 2. アプリケーション開発にあたっての留意点................................. 1 3. 4. 5. 2.1 内 容 と 対 象 .............................................................................. 1 2.2 ウ ェ ブ ア プ リ ケ ー シ ョ ン と ネ イ テ ィ ブ ア プ リ ケ ー シ ョ ン .................. 2 2.3 Flash ..................................................................................... 2 2.4 動 作 端 末 ................................................................................. 2 2.5 デ ジ タ ル な ら で は の 表 現 ............................................................ 3 2.6 イ ン タ ー ネ ッ ト の 利 点 ............................................................... 3 2.7 メ モ 機 能 ................................................................................. 4 アプリケーションの概要説明 .................................................. 4 3.1 ホ ー ム 画 面 .............................................................................. 4 3.2 画 面 構 成 ................................................................................. 6 3.3 ア ニ メ ー シ ョ ン 表 示 .................................................................. 8 3.4 辞 書 機 能 ................................................................................. 9 3.5 ク イ ズ 機 能 ............................................................................ 11 3.6 コ メ ン ト 機 能 ......................................................................... 12 3.7 メ モ 機 能 ............................................................................... 13 3.8 シ ミ ュ レ ー シ ョ ン 機 能 ............................................................. 15 アプリケーションの構造 ...................................................... 15 4.1 ペ ー ジ 構 成 概 要 ...................................................................... 15 4.2 ホ ー ム ペ ー ジ ......................................................................... 16 4.3 メ イ ン ペ ー ジ ......................................................................... 17 4.4 シ ミ ュ レ ー シ ョ ン ペ ー ジ .......................................................... 18 4.5 メ モ ペ ー ジ ............................................................................ 19 動作テスト ........................................................................ 20 5.1 テ ス ト 環 境 ............................................................................ 20 5.2 テ ス ト 結 果 ............................................................................ 20 6. 評価 ................................................................................. 22 7. 考察 ................................................................................. 22 iii 8. 結論 ................................................................................. 23 9. 謝辞 ................................................................................. 24 10. 参考文献・URL ................................................................ 24 図の目次 図 3.1 ホーム画面 .....................................................................................5 図 3.2 使い方の説明のポップアップ画面 .................................................6 図 3.3 画面構成 .........................................................................................7 図 3.4 立方体のアニメーション ................................................................8 図 3.5 地球と月のアニメーション ............................................................9 図 3.6 わからない単語をクリック ..........................................................10 図 3.7 辞書のポップアップ表示 ..............................................................10 図 3.8 クイズ選択画面 ..............................................................................11 図 3.9 クイズ正解画面 ............................................................................12 図 3.10 コメント用のポップアップ画面 .................................................13 図 3.11 メモホーム画面 ..........................................................................14 図 3.12 メモ入力画面 ..............................................................................14 図 3.13 シミュレーション機能 ...............................................................15 図 4.1 ページ構成概要 ............................................................................16 図 4.2 ユーザエージェント判定 ..............................................................17 図 4.3 ページ構成 ...................................................................................17 図 4.4 iframe...........................................................................................17 図 4.5 音声ファイル読み込み .................................................................18 図 4.6 ページ番号受け渡し(HTML) .......................................................18 図 4.7 ページ番号受取り(JavaScript) ....................................................19 図 4.8 メモページ概要 ............................................................................19 図 5.1 スマートフォンにおけるポートレート表示 .................................21 図 5.2 スマートフォンにおける横位置表示 ............................................21 iv 1. はじめに 1975 年に、世界初のパーソナルコンピュータといわれる「Altair 8800」が発売された。 さらに、1990 年代後半からはインターネットが急速に普及し始め、2010 年にはパソコンの 世帯普及率が 83.4%、インターネット利用率が 93.8%に達した[1]。このように、最初のパ ーソナルコンピュータの誕生から 30 年余りで情報技術は社会に浸透し、なくてはならない ものとなった。現代社会に暮らす全ての人は、直接的、または少なくとも間接的に、情報 技術の恩恵を受けている。情報技術の利用はあらゆる分野に及び、工業、医療、サービス 業、エンターテイメント業、小売業など至るところで利用されている。特に、そのパフォ ーマンスが直接に利益に関わる金融業界では、株式取引にアルゴリズムが利用され、その 利用が 70%に達した結果、もはや、アルゴリズム同士の争いとなり、フラッシュ・クラッ シュという原因不明の奇妙な現象を引き起こした。このように、一部では行き過ぎとも言 える情報技術の利用があるのに対し、教育の分野ではややその利用が進んでいない感があ る。例えば、放送大学学園の「ICT 利用教育の推進に関する調査研究」によると 90.8%の 大学が e ラーニング又は ICT 活用を重要と考える一方、実際にそれを計画としてビジョン やアクションプランに挙げている大学は 40.8%となっている[2]。利用が進んでいないどこ ろか 60%が計画にすら挙げていない。情報技術は非常に大きな可能性を持っている。それ にも関わらず、それが十分に活かされていないとしたら残念である。先に述べたような、 直接利益に関わる業界で利用されているということは効率が良いということの証であると もいえる。例えば、教育予算の削減に対する対応を教員の削減などで行うのではなく、情 報技術の利用を選択肢としても良いのではないだろうか。また、2010 年に iPad が登場し たことで電子書籍や電子教科書に対する期待が高まったが、規格の問題やコンテンツ数の 少なさなどもあり本格的な普及には至っていない。そこで、インターネットやパソコンに 加え、最近普及し始めた iPad などのタブレット端末やスマートフォンも利用した物理学習 用ウェブアプリケーションを開発し、情報技術の学習分野への応用の可能性を探りたい。 2. アプリケーション開発にあたっての留意点 2.1 内容と対象 コンピュータは計算機であり、動画などの動きのある表現にも対応する。したがって、 計算や動きのある現象を含む物理が最適と考え、題材として物理を選んだ。難易度に関し ては、できるだけ簡単にし、物理の学習において重要な「基礎概念の理解」を目的とする。 また、インターネットを利用した学習の利点として、学校に通っていなくとも世界中の 人と交流しながら、自分の学びたいことを自由に学べるということがある。そのため、学 1 校で習ったことを復習したい中学生や高校生はもちろん、社会人も対象にする。 2.2 ウェブアプリケーションとネイティブアプリケーション ウェブアプリケーションはウェブブラウザ上で動作するアプリケーションで、インター ネットに繋がっていてウェブブラウザが動作する端末ならば、基本的にどの端末でも動作 することになる。一方、ネイティブアプリケーションは特定の端末のみでしか動作しない。 iPad で電子書籍が注目されたが、iPad は iBooks という独自のアプリケーションを採用し、 Android や Kindle、パソコンなどの他端末で閲覧することができない。このようなことは 製作者、消費者双方にとって不利益となる。製作者からすると、端末ごとにコンテンツを 製作しなければならず、二度手間、三度手間である。また、それぞれで使用されているプ ログラム言語が違うため、プログラミング知識の習得も必要になる。消費者からすれば、 その端末が手元にないと、コンテンツを閲覧することができないということになり、利便 性を損なう。 さらに、情報技術はインターネットの占める役割が大きい。ウェブアプリケーションは それ自体がインターネット上で動作するため、インターネットを利用した機能と連携しや すい。 これらの理由から、ウェブアプリケーションの方が有利な点が多いと考え、ウェブアプ リケーションとして開発することにした。 2.3 Flash 一時期、Flash はウェブブラウザ上でリッチな表現と機能を実現する技術として、盛んに 利用された。しかし、iOS 上で動作されなくなったのをきっかけに、徐々に HTML5 など に置き換わりつつある。Flash の開発元である Adobe 社自身も 2011 年 11 月にモバイル向 けの Flash の開発を中止した。動作しない端末があってはウェブアプリケーションの利点 を損なうので、Flash は一切使わず、HTML と CSS、JavaScript のみで開発することにし た。HTML、CSS、JavaScript は W3C が定める Web 標準の対象になっている。W3C (World Wide Web Consortium)は Web 技術の標準化を行い、各社が独自に開発した技術を定義し て閉鎖的になるようなことを防ぐ。各ブラウザは W3C の規格に則って、構成されているの で、コンテンツ側もその規格に則って製作されていれば、正常に動作する。 2.4 動作端末 ウェブアプリケーションの利点はどこでもどの端末でも同じように動作することである。 正確には、ウェブブラウザを備えた端末であるが、それらの種類としては、大きく分けて、 2 デスクトップパソコン、ラップトップパソコン、タブレット、スマートフォンがある。こ れらの大きな違いとして、デスクトップパソコン、ラップトップパソコンが、マウスとキ ーボードで操作するのに対し、タブレット、スマートフォンでは、タッチパネルで操作す るという点がある。キーボードに関しては、タッチパネルでは、ディスプレイに表示され たものをタッチするということ以外に余り違いはない。一方、マウス操作に関しては、若 干の違いがある。マウスは対象に向かって、ポインタを移動し、対象に達したらクリック などの動作を行う。一方、タッチパネルでは、ポインタを移動するという動作がなく、直 接クリック（タッチ）を行う。このため、タッチパネルでは、マウスオーバーというもの が存在しない。また、マウスでは、ポインタが対象を指しているか確認した後、クリック することができるため、誤操作が起きにくいが、タッチパネルでは、そのようなことがで きない。したがって、アプリケーションにはマウスオーバーでしか利用できないような機 能を付けない。また、ボタンなどは大きくするなどして、誤操作を減らす工夫をしなけれ ばならない。 さらに、もうひとつ、タブレットとスマートフォンの特徴として、画面が回転できると いうことがある。このため、パソコンなどで一般的な横長の表示に加えて、縦長の表示に も対応させる必要がある。 2.5 デジタルならではの表現 電子書籍の利点は、持ち運びが楽、印刷などのコスト削減、即改訂など様々なものがあ るが、大きな利点として、デジタルならではの高い表現力がある。具体的には、動画、音 声、入力に対する動的な出力である。現在ある電子書籍のほとんどが、紙の書籍を元に電 子化されたもので、デジタルの利点を十分に活かしているとは言えない。筆者は電子書籍 が普及しない理由はここにあると考える。このアプリケーションではデジタルの利点であ る、動画、音声、動的な出力のすべてを利用する。 2.6 インターネットの利点 インターネットを利用することで、地域や学校に限定されず、世界中の人と交流するこ とができる。これを活かすひとつの手段として、アプリケーションにコメント機能を付け る。コメント機能をつけることで、感想を他の人と共有したり、わからないことを質問し たりすることができる。コメントする際は、Facebook などの SNS アカウントでログイン する。これにより、コメントした人の身元がわかり、スパムのようなコメントを排除でき る。また、例えば、質問に答えた人が大学の教授だということがわかれば、その解答の信 頼性が増すだろう。さらに、コメントを Facebook などに自動的に投稿すれば、アプリケー 3 ションを使用していない友達にもコメントを見てもらうことができる。友達の中に質問に 関して詳しい人がいれば答えを得られるだろう。 インターネットには様々な情報と知識が日々更新され蓄積されている。しかも、そのほ とんどは無料で閲覧することができる。これを活かすひとつの手段として、Wikipedia にリ ンクした辞書機能をつける。わからない単語があれば、その単語をクリックすることで即 座に Wikipedia で確認することができる。Wikipedia は世界中の人々がそれぞれの知識を 提供し、構築しているものである。それを利用することで、自分が一から辞書を作る必要 がなくなる。 2.7 メモ機能 勉強の際、紙の教科書だと書き込みをすることがある。それをアプリケーションでも再 現する方法として、メモ機能をつける。メモに関しても、どの端末からでも同じ内容にア クセスできるようにしなければならない。そこで、サーバ側にデータを保存することで対 応する。こうすることで、ユーザ名とパスワードを入力すれば、端末によらず、同じデー タにアクセスできる。 3. アプリケーションの概要説明 3.1 ホーム画面 ホーム画面には、最上部にアイコンが配置されており、その下に概要説明がある。最 下部にはヘルプボタンが配置されている。アイコンは本を思わせるような表現とした。こ うすることで、このアプリケーションが、本のページをめくっていくような進め方をする ということを暗に示している[図 3.1]。 4 図 3.1 ホ ー ム 画 面 ホーム画面にヘルプボタンを配置することで、最初に使い方を確認できるようにしてあ る。ボタンをクリックすると、説明のページがポップアップで表示される[図 3.2]。 5 図 3.2 使 い 方 の 説 明 の ポ ッ プ ア ッ プ 画 面 3.2 画面構成 ホーム画面でアイコンをクリックすると、アプリケーションを起動することができる。 画面は大きく上半分と下半分に分けられる。上部の白い部分がメインの画面になり、ここ にコンテンツが表示される。左右には矢印のボタンがあり、ここをクリックすることでペ ージを移動できる。ページはすべて 1 次元的に構成されていて、途中で枝分かれしたり、 入れ子になったりすることはない。そのため、ただ矢印をクリックして進んでいけば、す べてのページを見ることができる。1 ページに入る情報はできるだけ少なくし、文章として は１文に収まるようにしている。さらに、文と共に画像や動画を入れることで、分かりや すくしている。このため、本のページ１枚というより、漫画の１コマまたはプレゼンテー ションスライドの１枚という感じに近い。1 文 1 文確実に理解していけるようにこのような 形にしている。紙の教科書でこのような構成にすると、ページ数が多くなり、厚くなって しまう。また、カラーインクも大量に使うことになる。ページ構成としてもデジタルの利 点を活かせるようにしている。 しかし、ページで区切るという考え自体は、本来、紙ならではともいえる。デジタルな らば、延々と下にスクロールしていくような形で、途切れることなく内容を構成できるか らである。紙の書籍では、意味のないところでページが変わり、文章が途中で切れるよう 6 なことが多々ある。途切れることなく内容を構成できるのもデジタルの利点であるといえ るが、このアプリケーションでは、一つ一つ着実に理解していけるように、意味のあると ころで区切りをつけ、ページとして構成した。 下半分の色の濃い部分には、操作用の機能がまとめられている。白い部分との境目近く にナビゲーションバーが配置されている。点一つがページ一枚を表しており、ページ数分 だけ点が横方向に並んでいる。現在見ているページの点はハイライトで表される。任意の 点をクリックすることで、任意のページへ飛ぶことができる。ナビゲーションバーの下に はボタンが三つ並んでいる。左からコメントボタン、メモボタン、ヘルプボタンとなって いる。ボタンをクリックするとそれぞれ内容がポップアップ画面で現れる。 全体として、できるだけ無駄な要素は省き、メインの要素以外は目立たないように簡潔 な表現としている。要素を減らすことで操作に迷わないようにし、メイン以外の要素を目 立たせないことで、内容に集中できるようにしている。 図 3.3 画 面 構 成 7 3.3 アニメーション表示 コンテンツの一部はアニメーションとして表示される。図 3.4 の例では立方体の体積がそ れぞれ連続的に変化する動きをしている。図 3.5 の例では、地球と月がそれぞれ回転する動 作をしている。なお、地球と月は NASA[3]と壁紙宇宙館[4]が提供しているものを加工して 使用している。アニメーション表示で内容の理解を助けるとともに、より注意を引きつけ ようとしている。アニメーションは繰り返しで連続的な動きをしており、どの時点から見 ても問題のないような内容としている。アニメーションを途中からみると内容が理解でき ないということがないようにしている。アニメーションの実現方法としては、JavaScript によるものと、GIF によるものがある。図 3.4 の例では JavaScript を使用し、図 3.5 の例 では GIF を使用している。 図 3.4 立 方 体 の ア ニ メ ー シ ョ ン 8 図 3.5 地 球 と 月 の ア ニ メ ー シ ョ ン 3.4 辞書機能 わからない単語をクリックすると辞書で調べることができる。辞書はポップアップ表示 されるので、ページを移動することなく、辞書の内容を確認することができる。辞書は Wikipedia を使用している。モバイル向けの表示設定としているので、ポップアップの小さ い画面でも快適に見ることができる。右上のバツ印をクリックして閉じることができる。 9 図 3.6 わ か ら な い 単 語 を ク リ ッ ク 図 3.7 辞 書 の ポ ッ プ ア ッ プ 表 示 10 3.5 クイズ機能 アプリケーションでは理解の確認のために途中でクイズがある。クイズは全 て選択式となっている。図 3.8 の例では、分子の白い四角形部分または分母の白 い四角形部分のどちらかをクリックして解答する。クリックすると正解か不正 解かがマルかバツで表示される。図 3.9 は正解した例である。正解不正解の結果 に応じた音が出るようになっている。音は一般的なブザー音のようなものでは なく、人の歓声のように親しみのあるものにしている。 図 3.8 ク イ ズ 選 択 画 面 11 図 3.9 ク イ ズ 正 解 画 面 3.6 コメント機能 コメントボタンをクリックすると、コメント用の画面がポップアップで表れる。Facebook アカウントまたは Open ID を利用して Yahoo!等のアカウントでログインしてからコメント する。Facebook のコメントボックスプラグインを使用しているので、コメントを Facebook に投稿するかどうか選ぶことができる。 12 図 3.10 コ メ ン ト 用 の ポ ッ プ ア ッ プ 画 面 3.7 メモ機能 メモボタンをクリックするとメモ用の画面がポップアップで表示される。初めて利用す る人は「新規登録」のボタンをクリックし、ユーザ名とパスワードを登録する。登録して ある人はユーザ名とパスワードを入力してログインする。ログインするとメモ入力用画面 になる。四角形の白い部分にテキスト形式でメモすることができる。保存したい場合は、 左上の保存ボタンをクリックし保存する。保存した内容はサーバに保存されるので、別の 端末からでも、ユーザ名とパスワードを入力すれば、閲覧、編集できる。 13 図 3.11 メ モ ホ ー ム 画 面 図 3.12 メ モ 入 力 画 面 14 3.8 シミュレーション機能 重力のしくみの理解を助けるために、重力加速度の違いによるボールの落下運動の違い を確認するシミュレーション機能がついている。図 3.13 に示されている画面内の左側のバ ーを操作して重力加速度の値を変えることができる。画面上をクリックするとボールが落 下し、動きをアニメーションで確認できる。シミュレーションはリアルタイムで JavaScript により計算している。 図 3.13 シ ミ ュ レ ー シ ョ ン 機 能 4. アプリケーションの構造 4.1 ページ構成概要 大まかなページ構成は図 4.1 のようになっている。まず、index.html が表示される。 JavaScript により、クライアントを判定し、モバイル端末ならば、モバイル向けページへ リダイレクトされる。モバイル向けページは touch ディレクトリ以下に index.html、 juuryoku.html 、 page49ball.html 、 help.html 各 種 入 っ て い る 。 メ イ ン ペ ー ジ は 15 juuryoku.html で、ここにほとんどのコンテンツが入っているが、リソースを多く使い、負 荷のかかる物理シミュレーション部分のみ切り離し、page49ball.html としている。メモペ ージに関しては、メモ内容の保存のために、ユーザ管理機能、ファイル生成保存機能が必 要なため、JSP を利用している。メモページ関連は全て memo ディレクトリ以下に配置し、 管理しやすくしている。 図 4.1 ペ ー ジ 構 成 概 要 4.2 ホームページ 最初に表示される index.html をホームページとする。タブレット端末やスマートフォン でテストした際、タッチパネルでは、ポップアップウィンドウ内の要素をスクロールでき ないということが判明したため、別途モバイル端末向けのページを用意した。index.html で、クライアントを判定し、タッチパネル端末ならば、モバイル端末向けページにリダイ レクトするようにしている。タッチパネルといっても様々なものがあるが、ここでは、iPad、 iPod touch、iPhone、Android を判定している[図 4.2]。このため、全てのタッチパネル端 末がリダイレクトされるという訳ではない。また、Android に関しては、必ずしもタッチ パネルだとは限らない。しかし、現時点で入力装置を判定する現実的な方法がなかったた め、このように、ユーザエージェントを判定する方法を使った。 16 図 4.2 ユ ー ザ エ ー ジ ェ ン ト 判 定 4.3 メインページ メインページは juuryoku.html で、ここにほとんどのコンテンツが入っている。このア プリケーションは本のページを１枚１枚めくっていくように進めていく構成になっている が、ページ１枚に対して、HTML ファイルを１つ割り当てると、ページを進める度にリン ク先を呼び出すことになり、読み込みで待たされることになる。これを避けるため、シミ ュレーション部分を除くすべてのページを juuryoku.html ファイルに配置して ul 要素とし、 任意のページを div 要素でマスキングするようにした[図 4.3]。CSS にて overflow プロパテ ィのバリューを hidden とすることで、任意のページのみを表示することができる。ページ 移動のボタンがクリックされたら、JavaScript によって CSS の値を操作して、ページを移 動する。 図 4.3 ペ ー ジ 構 成 コメントページ、メモページ、ヘルプページ、辞書画面は、iframe を使って、ページを移 動することなく閲覧できるようにしている。表示の際に fancybox というプラグインを使っ ている[図 4.4]。 図 4.4 ifram e 17 音声は HTML5 の audio タグを使って実現している。ブラウザによって対応している音 声フォーマットが違うので、mp3 形式と wav 形式のものを読み込んでいる。音声はクイズ の際に効果音として再生されるので、再生までに間があってはならない。そのため、preload アトリビュートの値を auto として事前に読み込んでいる[図 4.5]。 図 4.5 音 声 フ ァ イ ル 読 み 込 み 4.4 シミュレーションページ 物理シミュレーション部分は負荷が大きいため、page49ball.html として、juuryoku.html とは別にした。しかし、HTML ファイル間で JavaScript などの値の受け渡しができないた め、一旦、物理シミュレーションのページに移動すると、そこから元の HTML ファイル内 の任意のページに移動することができない。これを解決するため、物理シミュレーション の HTML ファイルからの呼び出しの際に、アドレス後尾に?32 のように?と任意のページ番 号を付け足し、物理シミュレーション以外のページが配置されている受け取り側の HTML ファイルで JavaScript を実行し、 アドレスをロケーションサーチして解析し、?以降に記 述されている番号を取り出し、任意のページに移動できるようにした。 シミュレーションのアニメーションは JavaScript の setTimeout を使って 4ms 毎に計算 し、結果を CSS の値に反映させることで表現している。重力加速度の値を操作するスライ ドバーは jQuery という JavaScript ライブラリを利用した。 図 4.6 ペ ー ジ 番 号 受 け 渡 し (HTM L) 18 図 4.7 ペ ー ジ 番 号 受 取 り (JavaScript) 4.5 メモページ メモページに関しては、メモ内容を保存する必要があるため、JSP を使用している。 index.jsp が最初のページである。ここでユーザ名とパスワードを入力してログインする。 登録していない場合は、新規登録のボタンから、new_account.jsp でアカウントの作成を行 い、registration.jsp で登録する。ユーザ名とパスワードは login.csv に登録される。top.jsp でメモを入力できる。保存のボタンを押すと、save_memo.jsp で登録される。メモ内容は 各ユーザ毎に作られる csv ファイルに書き込まれる。 図 4.8 メ モ ペ ー ジ 概 要 19 5. 動作テスト 5.1 テスト環境 以下に挙げる環境で動作テストした。 表 5.1 端末 OS ブラウザ 通信環境 ラップトップ Windows Vista Firefox 9 Wi-Fi Firefox 2 Google Chrome 16 Internet Explorer 9 Internet Explorer 8 デスクトップ Windows 7 Firefox 9 Wi-Fi Google Chrome16 Internet Explorer 9 デスクトップ M ac OS X Google Chrome 16 Wi-Fi Firefox 9 Safari 5 iPad iOS 4 Safari 4 Wi-Fi スマートフォン Android2.3 Android2.3 3G 5.2 テスト結果 Windows Vista 上の Firefox 2、 Internet Explorer 8 の２つを除いたすべての環境で、 アプリケーションのすべての機能が正常に動作した。ただし、スマートフォン上では、ペ ージの読み込み、クイズ選択の入力に対する反応、物理シミュレーション、それぞれにお いて明らかな遅れが確認された。Firefox 2 に関しては、div 要素に適用した Mouse Events に対する反応がなかった。Internet Explorer 8 に関しては、透過 PNG の表示が正常に行 われず、音声の再生も行われなかった。 スマートフォンのポートレート表示でもレイアウトの崩れはなく、ボタンも意図したも 20 のを選択できたが、全体として小さく表示され見辛かった[図 5.1]。横位置にするとやや見 易くなった[図 5.2]。 図 5.1 ス マ ー ト フ ォ ン に お け る ポ ー ト レ ー ト 表 示 図 5.2 ス マ ー ト フ ォ ン に お け る 横 位 置 表 示 21 6. 評価 情報科学部の学生７人にデスクトップパソコン上で、本アプリケーションを実際に使用 してもらい、評価をしてもらった。 良い点 • 見た目がすっきりしていて分かりやすい。 • ページを移動することなく、辞書がポップアップ画面で見られるのが便利。 • ページ移動のアニメーション。 • クイズの解答の際の音声。 良くない点 • ナビゲーションバーに気付かなかった。 • ボールをどうやって動かすかがすぐに分からなかった。 • 読み込みが遅い。 7. 考察 動作テストにおいて、正常に動作しなかった Firefox 2、Internet Explorer 8 はともに旧 バージョンであり、それぞれの最新バージョンである Firefox 9、Internet Explorer 9 では 正常に動作した。また、 Microsoft 社は Internet Explorer の自動アップデートを 2012 年 1 月から開始するなどしているため、今後このようなバージョンの問題は減っていくと 考えられる。 したがって、HTML5、CSS、JavaScript、JSP を使えば、音声、動画、入力に対する動 的な出力、SNS 機能、クラウド機能等の情報技術をすべて利用でき、それらは、パソコン、 タブレット、スマートフォンそれぞれの端末で利用出来る。 しかし、端末によって、入力方法、出力画面、処理速度等に違いがあるため、やはり、 個々に合わせて調整した方が良いと言える。例えば、タッチパネル端末では、マウスオー バーができない、画面が小さい、処理速度が遅い等の特徴がある。そのため、タッチパネ ル端末では、レイアウトを変える、負荷がかかりにくいページ構成にする等の対応をした 方が良い。とはいえ、ネイティブアプリケーションのように開発言語が違うことはないし、 一から作り直す必要もない。 HTML、CSS、JavaScript は Web 標準の技術で、利用数も多いため、開発しやすい。j Query などのライブラリやプラグインも多数あるため、それらを利用すれば、開発効率も 22 上げることができる。 評価として、操作方法がすぐに分からなかったという意見がいくつかあったので、ボタ ンを見やすくするなどの工夫が必要であると感じた。とはいえ、評価者はヘルプページを 見ていない。操作方法はヘルプページに記載されているので、ヘルプページを見てもらう 工夫をするという面からも改善できるだろう。 また、スマートフォンなどで動作が遅いなどという問題があったので、ページを区切る など改善する必要がある。 このアプリケーションでは、音声、動画、入力に対する動的な出力、SNS 機能、クラウ ド機能等に対して、基本的なものを提案したが、それぞれの機能を拡張することで、発展 させることができる。 例えば、クイズ機能はユーザ機能と連携して、クイズの結果を記録したり、学習時間を 記録すれば、データを集めて学習に役立てることができる。シミュレーション機能に関し ては、斜方投射など複雑なものに発展させたり、人口増加のシミュレーションなど他の教 科でも応用出来る。コメント機能に関しては、文字だけでなく、リアルタイムのビデオチ ャットなどあれば、より多くの情報をやり取りできる。メモ機能に関しては、文字だけで なく、絵や音声なども利用出来るようにすると、より分かりやすくなる。また、Open ID や OAuth を利用すれば、ユーザ登録の手間を省くことができる。 8. 結論 本研究では、情報技術をどのように活用すれば学習の分野へ活かせるかを考察し、それ に基づいて実際に物理学習用ウェブアプリケーションを開発した。 音声、動画、入力に対する動的な出力、SNS 機能、クラウド機能が情報技術の利点と考 え、それらを利用したアプリケーションを開発した。Web 標準の技術である HTML、CSS、 JavaScript のみを利用し、パソコン、タブレット、スマートフォンのすべての端末で利用 出来ることを目指した。 クイズ機能、辞書機能、重力シミュレーション機能、アニメーションコンテンツの利用、 コメント機能、メモ機能、によって、先に挙げた情報技術の利点を利用した。動作テスト の結果、それらの機能は、パソコン、タブレット、スマートフォンのすべての端末で動作 した。 インターネットの通信速度が上がり、タブレット端末やスマートフォンが登場した現在 では、HTML、CSS、JavaScript を利用したウェブアプリケーションは有効的であると考 えられる。 23 9. 謝辞 本研究及び論文作成にあたりご指導くださいました佐々木アラム幸子教授に深く感謝致 します。また、ご協力頂きました研究室の方々にもお礼を申し上げます。 10. 参考文献・URL [1] 総務省 平成 22 年 通信利用動向調査 http://www.soumu.go.jp/johotsusintokei/statistics/pdf/HR201000_001.pdf [2] 放送大学学園 平成 23 年 ICT 活用教育の推進に関する調査研究 http://www.code.ouj.ac.jp/wp-content/uploads/ICT-2011.pdf [3] NASA http://www.nasa.gov/home/index.html [4] 壁紙宇宙館 http://powerforce.moo.jp/index.html [5] W3C http://www.w3.org/ [6] 3 ステップでしっかり学ぶ JavaScript 入門 大津真, 株式会社技術評論社, 2010 年 7 月 1 日 [7] Web デザイン表現技法の新スタンダード エムディエヌコーポレーション, 2011 年２月１日 [8] jQuery http://jqueryui.com/ [9] fancybox http://fancybox.net/ [10] 大江祐美子 政治学習ソフトウェア『政治を学ぼう』 , 法政大学情報科学部卒業論文, 2010 http://ciscgi.k.hosei.ac.jp/graduation/09_10_Theses/10_thesis_06k1005_oe.pdf 24