WordPressによる研究センターホームページ開発

1. はじめに

法政大学 情報メディア教育研究センターが運用するホームページは2005年以降独自で開発を行ったきた.そのシステム構成はApache HTTPサーバにHTMLによる静的なコンテンツという一般的な構成であり,コンテンツは米国Adobe社のDreamWeaverおよびFireworksというWebコンテンツ開発では一般的なシステムを用いてPC環境で行なってきた.こうした一般的なシステムを利用してきた理由は,開発を通じて得られた様々な知見を学内外に公開する際に,多くのユーザが利用するシステムを前提としたほうが貢献度が高いと考えているからである.特に収穫逓増の法則が適用されるソフトウェアの世界では特定のシステムが市場を支配すると言われており,ApacheおよびDreamWeaverはその典型であると言える[1].DreamWeaverなどのAuthering Toolを用いたWebサイト構築と並行しContents Management System (以下,CMS)の開発が進み,2008年頃からは本研究センターでもDrupalを用いたWebサイトの開発に着手した.その成果としてサステイナビリティ研究教育機構Webサイトおよび法政大学OCW基盤を開発した.DrupalによるWebサイト構築では多言語コンテンツの管理が容易であり複数メンバによるシステム管理およびコンテンツ管理に必要なアクセス制御機能が装備されていることから,大学研究組織におけるサステイナブルな情報発信に適合していることが知見として得られた.また,CMSはOpen Source Software(以下,OSS)の製品であっても実用レベルに達していることが確認できた.2012年になりCMSではWordPressがそのシェアを拡大し,joomla, Drupalを凌駕している[2].
こうしたCMS自体の市場占有率の動向もさることながら,学生が利用するモバイル系の動向も考慮する必要がある.2012年度には新入学生の半数以上がSmart Phoneを所有することになり,Webアクセスのデバイスとして無視できない数字になってきている[3] .そのためWebサイトもマルチデバイス対応にする必要が出てきている.前述のWordPressではVersion3.4からResponsive Designを組み入れたテーマが採用されており,Version3.5からは元来のBlog基盤に加えWebサイトで利用されることを前提とした固定ページ関連の機能が充実してきている.
そこで本研究センターでもモバイル対応のWebサイトへのリニューアルを進めるにあたりWordPressを第一候補として取り上げ,これまでWebサイトの機能を引き継ぎつつ,モバイル対応のWebサイトの開発に取り掛かることになった.本報告ではシステム要件の整理,実装にあたってのWordPress機能確認,実装などについて説明を行い,研究センターWebサイトに対するWordPressの可能性を評価する.

2. 要求獲得と要件定義

Drupalを用いた大学情報基盤システム開発を参照し,そこで検討された要件をWordPressにて評価した結果を表1に示す.これよりWordPressは研究センターに必要な機能をすべて充足していることがわかる

表1 研究センターWebサイト要件とDrupalとWordPressにおける対応状況
要求 要件 Drupal WordPress
1ヶ月程度の短期間でホームページを公開したい. CMS (Contents Management System) を利用する.立ち上げ時は市販のThemeを利用できる.日本語書籍があることが望ましい.  ○  ○
ニュースレターなどで情報を発信したい. ニュースレター機能を有する.  ○  情報メディア教育研究センターWebサイトとしては不要.
スクラッチからの開発ではなくCMSを使用する. CMS を利用する.  ○  ○
国際的な活動が見込まれるので多言語が利用できる. 多言語機能を有する.  ○  WPMLにて実現できる.
複数人の管理者による管理分散型で管理する. 複数の管理者が設定できる.  ○  ○
研究組織の研究テーマがサステイナビリティであるため継続性があること. 複数のコンテンツ管理者によりコンテンツを入力および管理できる.  ○  ○
設置されたばかりの研究組織であり研究内容および体制が流動的なので柔軟性がある. プラグインまたはモジュールが利用でき拡張性に富む.  ○  ○
オープンソースである. コミュニテイソースである.  ○  ○
 考察により得られた要件 拡張性に富むとともに,余剰機能を削減できること.  ○  ○
 同上 コンテンツに変更を加えることなくレイアウトあるいは構造の変更ができること.  ○  ○
 同上 コンテンツの作成,更新,削除権限はコンテンツ作成者自身およびグループに対して設定できる.  ○  User Role Editorにて実現できる.
 本プロジェクト要件 モバイル対応であること.  –  ○
 本プロジェクト要件 現状のWebサイトのコンテンツを含むこと.  –  ○

3. システム構築

3.1 基盤環境

情報メディア教育研究センター ラボラトリサーバに導入を行った.OSおよび各種ソフトウェア環境は次の通りである.

  • OS: CentOS 6.2
  • Middle Ware: XAMPP for LINUX (PHP 5.3.8, Apache 2.2.21, MySQL 5.0.8)
  • WordPress: 3.5 (Theme: twentytwelve)

3.2 システム構築

3.2.1 方針

WordPressはOSSのCMSであるため様々な変更ができるが,運用に必要となるWork Loadを最小限にするために,「ソースコードの開発,変更は必要最低限に止め,できるかぎりWordPressの設定もしくはプラグインにて実現する.」ということにした.

3.2.2 導入したプラグイン

前述の方針にそって要件を実現するために導入したプラグインを次に示す.バージョンは執筆時点のバージョンを示す.

  • BackWPup 2.1.17: MySQLデータベースのバックアップとともにWordPressモジュールもバックアップする.
  • Collapse-O-Matic 1.5.1: 研究報告抄録の表示/非表示を行う.
  • Google Analytics 1.0.3: Google Analytics用のデータをGoogleに送る.
  • Link Manager 0.1-beta: WordPress 3.5から標準外となったLink Widget機能を提供する.
  • One Click Close Comments 2.3: 固定ページにも設置されるコメントを非表示にする.
  • TinyMCE Advanced 3.5.8: 編集用のHTMLエディター機能を拡張する.
  • WP Favicon 0.1: Faviconの設定を行う.
  • WPML Multilingual CMS 2.6.1: 多言語対応を行う.
  • WPML String Translation 1.5.1: モジュールの翻訳を行う.
  • WP Multibyte Patch 1.6.4: WordPressに標準的に含まれる日本語化パッチである.

 3.2.3 プラグインで実現できない機能

次の機能はWordPressでカスタマイズする際に利用される子テーマにて実装した.

  • レイアウトの調整:各種マージンおよび検索結果として表示されてしまう年月日属性などをstyle.css
  • 研究報告,研究プロジェクトなどの年次で作成されるページ用リスト(詳細は後述する.)

なお,子テーマによるカスタマイズにおいてはstyle.cssのように子テーマの設定が優先されるが,functions.phpについては同名のfunctionが定義されているとエラーになる.そのため同名のfunctionを定義する場合には元テーマにあるfunctions.phpの前後にif文とendif文を加える必要がある.

if ( ! function_exists( ‘twentytwelve_widgets_init’ ) ) : /* HOSEI */
(オリジナルテーマで定義されているfunction)
endif; /* HOSEI */

4. システム開発

4.1 タイトルリスト表示用ウィジェット

大学における研究センターの運営は一般的に年次単位で実施される.例えば本研究センターでは毎年4月に研究プロジェクトを募集し,翌年の3月に研究成果を公開するという年度単位のオペレーションとなっている.そのため,年度ごとに研究プロジェクトリストが作成され,成果はオンラインジャーナルとして毎年発刊される.研究センターWebサイトでは最新年度の研究プロジェクト,公開論文および研究報告が掲載されるが,過去のアーカイブについてはリンクで参照できるようにすべきであり,現状のWebサイトではそれらが追加されるたびに,過年度のページにあるリンクリストをすべて更新していた.WordPress3.5では2列レイアウトを採用した場合,メイン領域が左に配置され,サイドバー領域が右に配置される.このサイドバー領域には管理画面にて各種ウィジェットをドラッグ&ドロップで配置することができるようになっている.この機能を活用して,年度リストを自動的に生成するウィジェットを開発した.ArchiveList

このウィジェットはオリジナルのfunctions.phpにあるWidgetListクラスを参考にして開発した.WidgetListはwidget,  update, formというfunctionにて構成されているが,研究報告,研究プロジェクト,公表論文を対象とするためwidgetのfunctionを開発し,updateおよびformは空とした.widgetの仕様は次の通りである.

  1. get_post_custom_keys($post->ID)にてそのページで指定したカスタムキーを獲得する.
  2. “_”が先頭についたシステム用のカスタムキーを取り除く.
  3. wp_list_pagesにてmeta_keyにページで指定したカスタムキーをセットしてページタイトルを配列で獲得する.その他のパラメータとしてsort_order(並び順)をDESC(降順), sort_column(キー)をpost_name(slug),echoを0(HTMLテキストとして返さない)とした.
  4. <ul>ページタイトルリスト</ul>にてリスト形式に整形する.

以上でダッシュボードの外観/ウィジェットにこのウィジェットが表示される.

このウィジェットを研究プロジェクト,公開論文および研究報告ページにて利用するために,メインサイドバーには年度リストを表示するためのウィジェットエリアを作成した.これも子テーマにてfunctions.phpで定義した.さらにこれらを利用するために年次リストを表示するためのページテンプレートとしてpage-yearlist.phpを作成した.ダッシュボードにて固定ページを新規に作成する際にこのページテンプレートのTemplate Nmaeで指定したタイトルが表示される.ここではPage Template with Year List とした.

上記にて開発した環境を利用したコンテンツ入力手順の概要を次に示す.

  1. ダッシュボードにて固定ページ/新規追加を選択する.
  2. タイトルおよび本文を入力する.
  3. ページ属性にてページテンプレート(Page Template with Year List)を選択する.
  4. カスタムフィールドにてbulletinを選択し,値を年度とする.本サイトではカスタムフィールドとして研究報告ページはbulletin,公表論文ページはpaper,研究プロジェクトページはprojectとした.
  5. 公開ボタンをクリックする.
  6. タイトル下にパーマリンクが表示されるので,適切なslugに変更する.本サイトでは研究報告は巻名volNN(NNは通し番号),公表論文はpaper_年度,研究プロジェクトはproject_年度とした.

 4.2 多言語化

CMSにおいてはシステムとコンテンツの多言語化が独立しているためそれらを別々の方法で実現することができる.本サイトではシステム側はWordPressが標準で採用している翻訳ファイル(POファイル)方式,コンテンツ側はWPMLという有料プラグインとした.

4.2.1 翻訳ファイルによる多言語化

WordPressではGNUのgettext形式の方式を採用している.

$title= __(‘Previous Bulletins’,’twentytwelve-Hosei’);

 

 

 

考察

システム開発とコンテンツ開発が並行して行われる開発方法