コンテンツマネージメントシステムの試作

兼安 紘平 辛山 麻実 神崎 優里
西村 政美 原田加奈子 山形 悦子
 
指導教員 吉田 信夫

1 はじめに

コンテンツマネージメントシステム(Content Management System;CMS)はHTMLを知らなくてもまたホームページビルダーなどのホームページ制作ソフトの使用に慣れていなくても、ホームページ上で、掲載する内容やそのホームページのデザインなどを入力することによって、容易にホームページを作成し、インターネット上に開設することができるシステムです。要するに、Weblog、通称ブログを運用するシステムです。 私達はPerlを利用してこのCMSの1つのモデル(ublog_v1)を作成しました。
その概要を説明します。

2 システムの概要

コンテンツマネージメントシステムは、図1に示すように、CMS ublog_v1と、生成ページ閲覧モジュールの2つの領域で構成されています。
CMS ublog_v1システムは、図2に示すように、トップページデザインモジュール、プロフィール生成モジュール、ダイアリー記録モジュール、ギャラリー展示モジュールから構成されています。
生成ページ閲覧モジュールは、図3に示すように、プロフィールのページ、ダイアリーのページ、プライベートギャラリーのページ、管理人の部屋、およびハンドルネーム表示フレーム の5つのページから構成されており、管理人の部屋は管理人の部屋のメニュー選択ページに繋がっています。

図1 コンテンツマネージメントシステムの概要
図2 CMS ublog_v1システムの概要
図3 生成ページ閲覧モジュール

2−1 トップページデザインの変更 と プロフィールの項目入力をするモジュール

トップページデザインの変更はページのデザインの入力画面で行います。 ページのデザインの入力画面ではページのタイトル、サブタイトル、ハンドルネーム、開設年月日、更新年月日、左フレームのバックグラウンドカラー、 右上フレームのバックグラウンドカラー、アニメGIFが入力できます。更新年月日は自動的に入力されます。
同じページにプロフィールの入力のためのテキストボックス群を用意しています。 著者名、ホームタウン、年齢、趣味、特技、コメント3つのプロフィール項目がそれぞれ入力できます。 トップページのデザイン項目のうち、色と表示画像に関するものは @左側のメニューフレームのバックグラウンドカラーの変更、 A右上のハンドルネームフレームのバックグラウンドカラーの変更、および B左側のメニューフレームのアニメGIFの変更です。これらの3つの項目はセレクトスイッチによって私たちが用意したものから選択できる形式にしました。
選択できるカラーは基本色と彩度の淡い色合いを10色程度用意しました。アニメーションGIFは、オリジナルのものを20種程度用意しました。


図4 画面構成
図5 ホームページデザインとプロフィールの入力画面
図6 ファイルの連携

2−2 ダイアリー記録モジュールの概要

ダイアリーの入力画面は、図4のコンテンツフレームに示すように、表示されます。 図7はダイアリーを記録する流れを示しています。 図8および図9に、ダイアリーのタイトルの表示形式、内容の表示形式をそれぞれ示します。
このダイアリー記録モジュールは以下のファイルで構成されています。
bbs.htmlは、図4のダイアリーの表示画面であり、ダイアリー入力ページのHTMLファイルです。 hyouji.plは、投稿を受け、その内容をダイアリー記録ファイルbbs.txtに保存し、さらにダイアリーとして出力するperlプログラムです。 bbs.txtは、ダイアリーの保存ファイル、 bbs2.htmlは、投稿後のダイアリーを表示するHTMLファイルです。                      

図7 ダイアリーを出力する仕組み
図8 日記のタイトルの扱いに関して
図9 日記の内容の扱いに関して

2−3 ギャラリーモジュールの概要

ギャラリーモジュールは自分で書いた絵や写真をプライベートギャラリーのページに展示するためのモジュール。
今後追加予定の機能は、画像ファイルをサーバに送り込むためのFTP機能です。
Perlでは、SocketモジュールかNET::FTPモジュールを利用してFTP機能を追加することが可能です。
画像のサイズは、big・small・middleの3つで、縦・横比は4×3と3×4の2つとしています。

図10 ギャラリーモジュールのプログラムの連携

3 コンテンツマネージメントシステムのプログラムの連携

今回試作したCMSの全体のプログラムなどの連携の概略を図11に示します。
全体は3つの大きなブロックに分かれており、 トップデザイン変更モジュールはデザインとプロフィールを変更するモジュールであり、同図におけるblog_4.plとblog_5.plがその処理の中心となる部分です。 ダイアリー記録モジュールは日記を追加するモジュールで、hyouji.plがその処理の中心となる部分です。 ギャラリーモジュールはギャラリーに画像ファイルを展示するモジュールで、gallery.plとtenji.plが処理の中心となる部分です。
同図においては、青色のブロックがplで作成したCGIのプログラムを表しています。 紫色のブロックがプログラムで作成されたデータを保存するデータファイルです。 ベージュ色のブロックがブログの管理者とプログラムのインターフェースとなるHTMLファイルです。 実線はHTMLからプログラムに起動をかけるラインやHTML相互のリンクを表しています。 破線は書き込んだり読み込んだりするデータの流れを表しています。

  
図11 全体のプログラムの連携

4 おわりに

この度のゼミをとおして、コンテンツマネージメントシステムの試作品を作成することができ、CGIの概略を学ぶことができました。
本システムにおいて、今後改良すべき点は多々あるが、 先にも示したように、ギャラリーモジュールにFTP機能を追加することです。 まずはCGIの基本を学ぶことを重視して作成したため、それぞれのモジュールのデザイン等は洗練されたものにはなっておらず 今後楽しみながら改良を加えたいと思っています。