小山高専 Web サイトのリニューアル −CMS の導入− 平田克己* 大島隆一** * 小山工業高等専門学校 ** 小山工業高等専門学校 *** 小山工業高等専門学校概要井手尾光臣*** 佐藤智一*** 電子制御工学科建築学科教育研究技術支援部技術室第 2 グループ小山高専では，昨年度から大々的に Web サイトのリニューアルを実施している。デザインなどの全体的な統一性を保ったままコンテンツの追加・更新を各担当部署で実施することができるように，オープンソースの CMS である Joomla! を利用し，外部業者に頼ることなく，教職員の専門性を生かして自前で Web サイトの構築と更新・管理するスタイルを採用した。本稿では，新しく構築した Web サイトの構成と特長について報告する。１．はじめに（Content Management System）を導入することに近年，パソコンが普及しインターネット環境がなった。著者らは本校広報委員会の下に置かれた家庭レベルにまで整備されるとともに，Web によホームページ技術専門部会注１）に属し，Web サーる情報発信が盛んになってきている。高専においバおよび CMS の導入，コンテンツの移行といっても，学校案内やその他の紙媒体による広報に加た，Web サイトのリニューアルにかかる実働に携えて Web などのインターネットを通しての PR がわっている。重要になっている。本校でも１５年くらい前に初めて Web サイト本稿では，本校における Web サイトのリニューアルとその進捗状況について報告する。を公開し，様々な情報を発信してきた。しかしコンピュータに詳しい少数の教職員の手により管２．システム構成理・運用されてきたこともあり，更新が追い付か旧 Web サイトでは次のような問題があった。ずにデザイン，コンテンツともに古くなってきて 1 ごく少数の人間が作業していたため，デザイン ○ いた。そのような中，校長をはじめとして，校内やコンテンツの更新が追い付かなくなった。各所からの意見により，Web サイトをリニューア 2 ○ 1 を改善するために複数の部署に更新作業を ○ ルするプロジェクトがスタートした。ここで，予依頼したところ，別で更新された情報を誤って算が限られていること（初年度数十万円程度）と，上書きしてしまうことがあった。今後の更新作業が一部の教職員に集中しないようにしたいことから，オープンソースの CMS 注 1）本校では Web サイトのことを“ホームページ”と呼んでいる。トし，既存のテンプレートデザインに誘導されて表 1 使用しているソフトウェアデザイン的に妥協をしないよう，オリジナルなデザインが作成可能な Artisteer2,3)を使って，オリジナルテンプレートを導入した。 Joomla!は本体では基本機能だけが提供されており，その他の追加機能はエクステンションを別途インストールして使うようになっている 4)。表 2 は本 Web サイトで使っている主なエクステンションを示したものである。JCE5)は， HTML の知識を必要とせずに Web ブラウザ上で簡単か表 2 使用している Joomla!の追加機能つ高品位なコンテンツの作成・更新ができるエディタである。JContent+（JContentPlus）は，高度なコンテンツ管理ができるもので，例えば，1 つのコンテンツを複数のカテゴリ（フォルダに相当）に入れることができる。jSecure は，悪意をもった者が管理ページへ容易にアクセスしにくくするものである。 3 各部署でページを作成した場合， ○ デザインが統一されていなかった。３．コンテンツの構成と更新図 1 にコンテンツの論理構成を示す。これらを解決するために，今回のリニューアルでは，Web サイトのデザインとコンテンツを別々に管理し，各部署で独立してコンテンツ作成や更新が容易に行えるように，CMS を導入した。その際，予算の制約上オープンソースのものを選択した。表 1 が使用しているソフトウェアの一覧である。CMS としては，複数人数でコンテンツが管理でき，多くの追加機能が提供されていて，国内での稼働実績があり，各種情報が得やすそうであった Joomla!1)を採用した。また，リニューアルにあたっては，デザインの方針を固めることからスター図 1 コンテンツの論理構成３．１トップページ各対象者向けの最新情報ページから辿れるよう第 1 階層であるトップページは学校の玄関に相になっている。さらに，今までどおりのアクセス当することから，ここに載せるのは看板と校内の方法として，トップページ上部に表示される昔な各情報への道先案内（リンクアイコン）と少しのがらのプルダウンメニューからも辿れるようにニュースに絞った。このページは頻繁に更新せずなっている。にデザインに自由度を持たせたかったため，CMS とは切り離して単独のページとして設置した。図 2 はこのページの一例である。左上にバナー，その下に次節で述べる訪問者別のページへのリンクアイコン，その下に 1 行トピックスと３．４節で述べる最新情報を並べている。上部には校内各ページへのプルダウンメニューを置いている。３．２最新情報第 2 階層は，従来の担当部署ごとに情報を公開するような構成をできるだけ避けて，訪問者の属性に応じた構成になるように配慮した。具体的には，受験生向け，地域.企業向け，学生.保護者向けの 3 つのカテゴリに分け，ここに最新情報を“記事”としてブログ的に日々追加して，常に新鮮な情報を提供できるようにした。このとき，前節で述べた JContent+の機能により，1 つの記事を複数図 2 トップページのカテゴリに入れることもできる。例えば，公開講座の募集は受験生向けカテゴリと地域.企業向けカテゴリに属させることで，1 つのコンテンツを両方のページに表示させることができる。図 3 は地域.企業向けページの一例である。画面左側には，次節３．３で述べる最新情報以外のページへのリンクをリスト形式で表示している。このとき，それぞれのカテゴリ（対象者）に合ったページへのリンクを表示している。すなわち，この第 2 階層にあたる各対象者向け最新情報ページでは，その対象者に合った最新情報と，同じく対象者に合った校内各ページへのリンクを表示している。３．３その他の情報最新情報以外の恒常的な情報については，それぞれ静的なページとして設けた。前述のとおり，図 3 地域.企業の方向けの最新情報ページ３．４トップページへの最新情報表示カテゴリに関わらず，３．２節で述べた最新情報は，トップページ（図 2）の左下半分にも表示 Web サイトの特長は， 1 公開する情報を従来の担当部署ごとではなく， ○ 対象者ごとにカテゴリ分けしている。されるようになっている。これは，全カテゴリの 2 対象者別のページではそれにカテゴリ分けさ ○ 最新情報記事を RSS で配信しているものを，トッれた最新情報を表示するとともに，そのカテゴプページ内で PHP で取得して新しいものを 6 件ほリに合ったページへのリンクを表示している。ど表示している。同じ方法で，図 4 に示すような 3 トップページは CMS とは切り離して，できる ○ 最新情報だけを表示する携帯電話向けページもだけシンプルで更新を必要としない内容とす設けている。ることでデザインの自由度を持たせるとともに，最新情報を埋め込んで表示している。 4 オープンソースソフトウェアを利用し，教職員 ○ の手で運用されているため初期費用および維持費用をほとんど必要としない。 4 の自前で運用することについては，はじめの立 ○ ち上げでは相当の労力が必要であったが，一度軌道に乗ってしまえば，それほど手間がかからないものと予想している。最後に，本 Web サイトの URI を以下に示す。 http://www.oyama-ct.ac.jp http://www.oyama-ct.ac.jp/k （携帯向け）参考文献 1) Joomla!，http://www.joomla.org/ 2) Artisteer，http://www.artisteer.com/ 3) 武藏美緒ほか：オープンソース CMS を用いた阿図 4 携帯電話向けページ南高専 Web サイトの構築について，情報処理教育研究発表会講演論文集，29，pp.233-236 (2009) 4) Joomla! Extensions Directory，http://extensions.jooml ４．まとめ Web による情報発信が重要になってきている中，本校ではごく少数の人間が Web サイトのデザインとコンテンツの両方を管理してきたために，他の業務に追われて頻繁な更新ができない状況にあった。これを改善するために，全体的なデザインを統一した状態で，それぞれの担当部署でコンテンツの作成・更新ができるように，CMS を導入して Web サイトのリニューアルを行った。新しい a .org/ 5) JCE – A Content Editor for Joomla!，http://www.joom lacontenteditor.net/