プロWEB制作者向けXOOPS基礎実習
Section5-デザインコンシャスな商用サイトを作る
(実践編-4:ディテールにこだわる)
この章では、その他XOOPS上でサイトを作成する上での様々な方法論を紹介します。
noneモジュールを有効に使う
サイト作成上、とても重宝するモジュールのひとつにnoneモジュールがあります。これは言うならば「からっぽ」のモジュールです。XOOPSにはモジュールとして認識されますが、実態は空っぽの白ページが表示されるだけです。
実 はここが味噌でして、このモジュールにカスタムブロックを配置して、あたかも静的コンテンツのように見せることができるのです。HTMLやCSSを駆使で きるのであれば、もっと積極的な使い方ができます。page.phpにhtmlで書くことによって、単独のHTMLページとして使用することができるので す。
しかもこのモジュールは、他と重ならない名前にすれば自由にディレクトリ名が付けられますし(中のファイルを多少修正する必要がありますが、非常に簡単です)、名前を変えればいくつでもインストールすることができます。
実 際数ページの静的コンテンツしかないようなサイトであれば、XOOPSとnoneモジュールだけでサイトが出来上がってしまいます。ページの数だけモ ジュールをインストールする必要がありますが、その考え方が既存のHTMLサイトと近く、直接ファイルにHTMLを記述するなど、デザイナーにとっては もっとも「理解しやすい」モジュールといえます。
hoda Design Studyでは「Shop」「Company」そしてブログの扉ページに使用しています。
まとまった静的コンテンツはTinyDを使用
noneはひとつのモジュールで単ページしか作ることができませんが、TinyDを使えば一つのモジュールで何十ページも作成することができます。
特 にひとつの主メニューにたくさんのサブページがぶら下がるような構造の時に最適です。hoda Design Studyでは「Products」で使用しています。サブページを作ればそのページタイトルが自動的にメインメニュー内のサブメニュー名に反映されるの で、非常に安楽に大量ページを作成することができます。
ページの作成には2通りあり、ひとつは管理画面からデータベースに情報を埋め込む方法、もうひとつはページラップと呼ばれるHTMLファイルを読み込ませる方法です。プロ・デザイナーにはこちらのページラップの方がお勧めでしょう。
考え方としては、フレームページと同じです。XOOPSのコンテンツが読み込まれる部分にインラインフレームがあり、そこに別に作成したHTMLファイルが 読み込まれるという認識で良いと思います。ページラップの方法も、使用サーバによっていくつか選択ができますが、ラップの仕方によってはモジュール内のコ ンテンツディレクトリにHTMLファイルを放り込むだけで、自動的にページを認識してくれるという動的システムのメリットを最大限生かした素晴らしいモ ジュールです。そしてまた、ページラップはデータベースに多くを依存しないので、表示が速いという副次的なメリットがあります。
このモジュールも複数インストールできますし、ディレクトリ名も一定のルールを満たせば自由に付けることができます。
Flashメニューを使用する
これはロールオーバーを使用するような画像メニューでも同じ事ですが、XOOPSは一度モジュールを組み込んで、仮組みをしてしまえば各ページのアドレスが決まってしまいます。例えば各モジュールのトップページは「http://hogehoge.com/modules/モジュールディレクトリ名/ 」になります。TinyDも最初に空のHTMLファイルで仮組みしてしまえば各ページのURLは「http://hogehoge.com/modules/tinydのディレクトリ名/content/index.php?id=数字 」と決まってしまいます。
ですので、Flashメニューなど、あとで動的に変更できないような仕組みを利用する場合は、直接このURLを指定して作成しtheme.html内に埋め込んでしまえば言い訳です。これはロールオーバー画像ボタンでも一緒です。
ただし、この場合はあとでモジュールを追加するような場合は再度メニューを作りなおさねばならないリスクがあります。XOOPS側で自動的に作成してくれる「テキストメニュー」で行くか、デザイン性を取っ「画像メニュー」で行くかはデザイナー次第です。
ページごとに異なるヘッダ画像を使いたい。
プラン1:
theme.htmlはヘッダレスで作り、カスタムブロックをヘッダの代わりとする。(難度:易)
※ただし、モジュールの無い登録画面やアカウント編集などではヘッダが無くなる。その回避法はSec.3に書いてあります。
プラン2:
theme.html内にif文やxoops_dirname等を利用して直接書く。(難度:やや難)<br />
<img src="/img/<{$xoops_dirname}>.jpg" />にして各画像はdirname名で保存するとか・・・。
プラン3:
いっそのことsuin氏のテーマチェンジャー・モジュールを使用して、モジュールごとに別テーマを割り当ててしまう。(難度:中)
※アメジスト・ブルー(http://www.suin.jp/ )にて配布。。