サイトトップの[お知らせ]を作ってみよう！ の巻

個人的な意見を言わせていただくと　ブログは簡単だけど使い物にならない！今までにMovableTypeもXoopsも試してはみました。以前はロリポサーバーを借りてたので　ロリポブログでブログにも挑戦しました。でも「使い物にならない」。
なんでかって？まずレンタルなどのブログサービス（ロリポブログも含めて）では　確かに記事の投稿は簡単にできるけど　投稿した記事の内容や画像を転用しようとしてもできない。携帯から写メールを送っても　その画像だけをこっちのページでも使いたいとかができない。またダウンロードすることもできない。デザインも思うように変えられない。いや　これは語弊があるかな。CSSを熟知して　ブログで生成されるHTMLタグをきちんと解析すれば　デザインは変えられる。この点ではMovableTypeもXoopsも同じといえる。でも既存のわかさとのページをブログやXoopsのタグ形式に当てはめて自分の思い通りのデザインを表示するには　結構（いや相当）の労力を要する。私は挫折した。でもHTMLのまま　更新作業を続けていくのははっきりいって限界がある。何とかならないかしらん･･･

私がたどり着いた答えは「CMS」。CMSとはContentsManagementSystem(コンテンツマネージメントシステム)の略で　ブログもXoopsもCMSの一つなんです。コンテンツ(=内容)をマネージメント(=管理)するシステムを総称して言うんだそうです。（間違ってたらゴメンネ）そう！この「CMS」機能がいいんじゃん！そしたら記事の追加も編集も簡単にできる♪！
そう思ってXoopsにトライしました。インストール自体は簡単にできました。驚くほどあっという間です。それをカスタマイズしようとしてHTMLの解析を始めたまでは良かったのですが･･･構成されているページが多すぎて訳が分からなくなってしまいました(苦笑)。おまけにCSSでのカスタマイズだけでは　思うように表示することができず･･･テーブルタグ使えたらなぁ！とか思いながらいじり倒して最終的にやっぱり訳が分からなくなってしまって挫折です。
私のスキルが低いだけかもしれませんが　HTMLタグとCSSは　やっぱり２つで一つという気がします。CSSだけでデザインを実現するのは　時間がかかりすぎる。HTMLタグを自在に変えられてこそ　CSSでのデザインがやりやすくなる･･･という結論に至ったのです。
そ・こ・で！既存のHTMLファイルにほんの数行書き足しただけで　CMS機能を実現できるものはないかと探した結果　このわかさとのホームページが出来上がりました。
もう後は記事を追加していくだけ！！実際　更新作業のなんて楽なことか♪このページも当然CMSで作ってます。じゃあ　どうやって作るのよ？！というのが　ここからの本題です。取りあえず第一回目はサイトのトップページなどにある「お知らせ」をCMSで実現してみます。

取りあえずこちらのページを見てください。クリックすると別ウィンドウが開きます。わかさとのトップと同じようなページが表示されたと思います。これは実際のトップページとは異なるテスト用のページなのでご安心ください。
画面の下部にあるペンギンのアイコンをクリックするとウィンドウが開きますので　ユーザー名に[waka]パスワードに[sato]と入力して下さい。すると記事の入力画面が開きますよね？
この入力フィールドの一番上の[お知らせ内容]を　適当に入力しなおして[修正]ボタンを押して下さい。これで内容変更作業は終わりです。実際のページを確認するには　テストページのウィンドウをクリックして　一番上に表示させ　更新またはＦ５キーを押してみてください。ほら！もう変わってるでしょ？
次は新規記事を追加してみましょう。入力ページの最下部に[コンテンツの追加]という空の入力フィールドがありますね。そこに何でもいいので入力して[追加]ボタンを押してみてください。一番上に追加されましたね。
これがCMSです。ホムペネットでは[コンテンツエディタ]という機能なんですが　これがまた柔軟に何でもCMS化できちゃうんです。

実際のHTMLファイル内の記述は以下のとおりになっています。

<h6>インフォメーション(最新10件)</h6><ul>　<whiledata src='cnt' name='info' putmax='10' sort='cnt_serno,1'>　　<li>　　　<span class='New' cont='日付'>$cnt_year/$cnt_month/$cnt_day</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span cont='お知らせ内容'>$cnt_body0</span>　　</li>　</whiledata></ul>

タグを見てお分かりのとおり　普通のHTMLタグではない<whiledata src='cnt' name='info' putmax='10' sort='cnt_serno,1'>という記述や$cnt_body0とかいう変な記述がありますね。これがCMSを実現するためのコードです。

$で始まる文字列は「変数」というものでこれを記述することで　この変数に値を格納できるようになります。
<span cont='お知らせ内容'>$cnt_body0</span>という記述は　<br>　　　　$cnt_body0という変数を<br>　　　　お知らせ内容（cont='お知らせ内容'）として入力できるようにしなさい　<br>という意味の記述です。<br>使用できる変数は決まっていて　それをHTML内に記述するだけで自由に入力項目として使用することができます。
<whiledata src='cnt' name='info' putmax='10' sort='cnt_serno,1'>は繰り返し処理を行うという命令で　この場合は
　　　コンテンツエディタシステムを利用して（src='cnt'）
　　　infoという名前のデータファイルから（name='info'）
　　　シリアル番号の降順で並べ替えて（sort='cnt_serno,1'）
　　　10個分（putmax='10'）表示しなさい
という命令を書いていることになります。

表示件数を変えたい場合はputmaxの値を書き換えるだけですし　並べ替えがいらない（入力した順に上から表示する）場合はsortの記述は必要ありません。(※今回はトップページの[お知らせ]なので　新しいものが上に表示されるようにしたかったので記述を入れています。）このHTMLファイルを一度作ってサーバーに置いておけば　後は入力するだけで記事の更新編集は　サイト上から行うことができます。ベルアイル装備画像データベースも　基本的にはこの要領で作成されています。

ちなみに　このテストページのHTMLソース全文はこちらでご覧いただけます。必要な箇所をコピペしてお使いください。
当然　ただのHTMLソースなので　著作権とか一切ないです（＾＾）。営利目的でも業務用でも　ご自由にどうぞ。わかさとへのリンクも要りません。またテストページでは　記事管理用ページへのリンクにホムペネットのアイコンを使ってますが　これも好きなのに変更してくださって構いません。ご自分のサイトのバナーやアイコンにするとか自由です。だってHTMLソースですから（＾＾；）
（※注　このソースはホムペネットのレンタルサーバーでしか動作しません　ご了承ください。）

いかがでしょう？？ちょこっとでも　CMSの便利さがお分かりいただけましたでしょうか？？
次回は･･･このテストページのソースを元に全ページ共通のメニューを実現するを　ご説明します。