授業支援型 e ラーニングシステム CEAS10 の開発― CEAS３のマルチデバイス・モダンブラウザ対応
３のマルチデバイス・モダンブラウザ対応 ―宮崎誠 1), 冬木正彦 1), 三矢

1) 畿央大学晴彦 2), 植木泰博 3)

教育学習基盤センター

2) ボウ・ネットシステムズ株式会社
3) ニュータイプシステムズ株式会社
m.miyazaki@kio.ac.jp

Development of the CEAS10 Web-Based Coordinated Education Activation
System- Multi-Device and Modern Browser Capability Revision of CEAS3 Makoto Miyazaki 1), Masahiko Fuyuki 1), Haruhiko Mitsuya 2), Yasuhiro Ueki 3)1) Center for Teaching, Learning and Technology, Kio University
2) Bow Netsystems Corporation
3) NewType Systems Inc.
概要
スマートフォンやタブレットなどのマルチデバイスと、Microsoft Edge などのモダンブラウザでの利用ニーズに対応するため、ユーザインターフェイスの機能向上を目的として授業支援型 e ラーニングシステム CEAS10 の開発を行う。本論文では、CEAS10 の開発経緯と課題、開発方針と実装を説明する。さらに開発結果と運用評価を述べ、最後に今後の情報環境の変化への適応を目的とした次世代 CEAS のプロトタイプ作成を説明する。

1

はじめに学生の思考力・判断力・表現力の能力育成を図ットやスマートフォンなどのデバイス利用が拡がり、ブラウザも高機能化が進み、CEAS のユーザインターフェイスも対応が求められていた。

るため、大学教育においてアクティブラーニング

このようなマルチデバイスとモダンブラウザの教育方法を取り入れることのニーズが高まってでの利用ニーズに対応するため、ユーザインターいる。
「授業と学習（予習・復習）のサイクル形成」

フェイスの機能向上を目的として CEAS の開発をの統合的支援を目的として開発された授業支援型行う。具体的には、画面サイズが異なるデバイス

e ラーニングシステム CEAS [1]は、このアクティに対しレスポンシブな表示が行え、かつ Microsoftブラーニングの実施支援ツールとして、有効に活Edge や Chrome の最新バージョンのブラウザで利用できると期待される。

用できるようにシステム開発を行う。

CEAS は 2002 年に PHP により実装された CEAS

システム開発は、CEAS の特長である「授業支バージョン 2 系が開発され、その後 2007 年に Java援型ユーザインターフェイス」[4]を継承する、デ言語でフレームワークを利用した CEAS3 系が再ータベースは変更しない、開発のコストは抑える、開発され[2, 3]、Sakai CLE との連携などによる機の 3 点を基本方針とする。

能強化[4]を経て現在も利用されている。

本論文では、これらを踏まえ CEAS10 の開発経

CEAS のユーザインターフェイスは、利用者の緯と課題、開発方針と実装を説明する。さらに開使用するデバイス（端末）としては PC を想定し、発結果と運用評価を述べ、最後に今後の情報環境キーボード、マウスによる Web ブラウザの操作をの変化への適応を目的とした次世代 CEAS のプロ前提としていた。しかしながら、ここ数年タブレトタイプ作成を説明する。

表 1 実装機能一覧

2 CEAS3 の構造と実装機能共通
2.1 CEAS3 のアーキテクチャ
CEAS3 では、基本アーキテクチャに Layer パターンを採用し、Web アプリケーション全体を３層履修環境管理者の機能層、プレゼンテーション層、ビジネスロジック層、インテグレーション層に分けて構成し、それぞれの依存性を最小限に抑えることで、設計や開発・デバック・保守の容易化を図った。さら担任者にシステムの保守性・拡張性・オープン性向上を図るため CEAS3 の開発には Java 言語のフレームワークを利用した[2, 3]。
プレゼンテーション層では Java の標準フレー

学生

ムワーク JSF(JavaServer Faces) [6]と MyFaces 実装[7]を採用する。ビジネスロジック層には DI コン

ログイン・ログアウト，公開FAQ，お知らせ，公開科目一覧，個人情報変更，レポート確認
ユーザ管理，科目管理，ユーザリス
ト読込，科目リスト読込，科目担任リスト読込，科目担任リスト読込，履修情報リスト読込，システム利用状況，告知機能，アクセスログ
授業資料，教材割付，科目独自ページ，複合式テスト作成，記号入力式テスト作成，レポート課題作成，アンケート作成，複合式テスト管理，
記号入力式テスト管理，レポート管理，アンケート管理，出席管理，システム情報，科目環境設定，連結評
価一覧表，お知らせ/メール，FAQ，回答登録，教材一括更新
複合式テスト実施，記号入力式テス
ト実施，レポート提出，アンケート実施，テスト結果表示，お知らせ，FAQ，チャット出席確認，出席情報収集，出席表，グループフォルダ

テナをサポートするフレームワーク Spring [8]を用いる。インテグレーション層では、O/R マッピ

表 2

CEAS3 の規模

ングフレームワーク Hibernate [9]を用いる。

総行数

CEAS3 の開発では、ブラウザへのレスポンス

Interface（出力コード）は HTML4 規約に従い、開発当時の Windows OS の標準ブラウザ IE7 を検証ブラウ

プレゼンテーション

classJSP

JavaJSP

143

202

39,172

32,678ザとした。CEAS3 は IE8 から IE10 までは問題なビジネスロジック

296739,995

く動作していたが、IE11 で表示が崩れる現象が現インテグレーション

3468

15,04863278

れたため、JSP ファイルにてメタタグに IE8 の互換指定を行うなどの対応を行った。
2.2 実装機能とシステム規模
CEAS3 に実装している授業と学習を支援する機能を表 1 に示す。これらの機能は商用の94,21532,678

2.3 マルチデバイス・モダンブラウザ対応の課題

情報環境の変化に伴い、CEAS3 では次のことが対応すべき課題となっていた。


固定サイズの画面を想定した設計仕様であったためマルチデバイスに対応できない。

CMS/LMS(コース管理システム/学習管理システム)が提供している機能と同様であるが、CEAS で202

Microsoft Edge や Google Chrome などのブラはこれらの機能が「授業支援型ユーザインターフ

ウザの最新バージョンでは表示の崩れが発ェイス」[5]の原則にしたがって提供されている。

生し、後方互換の設定では対応できない。

なお、この表に含まれていない自学自習用のコー

プログラムを長期にわたり、スキルの異なスウェア管理機能、BBS 機能は、Sakai CLE とのる担当者で保守してきたためコードの品質連携システムにおいて、SCORM 学習コンテンツに幅がある。

利用機能、フォーラム利用機能として CEAS/Sakai
システムに実装されている[4]。
上述の機能を実装した CEAS3 のシステム規模プログラム規模として約 13 万行あり、すべてを変更するとなると期間とコストが膨大になる。

を、表 2 に階層別に示す。この表で、interface、class の欄はそれぞれ Java のインターフェイスと3 CEAS10 の開発クラスの数を示し、JSP と表記された欄は JSP フ

3.1 CEAS10 開発方針

ァイル数を示す。

前節で述べた課題を解決し、CEAS3 のマルチデバイス・モダンブラウザ対応を実現するにあたり、まず次の点を考慮した。


授業支援システムとして必要とされる主な前に主要なページの Bootstrap を適用したモッ機能はすでに実装されており問題なく利用クアップ（HTML ベース）を作成し、デザインされている。（機能追加の必要はない）の基本として参照し、個々のファイルの変換をCEAS の外部仕様自体は授業支援型ユーザ進めた。

インターフェイスの実装例として、利用のレスポンスとして出力する方法については、事実装を進めるにあたり、検証ブラウザとして手引きも整っている。

マイクロソフト社の Edge やグーグル社のCEAS3 システムの実装は、3 層アーキテク

Chrome を利用し、利用可能ブラウザとして IE11、チャのデザインパターンを順守しているたFirefox などを想定した。

め、レイヤー（層）単位でのコードの書きさらに、ビジネスロジック層、インテグレー直しも他層に影響を与えず可能である。

ション層に改修を加えセキュリティに関する機以上の点を踏まえ、CEAS3 のプレゼンテーショ能強化を行い、同時にソースコードレベルで潜ン層のみを変更する方針を持った。さらに Java在していたバグも除去した。

フレームワークは、CEAS3 と同じバージョンを使用する。
以上の方針で開発を進めることができれば、つぎのことが期待できる。
授業支援システムとしてワークフローの再設計やデータ構造分析などの上流工程を省き開発

3.3 CEAS10 の開発結果と評価

CEAS10 の開発は、畿央大学がプロジェクトリーダーの役割を務め、ボウ・ネットシステムズ（株）、ニュータイプシステムズ（株）が役割分担して、約 6 か月で開発を終了した。

工数の削減となる。また、現行システムがそのまま稼働しているためシステム変更後の新実装システムのテストでのデータや動作を確認することができるため開発失敗のリスクが少ない。
3.2 プレゼンテーション層の実装

開発プロジェクトの第 1 段階として、プレゼンテーション層の独立性をコードレベルで分析確認し、CSS フレームワークである HTML
KickStart 0.94 [10]にて実装することが可能であることを検証した。その後、実際に CEAS10 で実装する CSS フレームワークには、開発コミュニティの活性度やドキュメントの豊富さなどを考慮し、Bootstrap v3.3.6 [11]を選択した。これによりマルチデバイスにおける画面サイズに合わせた（レスポンシブな）表示を実現し、グリッドシステムを利用してデザインした。

図１ CEAS10 学生 TOP ページ画面例
図 1 からは、サイズの異なるデバイス上で、レスポンシブに CEAS の学生 TOP ページ画面が表示されていることがわかる。
極めて短期間で計画通りに大規模な変更を達成できた要因としては、関係者の役割分担が明確であり、かつ操作改善レベルの新規機能追加は行わず CEAS3 の機能の再現を順守したことが挙げられる。

3.3 プレゼンテーション層の実装方法と JSP ファ
イルの変更

CSS のフレームワークを利用し HTML5 規格に適合させたことにより、以前生じていた表示プレゼンテーション層の変更では、パッケーの崩れや、ファイルアップロードの際の問題なジやファイル構造、名称、国際化対応のタグなども解消され、レスポンスも早くなりデバイスどは変更せず、JSP ファイルと必要となった設を気にせず利用できる点で、とくに学生ユーザ定ファイルの変更のみを行った。の利便性は向上した。

JSF の枠組みの中で HTML5 規格のコードをただし、マルチデバイスでのレスポンシブデ

ザイン特有の課題については、さらなる改善の参考文献余地があると考えている。ブラウザ表示がタッチパネルとなったためポイントデバイスがマウスから指先にかわり、それに伴いメニューやボタンが大きくなり表示サイズが PC 固定のメニ[1] 冬木正彦、辻昌之、植木泰博、荒川雅裕、北村裕、Web 型自発学習促進クラス授業支援システム CEAS の開発、教育システ

ューより大きく長くなった。さらに小さな画面

ム情報学会論文誌, 21(4)、 343-354、のデバイスでは、メニュー自体をアイコンに変2004．

化させるので仕様が変わり全体の把握が難しくなった。このようにデバイス毎にメニュー等が変化するのでユーザビリティと見せ方の問題は今後改善の余地があると考える。

[2] 村下幸利、濵渦奨、山中純、植木泰博、
檀寛成、安達直世、冬木正彦、授業支援型 e-Learning システム CEAS の再構築
―保守性および拡張性の向上―、情報処理学会研究報告 [教育学習支援情報システム研究グループ]第４回 CMS 研究会、

4.

次世代 CEAS
CEAS をさらに今後 10 年間利用できるシステ

ムとするには、変更した CEAS10 には、ライブラリやモジュールのセキュリティアップデートに容易に対応できることが求められる。
さらに CEAS はオープンソースとして公開はしているが、Java のフレームワークの基づくシステムであるので適切に開発環境を用意しないといけないため、コミュニティベースでのプログラム変更は行われて来なかった。
これらのことを踏まえ、次世代 CEAS を開発するにあたり利用しやすい言語（スキルに違いがあっても実装に大きな差が出ない）、最新の環境に素早く対応できライブラリやモジュールの提供が早い言語で開発することを検討した。
現行の Java 言語に替え Ruby 言語を選択し、Ruby on Rails [12]でプロトタイプを作成した。
今後は、現 CEAS10 でのマルチデバイス表示に関して担任者のワークフローと学生のワークフローでの画面表示情報のあり方を再検討し、次世代 CEAS に反映すること検討する。
最後に、今回の CEAS10 の開発プロジェクトにおいて、ユーザインターフェイスデザインと実装をそれぞれ担当いただいたボウ・ネットシ
ステムズ（株）の石川有紀氏と栗原星史氏の多大な貢献に謝意を表します。

7-12、2006．
[3] 矢野敏也、植木泰博、冬木正彦、授業支
援型 e-Learning システム CEAS の再構
築 －実現機能と今後の展開－、情報処理学会研究会報告[教育学習支援情報シス
テム研究グループ]第６回 CMS 研究会、
43-47、2007．
[4] 植木泰博、花田良子、冬木正彦、授業支援型ユーザインターフェイスを実装した
CEAS/Sakai 連携システムの開発、情報処理学会研究報告[教育学習支援情報シス
テム研究グループ]第 11 回 CMS 研究発表
会、72-79、2009．
[5] 植木泰博、冬木正彦、コース管理システ
ム CEAS の授業支援型ユーザインターフ
ェイス、教育システム情報学会誌、 27(1)、5-13、2010。
[6] JavaServer Faces Technology,
http://www.oracle.com/technetwork/java/jav
aee/javaserverfaces-139869.html[7] The Apache MyFaces Project
http://myfaces.apache.org/[8] Spring,
http://spring.io/[9] HIBERNATE,
http://www.hibernate.org/[10] HTML KickStart,
http://www.99lime.com/[11] Bootstrap
http://getbootstrap.com/[12] Ruby on Rails
http://rubyonrails.org/