What's New (Whats New) 手っ取り早く理解するための簡単な導入例

手っ取り早く理解するための簡単な導入例

What's Newでコンベンション施設の紹介と検索を管理者が作成、更新、削除できるホームページの例です

What's New　は基本的には、以下の様にメニュー画面がありメニューの一件一件の詳細画面があるホームページを管理者が作成、更新、削除できるソフトです。
従って、詳細画面のフォーマットは全て同じフォーマットで表示されるようになっていなければなりません。
しかし、これはあくまでも基本であって、１頁ごとの管理（メニュー画面だけで処理する）やリンク集など設計、テンプレートを工夫すれば色々なホームページのシーンで使うことができるようになります。

この例の場合、メニュー（インデックス）ページは以下のようなページフォーマットになっています。

施設インデックス
施設名	住所	施設種別	人数	面積 m2	外観	URL
芦屋ルナホール	芦屋市本町５－８－６	公共施設	500	500		https://www.runa.hall/
芦屋市立美術館	芦屋市銀座５－７－８	公共施設	50	700		https://www.ashiya.com

施設の詳細ページは以下の通りでメニューページの施設名をクリックすると表示されます。

施設詳細
芦屋ルナホール
住所：芦屋市本町５－８－６施設種別：公共施設人数：500人面積：500m2 URL：https://www.runa.hall/ 外観写真：

[ インデックス ] [ 次の施設→ ]

上記の入力項目をマスター管理者メニューの「初期設定」でカスタム項目としてカスタム１～９で設定します。
「データ形式」のメニュー頁カスタム項目数は「0」　詳細頁カスタム項目数は「9」　詳細頁画像項目数は「0」を指定します。

この設定後、管理者メニューの「データの追加」を実行すると以下の登録画面になりデータを登録したり、変更、削除することができるようになります。

メニュー頁のテンプレート作成

次に、ここで登録したデータを表示するためのテンプレートを作成します。
最初にメニュー頁と詳細ページの例を見せましたが、このように表示される完成形のHTMLファイルを事前に作成しておきます。
その完成HTMLソースを基にWhat'sNew用の挿入置換タグと置き換えていきます。
そのため、ページはデザイナーが自由にデザインすることができるのです。

置き換えた後のHTMLソースは以下のようになっています。太い文字のタグがWhat'sNew用の挿入置換タグです。

茶色のタグはバナー画像をランダムに表示させるためのタグです。
緑色の行はメニューのタイトル行を表します。
青色の行はデータ（施設）が１件もない場合に何を表示するかを記述しています。
赤色の行はデータ（施設）の件数分繰り返されます。これがメニューになるわけです。
橙色の行は表示最大数を超えた場合のページ替えを表示しています。
赤の行は１行で一気に記述します。この行の中に入力項目で指定したカスタム項目をどこに挿入するかをカスタムタグで記述しています。
What'sNew用の挿入置換タグにはこの他にも色々用意されていてオプション設定も豊富です。カスタム項目の値によって表示を変えたりサムネイル画像をクリックし原寸画像を表示させたりと、オプションを使いこなすと色々な表示パターンを作り出すことができるのです。
【タグ一覧】でご確認下さい。

<html><head><title>施設インデックス</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">

</style>
<body bgcolor=#FFFFFF>
<center>
<table border=0 cellpadding=5><tr><th>複数のバナー画像からランダムに１つの画像を表示させることができます</th></tr><tr><th></th></tr></table><br>
<table width="80%" border="1" cellpadding="2" cellspacing="0" bordercolor="#4d99e5" style="font-size:13px">
<tr><th bgcolor="#4d99e5" colspan=7><div align="center" style="font-size:14px;color:white">施設インデックス</div></th></tr>
<tr bgcolor="#ccccff" style="font:#000066"><th>施設名</th><th>住所</th><th>施設種別</th><th>人数</th><th>面積 m2</th><th>外観</th><th>URL</th></tr>
<tr><th><br>該当する施設は見つかりませんでした！<br><br></th></tr>
</td><td></td><td></td><td align=right></td><td align=right></td><td align=center></td><td><a href= targe=newwin></a></td></tr>
</table>
<span style="font-size:13px;color=#333333">【総数：##1件（##2～##3件を）】 </span><br><br>
</center></body></html>

作成したメニュー用HTMLファイルはお手持ちのFTPソフトでアップロードします。場所はジャンル名のディレクトリの下の「_temp」です。
標準のメニューテンプレートファイル名は whatsindex.html で「初期設定」で変更することができます。
FTPソフトを使わなくてもマスター管理者メニューの「アップロード」を使うか、「テンプレート編集」で直接に編集ができます。

詳細ページのテンプレート作成

最初に詳細ページの例を見せましたが、このように表示される完成形のHTMLファイルを事前に作成しておきます。
その完成HTMLソースを基にWhat'sNew用の挿入置換タグと置き換えていきます。

置き換えた後のHTMLソースは以下のようになっています。太い文字のタグがWhat'sNew用の挿入置換タグです。

茶色のタグはバナー画像をランダムに表示させるためのタグです。
赤色のタグは入力項目で指定したカスタム項目をどこに挿入するかをカスタムタグで記述しています。。
青色の行は前後のデータへのリンクとメニューページへのリンクを指定しています。

<html><head><title>施設詳細</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">

</style>
<body bgcolor=#FFFFFF><center>
<table border=0 cellpadding=5><tr><th>複数のバナー画像からランダムに１つの画像を表示させることができます</th></tr><tr><th></th></tr></table><br>
<table width=90% border="1" cellpadding="2" cellspacing="0" bordercolor="#4d99e5" style="font-size:13px">
<tr><th bgcolor="#4d99e5" align="center" style="font-size:14px;color:white">施設詳細</th></tr>
<tr><th bgcolor="#ccccff"><font color="white"></font></th></tr>
<tr><th bgcolor="white" align="left" style="font-size:13px;color:#666666">
<div style="font-size:13px;color:#666666"><br>
<font color=#800040>住所：</font><br>
<font color=#800040>施設種別：</font><br>
<font color=#800040>人数：</font><br>
<font color=#800040>面積：</font><br>
<font color=#800040>URL：</font><a href= target=newwin></a><br>
<font color=#800040>外観写真：</font><br>
</div></td></tr></table>
<br><div align="center" style="font-size:13px;color:#666666">
  
</div></center></body></html>

作成した詳細ページ用HTMLファイルはお手持ちのFTPソフトでアップロードします。場所はジャンル名のディレクトリの下の「_temp」です。
標準のテンプレートファイル名は whatsnew.html で「初期設定」で変更することができます。
FTPソフトを使わなくてもマスター管理者メニューの「アップロード」を使うか、「テンプレート編集」で直接に編集ができます。

メニューページの表示

テンプレートファイルが設定できたらメニューページを表示させてみます。
管理者メニューの「メニュー表示」を選択して実行します。
メニューが表示され施設名をクリックすると詳細ページへリンクします。

メニューページをトップページに表示する

トップページにインラインフレームを設定しそこにメニューを表示させる場合

インラインフレーム内に表示させるURLを以下の様に指定します、青の部分が呼び出しです。

<iframe src="/cgi-bin/whatsnew/whats_display.cgi?id:news" name="xxx" width="xx" ～ </iframe>

施設の検索ページを作成します

What'sNewには検索ページを自動で生成する機能があります。
マスター管理者メニューの「検索ページ生成」を選択して実行します。
以下の検索オプション指定の画面が表示されます。
フィルター、検索条件を指定します。
指定は以下のようにします。
表示オプションが必要なら設定します。
「検索ページを生成」ボタンをクリックします。
以下の画面が表示されます。

管理者メニューの編集

What'sNewには管理者メニューを編集する機能があります。
スーパーバイザーメニューの「メニュー編集」を選択して実行します。
この例では管理者メニューに「記事」と表示されています、これを「施設」に変更します。
「実行する」をクリックします。
この編集画面ではこの他に不要なメニュー項目を削除したり文言を変更したりすることができます。

TOP