静的な Web 教材の作成支援環境の構築と運用
畠山 久 1), 永井 正洋 2),1)
1) 首都大学東京 学術情報基盤センター
2) 首都大学東京 大学教育センター
hatak@tmu.ac.jp

A Construction and Operation of Writing Support Environmentfor Static Web Contents
Hisashi Hatakeyama 1), Masahiro Nagai 2),1)
1) Library and Academic Information Center, Tokyo Metropolitan University
2) University Education Center, Tokyo Metropolitan University
概要
情報基礎科目において利用するコースウェアを Web 教材として運用するため、既存のオープンソースソフトウェアを組み合わせて教材執筆を支援する環境を構築した。要件に基づき、マークアップ記法を HTML に変換し静的なコンテンツとして配信する仕組みとした。
本稿では、環境の構築とその運用について報告する。

1 はじめに部・学科の必修科目である「情報リテラシー実践Ⅰ」と、選択科目である「情報リテラシー実践Ⅱe ラーニング教材の一種として、Web 利用コーＡ」および「情報リテラシー実践ⅡＢ」では、指定スウェア（Web 教材）がある。Web 教材は一般的教科書に代えて標準コースウェア（図 1）を Webに HTML や CSS、JavaScript 等を組み合わせて構教材として提供している [3]。

成され、インターネットを通じて配信される [1] 。

標準コースウェアは情報教育担当教員によっこのような教材は「保守・管理・更新の容易さ」て執筆され、学生支援スタッフにより Web 教材化というメリットを持つ一方で、作成に際してされている。情報基礎教育においてはカリキュラ

HTML 等の技術に関する知識が必要となるため技ムの見直しのほか、導入ソフトウェアのアップデ術的負担やコストが課題と考えられる。この課題

ートや日々変化する情報環境への対応のため頻繁を解決し教材作成の利便性を向上させるため、な修正が必要となる。このため、前述の情報リテ

Wiki などを活用した教材作成支援システムの開

ラシー実践科目が開講された当初から現在に至る

発事例 [2] も報告されているが、事例としてはあまり多くない。
本学では Web 利用コースウェアの作成を支援する環境を構築し、3 年間にわたり実際のコースウェア更新において活用している。本稿では同環境の構築と運用について報告する。

2 背景
首都大学東京では、2005 年の開学当初より全学共通の情報基礎科目として「情報リテラシー実践」が開講されている。情報リテラシー実践は、デスクトップ端末が設置された情報処理教室で実施され、e ラーニングを活用しながら一人一台の端末を用いた実習を中心に進めるブレンディッドラーニング形式の講義である。このうち、全学

図１ 標準コースウェアの例

図２ 作成支援環境の全体イメージまで継続して更新し続けられている。しかし、更新の経緯や変更点などが記録されておらず、意図せずロールバックするなどの作業ミスが発生していた。
学生支援スタッフは、教員が執筆した原稿を基4 作成支援環境における要素
4.1 マークアップ記法とバージョン管理システムの導入
Web 教材の執筆にあたり、HTML タグの知識がにマークアップやスクリーンショットの作成・追無くてもコンテンツの構造を表現できるよう、マ加を行い、Web 教材として体裁を整える。当初

ークアップ記法である Markdown を導入した。

は Dreamweaver などの Web ページ制作アプリケーションを用いてマークアップを行っていた。しMarkdown 記法は Web を中心に広く利用されているマークアップ記法で、テキストの構造を HTMLかし、HTML タグの記述等の知識を持つ学生がタグに対応する記号を用いて簡易に表現できる。

年々減り、マークアップ作業における技術的な負これにより、HTML タグを用いて記述するよりも担が増加すると共に、適切でないマークアップに文字数を少なく抑えることができ、更新差分がわよる表示崩れなどの問題が発生していた。

かりやすくなることが期待される。

3 要件整理また、Markdown も HTML 同様にテキストベースで記述されているため、バージョン管理シス課題を解決するため、2014 年度にコースウェ

テムを用いた更新履歴管理が適している。本環境

ア作成支援環境の構築を検討した。前述の課題をでは Git を用いて更新履歴管理を行い、GitHub解決することに加え、コースウェアを安定して配のプライベートリポジトリにて管理している。更信するための要件を追加した。これは、必修科目

新内容については、Git のコミットログへの記述である「情報リテラシー実践Ⅰ」が同時間帯に最に加えチケット管理システム Redmine を用いて大５クラス並行して開講され、一定の同時アクセ変更・修正の経緯を記録している。

スが見込まれるためである。よって、下記３点がコンテンツのデザインと合わせて、一部の処理作成支援環境に求められる要件として挙げられる。

は レ ン ダ リ ン グ 時 に ブ ラ ウ ザ 側 で CSS や・ 変更履歴を管理できること

JavaScript を組み合わせて行っている。例として、・ HTML などの技術に関する知識が無くても執筆

ファイルリンクにアイコンを付与する、動的に目できること・ 大量の同時アクセスを捌けること次を生成するといった処理が該当する。
4.2 ジェネレータの利用更新の多い Web ページを配信する方法として、
Wiki や CMS を導入する方式が考えられる。管理用インターフェイスが容易に利用できるなどのメ自由記述を中心に検討する。作業難易度についてリットもあるが、動的コンテンツの生成はサーバ尋ねたところ、作業者のスキルに依ると思われる負荷がかかるため同時アクセスに弱いことがある。
また、Web システムとして運用する上で頻繁なセ違いは見られるものの、全体的な傾向としてキュリティアップデート対応などの運用コストがMarkdown での記述やプレビューは比較的簡単とかかる。本コースウェアは、長期的にわたって継感じるスタッフが多い一方で、Git の操作はやや難

続的な更新はあるが毎日更新があるわけではなく、しいと感じるようである。しかし、現在の環境で静的なコンテンツを生成し配信する方式でも影響便利と感じることを自由記述で尋ねた項目ではがないと判断した。

「diff の確認が容易な点」や「git から古いデータ

そこで、Markdown から HTML を生成するジェネレータとして、Jekyll [4] を導入した。Jekyllはマークアップ記法で記述されたテキストファイを参照できる点」、「作業内容を分割できること」といった Git 導入によるメリットを挙げる回答

ルを基に静的 Web サイトを生成するオープンソーが多かった。また、現在の環境で不便を感じるこスソフトウェアである。パーサには redcarpet [5]ととしては、（ローカル環境の）環境構築が挙げらを利用している。なお、スクリーンショットの表れていた。

示など Markdown だけでの記述が煩雑となるタグの組み合わせについては Jekyll のプラグインを作成し、カスタマイズした拡張タグを実装することで実現している。
コンテンツは作業者の PC に構築されたローカ

また、コースウェアの安定配信について検討するため、2018 年度前期の授業開始日である 2018 年
4 月 6 日から、2 週間後の 4 月 19 日までの期間でサーバログの集計を行った。期間内の HTML ファ

ル環境でリアルタイムプレビューができるほか、イルへのアクセスは 16194 件であり、平均レスポ本番（プロダクション）反映前に確認するため認ンスタイムは 0.0068 秒であった。また、最大レス証が付いた確認環境（ステージング）を準備し、実ポンスタイムは 1.207 秒であった。
このことより、際に近い形で確認できる環境を整えた。GitHub のWeb サーバは授業に支障の無い速さでレスポンプライベートリポジトリにコミットが反映されると、WebHook を経由して自動的に確認環境に反映される仕組みとなっている。

スを返していることが確認できる。

6 まとめ

4.3 静的コンテンツの配信
Jekyll で生成された静的コンテンツを Nginx [6]

全学共通の情報基礎科目において利用するコで構築した Web サーバに配置し、コースウェアとースウェアを Web 教材として運用するため、既存して配信している。コースウェアには画像が多くのオープンソースソフトウェアを組み合わせて教含まれるため、ブラウザのレンダリングにおいてリクエストが多数発生する。このため、HTTP 2.0に対応している。

材執筆を支援する環境を構築した。要件に基づき、マークアップ記法を HTML に変換し静的なコンテンツとして配信する仕組みとした。学生支援スタ

5 運用状況

ッフからは、主に Git を用いたコンテンツ管理の上述の作成支援環境は、2015 年 3 月より利用を評価が高い一方で、操作がやや難しいとの意見が開始した。作成支援環境を導入してからは、意図あった。また、配信については静的ファイルとすしないロールバック等の作業ミスやデザイン崩れることで高速に応答していることが確認できた。

といったトラブルは発生していない。

今後の取り組みとして、Git を含む環境利用の作業者の負担を調べるため、現在マークアップ難易度を下げる改良を検討したい。同時に、運用作業に従事している学生支援スタッフに簡単なア面では学生支援スタッフ教育など支援体制についンケートを実施した。6 名中 5 名より回答があっても検討が必要と考えられる。また、一部のコー

たが、件数が少なく定量的な評価は難しいため、スウェアにおいて授業構成上やむを得ずテキストが重複している箇所が存在するため、技術的な解決方法についての検討が必要と考えられる。

参考文献[1] 辻 靖彦 著・青木 久美子 編著、e ラーニン
グの理論と実践、92-110、放送大学教育振興会、2012．
[2] 石川 貴彦・赤間 清・三浦 克宜、Web 教材作
成支援システムの開発とその利用による教育方法の変化、日本教育工学会論文誌 30、
Suppl.、121-124、2006．
[3] 首都大学東京 大学教育センター 情報教育部
門・学術情報基盤センター 情報メディア教育支援部門、情報リテラシー実践 コースウェア、
http://infolit.uec.tmu.ac.jp/lit/．
[4] Jekyll、https://jekyllrb.com/.
[5] redcarpet、https://github.com/vmg/redcarpet.
[6] Nginx、https://www.nginx.com/.