MeSH日記: 2010/02

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要素を取り出すことができます。DOM要素をjQueryオブジェクトに変換するためには、$( )で括れば良いです。以下の例では、No.1と書かれている箇所をjQueryを使って赤くします。

cssメソッドは、CSSに相当する操作を行います。色を変えたり、サイズを変えたり、非表示にしたりと、CSSで指定できるパラメータは（たぶん）全て記述できます。

MeSHのコンセプト(3)

MeSHの目指したもの

元々は自学自習用のe-Learningのために、様々な技術を経てたどり着いたのが、Webブラウザ上で授業を行うという仕組みです。これにより、授業で使用するコンテンツと自学自習で使用するコンテンツを統一できます。また、教員の行った操作を逐一サーバに転送することにより、教員の動画像と同期して自学自習用コンテンツを動作させるための操作情報の取得が可能となります。

さらに、教員の操作情報をサーバに転送する機能を応用すると、演習室のような環境で、学生の使用しているコンピュータ上に、プレゼンデータやシミュレータを提示することが可能となります。単に提示するだけならば良くある（映像を使った）授業支援システムと同じです。しかし、MeSHで取り入れた操作情報のみをやり取りする方法では、学生の使用しているコンピュータ上でも実際にシミュレータが動作することになります。そのため、教員がシミュレータを操作しながら一通り説明した後に、「それでは、各自操作してみてください」と、即座に学生に実験環境を提供することが可能です。

実験の補助としてのMeSH

コンセプトの説明の冒頭でも述べましたが、理工系大学の教育には、実験・実習が欠かせません。しかし、実際に実験器具に触れる機会というのは、それほど多くありません。学生数に対して実験機材が少ない場合や、管理の都合上利用できる時間が限られることなどが原因です。

もちろん、実際に実験装置に触れることは重要です。しかし、実験装置の前に立ち、いきなり操作しろと言われても戸惑うのは当然です。そんなときに、模擬的とは言え経験があれば、操作に対する熟練に要する時間は節約できます。その分、実験に費やす時間が増えることでしょう。また、MeSHであれば、シミュレータの提供にとどまらず、教員の解説や模範操作まで提供可能です。

理論確認のためのMeSH

複雑な実験器具だけではありません。書籍などで解説されている理論を、その場で確かめてみたい、とか、何らかの理論から導かれたグラフを、パラメータを変えて変化を見たい、などの願望に対して、これまでなら自分で計算して確認することしかできませんでした。もちろん自分で計算することは重要です。しかし、全ての理論について計算を行っていたら、とてもじゃないですが時間が足りません。そのような場合にシミュレータを用いることで、体験的に理論を確認できます。単純な疑問をその場で解消することで、理論の深い部分に目を向けることが可能となります。このように、深い部分に到達するマイルストーンとして、分からない箇所を気づかせるということが重要だと考えます。ここで少々脱線して、経験を踏まえた与太話をします。

実は、授業で教えた内容を学生に確認すると、「分かりません。」「どこが分からない？」「全部分かりません」と言った会話が繰り返されます。全部分からない学生に深く話を聞くと、その授業を履修する前提となっている知識が不足していることに気づかされます。しかし、さらに深く話を聞くと、実は前提となっている知識が身についているにも関わらず、対象としている内容に結び付けることができていないことが多いです。

つまり、こう言うことです。
理論A: その授業で教えたい理論
理論B: 理論Aの基になっている理論
理論C: 理論Bの基になっている、ものすごく基本的なことので説明しない理論

説明内容：
「Cを基にしてBが成り立ちます。その条件・式の展開・応用範囲はこれこれこう言うことです。さらにBを深く見ていくと、これこれこう言う場合にはAということになります。」

授業終了後：
私：「今日の所は簡単だったから分かったでしょ？」
学生：「分かりません。」
私：「Bは分かる？」
学生：「分かりません。」
私：「Cは分かる？」
学生：「分かりません。」
私：「Cって、○○の授業でやったと思うけど、××ってことだよ。（などと数分にわたって説明）」
学生：「あぁ、それなら分かります。」
私：「そうそう、それを応用するとBなんだよ。さらに応用するとAなんだよ。（などと数分にわたって説明）」
学生：「なぁんだ。最初からそうやって説明してくださいよ。」

もちろん、こんな簡単に話が進みませんが、雰囲気だけは伝わったと思います。教員側・学生側問わず、誰でも一度ぐらいはこのような経験があるのではないでしょうか？ここで、「ゆとり世代」などと一言で片付けては、教育界に未来はないと思います。この学生に何が不足していたのか？と考えた結果、教えられたことに関してイメージをふくらませて「把握」することができなかったのだと思います。しかし、試験やレポート課題になっているため、とにかく丸暗記してやり過ごし、頭の片隅には残っているけど、同じ聞き方をしないとその記憶がよみがえらない、という状態です。例えが合っているか分かりませんが、歴史の授業で試験に出るからと言って、年号と起こったことを丸暗記するのと同じ状態です。

本来なら、授業で教わったことが、より広く・深く結びついて、やっと楽しくなるのに、その可能性を自ら閉じている状態です。これでは学生だけでなく教員も不幸です。そんなときにシミュレータを使って、基礎理論の段階から把握していれば、その先の講義でも興味を持って聞くことができるのではないでしょうか？もちろん、シミュレータを自分で操作することによって、好奇心が満たされるモノと考えています。

そのような場を提供するのがMeSHです。このように書くと、「e-Learningがあれば授業が不要になるの？」と勘違いされるので書いておきますが、MeSHの主体はあくまで対面式の授業です。授業を主軸に据えて、その内容を体験的に学習する場、授業内容を繰り返し学習する場がMeSHの目指す所です。

いわゆる学習サイクルは、以下のように定義されています。

対面授業
自学自習
質疑応答

ここにMeSHを取り込むことにより、対面授業を補助し、心ゆくまで授業内容を確認しながらシミュレータで仮想実験でき、それでも分からない箇所は（分からない箇所がはっきりしているので）質問をしやすい、という形でサイクルがうまく回ります。

長くなりましたので、本日はここまでにしておきます。

2010年2月5日金曜日

MeSHのコンセプト(2)

マルチメディア教材の配布

授業にマルチメディア教材を取り入れることで教育効果が上がることは、前回の記事で説明しました。当然、学生からは「授業で使っている教材を使って勉強したい」などの要望が寄せられてきます。それならば、と、さしあたってシミュレータ教材をWebサーバに置いてみました。ところが、寄せられる声は

知らない拡張子で、使い方が分からない　→　圧縮ファイルです
展開はできたけど、エラーで実行できない　→　Runtime Libraryがないのでインストールしてください
Runtime Libraryってどこにありますか？どれを入れればよいですか？　→　このURLからダウンロードしてください
プログラムは動いたけど、これ何？　→　.....

などなど、情報系の大学生らしからぬ声が多数寄せられました。

圧縮ファイルの展開とかRuntime Libraryについて、マニュアルやFAQを充実させてもラチがあかないので、その辺は割り切って、教材の説明が必要だと感じました。また、当初はプレゼンテーションのデータも配布していなかったので、第2弾として、シミュレータ教材＋プレゼンテーションデータ＋講義映像を配布しました。と言っても、それらのデータを別々に置いて、「第○週」というリンクを掛けただけです。予想通り、「プレゼンのデータが開けません」との声が寄せられました。もちろん、「要PowerPoint」と明記したり、PowerPointViewerの配布ページへのリンクも付けておいたのですが。

ここまで来たら、とにかく使ってもらおうと本腰を入れて研究を始めました。まずは、Webブラウザ上で動かせば、ライブラリとかViewerの問題は解決するだろうと思い、JavaとかFlashに注目しました。とは言っても、シミュレータ教材を含むマルチメディア教材をWebコンテンツとして成立させるなんて、夢のまた夢です。今でこそ、HTML5の旗の下に、何でもHTML+JavaScript+CSSで片付きそうな勢いですが、当時はJavaScriptを本気で実用化させることすら無理と言われていた時代です。

そしてFlashへ

第3弾として、プレゼンデータの集まりをFlash上で成立させることを行いました。プレゼンデータはアニメーションを多用し、1ページ内の文字数を多くしつつ、今説明している箇所を分かりやすくしていました。ですので、まずはFlash上でそれらのアニメーションを再現し、「次」ボタンにより学習者が手動で読み進めるような形式にしました。実際にこの作業を担当した学生は、Flashならではのアニメーションを多用して、「かっこよく」したかったようですが、あまり派手にすると視認性が落ちるのは目に見えていたので、とにかく元データを再現して貰うように話し合いました。ですが、派手なアニメーションが多数残っていたのは彼の意地だったものと思います。参考までに、使用したFlashはFlash MXかその前だったと記憶しています。アニメーションは、図形の変形を使ってタイムラインに従って高さがほぼ0の状態からすーっと大きくなるように手作業で付けていました。作業自体は地味です。地味ですが延々と続きます。だいたい一科目のスライド数が150枚程度だったと記憶しています。

プレゼンデータが何とかなりそうだったので、第3弾の続きとして、シミュレータ教材をJavaに移植する作業に取りかかりました。とは言っても、VB6でお世話になった仮想座標やTimerなどがJavaには存在しません。この辺は、実際に担当した学生達が意地になって移植しました。移植したソースプログラムはJava Applet特有のpaintやinitなどのせいで処理が散乱している上、仮想座標を物理座標に変換するための式が所々に散らばり、かつ、Timerの代わりに使ったThreadのせいで、その後のメンテナンスが絶望的な状態でした。現に、VB6版のシミュレータは、たいていバージョンアップしていますが、Java版のバージョンアップは見送られた状態です。とは言え、これらを配布したところ、ライブラリなどに関する質問は激減しました。だいたい一科目のシミュレータ数が30程度だったと記憶しています。

さらに第3弾の続きとして、マルチメディア教材の説明を配布することになりました。これについては、教員の空き時間の関係で授業そのものを録画することと、圧縮にはMPEG-1を用いることが決まりました。MPEG-1を選択した理由ですが、当時は様々な動画圧縮技術が出てきた時代ですが、そのなかでもプラットフォームを問わず、編集・圧縮・再生環境が安定していて、当時の貧弱な家庭ネットワークにも対応できるように選びました。学生がダウンロードするにしても、ネットワーク帯域を考えるとちょっと大きなサイズだったと思います。とは言え、シミュレータ＋プレゼン＋説明が揃いました。学生からの声は、案の定、「手で動かすのが面倒」「動画データがでかい」「ウィンドウが重なりすぎて混乱する」などでした。ウィンドウの件については、確かに当時の狭い画面で、講義映像とFlash、Javaを開くのは無謀でした。肯定的な意見としては、概ね「このような教材が無いよりは良い」という程度でした。

プレゼンデータと講義映像の統合

そこで第4弾として、ブラウザ上でシミュレータとプレゼンと講義映像を統合することに挑戦しました。さらに欲張って、プレゼンが講義映像に同期して進むとか、先生の説明している場所が分かるようにレーザーポインタを再現するとか、今思えば無謀きわまりない仕様で作成することになりました。作業手順はこんな感じです。

PowerPointのデータを、グループ毎にまとめてコピーし
Flash側でタイムラインを考慮しながらペースト。
それぞれのアニメーションが終わるところで一時停止するようActionScriptを記述
授業を撮影（教員＋スクリーン）→編集（スライド1枚ごとに動画像を切り分ける）→それぞれ圧縮。
タイムラインに講義映像をペースト
講義映像に合わせてプレゼンデータのタイムラインを引き延ばす
プレゼンのアニメーションタイミングを調整
スクリーンを撮影したビデオを見ながら手作業でレーザーポインタの光をコンテンツ上に再現
目次を作成してリンクを掛ける

うーん、やはり手間が掛かりすぎる。とは言え、学習者からは概ね良い評価を貰いました。ただし、このやり方ではシミュレータを統合することはできません。当時の標準的なe-Learningシステムでは、プレゼンが単なる静止画になっているものが多かったので、それと比べてアニメーションが付いていることとレーザポインタが再現されていることが利点でしたが、さらなる発展が必要です。

統合型教材誕生

第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などの技術を用いて開発します。これによって、教員の操作データを逐次サーバに送り、保存することが可能となりました。さらに、演習室のようにパソコンが並んでいる環境では、サーバに送られた操作データを学生用パソコンにリダイレクトすることで、目前のスクリーンで講義を受けることができます。もちろん、インターネットを通じた別の場所でも受講できるでしょう。さらに、サーバに蓄積された操作データを元に、自学自習用コンテンツに転用することも容易になります。演習室などでの利用形態を下図に示します。

MeSHのコンセプト(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だったかもしれません。ノートパソコンのスペックは、それよりも数段劣りますし、プロジェクタも部屋を真っ暗にしなければならない時代でした。パソコン、プロジェクタ、スピーカを担いで授業を行いました。その甲斐あって、学生からは分かりやすいとの意見を貰いました。期末試験の結果も、特に論述問題に関して大幅に向上しました。ただ、計算問題については、学生自ら手を動かして確認することの重要性を確認しました。

マルチメディア教材は、以下の特徴を持ちます。

分かりにくい理論の説明に役に立つ
シミュレータ教材や他のメディアを統合したマルチメディア教材
見せてあげることで現象を把握できる
学習者が手を動かすことは重要

長くなりましたので、今回はここまでにしておきます。

2010年2月4日木曜日

JavaScriptとC#の連携方法(1)

シミュレータ教材の操作情報をサーバに送ったり、送られてきた操作情報に従ってシミュレータ教材の動作を制御することが必要となります。その方法を簡単なサンプルを使って紹介します。まずはC#を使って、HTMLのDOM要素にアクセスしましょう。

以下のようなHTMLを想定してください。

C#からDOMの取得

まず、C#からのDOM制御のやり方です。HTMLの中の特定の箇所の内容を取得します。id="test1"で指定された「シルバーライトのテスト」を取得し、変数strに代入します。

後は、strを表示するなり加工するなり、好きに使ってください。

C#からDOMを制御

次の例では、DOMを制御して文字列をセットします。上のプログラムで取得したstrをid="test2"に納めます。

2010年2月3日水曜日

ソースコード表示機能のテスト

最近、ソースコードがきれいに掲載されているサイトが多いです。それらに刺激されて、どうやったらきれいになるのか、試してみます。

ソースコードを整形するツール（と言うかJavaScriptとCSS）を見つけようとしても、数が多すぎてよく分からないのが実態です。そんな中、SyntaxHighlighterに辿り着きました。（URL）

まずは、私のよく使う（または使うであろう）言語・フォーマット達が含まれているかチェックです。割と沢山対応していて、Ruby, VisualBasic, JavaScript, C#, Java, PlainText, HTML, CSSなどたいがいのものはオッケーです。GoogleのGoogle-Code-Prettifyというツールもあるのですが、Rubyのサポートがないのと、表示がイマイチなので使いません。

使い方も、headタグでJavaScriptを読み込んで、表示したい箇所でちょっとだけJavaScriptを書くだけです。嬉しいことに、作者のWebページでホスティング（って言葉で正しいのかな？）してくれてます。

まずはheadタグの中に以下の内容を書きます。

その後、ソースコードを埋め込みたい箇所に以下のように書きます。

別の書き方はこちら

<pre class="brush: html">
ソースコード
</pre>

いずれも、brush: htmlの箇所を書き換えると様々な言語に対応できます。ただし！HTMLのタグが入っていると、（少なくともBloggerでは）エラーになってしまうので、この際ですから>や<に書き換えてしまいましょう。これらの対応を施しても、ソースコードの右上付近に出てくるコピーツールでコピーすると、きちんとした括弧に直してくれます。

その変換は、クリボウさんのこちらの記事をご覧ください。このような便利なツールを公開していただき、ありがとうございます。

MeSH日記始めました

現在、MeSHフレームワークを開発しています。
MeSHとは、Multimedia e-Learning based on Simulator for Higher educationの略です。
簡単に言うと，シミュレータ教材を活用するためのe-Learningフレームワークです。

このブログでは、
・MeSHとは何か？
・開発の方向性
・使えそうな技術のピックアップおよび簡単なコード
などを掲載していきます。

登録: 投稿 (Atom)