今回も前回に引き続き、TYPO3における「コンテンツ」と「デザイン」の関係について、基本的なことを調査していこう。復習になるが、Webサイトの構築にはいろいろな立場、役割の人が関係してくる。一般的には、デザイナ、システム開発者、コンテンツ編集者の分業になることが多いだろう。

CMSを専門に扱うエンジニアに聞くと、良いCMSというのは、CMS導入前と導入後で作業手順が大きく変わらないものだという。作業量が変わらないのではなく、あくまでも「作業手順」が変わらないこと、というのがポイントだ。つまり、やり方は変えずに作業が楽になるのが良い、というわけだ。逆に、悪いCMSというのは、システムの都合で新たにWebサイトを構築するための技術を習得しなければならなくなるもの、である。

では、通常Webサイトを構築していく手順を思い出してみよう。これからCMSを導入しようというサイトなら、まだWebデザイナが1ページずつHTMLファイルを作成しているケースも多いのではないだろうか。DreamWeaverなどのツールを使っているデザイナもいるだろうし、職人技でHTMLを手書きするデザイナもいるだろう。いずれにせよ、CMSの導入によって彼らデザイナにHTML以外の技術を習得させなければならなくなるのでは、まず円滑な移行は望めないのである。では、そういった観点から見た場合、TYPO3はどうだろう。良いCMSと言えるだろうか。

答えはもちろん"Yes"だ。TYPO3では、HTMLファイルをそのまま「テンプレート」として使用できる。ページの見栄えに関してはHTMLで記述し、コンテンツの内容をデザインから分離して動的に書き換えることが可能なのだ。チュートリアル「Modern Template Building, Part 1」を参考に、TYPO3のHTMLテンプレート機能の概要を見てみよう。

まず、以下のようなHTMLを記述し、これをTYPO3のfileadminフォルダ下に保存する。今回はWindows版で検証を行ったので、「C:\Program files\typo3\typo3wamp\template\test.html」として保存する。

いくつかコメントが入っているものの、見ての通り至ってシンプルなHTMLである。このファイルをテンプレートとして利用してみよう。TYPO3バックエンドから[Web]-[Template]でテンプレートツールを開き、「Click here to edit whole template record」でテンプレートレコードの編集画面を開く。編集画面が開いたら、「Setup」フィールドに以下のTypoScriptコードを記述しよう。

テンプレートを保存したら、フロントエンドを開いてみよう。

単純に、テンプレートとして指定したHTMLが表示されるのがわかるだろう。しかし、常にテンプレートのHTMLに書かれた内容しか表示されないのなら、静的なHTMLでページを作成するのと全く同じである。TYPO3、そしてTypoScriptは、このテンプレートの内容を動的に書き換えるための機能を提供する。再びテンプレートレコードの編集画面を開き、「Setup」フィールドの「temp.mainTemplate」部を以下のように変更してみよう。

テンプレートを保存すると、フロントエンドの表示は以下のように変化する。

このようにTYPO3では、HTML中に挿入されている「<!-- ###DOCUMENT BODY### -->」などのコメントが、そのままTypoScriptでページ内のオブジェクトを指定するための修飾子として利用できるのだ。これなら、デザイナは従来通りにHTMLを記述するか、可能ならばコメントを入れるところまでやればよい。あとは、システム開発を担当するエンジニアが、TypoScriptを習得してオブジェクトの定義を行い、動的に変化するコンテンツの参照先を指定すれば良いのである。「TypoScriptの文法を覚えなければならない」という点で、エンジニアばかりが損をしている気もしなくはないが、新しいことを学び続けるのがエンジニアの本分である。是非、気合と根性でTypoScriptを覚えて頂きたい。私も、頑張りたいと思う。

さて、永きにわたってご愛読頂いた当コラムだが、今回でひと区切りとさせて頂くことになった。しばらくパワーアップのためのお休みを頂いて、少し趣向を変えて再スタートしたいと思っている。再開の折りには、また是非ご愛読頂けますよう。