大学ICT推進協議会
2011年度年次大会 論文集

B6-9
熊本大学公式 Web サイトの構築－CSS 等のカスタマイズによる Web サイトデザイン－
坂本 瑞穂 1)、伊澤 睦 1)、久保田 真一郎 2)、永井 孝幸 2)、 松葉 龍一 1)
1) 熊本大学 ｅラーニング推進機構
2) 熊本大学 総合情報基盤センター
matsuba@kumamoto-u.ac.jp
概要：熊本大学では、全学公式 Web サイトのリニューアルをオープンソース CMS Plone4 を利用し進めている。Plone4 は、リリースされてまだ間がなく、サイトの構築にあたっては、前バージョンとの差異や、CMS をカスタマイズするためのシステム構造等を逐一調査する必要があった。本講演では
主に、新サイト構築にあたり Plone4 に施した CSS のカスタマイズや、編集ワークフローに基づき発信者ベースでの情報提供を容易にするための Web テンプレートのカスタマイズ等について述べる。

1

2

はじめにWeb サイトデザイン

熊本大学では、情報公開や社会への情報発信のPlone4 をベースシステムとして新サイトの構推進のために、『情報発信体制を強化し、大学広築作業を開始したが、大学公式サイトの完全移築報誌、および熊本大学 Web ページ等を充実させ、のためには、機能と Web サイトデザイン両面から情報公開や情報提供を多面的に実施する』ことをPlone4 をカスタマイズする必要がある[2]。

中期計画の一つに掲げ[1]、国内外への情報発信機

Web サイトデザイン関連により実現する必要の能を高める一方で、学内の業務改善・効率化のたある新サイトへの与件は、(1) 公式 Web サイトのめに、学内構成員への情報提供用 Web サイト(教職デザインは可能な限り現行サイトを踏襲すること、員用 Web サイト)の整備にも力を入れ、情報提供者(2)利用者の IT スキルレベルをワードプロセッサ自身による容易な情報発信と、職員が必要な情報入力ができる程度を想定した入力インタフェイスをより簡易に受信できるようなシステム構築も進が用意されていること、(3)フォーマットに則った

1)

めている 。

Web ページを適切に公開できるテンプレートが用

それらの一環として、大学公式 Web サイトと教意されていること、(4)閲覧者は、新着情報等を容職員用 Web サイトの CMS(Contents Management

易に得られること等である。これらを実装するたSystem)を統合し、これまでよりも容易にかつ、安めに、Plone4 の多彩な機能のうちから、与件の実定的な情報提供と運用を実現するという学内から現 に 必 要 十 分 な 機 能 を 選 択 し た 上 で 、 CSSの要望を実現するために、
e ラーニング推進機構の(Cascading Style Sheets)のカスタマイズや入力

2)

職員 を中心に編成された大学公式 Web 移築チーエディタのカスタマイズを施した。

ムにより、オープンソース CMS Plone4 を用いた新2.1 Web サイトデザイン
Web サイトのトップページでは、そのサイトが提供する情報量のうちの相当な部分が提示され、サイト内の付加価値の高い情報を得やすくする機能、閲覧を容易にする機能など、1 ページ内に複数のコンテンツを含むことも珍しくない。
本学のトップページにレイアウトされているコンテンツには、次のようなものがある；Flash
画像、重要なお知らせ、お知らせ、イベント一覧、関連サイトへのリンク。Plone4 において１ページ内に複数の記事(コンテンツ)を並べて掲載するためのレイアウトを構成するには、コラージュWeb サイトの構築、コンテンツ移行に取り組んでいる[2]。本稿では、新サイト構築にあたり Plone4に施した CSS のカスタマイズや、編集ワークフローに沿った発信者ベースでの情報提供を容易にするための Web テンプレートのカスタマイズ等、Webサイトデザインについて述べる。

1)

CMS を導入し、情報の整理と 1 次情報発信者による軽微な情報修正は可能にする等の整備を行ってきた。
2)
専任(常勤 3、非常勤 9)、兼務 20 名により構成されている。

― 499 ―

大学ICT推進協議会
2011年度年次大会 論文集

図 1: 現行サイト(左)と構築中の新サイト(右)トップページ(Collage) プ ラ グ イ ン モ ジ ュ ー ル が 必 要 で あ る

Plone4 のページ機能を利用し、下記の手順に従い、[3,4]。同モジュール導入後に、各コンテンツの他のページとは異なる設定をする必要があった。

配置、トップページレイアウトを確定した。
1. Zope 管理画面(ZMI)で/(site 名)/portal_skins/

現行サイトのトップページコンテンツを新サplone_content/document_view をカスタマイズ

イトに移植する際に、Plone4 のデフォルト設定か

2. portal_skins/custom にコピーされた document_view

ら変更が必要になった点は、Flash 画像の設置に際を midashi_view に名前を変更する
3. /(site 名)/portal_types を開き、Document(Page)し、危険なタグ/取り除かれるタグ(HTML フィルタをコピー&ペーストリング)とされていた embed と object タグを復活

4. ペーストしたタイプのリンクを Click して Tilte をさせたことである。また、Flash 非対応ブラウザ

midashi_Document に変更するのために静止画像を配置したところ、一部のブラ

5. Aliases タブで、midashi_Document の(Default)行にmidashi_view を設定する

ウザでは、画像が 2 重に表示されることが分かり、

6. /portal_skins/custom/content_core.css に「第 2 階層ヘッダ部分（バナー）カスタマイズ」追加

Flash ページに下記の囲みのような命令を加える必要があった[5]。

Plone4 には、ポートレット(Portlet)と呼ばれ<object classid="clsid:XXX " width="YY" height="ZZ">る機能があり、カレンダや RSS、独自のコンテンツ<param name="movie" value="image/flash" />などの情報を Web サイトの左右自由に配置し表示<param name="FlashVars" value="value" /><!--[if !IE]>-->

することができる[3]。加えて、ポートレット管<object type="application/x-shockwave-flash"

理のプラグインモジュールを導入することで、ドdata="image/flash" width="YY" height="ZZ">

ラッグ&ドロップによるポートレット配置の上下<!--<![endif]--><param name="FlashVars" value="value" />変更等も可能になる。本サイトでは、サイトメニ<!--[if !Flash 非対応]>-->

ューの表示ほか、本学が積極的に行っている取り<object classid="clsid:XXX " data="image/flash.jpg"

組み、これまでバナーにより管理されていた関連

type="image/jpg">

サイトへのリンクなどもポートレット内にまとめ</object>ることで利便性を図った。

<!--<![endif]-->

プラグインモジュールを含めた Plone4 の機能<!--[if !IE]>--></object>を用いて、サイトの基本設定を行った後に、現行<!--<![endif]-->の Web サイトのデザインを踏襲するために、サイ</object>

ト全体や各ページ、フォルダ等を制御する CSS のトップページと同様に、画像/写真が配置されカスタマイズを実施した。
主要な CSS は 2 つあり、ているページもあり、それらのページに対しては、レイアウトほかサイト全体に関連した制御を行う― 500 ―

大学ICT推進協議会
2011年度年次大会 論文集

ものと、個別のページを制御するものがある。Zope
管理画面(ZMI)の/portal_skins/custom/にあるschools.css3)、content_core.css がそれらにあたる。CSS による調整は多岐にわたり、Web サイトデザインに関するものだけでなく、編集フローにおいて権限の違いにより表示を変えるなど情報入力補助のためのカスタマイズも行っている。

2.2 情報入力エディタ− CKEditor の導入 −情報提供を容易にするためには、ブラウザベースのオーサリングツール(入力エディタ)の導入が不可欠である。Plone4 には固有の入力エディタが存在するが、実際に情報入力を行う職員の評価を実施したところ、入力補助機能不足の他に、ボタン表示位置やエディタの外観も含めて通常利用しているワードプロセッサとの差異を感じ好感触ではないとのコメントを得たため、オープンソースの 高 機 能 な WYSIWYG エ デ ィ タ CKEditor(Ver.
3.6.1)を導入した[6]。
評価者のコメントにあった“違和感”を軽減させるために、ワードプロセッサと類似したスキン4)を導入し、次いで、CSS のカスタマイズにより、入力・編集時に公開画面の構成(出来上がり)を直感的に理解できるよう、見出しやリストなどの要素を、公開ページと編集画面（プルダウンメニュー・テキストエリア）で同様に表示されるように設定した。図 2 は、プルダウンメニューにより入力アイテム(Float Right：右側回り込み)を選択する際の例である。
Web ページの見やすさを保つだけでなく、組織のブランドイメージを定着させるためにも、視覚的に統一された情報の表示は重要である。しかし、情報提供者の IT スキルや Web デザインに対する知識の差異が見込まれる場合には、システム側でそれらをある程度コントロールしておくことが望ましい。そこで、ツールバーの項目から、本 Web サ
イトのページ作成に不必要と考えられる項目(色、フォント、絵文字、フォーム等)を非表示化し、最小限のツール表示にすると共に、ツールボタンの配置変更を行った。
入力作業を容易にするためには、入力エディタの整備だけでなく、情報入力のためのテンプレート(雛形)が用意されており、エディタからそのテンプレートを呼び出し、即座に目的とするページの作成にかかれることも重要である。編集ワーク
3)
4)

school.css は、スキンに付随した CSS である。
New version of Office 2007 Real を用いた。

図 2：CSS による CKEditor のカスタマイズ

フローとサイトのコンテンツツリーに基づいて検討した結果、本サイトには、目次用と情報記述用の 2 種類のテンプレートが必要なことが分かった。
サイト独自のテンプレートは、CKEditor の設定項
目の Custom templates 機能を利用することで生成できる。本サイトで利用するテンプレートの内容を JavaScript ファイル(mytemplate.js)に記述し、Zope 管理画面(ZMI)に DHTML Method ファイルを/portal_skins/custom へ追加することでそれが可能になる[7]。

2.3 お知らせ、イベント情報
公開講座、講演会から、研究室公開まで、大学では、全学・部局単位で、学内外者に向けて様々なイベントを、定期・不定期を問わず、開催している。それら社会に向けた情報発信の場の情報を取りまとめ、広くアナウンスすることも大学
公式 Web サイトの役割の１つである。
Plone4 のもつコレクション(Collection)機能を利用すれば、サイトの閲覧者はサイト内の新着情報等を容易に得ることができるようになる。コ
レクション機能はフォルダ(ディレクトリ)の一種であるが、通常のフォルダとは異なり、検索機能(データベースにおける Report や Query)を持っている。サイト上のコンテンツに記述されたキーワード(公開日やタイトル、本文中に含まれるキーワード等)の組合せ条件を設定することで、サイト内を検索し、キーワードに合致したコンテンツを表示させることができるようになる[3,4]。
トップページ内の、「お知らせ」と「イベント」の 2 つのフィールドでは、それぞれ、
 お知らせ：ニュース・ページに決められた分類タグが付いた情報、― 501 ―

大学ICT推進協議会
2011年度年次大会 論文集ーザガイド程度しかなく、前バージョンとの差異や、CSS をカスタマイズするために Plone/Zope 構造等を調べる必要もあるなど、手探りで進める作業も多かったが、公式 Web サイトの移行構築における Web サイトデザインと関連する与件への一応の対応は講じることができた。今後は、修正改善、細部の調整へ進むことになる。その一方で、運用開始後の CMS の機能的改善、将来の多言語化なども見据えた場合の作業手順のマニュアル化、作業工程の確立など、本構築により得られた知見の共図 3:Collection 機能を利用したイベント情報案内

有と公開のための準備も今後の課題である。

 イベント：イベントに決められた分類タグが付いた情報、および期間が終了していない情報、を抽出し表示させるようにした。
しかし、デフォルト設定のままでは、本文しか表示することができない。そこで、コレクション機能の設定ファイル Zope 管理画面(ZMI)の/portal_skins/custom/folder_listing に修正を加えて分類タグも表示する一方で、掲載日とその期間の表示も可能となるように同ファイルを修正した(図 3)。加えて、日付の表示形式を「2011 年08 月 05 日」の形式[8]から「11.08.05」の形式への変更が要望されたので、同ファイルへ下記のような命令を追加した5)。

< tal:newsitem condition="python: item_type =='News Item', 'Page'"><span class="documentModified"><span tal:replace="python:DateTime(item_参考文献[1] 熊本大学アクションプラン 2010,http://www.kuma
moto-u.ac.jp/daigakujouhou/kankoubutsu/action_plan.html[2] 永井孝幸,杉谷賢一,久保田真一郎,木田健,松葉龍一,坂本瑞穂,伊澤睦,岩永菜穂子,中村直美,谷口勝紀,上田誠,後藤正三,河津秀利,「Plone4 による熊本大学公式 Web サイトの構築」,大学 ICT 推進協議会年
次大会 2011 予稿集,2011[3] Plone ユーザ会、http://plone.jp/
Plone4 ユーザマニュアル、http://plone.jp/docum
entation/plone-4-man-j
柴田淳, 鈴木たかのり, 木下文史、「Plone 完全活用ガイド」、技術評論社、2008[4] お茶の水女子大学 Plone ポータルサイト、
https://crdeg.cf.ocha.ac.jp/ocha/Plone/copy_of_manual/chottochotto/[5] 酒井克幸、「将来を見据えた、新たな HTML 内 SWF
埋め込み用コードの考察」、http://www.adobe.
com/jp/devnet/flash/articles/spark_project_swf_embed.html[6] CKEditor、http://ckeditor.com/modified).strftime('%y.%m.%d')">CKEditor for Plone、http://plone.org/products/

August 16, 2001 at 23:35:59

collective.ckeditor</span>[7] CKEditor 3.X Developers Guide Templates、</span>

http://docs.cksource.com/CKEditor_3.x/Develope</tal:newsitem>

rs_Guide/Templates[8] Plone の日付表記方法の変更、http://ngi644.
net/blog/archives/80

3 今後の課題
本稿では、熊本大学において進めている Plone4を用いた大学公式 Web と教職員用 Web の統合サイトの構築について、主に、Web サイトデザインの部分に焦点をあて述べた。
Plone4 は、リリースされてまだ日も浅く、サイト構築にあたり参考となる資料は、Plone4 公式ユ5)
このカスタマイズは、日本独特の表示形式であるために、将来的な多言語対応の際に、再考する必要がある。

― 502 ―