howtoUse

charaData.cgi の使い方

　使い方と言うか作り方（設置方法）と言うか、自分でもよくわかってないような感じなんで、ごく簡単なヤツの作り方を順を追って書いておきます。

HTMLファイル作成時の注意点
　データの表示、編集用のHTMLファイルを作成することになりますが、いくつか仕様上の注意点がありますので最初に書いておきます。
- タグやその属性は必ず小文字で記述し、属性の値は、「""」か「''」で括ってください。値に関しては、必要に応じて大文字を使ってもらって構いません。
- img, form, input, textarea, select, option は一行に一つづつ記述し、同じ行のその後ろにはタグは一切記述しないでください。
- 文字コードはシフトJISかEUCにしてください。EUCの方が若干動作が速いかもしれません。また、metaタグで文字コードを指定しておいてください。
  　[シフトJIS]
  　<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  　[EUC]
  　<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
defView.htm の作成
　個別データ表示用のHTMLファイルを作成します。
- 　まず最初に、どういった項目を保存するかを決めます。ここでは、ごく簡単なTRPGシステムを利用していると仮定して、「名前」「職業」「レベル」「能力値（技量・体力・運）」「所持金」「所持品」を記録することにします。
  　項目を決めたら、とりあえず、何か適当な値を入れてHTMLファイルを作成します。
  　こんな感じにテキトーに
  　デザインは後から修正可能なので、最初はこんなもんで十分です。もちろん、最初からきっちりデザインを決めても構いません。
- 　次に、#SYSTEM:list#と#SYSTEM:edit#という文を入れます。#SYSTEM:list#は一覧（検索画面）に戻るリンクに、#SYSTEM:edit#は編集画面に移るためのパスワード入力フォームとボタンに、それぞれ置換されます。位置はどこでも構いませんが、用途上、それぞれ上と下にしておくのがよいかと思います。
- 　最後に、各項目に任意の変数名を割り当て、値表示部分を#DATA:変数名#という書式でその変数に差し替えます。例えば「名前」の変数名を「name」と決めたら、「トンヌラ」という名前（値）の部分を「#DATA:name#」と書き換えます。
  　最終的にはこんな感じになります
defForm.htm の作成
　先に作成したdefView.htmを流用しつつ、データ入力用のHTMLファイルを作成します。
- 　フォーム部全体を「<form></form>」で括り、値の部分を各種フォーム部品に置き換えていきます。短めの文字列や数値ならば「<input type="text">」、メモ等の長文は「<textarea>」、選択式にしたければ「<select>」を用いますが、その他ラジオボタンやチェックボックスも使用可能です。
  　各フォーム部品の名前には、defView.htmで設定した変数名を指定します。また、「<textarea>」以外は（空であっても）必ず初期値（value）を設定してください。以下に例を示します。
  - <input type="text" name="level" size="3" value="">
  - <input type="checkbox" name="state" value="毒">毒
  - <input type="radio" name="sex" value="男性">男性
    <input type="radio" name="sex" value="女性">女性
  - <select name="class">
    <option value="戦士">戦士
    <option value="魔法使い">魔法使い
    <option value="僧侶">僧侶
    <option value="盗賊">盗賊
    </select>
  - <textarea name="item" cols="40" rows="10">剣、背負い袋</textarea>
  　こんな感じにテキトーに
- 　次に、#SYSTEM:list#と#SYSTEM:view#、そして#SYSTEM:delete#という文を入れます。#SYSTEM:list#は一覧（検索画面）に戻るリンクに、#SYSTEM:view#は個別データ表示画面に戻るリンクに、そして#SYSTEM:delete#はデータの削除画面へのリンクに、それぞれ置換されます。位置はどこでも構いませんが、用途上、戻るリンクは上、削除リンクは下にしておくのがよいかと思います。
- 　最後に、パスワード用のフォームと実行ボタンを配置します。
  　<input type="text" name="defPass" size="10" value="">
  　<input type="submit" value="実行">
  という二行の文を、formで括った中のどこか（一番下がよいかと思います）に入れてください。サイズやデザインの変更は構いませんが、それ以外は変更せずにそのまま記述してください。
  　最終的にはこんな感じになります
defList.htm の作成
　データ一覧（検索）画面用のHTMLファイルを作成します。
- 　まず、一件分の一覧データ表示部分を作成します。項目の値が入る部分は、defView.htmでやったように、#DATA:変数名#という形式で記述してください。個別ページへのリンクは、
  　<a href="#SYSTEM:cgi#?cgiMode=view&cgiId=#DATA:cgiId#"></a>
  と記述してください。何も考えずにそのまま書いてもらっていいんですが、一応説明しておくと、#SYSTEM:cgi#はCGIのファイル名に、#DATA:cgiId#は個別データのIDに置換され、そのIDに該当するデータを表示するようCGIに指示を出しているっつー感じです。
  　複数データの表示時には、この一件分の表示部分が繰り返されるわけですが、この部分を「」で括ります。一覧は大抵table表示になるでしょうから、通常はtr部分を括ればよいはずです。以下はtableの一例です。
  　<table>
  　<tr>
  　<td></td>
  　<td>名前</td>
  　<td>職業</td>
  　<td>レベル</td>
  　<td>更新日時</td>
  　</tr>
  　
  　<tr>
  　<td><a href="#SYSTEM:cgi#?cgiMode=view&cgiId=#DATA:cgiId#">表示</a></td>
  　<td>#DATA:name#</td>
  　<td>#DATA:class#</td>
  　<td>#DATA:level#</td>
  　<td>#DATA:defDataTime#</td>
  　</tr>
  　
  　</table>
  　上記の例にある更新日時（#DATA:defDataTime#）は自動で保存される項目になっていますので、defView.htm等で設定することなく使うことが出来ます。
- 　次に、上記の部分で表示させることにした項目（ここでは、「名前」「職業」「レベル」）の中から、検索・ソートに利用するデータを選びます。今回は「名前」「職業」「レベル」の三つとも入れることにします。選んだ項目の変数名と、対応する任意の項目名を、下記のような形でHTMLファイル内に記述します。[tab]となっている部分はその通りに書くのではなく、タブを入れてタブ区切りにするという意味です。
  　
  　
  　
  　登録日時と更新日時は自動でソート項目に入りますので、設定する必要はありません。
- 　他、CGIのタイトル等、デザイン上必要な部分を記述します。
  　こんな感じにテキトーに
- 　#SYSTEM:prev#、#SYSTEM:top#、#SYSTEM:next#を記述します。これは、登録データ件数が増えて複数ページになったときに、次ページ、先頭ページ、前ページへのリンクに置換されます。位置はどこでも構いませんが、tableの上部にでも書いておくとよいかと思います。
- 　#SYSTEM:search#、#SYSTEM:entry#、#SYSTEM:admin#を記述します。#SYSTEM:search#は検索フォームに、#SYSTEM:entry#は登録用のパスワード入力フォームとボタンに、#SYSTEM:admin#は管理画面へのリンクに、それぞれ置換されます。位置はどこでも構いませんが、用途上、検索フォームは上に、その他は下にするのがよいかと思います。
  　最終的にはこんな感じになります
ファイルのアップロード
- 　これまでに作成したdefView.htm、defForm.htm、defList.htmの三つのファイルをhtmlフォルダ内の同名ファイルと差し替えます。
- 　charaData.cgiを開き、perlへのパスを利用サーバの仕様に合わせて書き換えます。また、管理用パスワードを任意のパスワードに書き換えます。
- 　一式をサーバにアップします。パーミッションは、以下のような感じでテキトーに。
```
	charaData.cgi  [705]
	jcode.pl       [604]
	stdioThu.pl    [604]
	admin.cgi      [606]
	list.cgi       [606]
	searchItem.cgi [606]
	(html) [707] -+- defAdmin.htm
	              +- defError.htm
	              +- defForm.htm
	              +- defList.htm
	              +- defPass.htm
	              +- defView.htm
	              +- defYes_or_No.htm
	              +- main.css
	(data) [707]
	(img)
	
```
- 　ブラウザでcharaData.cgiにアクセスし、エラーが出ずにそれっぽい画面が表示されれば、とりあえずは成功です。
初期設定
- 　管理と書かれたリンクをクリックして、管理パス入力画面で管理用パスワードを入力し、管理メニューに入ります。
- 　登録用パスワードを設定します。これは、利用者が登録する際に必要となるパスワードで、登録者を制限するのに使えるかと思います（登録時にだけ教え、あとは定期的に変更する）。CGIを内輪だけで用い、基本的に非公開とするならば、無理に設定する必要はありません。
- 　一覧のページ毎の表示件数を設定します。とりあえず10件ぐらいにしておけばよいかと思います。
- 　管理者ロックをONにして、実行ボタンをクリックします。そうすると、データの整理が選択出来るようになるので、データの整理をONにして実行ボタンをクリックします。最後に、今度は管理者ロックをOFFにして、実行ボタンをクリックします。このデータの整理は、CGI設置時に一度実行すれば十分です。
- 　以上で設定は終了です。あとは好きなようにデータを登録していくだけです。
HTML生成機能
- 　通常、データを表示するたびに、元となるdefView.htmを利用してHTMLを生成しているのですが、項目数が多くなると、表示がえらく重くなってしまいます。そこで、データの登録・編集時にあらかじめHTMLを生成して保存しておき、表示時にはそれを表示させる機能をつけてみました。登録・編集の保存時に若干重くなりますが、表示は断然速くなります。ただし、項目データだけでなく、生成したHTML自体を保存するので、当然その分容量を食います。
  　この機能を利用するには、charaData.cgi内の「HTML生成」という部分を、0から1に変更してください。
- 　HTML生成がONのときに管理メニューでデータの整理を実行すると、これまで生成したHTMLデータは一度すべて破棄されます（元データは残ります）。この場合、次にデータを表示する際に改めてHTMLが生成・保存されるため、そのときには表示が重くなりますのでご注意ください。
その他
- 　パスワード認証時にcookieを利用しているので、編集等を行う場合にはcookieはONにしておいてください。閲覧だけならばOFFでも問題ないかと思います。
- 　設置後の使い方は大体わかるかとは思いますが、データ登録時の注意点を一つ。登録時のデータ入力フォームにパスワード欄がありますが、これは個別のデータに対して設定するパスワードです。空欄（未入力）でも登録は出来ますが、そうすると、パスワード欄が空欄の状態で編集が行えるため、誰でも編集が可能になってしまいますので注意してください。
  　編集画面で、後からパスワードを変更することも可能です。
- 　管理者は、管理用のパスワードを使うことで、すべてのデータの編集・削除を行うことが出来ます。
- 　sample02はもう少し詳しい（高度な）例になっていますので、そちらも合わせて参考にしてください。なお、sample02はJavaScriptを利用していますので、JavaScriptをOFFにしていると一部利用出来ない部分がありますのでご注意ください。