Comments
Description
Transcript
Joomlaのテンプレート
小山高専 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/