ホームページ作成の裏技!

[リンク集](管理人が登録するタイプ)を作ってみよう! の巻

リンク集を作る

さて 今回からちょっと実践的な内容になってきますよ。お待たせいたしました。まず わかさとのリンク集見てもらいましょうか。ここをクリックすると別ウィンドウでトップページ同様のサンプルが表示されます。このテストページの画面下部にあるペンギンアイコンをクリックすると 認証ウィンドウが開くのでユーザー名に[waka]パスワードに[sato]と入力して 編集画面を開きましょう。
今回は リンク先URL・バナーイメージ・サイト名・紹介コメントと入力フィールドがありますね。このCMSは 以下のコードで実現しています。
<h1>リンク集(管理人が登録するタイプ)のテストページ</h1><table border='1' cellspacing='0'>&nbsp;&nbsp;<tr>&nbsp;&nbsp;&nbsp;&nbsp;<th width="120px">リンク</th>&nbsp;&nbsp;&nbsp;&nbsp;<th width="20%">管理者様</th>&nbsp;&nbsp;&nbsp;&nbsp;<th>なずなからのコメント</th>&nbsp;&nbsp;</tr>&nbsp;&nbsp;<whiledata src='cnt' name='link' putmax='*'>&nbsp;&nbsp;&nbsp;&nbsp;<tr>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="$cnt_text0" target="_blank" cont='リンク先URL'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span cont='バナーイメージ'>$cnt_body1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td cont='サイト名'>$cnt_text1</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td align="left" cont='紹介コメント'>$cnt_body0</td>&nbsp;&nbsp;&nbsp;&nbsp;</tr>&nbsp;&nbsp;</whiledata></table>

繰り返す箇所を見出す

今回は 一つのテーブルで<tr>〜</tr>の範囲 要はテーブルの1行単位で繰り返し処理をしています。このように CMS化する場合に最も重要なのは繰り返すべき部分はどこかを 見つけることにあります。
殆どのCGIで構成される掲示板やリンク集・日記帳などのページには 必ずといっていいほど繰り返される部分が存在します。自分でCMSの コンテンツを作成する際には デザインやタグなどを吟味してどの部分が繰り返されるべきなのかを決定することが重要です。
普通にHTMLファイルを作成していても 何となく見えているものだと思います。その繰り返し箇所が見えたら あとはその部分に どんな情報が必要なのかをピックアップするだけです。
もちろん後からいくつでも追加できるんですから そんなに慎重になることはないんですけどね。

変数の決め方

リンク先URLに$cnt_text0 サイト名に$cnt_text1 紹介コメントに$cnt_body0 バナーイメージに$cnt_body1を割り当てていますが これは何を元に決定したかというと 単純に入力フィールドの種類です。cnt_text0〜cnt_text5までは 1行の入力フィールド(すなわちテキストフィールド) cnt_body0〜cnt_body5までは複数行の入力フィールド(テキストエリア)が 編集画面に表示されます。入力する内容のボリュームによって 使い分けているだけです。

コンテンツエディタで使用できる入力可能な変数の種類としては以下のようなものがあります。
$cnt_text0〜$cnt_text5
1行入力フィールド。文字数限界は半角255文字以内。
$cnt_image0〜$cnt_image5
イメージファイル名入力フィールド。画像アップロード機能を利用できるようになるが 入力・格納値はいずれもファイル名の文字列。よくあるファイルアップローダーの参照ボタンの付いた入力フィールドとは異なる。
$cnt_body0〜$cnt_body5
複数行の入力フィールド。長文を入力する際に使用する。HTMLタグも入力できる。
$cnt_sub0〜$cnt_sub9
1行入力フィールド。文字数限界は半角255文字以内。$cnt_text5まででまかなえない場合に使用する。
今回バナーイメージにcnt_imageを使用していないのは 直リンクするためです。このイメージ用の変数の使い方は また後日改めてご説明します。

オリジナルのCMSを作ってみましょう!

コンテンツエディタを利用してCMS化する際の HTMLタグの書き方で遵守すべきは以下の点です。
<a href="$cnt_text0" target="_blank" cont='リンク先URL'>
<span cont='バナーイメージ'>$cnt_body1</span>
<td cont='サイト名'>$cnt_text1</td>
<td align="left" cont='紹介コメント'>$cnt_body0</td>
このようにタグの種類に関係なく同じ行に変数とcont属性を記述するということです。cont属性と変数は前後しても構いません。ただし 同一行に2つの変数を記述したりcont属性を記述し忘れたりすると 正しい編集画面が表示されません。

編集画面を見ていただければ分かるように cont属性で指定した文字列が入力フィールドの見出しとして表示されていますね。cont属性の有無を確認して 同一行の変数を入力できるように編集画面を生成するようシステムが組まれていますので それが最低限のルールです。
あとは 当然ですが同一名の変数を異なる箇所で使わないということです。ページ内で使用できる変数名は 必ず1箇所だけです。ただし 表示するだけなら複数箇所に記述があっても構いません。あくまでもcont属性と組み合わせて入力できるようにする変数が ページ内でユニークでなければなりません。

今回のHTMLの全文はこちらでご覧いただけます。
(※このCMS機能はホムペネットのレンタルサーバーでしか動作しません ご了承ください)
これを応用して 自分なりのCMSを利用したコンテンツをいくつでも作れます。頑張ってみてください!




NetMall
宿NetMall
宿帳くん
Powered by Homepe.net