（１） GIJOEこと後藤です。 今回の私のテーマは、使いやすいテンプレートシステムの構築と紹介です。 まず「テンプレート」とは何でしょうか。これが判らないと、私の15分間がまったくの無駄な時間になってしまうので、簡単に説明します。 （２） この図は、あえて「XOOPS臭い」サイトを例に取りました。青い枠組みが、テーマが出力する部分です。 「テーマ」が画面全体の構造を司っていることがご理解いただけるでしょうか。さきほどのfabiさんの話の最重要項目、xoops_contents は、中央下のこの部分です。 この大きな青色の枠組みの中に、オレンジ色が点在していますが、これが「テンプレート」経由の出力部分です。ここで言う「テンプレート」という言葉の意味については、配布資料をご覧ください。 ここでは、これらの暖色系の出力部分の枠組みがここでいうテンプレートだと理解していただければ結構です。 ご覧いただければ判るように、実はテンプレートはとても複雑です。ブロック全体の構造の枠組みであるブロックテンプレートと、それ以外のモジュールテンプレートに別れますが、実はあまり重要な違いではありません。ブロックの中に、モジュールテンプレートによる繰り返し構造があることも稀ではありませんし、モジュールテンプレートにも、大枠を決めるものと繰り返し構造の内部で利用されるものの両方があります。 大事なのは、これらの枠組みをどのように記述するかによって、見た目だけでなく、サイトの性格すら左右することができる、ということです。 （３） さきほどのテーマはいかにもXOOPS、という３カラムのテーマではありますが、fabiさんが紹介したようなもっと自由なデザインのテーマにおいても、その内部はテンプレートが枠組みとなります。 これはブログのページのイメージですが、各エントリにしても、カレンダーにしても、いわゆる「中身」の部分は結局はテンプレートが枠組みを作っています。 実際の所、サイトの全体的なイメージを左右するのは「テーマ」です。テーマが良いだけで、ある程度はXOOPS臭のしない、見た目に素晴らしいサイトは作れるでしょう。 しかし、テーマだけにデザインワークを施し、テンプレートのデザインはモジュール作者が作ったデフォルトデザインのまま、というのでは、サイトデザインとしては、かなり片手落ちです。しかも、モジュール作者はたいていプログラマーであって、デザイナーではないため、デフォルトテンプレートが提供するデザインは結構ダサいものが多いのです。もちろん、私のモジュールもそうです。 （４） fabiさんが作ったデザインオリエンテッドなサイトに、モジュールデフォルトのままのブロックを貼り付けたサンプルです。いかにも「浮いてます」というのがよくわかりますね。 （５） さらに、このカラムを消したい、Newマークをつけたい、ユーザー情報からアバター等の情報を引っ張ってきたい、といったロジック的なカスタマイズであれば、テンプレート編集が最善の方法です。 XOOPSテンプレートの大まかな説明は以上です。 （６） さて、ホダ塾に参加して私が驚いたのは、デザイナーがどのようなワークフローでデザインを行っているのかを、プログラマーがあまりにも知らなすぎる、という事実です。 もちろん、デザインワークフローなんて、デザイナーによって様々でしょうから、どれが正解ということはありません。ただ、多くのデザイナーにとって一般的な環境でのまともなデザインワークフローがXOOPS上にまったく存在しない、というのは非常に問題だと感じました。 （７） ホダ塾での経験から、私なりにデザイナーにとっても使いやすいテンプレートシステムについての目標を立てました。 （８） ●Macromedia Dreamweaverを自然に利用できること。 もちろん、そのジャンルには他にもいろいろな製品がありますが、プロのデザイナーが一般的に「使い慣れた」ツールとなれば、おそらくこれしかありません。 （９） ●テンプレートファイルを編集すれば即座にサイトに反映されること。 これはとても重要です。ローカルな環境で開発しているのに、ブラウザのテキストエリアで編集しなければならないなんてナンセンスです。旧来のテンプレート・マネージャにもプレビューはありますが、これがどれだけ無意味かは、実際にデザインをやってみた人ならご存じでしょう。 （１０） ●編集すべきファイルがまとまっていること テーマはテーマディレクトリの下、テンプレートはモジュールディレクトリの下の下。もしかしたらもう一つ下。しかも、モジュールが違えば、編集すべきテンプレートを探して、また２つか３つディレクトリを遡って… そんなものをバラバラに編集しろ、なんて拷問に近いでしょう。 モジュールアップデート時の対応まで考えたら気が遠くなります。 （１１） ●FILEテンプレートではなくDBテンプレートであること 配布した資料にざっと書きましたが、FILEテンプレートとDBテンプレートの違いはこのようなものです。 （１２） いったんデータベースに取り込むかどうかだけの差だとおもっていただいて構いません。当たり前ではありますが、DBテンプレートといっても、元々はファイルです。 なぜ私がDBテンプレートを推すか、というと、配付資料に書かれたDBテンプレートならではのメリットが捨てがたいからです。逆に、FILEテンプレートのメリットは、DBテンプレートシステムさえ改善すれば、十分に同等になれます。 また、資料には書いてありませんが、オーバーライドシステムが、DBの方がずっとすっきりする、というメリットも捨てがたいと思います。XoopsCubeでは、ファイルベーステンプレートのオーバーライドシステムを採っているようですが、その場合、現在の出力がどのテンプレートファイルによるものかを人間が見つけ出すのは至難の業となってしまいます。 ZenCartなどで開発した経験のある方なら、この手のファイルパス依存のオーバーライドシステムが、実運用上は極めてバージョン管理のしづらい面倒なシステムであるか、良くご存じだろうと思います。 DBテンプレートなら、どこにあるのか、一目瞭然です。 （１３） ●バージョン管理が容易であること ユーザによるカスタマイズとシステムのバージョンアップというのは、常に相反する関係にありますが、カスタマイ部分を保存しながら、システムのバージョンアップができなければ、CMSとしての価値がありません。 マージというのは、プログラムでは頻繁に起こる問題ですが、実はテンプレートのカスタマイズでも避けて通れません。 （１４） ●編集すべきファイル名がすぐに判ること テーマと違い、テンプレートはいくつものファイルに別れています。これはテンプレートの性質から仕方がないことではありますが、サイトの公開画面を見て、どのファイルをいじったら良いのかパッと判らなければ、それを探すだけでも大きな手間となってしまいます。 （１５） ●各テンプレートで利用可能なテンプレート変数と、そのアサイン形式を、一覧として参照できること 現実の案件であるなら、「仕様書」としてデザイナーとプログラマーでやりとりする部分が、XOOPSにおいては完全に欠落しています。モジュール作者に、「テンプレートの仕様書を作れ」といっても無理な注文です。私だってやりたくありません。 （１６） ●運用中のリモートサイトに反映することが簡単にできること デザインワークはローカル環境で行うとしても、そのローカル環境で作成したテンプレート一式が、運用中のリモートサイトに簡単に反映できなければ意味がありません。 （１７） 以上、現状での課題を一通り挙げました。ここまで聞くとXOOPSには問題ばかりがあるかのような印象を与えてしまったかも知れませんが、そんなことはありません。 「機能的に足りないなら作ってしまえば良い」 それこそが、オープンソースプロジェクトの最大のメリットです。 そして、XOOPSには、モジュールという、極めて自由度の高いシステムが備わっています。今回も、ここまでに上げた課題をすべて解決したモジュールを作ってみました。 （１８） それこそがtplsadminモジュールです。もしかしたら、バージョン0.2をご存じの方も多いかと思いますが、今回紹介するのは、まだ未発表のバージョン1.0です。私のモジュールとしては珍しく、堂々と1.0というバージョンナンバーを振っていますが、それこそが自信の表れだとご理解ください。自分で言うのもなんですが、自信作です。 さっそく、tplsadminを利用したデザインワークフローを見てみましょう。 （１９） まずインストールですが、いきなり割愛します。XOOPSをご利用であれば、何も難しいことはありません。モジュール管理からインストールするだけです。おそらく、XoopsCube 2.1でもすんなりインストールできますし、問題なく動作することでしょう。 ちなみにアンインストールも簡単です。何も残さず綺麗に消えます。 （２０） これが、tplsadminの管理画面です。この画面では、各テンプレートの編集、テンプレートセット間のコピーや、任意テンプレートの削除、テンプレートセットの作成といった操作ができます。 （２１） まずは、編集したいテンプレート名を調べる、という操作をやってみましょう。 バージョン1.0から追加になった「キャッシュフック操作」に入ります。 ここでいくつかボタンがありますが、上の２つが「テンプレート名を調べる」ための操作です。２種類ありますが、ここでは、より視覚的に判りやすい、各テンプレートをdivタグで囲む方法を試してみます。 やることは簡単で、上から２つめのボタンを押すだけです。これによって、テンプレートキャッシュに、divタグが埋め込まれました。さて、公開側の画面を見てみましょう。 （２２） このように、テンプレート名がサイトに表示されるので、どのテンプレートを編集すべきか、一目瞭然です。さらに、このテンプレート名をクリックすると、tplsadminの編集画面に入ります。好きなように編集して保存し、公開側サイトを表示すると、もう更新されてます。 これぞCMSだ、という感じですね。一度、このインターフェースに慣れると、今までのテンプレート編集はいったい何だったのか、と思うほどです。 （２３） ここで、テンプレートのバージョン管理についても、説明しておきます。 さきほどのように、テンプレートをカスタマイズすると、tplsadminの管理画面では、このように表示されます。この色が変わっている部分が、書き換えられた部分です。管理画面の段階で、どのテンプレートがカスタマイズ済かが一目瞭然です。例えば、このモジュールがバージョンアップした場合、FILEやDB内のdefaultテンプレートが書き換わる訳ですが、そうなっても慌てる必要はありません。編集画面に入れば、このようにdiffが表示されるので、CVSで言うところのマージも簡単にできます。 （２４） こういった編集方法は、比較的小規模な変更に向いていますが、本格的なカスタマイズを行うのであれば、やはりいったんダウンロードして、ローカル環境でファイルとしてDreamweaver等のツールを利用したいところです。 というわけで、まずはダウンロードしてみましょう。目的のテンプレートセットを選択してダウンロードし、解凍します。ここで大事なのは、解凍先です。ローカル環境で開発中のテーマ内にtemplatesフォルダを作成し、そこに解凍するのです。 （２５） こうすることで、更新されたテンプレートは自動的にローカル環境のXOOPSのDB内に吸い上げられます。つまり、templates以下にまとめられたテンプレートファイルをHTML編集ツールで開いて保存すれば、ブラウザでプレビューできるのです。開発効率は段違いだろうと思います。 このような「ファイル編集即プレビュー」という機能は、元々FILEテンプレートのメリットですが、自動吸い上げ機能を実装することで、DBテンプレートであっても、FILEテンプレートのメリットを享受できるのです。もちろん、DBテンプレートのメリットはそのまま保持しています。 （２６） さて、Dreamweaver等のツールでファイルを開くことはできましたが、そこで問題となるのは、テンプレート変数の仕様書がない、ということです。 というわけで、テンプレート変数の仕様書を作ってみましょう。ここからがまさに発表の目玉ですので、ここだけでも眠気をふりほどいて、真剣に聴いた方がいいですよ。 tplsadminの機能を使えば、テンプレート変数の仕様書が自動的に作られるのです。 まず、キャッシュフック操作において、「テンプレート変数情報取得ロジックの埋め込み」を行います。これも、コンパイルキャッシュを利用するのですが、さきほどのdivタグ埋め込みの代わりに、テンプレート変数を取得するためのロジックを埋め込みます。 このロジックを組み込んでから、公開側サイトを表示すると、実際にアサインされたテンプレート変数を取得して、特別なファイルに蓄積していきます。ある程度たまったところで、「テンプレート変数をDreamweaver用に取得する」で、アーカイブとして取得します。 （２７） 解凍した中身はこんな感じです。ここからは、Macromedia Extension Mangerの使い方になってしまうのですが、先にExtension Managerを立ち上げておいてから、適宜、mxiファイルを実行するとインストール画面になります。そのまま実行継続して、Dreamweaverを起動してから、Snippetを見てください。 （２８） このように、サイト名の下に、テンプレート名が並んでいますので、そこをさらに開けば、そのテンプレートが利用できるテンプレート変数名が一覧で表示されます。 その詳細部分を見れば、どのようにアサインされているかも一目瞭然。 もちろん、Snippetですから、このようにダブルクリックするだけで、コードペインやプレビューペインに挿入されるわけです。 リファレンスでもあり、入力支援でもある。テンプレート編集を行う上で、まさに最強の環境だと思いませんか？ Dreamweaver用のExtensionなら、今まででも、XOOPS用のタグ<{$変数名}>を画像化する、なんて程度のものはありましたが、それで思い通りのテンプレートが作れるかと問われれば、答えは否でしょう。今回の目玉は、Extensionを動的に作成すること、そのものです。あなたにとって一番使いやすい仕様書Extensionは、あなただけが作ることができるのです！ （２９） あとは、ローカル環境を運用環境に反映するだけです。 このように編集したテンプレートファイル群を、zipにくるんで、アップロードします。 まさに、完璧でしょう？ （３０） XOOPSでは、まともなデザインワークはできない、なんてあきらめていたあなたも、ぜひ一度、トライしてみてください。 もちろん、デザイナー以外の一般サイト管理者にも絶対に役立つこと請け合いです。