今回はスキンのカスタマイズの後編ということで、実際に表示内容を変更してみます。時間の都合もあってそんなに大きな変更は加えられないので、全ページの左に表示されているメニューバーを右に移すというカスタマイズをやってみようと思います。[[TWiki>http://twiki.org/]] におけるスキンやテンプレートの基礎知識は[[前回の記事>http://webos-goodies.jp/archives/50619856.html]]でご紹介していますので、あらかじめそちらに目を通しておくことをお勧めします。

*特定ページのスキンを変更する 前回も触れたように、''TWiki Variables'' の "VIEW_TEMPLATE" を設定することで特定のページのみ表示テンプレートを変更することができます。スキンをカスタマイズする場合は、まずテストページでテンプレートの表示を確認し、その後に全体に適用する、というのが無難かと思います。今回もこの手順でいってみましょう。 **テンプレートのページを準備する 最初にテンプレートとする ''TWiki'' ページを作成します。Sandbox Web のトップページに行き、「Create by Name」ボタンで「TestTemplate」という名前のページを作成してください。ページ内容には以下の 1 行で OK です。 %TMPL:INCLUDE{"view.pattern.tmpl"}% これは、標準のスキンで使用されている "view.pattern.tmpl" というテンプレートファイル挿入するディレクティブです。詳細は前回の記事を参照してください。 **テストページのテンプレートを変更する それでは、表示テスト用のページを用意し、そのテンプレートを変更しましょう。ページは新たに作成してもよいですが、ここでは「[[TWiki でページを作ってみる>http://webos-goodies.jp/archives/50614908.html]]」で作った以下のページを流用することにします。 [[http://image.blog.livedoor.jp/sourcewalker/imgs/8/f/8f2701e9-s.png>http://image.blog.livedoor.jp/sourcewalker/imgs/8/f/8f2701e9.png]] 早速このページのテンプレートを変更しましょう。ページ下部にある「More topic actions」をクリックし、さらに移動先のページの一番下にある「Edit settings」をクリックします。すると、以下のような編集画面になります。 [[http://image.blog.livedoor.jp/sourcewalker/imgs/2/b/2b9278c5-s.png>http://image.blog.livedoor.jp/sourcewalker/imgs/2/b/2b9278c5.png]] このページでは「TWiki のカスタマイズ」でご紹介した ''TWiki Variables'' をページローカルで設定できます。ページ本文に記述する場合と違い、ここに入力したテキストは実際のページには表示されません。書式はページに記述する場合と同じです。ここでは、以下の 1 行を記述してください。 * Set VIEW_TEMPLATE = Sandbox.TestTemplate これでページの表示用のテンプレートが「TestTemplate」に変更されました。しかし、現時点では標準のテンプレートをインクルードしているだけなので、実際の表示に変化はないはずです。 **テンプレートを変更する テンプレートを変更する準備が整いましたので、今回のお題である「メニューバーを右に移す」というカスタマイズをやってみましょう。どのような変更をテンプレートに記述すればよいかは、標準のテンプレートファイルを調べてみるのが一番だと思います（ある程度は[[こちらのページ>http://twiki.org/cgi-bin/view/TWiki04/PatternSkin]]にドキュメンテーションされています）。標準の "pattern" スキンでは、ページレイアウトのほとんどは "main" ブロックで記述されています。 %TMPL:DEF{"main"}% &color(red){%TMPL:P{"leftbar"}%}

%TMPL:P{"topbar"}%

%BROADCASTMESSAGE%%TMPL:P{"toolbar"}%%TMPL:P{"content"}%

%TMPL:END% このうち赤で示した "leftbar" ブロックがメニューバーを展開している部分です。そして、その下の <td> が本文を展開しています。ここではメニューバーを本文の右に表示させたいので、"TestTemplate" の内容を以下のようにするとよいでしょう。 %TMPL:INCLUDE{"view.pattern.tmpl"}% %TMPL:DEF{"main"}% &color(red){%TMPL:P{"leftbar"}%}

%TMPL:P{"topbar"}%

%BROADCASTMESSAGE%%TMPL:P{"toolbar"}%%TMPL:P{"content"}%

%TMPL:END% この内容で "TestTemplate" を保存し、テストページを表示してみてください。メニューバーが右に移動しているはずです。 [[http://image.blog.livedoor.jp/sourcewalker/imgs/c/2/c272e6ad-s.png>http://image.blog.livedoor.jp/sourcewalker/imgs/c/2/c272e6ad.png]] このように、該当するブロックを上書きすることでページ内容を自由にカスタマイズできます。いろいろ試してみてください。 *スキンを作成する ここまでで目的のテンプレートができました。後は、これをスキンとして選択できるようにしましょう。前回ご紹介したとおり ''TWiki'' でのスキンはテンプレートの検索ルールによって実現されていますので、単にそれに則ったファイル名でテンプレートを保存するだけでスキンとして扱われます。 **テンプレートファイルを作成する それでは、メニューバーを右に移動した今回のスキンを "right" という名前で選択できるようにしましょう。作成したテンプレートは "view" スクリプト用ですので、"$TWiki/templates/view.right.tmpl" というファイル名で保存すればよさそうです（$TWiki は ''TWiki'' のインストールディレクトリに置き換えてください）。 [[vi]] などの適当なテキストエディタで上記のファイルを作成し、"TestTemplate" の内容をそのまま入力すれば OK です。ファイルを作成したら、さっそく実験してみましょう。適当な ''TWiki'' のページをブラウザで表示させ、その [[URL]] の最後に "?skin=right,pattern" を追加して表示させてみてください。メニューバーが右に表示されれば成功です。 **デフォルトのスキン設定を変更する スキンがきちんと動作することを確認したら、そのスキンをデフォルトに設定しましょう。デフォルトのスキンは ''TWiki Variables'' の ''SKIN'' で設定します。ここでは Sandbox Web のデフォルトを変更するため、Sandbox.WebPreferences のページに記述します。ページの編集画面にで、以下の 1 行を追加してください。 * Set SKIN = right,pattern Sandbox Web の全てのページで、メニューバーが右に表示されるのが確認できると思います。今回作成した "right" スキンには "view" スクリプト用のテンプレートしか含まれていませんので、それ以外が要求されたときのために標準の "pattern" スキンも指定しています。 前回と 2 回に渡ってスキンのカスタマイズに挑戦してみました。メニューバーを右に移すという簡単な変更ではありましたが、''TWiki'' での見た目のカスタマイズの手順がなんとなくわかっていただけたのではないでしょうか。次回は ''TWiki'' の特徴である簡易データベース機能（「StructuredWiki」と呼ばれています）を試してみようと思います。お楽しみに！（＾＾）