educationの略です。シミュレータをベースとしたe-Learning環境構築のためのフレームワークを開発しています。2010年2月9日火曜日JavaScriptとjQueryのメモ検索すれば済む話ですが、あまりに何回も同じことを検索するのに疲れたので、メモとしてまとめておきます。生のJavaScriptとjQueryすでに有名な話ですが、JavaScriptの実装はブラウザによって若干の誤差があります。有名なのがInternetExplorerですが、Microsoft社が実験的に先行して拡張したにも関わらず後続が異なる書式を採用したものもあるので、一概に責めることはできません。したら、他のブラウザで同様の技術が実装されなかった可能性もあります。言っても、いわゆるWeb屋さんから見ると、IEとそれ以外で(実際にはもっと細かく)処理を分けるのは、やりたくないけどやらなければならない仕事であることは、想像に難くないです。言うことが嫌いな人たちが、関数化(またはクラス化)された処理内でブラウザ毎に処理を分けるノウハウを蓄積してきました。ブラウザ毎に処理を分ける必要がなくなり、プログラム効率が向上したのを良いことに、さらに便利な処理を関数化(またはクラス化)して、より複雑な処理の記述に耐えるべく進化してきました。ありがたいことに、このような関数(またはクラス)がライブラリとして公開されています。有名なところでは、jQueryや、prototype.js、YUI、Dojoなどが存在します。これらのライブラリを活用することによって、生のJavaScriptでは難しい、またはブラウザ毎に処理を分けなければならない部分のプログラムを省略し、高度なプログラムを作成することができます。JQueryを使う上に挙げたように、いくつものライブラリが存在します。その中で、ここではjQueryを取り上げます。jQueryを使うための宣言を行います。通常はjQueryをダウンロードして、htmlファイルと同じディレクトリに置くのですが、楽な方法としてGoogleがホストしているものを使います。headタグの中に以下のように記述します。google.loadメソッドの引数は、順にライブラリ名、バージョンです。他にも様々なライブラリがホストされているので、興味のある方はこちらをご覧ください。次に、JavaScriptのプログラムを置く場所ですが、上記の1行目のような記述方法で、外部ファイルを読み込むのが良いとされています。お試しの場合は、わざわざ別ファイルを作成するのも面倒なので、htmlファイルの中に記述できます。言えば、FireBugやChromeのJavaScriptコンソールを使ってもお試しできますが、後に残るようにすると、何かの時に役立ちます。それでは、jQueryを使って、JavaScriptのコードを書いてみましょう。2行目はと同じ意味です。DOMの取得さて、jQueryによって、まずプログラマが楽をできるのがDOM要素の取得です。DOMをいい加減に解説すると、「HTMLで書かれた文章から特定の内容を取り出したり、内容を変更する際に場所を指定する方法」です。「htmlの中のbodyの中のformの中の3番目のinput」のように階層化された構造を辿ることで、内容を取得できます。これは面倒なので、通常は「id」や「class」などを目印に指定することになります。以下のようなhtmlがあるとします。このとき、「No.1」と書かれている箇所の指定方法には、以下のようなやり方があります。上記の例は全てidによる指定でしたが、タグによる指定も行えます。この場合、結果は配列で返されます。このようにすると、jQueryオブジェクトからDOM要素を取り出すことができます。以下の例では、No.1と書かれている箇所をjQueryを使って赤くします。cssメソッドは、CSSに相当する操作を行います。色を変えたり、サイズを変えたり、非表示にしたりと、CSSで指定できるパラメータは(たぶん)全て記述できます。JavaScriptMeSHのコンセプト(3)MeSHの目指したもの元々は自学自習用のe-Learningのために、様々な技術を経てたどり着いたのが、Webブラウザ上で授業を行うという仕組みです。これにより、授業で使用するコンテンツと自学自習で使用するコンテンツを統一できます。教員の行った操作を逐一サーバに転送することにより、教員の動画像と同期して自学自習用コンテンツを動作させるための操作情報の取得が可能となります。教員の操作情報をサーバに転送する機能を応用すると、演習室のような環境で、学生の使用しているコンピュータ上に、プレゼンデータやシミュレータを提示することが可能となります。提示するだけならば良くある(映像を使った)授業支援システムと同じです。MeSHで取り入れた操作情報のみをやり取りする方法では、学生の使用しているコンピュータ上でも実際にシミュレータが動作することになります。そのため、教員がシミュレータを操作しながら一通り説明した後に、「それでは、各自操作してみてください」と、即座に学生に実験環境を提供することが可能です。実験の補助としてのMeSHコンセプトの説明の冒頭でも述べましたが、理工系大学の教育には、実験・実習が欠かせません。実際に実験器具に触れる機会というのは、それほど多くありません。学生数に対して実験機材が少ない場合や、管理の都合上利用できる時間が限られることなどが原因です。実際に実験装置に触れることは重要です。実験装置の前に立ち、いきなり操作しろと言われても戸惑うのは当然です。そんなときに、模擬的とは言え経験があれば、操作に対する熟練に要する時間は節約できます。その分、実験に費やす時間が増えることでしょう。MeSHであれば、シミュレータの提供にとどまらず、教員の解説や模範操作まで提供可能です。理論確認のためのMeSH複雑な実験器具だけではありません。書籍などで解説されている理論を、その場で確かめてみたい、とか、何らかの理論から導かれたグラフを、パラメータを変えて変化を見たい、などの願望に対して、これまでなら自分で計算して確認することしかできませんでした。自分で計算することは重要です。全ての理論について計算を行っていたら、とてもじゃないですが時間が足りません。そのような場合にシミュレータを用いることで、体験的に理論を確認できます。単純な疑問をその場で解消することで、理論の深い部分に目を向けることが可能となります。このように、深い部分に到達するマイルストーンとして、分からない箇所を気づかせるということが重要だと考えます。ここで少々脱線して、経験を踏まえた与太話をします。実は、授業で教えた内容を学生に確認すると、「分かりません。」「どこが分からない?」「全部分かりません」と言った会話が繰り返されます。全部分からない学生に深く話を聞くと、その授業を履修する前提となっている知識が不足していることに気づかされます。深く話を聞くと、実は前提となっている知識が身についているにも関わらず、対象としている内容に結び付けることができていないことが多いです。説明内容:「Cを基にしてBが成り立ちます。その条件・式の展開・応用範囲はこれこれこう言うことです。Bを深く見ていくと、これこれこう言う場合にはAということになります。学生:「分かりません。学生:「分かりません。学生:「分かりません。私:「Cって、○○の授業でやったと思うけど、××ってことだよ。学生:「あぁ、それなら分かります。私:「そうそう、それを応用するとBなんだよ。応用するとAなんだよ。最初からそうやって説明してくださいよ。わず、誰でも一度ぐらいはこのような経験があるのではないでしょうか?ここで、「ゆとり世代」などと一言で片付けては、教育界に未来はないと思います。この学生に何が不足していたのか?と考えた結果、教えられたことに関してイメージをふくらませて「把握」することができなかったのだと思います。試験やレポート課題になっているため、とにかく丸暗記してやり過ごし、頭の片隅には残っているけど、同じ聞き方をしないとその記憶がよみがえらない、という状態です。例えが合っているか分かりませんが、歴史の授業で試験に出るからと言って、年号と起こったことを丸暗記するのと同じ状態です。本来なら、授業で教わったことが、より広く・深く結びついて、やっと楽しくなるのに、その可能性を自ら閉じている状態です。これでは学生だけでなく教員も不幸です。そんなときにシミュレータを使って、基礎理論の段階から把握していれば、その先の講義でも興味を持って聞くことができるのではないでしょうか?もちろん、シミュレータを自分で操作することによって、好奇心が満たされるモノと考えています。そのような場を提供するのがMeSHです。このように書くと、「e-Learningがあれば授業が不要になるの?」と勘違いされるので書いておきますが、MeSHの主体はあくまで対面式の授業です。授業を主軸に据えて、その内容を体験的に学習する場、授業内容を繰り返し学習する場がMeSHの目指す所です。ここにMeSHを取り込むことにより、対面授業を補助し、心ゆくまで授業内容を確認しながらシミュレータで仮想実験でき、それでも分からない箇所は(分からない箇所がはっきりしているので)質問をしやすい、という形でサイクルがうまく回ります。長くなりましたので、本日はここまでにしておきます。授業にマルチメディア教材を取り入れることで教育効果が上がることは、前回の記事で説明しました。学生からは「授業で使っている教材を使って勉強したい」などの要望が寄せられてきます。それならば、と、さしあたってシミュレータ教材をWebサーバに置いてみました。.....などなど、情報系の大学生らしからぬ声が多数寄せられました。Libraryについて、マニュアルやFAQを充実させてもラチがあかないので、その辺は割り切って、教材の説明が必要だと感じました。当初はプレゼンテーションのデータも配布していなかったので、第2弾として、シミュレータ教材+プレゼンテーションデータ+講義映像を配布しました。言っても、それらのデータを別々に置いて、「第○週」というリンクを掛けただけです。予想通り、「プレゼンのデータが開けません」との声が寄せられました。「要PowerPoint」と明記したり、PowerPointViewerの配布ページへのリンクも付けておいたのですが。ここまで来たら、とにかく使ってもらおうと本腰を入れて研究を始めました。Webブラウザ上で動かせば、ライブラリとかViewerの問題は解決するだろうと思い、JavaとかFlashに注目しました。言っても、シミュレータ教材を含むマルチメディア教材をWebコンテンツとして成立させるなんて、夢のまた夢です。今でこそ、HTML5の旗の下に、何でもHTML+JavaScript+CSSで片付きそうな勢いですが、当時はJavaScriptを本気で実用化させることすら無理と言われていた時代です。Flashへ第3弾として、プレゼンデータの集まりをFlash上で成立させることを行いました。プレゼンデータはアニメーションを多用し、1ページ内の文字数を多くしつつ、今説明している箇所を分かりやすくしていました。Flash上でそれらのアニメーションを再現し、「次」ボタンにより学習者が手動で読み進めるような形式にしました。実際にこの作業を担当した学生は、Flashならではのアニメーションを多用して、「かっこよく」したかったようですが、あまり派手にすると視認性が落ちるのは目に見えていたので、とにかく元データを再現して貰うように話し合いました。派手なアニメーションが多数残っていたのは彼の意地だったものと思います。MXかその前だったと記憶しています。アニメーションは、図形の変形を使ってタイムラインに従って高さがほぼ0の状態からすーっと大きくなるように手作業で付けていました。地味ですが延々と続きます。だいたい一科目のスライド数が150枚程度だったと記憶しています。プレゼンデータが何とかなりそうだったので、第3弾の続きとして、シミュレータ教材をJavaに移植する作業に取りかかりました。言っても、VB6でお世話になった仮想座標やTimerなどがJavaには存在しません。この辺は、実際に担当した学生達が意地になって移植しました。Applet特有のpaintやinitなどのせいで処理が散乱している上、仮想座標を物理座標に変換するための式が所々に散らばり、かつ、Timerの代わりに使ったThreadのせいで、その後のメンテナンスが絶望的な状態でした。VB6版のシミュレータは、たいていバージョンアップしていますが、Java版のバージョンアップは見送られた状態です。言え、これらを配布したところ、ライブラリなどに関する質問は激減しました。だいたい一科目のシミュレータ数が30程度だったと記憶しています。第3弾の続きとして、マルチメディア教材の説明を配布することになりました。これについては、教員の空き時間の関係で授業そのものを録画することと、圧縮にはMPEG-1を用いることが決まりました。安定していて、当時の貧弱な家庭ネットワークにも対応できるように選びました。学生がダウンロードするにしても、ネットワーク帯域を考えるとちょっと大きなサイズだったと思います。言え、シミュレータ+プレゼン+説明が揃いました。学生からの声は、案の定、「手で動かすのが面倒」「動画データがでかい」「ウィンドウが重なりすぎて混乱する」などでした。ウィンドウの件については、確かに当時の狭い画面で、講義映像とFlash、Javaを開くのは無謀でした。肯定的な意見としては、概ね「このような教材が無いよりは良い」という程度でした。プレゼンデータと講義映像の統合そこで第4弾として、ブラウザ上でシミュレータとプレゼンと講義映像を統合することに挑戦しました。欲張って、プレゼンが講義映像に同期して進むとか、先生の説明している場所が分かるようにレーザーポインタを再現するとか、今思えば無謀きわまりない仕様で作成することになりました。作業手順はこんな感じです。PowerPointのデータを、グループ毎にまとめてコピーしFlash側でタイムラインを考慮しながらペースト。授業を撮影(教員+スクリーン)→編集(スライド1枚ごとに動画像を切り分ける)→それぞれ圧縮。目次を作成してリンクを掛けるうーん、やはり手間が掛かりすぎる。言え、学習者からは概ね良い評価を貰いました。このやり方ではシミュレータを統合することはできません。5弾は、いよいよシミュレータの統合です。第4弾の開発手法では、とにかく表示内容全てをFlashの支配下に置いていましたが、HTMLをベースとするようコンテンツ全体を見直しました。開発担当の学生が、「HTML内の別々のFlash同士で変数を共有できる(ように見せかける)技術」を発見し、この機能を軸に開発を進めました。具体的には、全体を一つのFlashにするのを辞め、講義映像再生用のFlashコンテンツとプレゼンテーションデータ表示用のFlashコンテンツに分けました。細かいことを言えば、それらの他に目次が付きます。講義映像Flashが再生時間を通知し、それを受けてプレゼンFlashがアニメーションやレーザーポインタを進めていく方式です。ついでに講義映像も別ファイルに置いて、メンテナンス性を向上させました(後になって講義映像の編集ミスが見つかることが多い)。肝心のシミュレータはと言うと、プレゼンFlashの代わりにシミュレータを読み込むようHTMLに記述しています。今でこそ、JavaScriptなどを介してFlash→Javaにデータを送ることができますが、当時はそんなことは夢のまた夢。そのため、シミュレータの動作は、学習者が手作業で進めることになりますし、レーザポインタも再現されません。その代わり、プレゼン時に教員を再生している箇所を、シミュレータ時にはスクリーンの映像に切り替えることにしました。マルチメディア教材を統合することができなので、統合型教材と名付けました。このように苦労した甲斐あって、ほとんどの学生から「このようなコンテンツが必要」との意見を貰いました。実際にシミュレータを自分で操作する(=手を動かす)ことによって、理解度が向上したようです。心ゆくまでシミュレータの操作を楽しんだものと思われます。利用者にとって、いささか問題は残るものの、シミュレータ教材を提供するための技術が確立しました。次に確立しなければならないのが、統合型教材の開発コストを下げることです。どこにコストが掛かっているかというと、プレゼンデータのFlashへの移植(タイミングは考慮せずに、単純にデータをコピー&ペーストするのみ)講義映像の編集(ページ毎の切り出し)シミュレータの移植(VB6→Java)プレゼンデータのタイミング設定レーザーポインタの再現などです。シミュレータ教材についても、教員の操作を再現する仕組みが必要です。動画像データとしてしまうことも検討しましたが、データサイズが膨大になることと、学習者が操作する際の切り替えに時間が掛かること、細かい点ではシミュレータ教材を撮影した動画像データが見づらいことも改善の必要有りです。言えば、シミュレータ教材の開発効率も向上させる必要があります。MeSHへそれらを加味した第6弾がMeSHです。肝心な点は、プレゼンテーションツールとしてPowerPointを捨て、Webブラウザを選択しました。シミュレータもWebブラウザ上で動作させるようにし、Flash、Java、Silverlightなどの技術を用いて開発します。これによって、教員の操作データを逐次サーバに送り、保存することが可能となりました。演習室のようにパソコンが並んでいる環境では、サーバに送られた操作データを学生用パソコンにリダイレクトすることで、目前のスクリーンで講義を受けることができます。インターネットを通じた別の場所でも受講できるでしょう。サーバに蓄積された操作データを元に、自学自習用コンテンツに転用することも容易になります。演習室などでの利用形態を下図に示します。informationMeSHのコンセプト(1)MeSHのコンセプトを一言で言うと、「高等教育のための、シミュレータをベースとしたマルチメディアe-Learning」です。それって何だ?と思われた方は、ちょっと話が長くなりますがおつきあいください。MeSHは、e-Learningと言う単語を使っています。e-Learningと言うと、通常はコンピュータベースの自学自習システムを指しますが、MeSHでは対面授業もサポートします。e-Learningと言う単語の守備範囲は広いです。元々は学習状況(いつ、誰が、何を学習したか?その講義を受けた後の確認試験で何点だったか?)を記録し、教育者が学習者全体の理解度を管理することが目的となっていました。その後、ある学習者がつまづいた箇所を調べたり、授業中にリアルタイムで意見を求めたり、iPdoなどで講義動画像を見せるだけだったり・・・とありとあらゆることがe-Learningの範疇に入ってきました。授業の様子は?と言うと、コンピュータを活用する授業が少しだけ出てきた以外は、何ら全く変わっていません。前述のiPodへの講義動画配信などは、単純に黒板を背にして講義している姿が手元のiPodで見られますが、講義そのものは全く変わっていません。そのようなスタイルであらゆる学問領域をカバーできるか?と聞かれると、「文系科目ならできるかもね」と答えています。言うと、理工系科目の多くは、学習者が自分で手を動かさないと理解できないことが多いからです。数式の展開とか、構造の図式化とかが相当します。分かりやすい例は演習とか実験科目です。授業スタイルの話に戻すと、理工系の科目で取り扱う題材は、教育者は深く理解していても、学習者にとっては未知の領域であることが多いです。教員は授業のやり方などを一切勉強していません。そのため、教員の説明は、得てして飛び飛びになったり、前提となるはずだが説明が抜けていた箇所を後の方で説明したり、学習者の理解レベルが分からなくて説明を飛ばした箇所が重要なポイントになっていたり、教員の頭の中では図・式・対応する現象が溢れていても学習者の頭の中にはクエスチョンマークが飛び交うなんてことが展開されています。全ての先生がこのような授業をやっていると言うつもりはありません。説明の上手な方もいらっしゃいます。私のように説明の下手な教員がうまく説明するために、何かできることはあるでしょうか?ポイントをまとめると、理工系ではただでさえ、理解に時間が掛かるその上、先生の説明していることがよく分からない話していることを見てみたいと考えている学生がいます。学習者に図式化して提示するために黒板があるのですが、直線や円を描くのが難しかったり、動きを見せられなかったり、見えない現象の説明には限界があるし、パっと描くには複雑すぎたり、パラメータの変化による現象の変化を示すには描くのに必要な時間も場所も不足するなどの問題があります。写真やビデオ音声パソコン上でリアルタイムに演算した結果などを用意して、まず学習者に提示することで、理解を促進させることができます。ここで、多くの現象はコンピュータによる解析が進んできています。コンピュータの計算速度はものすごい勢いで向上してきています。現行品として売られている最も低性能のパソコンでも、一昔前のスパコン並みの計算速度を持っています。実際にパソコンに自作のプログラムを入れて、複雑な演算を行わせても、ほぼ一瞬で計算が終了します。このように、理論に従って計算し、図(静止画・動画)、音声として学習者に提示するプログラムをシミュレータ教材として定義しています。上に挙げた「図」「写真やビデオ」「音声」「シミュレータ教材」をプレゼンテーションソフト(具体的にはPowerPoint)で統合した教材をマルチメディア教材として定義しています。マルチメディア教材を授業に取り入れることにより、学習者は説明内容をイメージングできます。教科書や参考書などではページ数の都合で、現象の条件すべてについて図示することができませんが、シミュレータ教材であればパラメータを変えることで、いくらでも図示することができます。「そんなの、Mathematicaを使えばいいんじゃない?」って意見もあるかと思います。Mathematicaを頭から否定することはしませんが、以下の点を問題視しています。(私自身はMathematicaを知らないので、間違いがあればご指摘ください)Mathematicaをコマンドラインで扱えないと何もできないパラメータの変更に時間が掛かるちょっとしたパラメータ変更時などで入力ミスをすると、その後に影響が大きい音を合成できない実行時にMathematicaが必要グラフ化して見栄えが悪い場合に線の色などを変更できないグラフィックに強い(手間が掛からない)言語を使うべく、シミュレータ教材は主にVisualBasic6.0(以下VB6)で書いてきました。VB6は、グラフィックを手軽に扱え、グラフ描画に必要な仮想座標も扱える等の点で良い言語でした。「Fortranは?」って人もいるかもしれませんが、虚数は実数部と虚数部に分けて計算することで回避できますし、行列演算などはループを使えば良いので、演算部分はどんな言語でも大差ないです。演算速度を問題にする人もいるかもしれませんので少し説明すると、例えば演算速度が100倍違ったとします。最近のパソコンはすでに高速なので0.0001[sec]と0.1[sec]の違いしかないかもしれません。授業で扱うような題材は、わかりやすさを優先して理論単純化することが多いので、その程度の計算時間のものが大多数を占めますので、概ね問題ありません。マルチメディア教材を授業に取り入れたのは、1997年からでした。当時のパソコンの性能はと言いますと、CPUが200MHz、RAMが64MB、HDDが数GBぐらいの時期です。VisualBasicも5.0だったかもしれません。ノートパソコンのスペックは、それよりも数段劣りますし、プロジェクタも部屋を真っ暗にしなければならない時代でした。パソコン、プロジェクタ、スピーカを担いで授業を行いました。その甲斐あって、学生からは分かりやすいとの意見を貰いました。期末試験の結果も、特に論述問題に関して大幅に向上しました。計算問題については、学生自ら手を動かして確認することの重要性を確認しました。マルチメディア教材は、以下の特徴を持ちます。長くなりましたので、今回はここまでにしておきます。information2010年2月4日木曜日JavaScriptとC#の連携方法(1)シミュレータ教材の操作情報をサーバに送ったり、送られてきた操作情報に従ってシミュレータ教材の動作を制御することが必要となります。その方法を簡単なサンプルを使って紹介します。C#を使って、HTMLのDOM要素にアクセスしましょう。以下のようなHTMLを想定してください。]]>C#からDOMの取得まず、C#からのDOM制御のやり方です。HTMLの中の特定の箇所の内容を取得します。id="test1"で指定された「シルバーライトのテスト」を取得し、変数strに代入します。後は、strを表示するなり加工するなり、好きに使ってください。次の例では、DOMを制御して文字列をセットします。上のプログラムで取得したstrをid="test2"に納めます。Silverlight2010年2月3日水曜日ソースコード表示機能のテスト最近、ソースコードがきれいに掲載されているサイトが多いです。それらに刺激されて、どうやったらきれいになるのか、試してみます。ソースコードを整形するツール(と言うかJavaScriptとCSS)を見つけようとしても、数が多すぎてよく分からないのが実態です。そんな中、SyntaxHighlighterに辿り着きました。(URL)まずは、私のよく使う(または使うであろう)言語・フォーマット達が含まれているかチェックです。CSSなどたいがいのものはオッケーです。GoogleのGoogle-Code-Prettifyというツールもあるのですが、Rubyのサポートがないのと、表示がイマイチなので使いません。使い方も、headタグでJavaScriptを読み込んで、表示したい箇所でちょっとだけJavaScriptを書くだけです。嬉しいことに、作者のWebページでホスティング(って言葉で正しいのかな?)してくれてます。headタグの中に以下の内容を書きます。その後、ソースコードを埋め込みたい箇所に以下のように書きます。htmlの箇所を書き換えると様々な言語に対応できます。!HTMLのタグが入っていると、(少なくともBloggerでは)エラーになってしまうので、この際ですから&gt;や&lt;に書き換えてしまいましょう。これらの対応を施しても、ソースコードの右上付近に出てくるコピーツールでコピーすると、きちんとした括弧に直してくれます。その変換は、クリボウさんのこちらの記事をご覧ください。このような便利なツールを公開していただき、ありがとうございます。informationMeSH日記始めました現在、MeSHフレームワークを開発しています。educationの略です。簡単に言うと,シミュレータ教材を活用するためのe-Learningフレームワークです。・使えそうな技術のピックアップおよび簡単なコードなどを掲載していきます。