eラーニング教材のアーキテクチャ

eラーニング教材をつくることが多いです。昔は何千何万という HTML、音声、画像、動画ファイルをCD-ROMに入れたり、ローカルにイントールしたりするのが多かったんですが、ブロードバンドがあたりまえになってからは、ほぼ100%、バックエンドに DB を持つ Web アプリになっちゃいましたね。正直いって、それでかなり保守や運用が楽になりました。開発自体もそうですね。このへん、ぼくは本当に孫正義さんには感謝しなくちゃいけないなと思っています。

フル Flash のを作ったりもしましたが、今はあんまりやりませんね。たとえば語学の教材だと、テキスト弄りをいろいろやりたくなるんですけど、Flash だとやりづらいところがあるんですよね。最近は、むしろ、フル Javascript です。

フル Javascript っていっても、たんにいろんな表示上のエフェクトを Javascript で実装してるっていうだけの話ではないんです。教材をひとつのアプリケーションとしてみて、MVC モデルで考えると、もう M も V も C も 全部 Javascriptっていう。極端にいうと、サーバサイドは、クライアントのリクエストに応じて DB の内容を Json に変換して渡すだけだったり。

たとえば、学習画面を開くまでのシーケンスを追っていくとこうなります。

１、コンテナとなる小さな HTML データがロードされる

２、コンテナに記述された script タグにより、Jemplate データがロードされる

３、コンテナに記述された Javascript により、非同期通信で、Json データがロードされる

４、Json データを Jemplate で定義されたテンプレートにしたがって HTML に変換し、これらを操作するビュー層のクラスのインスタンスを生成する

５、Json データをもとに、モデル層のクラスのインスタンスを生成する

Web アプリが動的に出力しているのは、コンテナと Json データだけ。つまり、Web アプリは、フル Javascript 教材を乗せるための、データストレージつきのプラットフォームってかんじですね。

でも、これ、いかにもめんどくさそうですよね。なんか、いたずらに複雑にしているだけような。でもこれがいいんです。その理由の第一は、やっぱりそれが eラーニング教材だからってところにあると思います。

というのも、学習中、画面遷移のたびにサーバとの通信で一瞬でも待たされるのがかったるい。意欲が殺がれます。1画面ずつ完結性のある内容ならまだいいですけど、試験みたいなのとかで1問ずつ画面遷移するタイプのものだとこれは嫌なもんです。それなら、ひと区切りつくところまでのデータを最初にいっきにロードして、あとは、Javascript で表示のコントロールをやればいいじゃん、と、まずこうなります。

だけど、複数画面分の内容のHTMLデータって結構かさばります。たいがい同じ構造のループですから重複も多い。なんとかならないかっていって、じゃあ、マークアップとデータを完全に分離して、Jemplate と Jsonに分けちゃうかと。

そうするとコンテナとコンテンツも分離できることになって、最初に軽いコンテナを到着させて、コンテンツは後からゆっくり、その間はコンテナ上のプリローダでユーザのご機嫌をうかがうなんてことも、なんだか自然にできるようになっちゃいます。

それから、なにしろ、マークアップとデータが分離していますからね、教材としての表現力はぐんと向上します。まあ、たいていのインタラクションは Jquery があれば簡単にできてしまうんですけど、それでも、同じデータでまったくレイアウト構造の違うビューに切り替えたいとか、あるいは表をソートするとかね、そういうのは DOM でがんばるよりもはるかに簡単にこなせちゃいますよね。

あと、これこそ、eラーニング教材ならではだと思うんですが、後から営業用にローカルでも動くバージョンを用意してくれないかなんて話がよく出てきます。そういうときにも、この作り方にしておくと便利です。もちろん、マークアップとデータが一体になった出力を行っている場合でも対応が不可能だというわけではありませんが、こっちのやり方のほうがリーズナブルでしょう。Jemplate と Json をローカルファイルにしちゃうだけで済みますし、デモ用に機能制限を行ったり、データを適当に間引いたりするのも、テンプレートとデータをいじるだけで簡単にできます。

おそらくブラウザベースのフィードリーダなんかも、こんなかんじで作られているんじゃないかと想像しますが、eラーニング教材を作る上では、このアーキテクチャが今のところベストじゃないかなあと感じています。

難点は、富士通さんのLMSに乗らないことくらいかな。