 |
デザインテンプレートファイルの作り方
|
 |
では、実際のデザインテンプレートファイルの作り方を解説します。
テンプレートファイルの作り方について
大きく分けてテンプレートファイルを作る方法は2つあります。一つは、付属していたテンプレートファイルを改造する方法、もう一つは、自分が普段よく使うホームページエディタでページをデザインし、その後、必要に応じて「置き換え記号」を書き込んでいく方法です。
付属しているテンプレートファイルを自分で改造する方法は、この表示をこっちに移動させたいとか、この色やデザインをちょっと変えたいといった場合に効果的です。一方で、自分でページのデザインを一から行う方法は、新しいデザインのページを作る場合に効果的です。
まずは付属のテンプレートファイル（ダウンロードしたファイルには一覧表時用の small.html、通常表示用の view.html、詳細表示用のall.html
と3種類のテンプレートファイルが付属しています）を開き、その中身を自分の目で見、次に管理メニューを利用して、各テンプレートファイルで登録されているデーターを表示させ、どのように動いているのかを理解するのが大切です。そうすることにより、自分のデザインに必要な置き換え記号は何か、不要な置き換え記号は何か、ということが見えてきます。
仕切記号について
まず最初に、デザインテンプレートをヘッダ部分（繰り返し表示されない部分。タイトル部分となる）、記事部分（繰り返し表示される部分で、実際の項目値などが入る）、セパレーター部分（記事と記事の境目に表示される。必須というわけではないのでその場合は改行だけ入れておけばよい）、フッダ部分（ページの一番下に表示される部分）の4つに区別する必要があります。
4つの部分に区別したら、その区切りとなる場所に、 ■1■、■2■、■3■の仕切記号を入れていくわけですが、この際に次の２つのルールを守る必要があります。
・ 必ず1行に 仕切記号だけ を書き、他の文字は入れてはいけない。
・ 上下に改行を入れておく
置き換え記号について（ヘッダ・フッダ部分）
まずは、ヘッダ・フッダ部分に有効な置き換え記号を紹介します。
・ ■title■： これは、摘出条件に置き換えて表示されます。
例えば、profile.cgi?key=営業部&label=7 というURLで表示させた場合を考えてみましょう。この場合、「7」番目の項目に、「営業部」という文字が含まれているデーターを摘出することになります。
この例の場合、７番目の項目が「所属」項目であるとすると、「所属項目に営業部が含まれているデーターを表示しろ」という条件になります。■title■はまさにこのような検索条件を表示するのです。
実物を見た方が理解しやすいので、デザインテンプレートファイル と 実際の表示結果（サンプル）を見比べてみて下さい。デザインテンプレートファイルの「■title■」と書いてある場所に、実際の表示結果では「[全件]
登録順表示」と表示されているのがわかるでしょうか。このように、CGIは■title■という置き換え記号を、摘出条件に置き換えて表示しているわけです。
・ ■copy■： これは、CGIの著作権情報を表示します。著作権の表示はCGI利用の必須条件なので必ず表示するようにしてください。
・ ■css■： これは、setup.cgiで設定したスタイルシートに置き換えられるようになっており、<head>タグの中に入れて使います。
置き換え記号について（記事部分）
次に、記事部分で利用できる置き換え記号を解説します。
・ ■item【項目番号】■： これは、該当する項目のデーターを表示する置き換え記号です。
デザインテンプレートファイルで ■item1■ となっている場所には、項目1番の値が、■item2■ となっている場所には、項目2番の値が、それぞれ表示されることになります。
実物を見た方が理解しやすいので、デザインテンプレートファイル と 実際の表示結果（サンプル）を見比べてみて下さい。このサンプルでは、■item1■には各データーの１番目の項目である名前が、■item2■には各データーの２番目の項目である読み仮名が表示されています。なお、各項目番号がどの内容かは管理メニューの「項目編集」で知ることが出来ます。
・ ■label【項目番号】■： これは、該当する項目名を表示する置き換え記号です。例えば、項目の1番を「名前」、4番を「メールアドレス」と設定している場合、■label1■という置き換え記号は「名前」という文字に、また、■label4■という置き換え記号は「メールアドレス」という文字に、それぞれ置き換わって表示されるわけです。
これもデザインテンプレートファイル と 実際の表示結果（サンプル） を見比べて見ると分かり易いでしょう。このサンプルでは、■label5■には項目5番に設定した項目名である「性別」が、■labe6■には項目6番に設定した項目名である「年齢」が表示されています。なお、各項目番号がどの内容かは管理メニューの「項目編集」で知ることが出来ます。
・ ■edit■： これは、編集フォームを表示させる置き換え記号です。このフォームを利用することにより、管理者、及び登録者はデーターを編集することが出来ます。
これもデザインテンプレートファイル と 実際の表示結果（サンプル） を見比べて見ると分かり易いでしょう。
この■edit■置き換え記号は必須というわけではありませんが、必ず、■edit■置き換え記号を利用したデザインテンプレートファイルを１つは用意しておく必要があります。というのも、記事の修正には、■edit■によって置き換えられる編集フォームが必要だからです。■edit■置き換え記号を利用したデザインテンプレートファイルが１つもない場合、それは登録された記事を修正する手段がないことを意味します。
なお、この修正フォームに、データー登録時に入力したパスワードを入力して編集を行った場合は、管理者が変更を許可した項目だけが修正できます。逆に、管理人用のマスターパスワード（setup.cgiで設定しているパスワード）を入力した場合は、全ての項目が修正できるようになっています。
・ ■new■： これは、登録が新しいことを示す「NEWアイコン」に置き換えられます。setup.cgi
ファイルの $new 関数（51-52行目）で「NEWアイコン」を指定することが出来、表示する時間帯は48-49行目で指定できます。
このように、置き換え記号を使ったHTMLファイルを用意することで、CGIに対して、特定の位置に、必要な情報を表示させることができるわけです。これを利用することで、ｉモード対応ページを用意することも出来ます。 |
