I1-4

Web API 技術を活用したシラバスシステムのモックアップを用いた設計と実装
Design and Implementation of a Syllabus System Utilizing an Intelligent
Mock-up System Developed by Web API technology
中野 裕司*1,2,3,4, 鶴田 博信*1, 喜多 敏博*3,2,1, 永井 孝幸*1,4,2,3, 杉谷 賢一*1,4,2,3
Hiroshi NAKANO , Hironobu TSURUTA*1, Toshihiro KITA*3,2,1, Takayuki NAGAI*1,2,3,4, Kenichi SUGITANI*1,2,3,4
熊本大学 *1 総合情報統括センター, *2 教授システム学専攻, *3 ｅラーニング推進機構, *4 自然科学研究科*1Center for Management of IT, *2Graduate School Instructional Systems, *3Institute of E-Learning
Development, *4Graduate School of Science and Technology, Kumamoto University
Email: nakano@cc.kumamoto-u.ac.jp*1-4

あらまし：シラバスシステムの設計・開発に際し、企画段階から Web API を用いた完成時に近い外見と動作が可能なモックアップを用い、必要機能の設計等を行い、開発、実装、運営まで継続的に行った。
この手法及び、実際の導入、利用状況等に関して報告する。
キーワード：シラバス, モックアップ, Web API, システム開発

1.

はじめに

大学におけるシラバスは、授業のカタログにとどまらず、到達目標、学修内容、準備学習の内容、成績評価の方法・基準の明示等、国際的に通用するものである必要があり(文部科学省(2011)等)、授業の設計書としても重要と考える。
また、公開情報として Web で発信することも求められ、システム的には Web アプリケーションとして通常実装されるであろう。このような大学教育にとって重要なシステムの設計・開発においては、教育的側面から十分な議論・検討を行う必要がある。
今回我々は、大学のシラバスシステムを設計・開発する機会に、完成システムに近い外見と操作性が得られるモックアップを用いて検討を行い、実装、運用まで関与したので、これについて報告する。

2.

モックアップシステム

ま ず 、 本 番 の 運 用 シ ス テ ム を 、 サ ー バ は Web
ページを生成してクライアントである Web ブラウ
ザに送る旧来の形式ではなく、ページは全てクライ
アント上の JavaScript が作成し、その中で必要なサーバとのデータ通信は全て REST 型の Web API により JSON データとして行う形を仮定した。このような形式であれば、本番ではサーバが送ってくるであろう JSON データを、仮にクライアントすなわちWeb ページ中に用意しておけば、サーバとの通信を全く行わずに、ある程度の本番に近い操作性を持ったモックアップの構築が可能である。
具体的には、jQuery, jQuery Mobile(モバイルデバイス対応), Chart.js (円グラフ作成), TinyMCE(テキストエディタ)といった JavaScript ライブラリを用い、後は、HTML と JavaScript だけで作成した。実装時に送られてくるであろう JSON データをデモデータとして備え、そのデータ書式も同時に設計した。本
質的な運用システムとの違いは、サーバがないため、用意された科目(今回は 1 科目のみ)の表示、編集しかできない点と、編集結果が保存できない点であり、操作性は殆ど運用システムと同様である。
本モックアップを、新シラバスに機能要件等の検討 WG で用い、適宜修正しながら、完成システムを予想して議論を進めた。実際には、大学として定めている学士仮定の７つの学習成果の割合の入力、各項目の最小・最大文字数制限、各回の内容詳細や事前・事後学習、Moodle への授業資料の追加、日英切替等、多くの機能に関して検討を行った。
その議論のおよそ最終段階でのモックアップのキャプチャ画面を図 1 に示す。円グラフと連動した成果割合の入力、各項目のテキストエディタによる編集、日英切替、ヘルプの表示等可能とした。また、モックアップは単なる HTML ファイルであるため、どこにでもおけ、随時 WG 委員等による操作が可能である。図 2 に、予め内部に用意している JSON データの一部を示す。これ自体が、実装時のデータ構造の設計図の意味も持つ。

3.

運用システムの開発と実装本番の運用システムの実装に関しては、業者に発注した。ただし、このモックアップとほんの一部だ
けであるが Web API を実装したサーバ例を業者に提供し、それを元に、全ての機能の実装を依頼した。
単なる仕様書以上の情報を提供しているため、スムーズな依頼ができたと思われる。図 3 に、現在稼働中の運用システムのスクリーンキャプチャを示す。図 1 とあまり外見が変わらないことから、本モックアップは完成システムをかなり正確に予測していたと思われる。

4.

運用及び利点と課題

運用開始にあたっては、実使用前に１ヶ月間の試験期間を設け、関係者等で不具合の修正、操作マニュアルの整備、ヘルプメッセージ、字数制限等の調整等を行った。また、この時点から、約半年間専―7―

教育システム情報学会 JSiSE2015
第 40 回全国大会 2015/9/1～9/3;ø¯ t'HQPÜéêÔ£.L* -F$ÕÖB?C/y°±B@A>?iQBÁf¯f|0<VB>ÁQP
 tiLjQX\áC1C<\2BfY¢ºÈ( )   ¸°±>&ÍB«¬fQX345Ô'°±>6K78B?
5Ô°±>9:9;<"­Ôö=áz¬çè6A>°±>ÁÁf¯?
VfÉ,§ÕÖtÉ>`@>ÁQPYeCHIïðm $q>?iQ+,ÄÓÔßàÕÖ×w'(âã2â·+6yB&AbYQ>1>Á2þBäR tudVB>ÁQP
=^CD¯>?Y¢ EF>?QXGHj°±B«¬>?IlYB«¬fJKLMèNB

=OOPQ39  !" . tP;KLjQX¯°±KLjV  ( )/ t;jQ
Ze³QótiLjQX\m \1BfRSKQ Z[\]^}j÷B«¬>?6TPÂ=íjP
Q¸KUOO¢^>? VAÓÔBí ( )/ 6ÉKjz¬
tP;KLjQX?CWj  >÷KfmiQCVA¬ÖXj>
÷BMf5Ô=?CPQ
( ) YZ   [\B?Y¢uOB]^6eC?
¦§
¹@A>?cdP53

Sed
HI2
?QC _`ta;KQ|,}j~t= t;jL`z¬6 <pqtMbQ>`a;>tþ:CuiQÃÄ?¦§:KB YQPDEFG
cghdp{õghE{ef0 wgjLhiåæ
$122333%45%6!%274'2&$'62$8!2$8!92/2$2 , 9 ,/%$4/: ; j―8―