テンプレートファイルについて

基本的なこと

　Cool Shot! は、あらかじめ用意されたファイルを読み込み、そのデザインを利用して表示する方法を採っています。この、「あらかじめ用意されたファイル」のことを、（デザイン）テンプレートファイルと言います。

　テンプレートファイルは基本的にHTMLタグで構成されているので、HTMLタグの基本を知っている人であれば、誰でも気軽にデザインを変更することができます。テンプレートファイルにはいくつかの「置き換え記号」が書かれており、Cool Shot! はその「置き換え記号」を、タイトル画像や、記事の本文等に置き換えながら表示して、ページを表示しています。

テンプレートファイルの構造

　原則的なテンプレートファイルの構造は、３つの部分に分かれます。記事内容よりも上の「ヘッダ部分」、「記事内容部分」、記事内容よりも下の「フッダ部分」です。実際にページを表示する場合には、「ヘッダ部分」を表示し、次に「記事内容部分」を表示する記事の数だけ繰り返し表示し、最後に「フッダ部分」を表示する仕組みになっています。

　テンプレートファイルでは、この３つの部分を、以下のように「■1■」と「■2■」という記号で区切る必要があります。

　実際のファイルを見てみればこのことがよく理解できると思います。designフォルダ内にあるiview.datファイルをメモ帳等で開いてみてください。

　ブルーの部分がヘッダ部分、ピンクの部分が記事部分、オレンジの部分がフッダ部分です。このように、区切りには「■1■」と「■2■」を使います。そして、「■1■」と「■2■」が書かれている行には他には何も書いてはいけません。関係ない文字が書かれていると、区切りとして認識されず、表示がおかしくなるので注意してください。

ページの表示の仕組みについて

　テンプレートファイルの中を見てもらえば分かりますが、■main■や、■new■といった、「■」で囲まれた文字を数多く目にしたことと思います。この「■****■」を「置き換え記号」と呼び、プログラムが必要な内容に置き換えて、実際のページを表示しているわけです。

　例えば、記事のタイトルを表示したい部分に「■title■」と書いておけば、Cool Shotで表示する際に、その部分が記事のタイトルに置き換えて表示されますし、「■date■」と書いておけば、その部分が記事の投稿日時に置き換えられて表示されるわけです。

　もっと具体的に見てみましょう。designフォルダ内にあるires.datファイルにはこんな記述があります。

　これを実際にCool Shot! で表示すると、「■mark■」が「□」に置き換わり、、「■comment■」部分は記事の本文に置き換わり、「■name■」が記事投稿者の名前に置き換わり、、という風に処理が行われ、

　このように表示されます（置き換え記号の詳細については別ページにて解説します）。

テンプレートファイルの作り方について

　大きく分けてテンプレートファイルを作る方法は2つあります。一つは、付属していたテンプレートファイルを改造する方法、もう一つは、自分が普段よく使うホームページエディタでページをデザインし、その後、必要に応じて「置き換え記号」を書き込んでいく方法です。

　付属しているテンプレートファイルを自分で改造する方法は、この表示をこっちに移動させたいとか、この色やデザインをちょっと変えたいといった場合に効果的です。一方で、自分でページのデザインを一から行う方法は、新しいデザインのページを作る場合に効果的です。

　どちらにせよ、まずはテンプレートファイルを開き、その中身を自分の目で見、次に掲示板を表示させ、どのように動いているのかを理解するのが大切です。そうすることにより、自分のデザインに必要な置き換え記号は何か、不要な置き換え記号は何か、ということが見えてきます。

用意するテンプレートファイルについて

　必要なテンプレートファイルは全部で10種類あり、全てdesignフォルダに入っていますが、いくつかのテンプレートファイルは流用が可能なので、実際にデザインが必要なのは5-6種類となります。

　各ファイルの拡張子はdatになっていますが、これをhtmlに変えればhtmlファイルとして扱うことが可能です。慣れないうちは、テンプレートファイルを編集する際にはhtmlに拡張子を変更し、ホームページエディタで編集し、再び拡張子をdatに戻してCoolShotで利用する、等の手順を踏むと良いかもしれません。

　note.dat が通常表示に使われるテンプレートファイルです。記事の内容が表示されます。res.dat がレス表示に使われるテンプレートで、res.datの全体が、note.datの「■m_i■」の部分に表示されます。

　tree.dat はツリー表示時に使われるテンプレートファイルです。各記事のタイトル一覧を表示します。tree_res.dat がレス表示に使われるテンプレートで、tree_res.datの全体が、tree.datの「■res■」の部分に表示されます。view.dat は、一覧表示されたタイトルをクリックして、各記事を一つずつ表示するときに使われるテンプレートファイルです。そのため、view.datの「記事部分」は通常と異なり1度しか表示されません。view.datにおけるレス表示は、res.datが利用されます。大抵の場合、view.dat は note.dat の記事表示部分をコピー＆ペーストしておけば問題ありません。

　i.dat はiモード表示時に使われるテンプレートです。タイトルの一覧が表示されます。iview.dat は、一覧表示されたタイトルをクリックして、各記事を一つずつ表示するときに使われるテンプレートファイルです。そのため、これもview.datと同様、「記事部分」は通常と異なり1度しか表示されません。iview.datにおけるレス表示には、ires.dat が利用され、iview.dat の「■res■」の部分に表示されます。

　search.dat は検索結果を表示するために使われます。特に必要がなければ、note.dat のデザインをそのまま流用して、検索結果表示に必要な「■messg■」を入れ、その後不要ないくつかの置き換え記号を削除するだけで構いません。

　past.dat は過去ログ生成の際に使われます。過去ログファイルは、過去ログフォルダに保存されるため、IMGタグやAタグのパスが他のテンプレートとは異なります。そのため、必ず絶対URLを用いるようにしてください。内容的には note.dat をほぼそのまま使って問題ありません。

テンプレートファイル制作時の注意事項

　past.dat 以外のテンプレートファイルに記述するIMGタグやAタグのパスは必ずc_board.cgi ファイルから見たパスにする必要があります。テンプレートファイルはdesignフォルダの中にありますが、実際にページを表示するのはc_board.cgi ファイルなので、c_board.cgiファイルから見たパスでなければいけません。

　従来のバージョンではテンプレートファイルとcgiファイルを同じ場所に入れていたのでこのような違いは生じませんでしたが、今バージョンから整理のためテンプレートファイルはdesignフォルダに入れることにしたので、このような仕様になりました。そのため、パスにはなるべく絶対パスを利用するか、もしくは、一旦編集したいテンプレートファイルをcgiファイルと同じフォルダに移動して、それからテンプレートファイルを編集し、編集が終わったら再びdesignフォルダに入れ直すようにすると良いでしょう。

　past.dat に至っては更にひと味違い、old フォルダから見たパスでなければいけません。基本的にはdesign フォルダから見たパスもold フォルダから見たパスも、大差ないので相対パスでも良さそうですが、念には念を入れて絶対パスを使った方が無難だと思います。