初心者に分かりやすい
ホームページ作成
ブログ(レビュー カメラ 写真)
無料CGI(Perl/PHP)配布
写真

 

 

 


 

基本構造(仕切記号)

 このDatabase Factoryは、特殊な記号を組み入れたHTMLファイル(デザイン用のHTMLファイル)を読み込み、それを利用することによって、ページを表示しています。おおざっぱに言ってしまえば、予め普通にHTMLファイルを作り、そのファイルに決められた記号を挿入し、CGIファイルと同じフォルダに入れておけば、CGIがそのファイルを読み込み、そのデザインを使って表示してくれるわけです。

 

 この、デザインのためのHTMLファイルをデザインテンプレートファイルと呼ぶわけですが、デザインテンプレートファイルは大きく分けて次の4つの部分に分かれます。 ヘッダ部分、記事(自己紹介表示)部分、記事のセパレーター部分、フッダ部分です。

 これらの4つの部分は、それぞれ、■1■ ■2■ ■3■という3つの「仕切記号」により分けられています。つまり、CGIはデザインテンプレートファイルを読み込む際、この仕切記号を基準にして各部分を認識し処理を行っています。


 図で表すと、こんな感じになります。

HTMLファイル

【ヘッダ部分】
■1■
【記事部分】
■2■
【セパレーター】
■3■
【フッダ部分】

 

 実際のファイルを見るとよく分かると思うので、 small.html のソースを見て、まずはこのことを理解してみて下さい。

 

CGI はどうやって「ページ」を出力するのか

 CGIが実際にページを表示する過程について説明しましょう。例えば、1行に3件ずつ表示しろとCGIに命令が渡されたとします。

 この場合、CGIはまずデザインテンプレートファイルを【ヘッダ部分】、【記事部分】、【セパレーター】、【フッダ部分】とに区別しながら読み込みます。

 読み込みが終了したら、最初に【ヘッダ部分】を表示します。

 次に、【記事部分】を1行に3列表示します。そして、1行に3列表示し終わったら【セパレーター】を表示します。再び、【記事部分】を1行に3列表示し、【セパレーター】を表示します。これを必要なだけ繰り返します。

 最後に、【フッダ部分】をそのまま表示します。


 これを図で表すと、実際にCGIが出力するページはこんな感じになります。

表示されるページ

【ヘッダ部分】
【記事部分】【記事部分】【記事部分】
【セパレーター】
【記事部分】【記事部分】【記事部分】
【セパレーター】
【記事部分】【記事部分】【記事部分】
【セパレーター】

【フッダ部分】

 つまり、【ヘッダ部分】と【フッダ部分】はそのまま出力されるのに対し、【記事部分】は繰り返し表示され、【セパレーター】は記事部分が表示された後に繰り返し表示されることになります。

 

CGIはどうやって「各項目」を表示するのか(置き換え記号)

 先に small.html のソースを見てもらえれば分かるように、ページには■item1■のような記号が多く書かれています。これが「置き換え記号」です。CGIはこの置き換え記号を読みとり、データーベース内の実際の文字に置き換えて、ページを出力します。

 つまり、予め先にデザインをHTMLファイルで作ってしまい、その後、各項目、その地の部分を■item1■のような置き換え記号に置き換えるだけで、デザインテンプレートファイルが手早く完成するわけです。

 

デザインテンプレートファイルの作り方

 では、実際のデザインテンプレートファイルの作り方を解説します。

 

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

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

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

 まずは付属のテンプレートファイル(ダウンロードしたファイルには一覧表時用の small.html、通常表示用の view.html、詳細表示用のall.html と3種類のテンプレートファイルが付属しています)を開き、その中身を自分の目で見、次に管理メニューを利用して、各テンプレートファイルで登録されているデーターを表示させ、どのように動いているのかを理解するのが大切です。そうすることにより、自分のデザインに必要な置き換え記号は何か、不要な置き換え記号は何か、ということが見えてきます。

 

仕切記号について

 まず最初に、デザインテンプレートをヘッダ部分(繰り返し表示されない部分。タイトル部分となる)、記事部分(繰り返し表示される部分で、実際の項目値などが入る)、セパレーター部分(記事と記事の境目に表示される。必須というわけではないのでその場合は改行だけ入れておけばよい)、フッダ部分(ページの一番下に表示される部分)の4つに区別する必要があります。

 4つの部分に区別したら、その区切りとなる場所に、 ■1■、■2■、■3■の仕切記号を入れていくわけですが、この際に次の2つのルールを守る必要があります。

・ 必ず1行に 仕切記号だけ を書き、他の文字は入れてはいけない。
・ 上下に改行を入れておく

 

置き換え記号について(ヘッダ・フッダ部分)

まずは、ヘッダ・フッダ部分に有効な置き換え記号を紹介します。

■title■: これは、摘出条件に置き換えて表示されます。

 例えば、profile.cgi?key=営業部&label=7 というURLで表示させた場合を考えてみましょう。この場合、「7」番目の項目に、「営業部」という文字が含まれているデーターを摘出することになります。

 この例の場合、7番目の項目が「所属」項目であるとすると、「所属項目に営業部が含まれているデーターを表示しろ」という条件になります。■title■はまさにこのような検索条件を表示するのです。

 実物を見た方が理解しやすいので、デザインテンプレートファイル実際の表示結果(サンプル)を見比べてみて下さい。デザインテンプレートファイルの「■title■」と書いてある場所に、実際の表示結果では「[全件] 登録順表示」と表示されているのがわかるでしょうか。このように、CGIは■title■という置き換え記号を、摘出条件に置き換えて表示しているわけです。

 

■copy■: これは、CGIの著作権情報を表示します。著作権の表示はCGI利用の必須条件なので必ず表示するようにしてください。

 

■css■: これは、setup.cgiで設定したスタイルシートに置き換えられるようになっており、<head>タグの中に入れて使います

 

置き換え記号について(記事部分)

 次に、記事部分で利用できる置き換え記号を解説します。

■item【項目番号】■: これは、該当する項目のデーターを表示する置き換え記号です。 デザインテンプレートファイルで ■item1■ となっている場所には、項目1番の値が、■item2■ となっている場所には、項目2番の値が、それぞれ表示されることになります。

 実物を見た方が理解しやすいので、デザインテンプレートファイル実際の表示結果(サンプル)を見比べてみて下さい。このサンプルでは、■item1■には各データーの1番目の項目である名前が、■item2■には各データーの2番目の項目である読み仮名が表示されています。なお、各項目番号がどの内容かは管理メニューの「項目編集」で知ることが出来ます。

 

■label【項目番号】■: これは、該当する項目名を表示する置き換え記号です。例えば、項目の1番を「名前」、4番を「メールアドレス」と設定している場合、■label1■という置き換え記号は「名前」という文字に、また、■label4■という置き換え記号は「メールアドレス」という文字に、それぞれ置き換わって表示されるわけです。

 これもデザインテンプレートファイル 実際の表示結果(サンプル) を見比べて見ると分かり易いでしょう。このサンプルでは、■label5■には項目5番に設定した項目名である「性別」が、■labe6■には項目6番に設定した項目名である「年齢」が表示されています。なお、各項目番号がどの内容かは管理メニューの「項目編集」で知ることが出来ます。

 

■edit■: これは、編集フォームを表示させる置き換え記号です。このフォームを利用することにより、管理者、及び登録者はデーターを編集することが出来ます。

 これもデザインテンプレートファイル 実際の表示結果(サンプル) を見比べて見ると分かり易いでしょう。

 この■edit■置き換え記号は必須というわけではありませんが、必ず、■edit■置き換え記号を利用したデザインテンプレートファイルを1つは用意しておく必要があります。というのも、記事の修正には、■edit■によって置き換えられる編集フォームが必要だからです。■edit■置き換え記号を利用したデザインテンプレートファイルが1つもない場合、それは登録された記事を修正する手段がないことを意味します。

 なお、この修正フォームに、データー登録時に入力したパスワードを入力して編集を行った場合は、管理者が変更を許可した項目だけが修正できます。逆に、管理人用のマスターパスワード(setup.cgiで設定しているパスワード)を入力した場合は、全ての項目が修正できるようになっています。

 

■new■: これは、登録が新しいことを示す「NEWアイコン」に置き換えられます。setup.cgi ファイルの $new 関数(51-52行目)で「NEWアイコン」を指定することが出来、表示する時間帯は48-49行目で指定できます。

 

 このように、置き換え記号を使ったHTMLファイルを用意することで、CGIに対して、特定の位置に、必要な情報を表示させることができるわけです。これを利用することで、iモード対応ページを用意することも出来ます。

 

[ 戻る ]

 

 

人気記事ランキング
   

サイトマップ
コンタクト

文章や画像等の無断利用・転載はご遠慮ください。
当サイトへのリンクは原則フリーです。どのページにリンクされても構いません。
Copyright © CoolandCool. All rights reserved.