CSS フレームワークと JavaScript で実現する
汎用 HTML コンテンツテンプレートエンジン

宮崎	  誠†1	  常盤	  祐司†2
†1 法政大学	  教育学習基盤センター†2 法政大学	  情報メディア教育研究センター
m.miyazaki@kio.ac.jp
概要：データと Web デザインを切り離し，汎用的な HTML コンテンツを作成するテンプレートエンジンを開発した．CSS フレームワークには HTML KickStart を採用したことにより，レスポンシブWeb デザインにも対応している．ローカル PC 上での表示を考慮して，データは，JavaScript の変数データとして格納し，データは，Excel のマスターデータから簡易に作成可能である．

1

はじめに	  近年，学会や研究会では冊子による論文集ではなく，CD-ROM/DVD-ROM 等の外部記録メディアにデータとして論文集を収録して，配布されることも多く見られるようになった．筆者
らは，大学 ICT 推進協議会 2013 年度年次大会の実行委員メンバーとして携わり，実行委員として担当した論文集の製作でも冊子のものではなく， CD-ROM として製作した．

2

目的と前提条件
大会では受付後，論文集コンテンツを CD-ROMで配布するため，会場で CD-ROM ドライブのない PC やスマートフォン，タブレット端末では閲覧できないことが予想された．そこで，論文集コンテンツは Web サイト上にも参加登録者向けに公開，ダウンロードできるように作成する必要があり，そのため画面に表示する際には PC だけでなくスマートフォンやタブレット端末での表示に対応していることが求められた．また，大会は複数会場にて同時進行で講演が行われる．そのため，次にどのセッションを聴講するかの参考とするために論文をその場で表示するケースが考えられ，加えて，会場でも聴講中の講演の論文をその場で表示するなど，その場ですぐに大会プログラムが確認でき，検索して論文が容易に表示できることが求められた．また，次年度以降も年次大会論文集は制作さるものであるため，軽微な修正で再利用できるよう設計することにした．

3

論文集データ形式の検討

これまでの年次大会や学会，研究会等で制作された論文集を参考に検討を行った．
PDF 形 式	  大会プログラムと論文を PDF 内リンクにて目的の論文を表示できるようにしたものである．
PDF リーダの機能を使って論文の検索も可能であるが，全文検索であるため概要や本文のキーワードにもヒットしてしまい，目的の論文をすぐに探すのにはあまり適さない． また，画面の小さいスマートフォンやタブレット端末で利用する場合には，大会プログラムが A4 サイズ等の規定の大きさで作成されているため，拡大して表示しなければならず不便であった．
電子ブック形式	  電子ブックは，直感的できれいな UI を採用しているものも多いが，Flash プレーヤーや電子ブックリーダーアプリケーションが必要であることがほとんどである．そのため，１コンテンツで PC，スマートフォン，タブレット端末に対応することは難しく，プラットフォーム依存となってしまう．
HTM L コ ン テ ン ツ	  HTML はブラウザさえあれば，PC，スマートフォン，タブレット端末で共通に表示することが可能であり，レスポンシブ Web デザインを採用することで端末に適した表示が可能である．
また，コンテンツはローカルでも Web サイトでも共通に利用することができるため，今回の制作目的にも合致している．静的コンテンツとして制作した場合，論文の検索については，ブラウザの検索機能を利用することになる．その場合，マッチしたキーワードで順番に探すしかなく，検索結果の一覧性に乏しい．また，複数のキーワードによる絞り込みなども不可能である．
よって，検索は JavaScript によりクライアントサイドで動的に表示することで解決することにした．また，次年度以降のコンテンツの再利用を考え，データを HTML ファイルとして記述するのではなく，JavaScript の外部ファイルとして保持するよう設計することにした．

るなど，大会会場での利用を意図した工夫も行った．

4.4 テ ン プ レ ー ト エ ン ジ ン
jQuery や 自 作 の ラ イ ブ ラ リ を 活 用 し て ，JavaScript にてテンプレートエンジンを作成した．
例えば，「一般セッション」「企画セッション」「全体会」ではテーブルやリストの表現が異なるがテンプレートエンジンにて表示を動的に切り替えて4 汎用コンテンツテンプレートエン
ジンいる．

4.1 テ ン プ レ ー ト エ ン ジ ン
今回， JavaScript の外部ファイルとしてデー5タを保持し，ブラウザでテンプレートとなるは，現在 Web ページにて公開されている[2]．大HTML ファイルを読み込む際，動的にデータを会期間中には，実際に PC だけでなくスマートフJavaScript で処理することで HTML コンテンツ

ォンやタブレット端末で利用されている場面を目を生成する．このようにデータと Web デザインをにすることができ，利用した一部の参加者から好切り離し，HTML コンテンツを作成する仕組みが評の声をいただいた．また，汎用的に設計していテンプレートエンジンである．

るため，テンプレートを変更すれば，それほど大4.2 デ ー タ外部ファイルとして保持する場合には，汎用的おわりに大学 ICT 推進協議会 2013 年度年次大会論文集

きな手間をかけずに他の Web コンテンツとしても利用でき，実際に畿央大学の Web シラバスとしに扱えるよう CSV 形式する，また，Ajax 通信をて応用している[3]．汎用的に使えるコンテンツテ考慮して，JSON 形式や XML 形式にすることもンプレートエンジンとして，公開することも今後考えられるが，ローカル PC での閲覧では，外部考えたい．

ファイルの読み込みに JavaScript の制限があるため，JavaScript の変数データとして扱っている．
実際の大会プログラムや論文データを変数とすると，２次元配列の大きなデータとなるため，Excelで作成した一覧表のマスターデータから，必要データをセル参照し，２次元配列の JavaScript 変数データに結合することで，簡易に作成できるように工夫した．Excel はデータを保持し，整理するツールとして非常に有用であった [1]．

4.3 テ ン プ レ ー ト
CSS フレームワークには HTML KickStart を採用している．よって，PC，スマートフォン，タブレット端末でもレスポンシブ Web デザインによって，快適な表示が可能となり，テンプレートとして機能するために，表示したい外部データの該当ソースコード HTML タグには，JavaScriptで append などの操作ができるよう id, name,class 属性を付与している．また，JavaScript を使って現在時刻を取得し，次のセッション情報をページのトップに表示する，検索キーワードを入力すると JavaScript のキーボード入力によるイベントを取得し，動的に検索結果の一覧を表示す

参 考 文 献 	 [1] 奥村晴彦, “「ネ申 Excel」問題”，情報処理学会 情報教育シンポジウム SSS2013,2013/8

http://oku.edu.mie-u.ac.jp/~okumura/SSS20
13.pdf[2] 大学 ICT 推進協議会 2013 年度年次大会論文集, http://axies.jp/conf2013cd/[3] 畿 央 大 学 Web シ ラ バ ス (2014 年 度 版 ),http://webinfo.kio.ac.jp/kio-syllabus2014/index.html