第6回 メイン部分の作成

むーん、前回から2ヶ月経過・・・

もうあまりこのことには触れまい・・・

今回はメイン部分です。

で、メイン部分をどうしようか・・・と悩んだ結果、無難に日記にしました。

構成自体は、メニューと同じく、ｄｉｖの積み重ねていく構成です。
なので、ここもほぼ同じ作りとなります。

やりたいことは、
・日記を日付順に表示させる。
・これだけだと寂しいので、日記部分はHTML文使用可とする。
の２つです。

まずそれぞれのファイルをダウンロードしてください。
XMLファイル
XSL
layout01.css
default01.css
前回と同様、右クリックのファイル保存で、落としてください。

では、XSLの説明から。

今回追加したのは、diary,d_items,d_expの3つのテンプレート。

やってることはほぼ左側メニュー「What's new」と同じです。
diaryは、日記全体を囲む為のdivでしかないし、m_titleもタイトル用の表示にしてるだけ。
やってることは、d_itemsタグが続く限りループさせ、d_dateでソートし、d_itemsを9個表示させる
といったところです。
・・・ってWhat's newのwhatsnew部分と全く同じ説明です^^;
これでご勘弁を・・・m(_ _)m
d_itemsも同じです。のでこっちの説明はスルーします。
最後のd_expですが、ここでは今までに使ったことの無いもがあります。
それが「copy-of」です。
これで指定されたデータは、XML->HTML変換時には何も変換されません。
例えば、XML文の中にHTML文を書いちゃうと、HTML変換時にエラーとなります。
これは<>で囲まれてるものは、全てXMLのタグだとXSLTが思ってしまう為です。
が、この「copy-of」を使ってHTML変換を行えば、HTML文はエラーとならず
そのままHTML文に置き換えられます。
つまり、XML文内にHTML文書いても、ちゃんと変換してくれるという、便利な
関数なのです。
これを使って、日記部分にHTML文を使用可能としています。

以上がXSL。

次にスタイルシートその１(layout01側)ですが、今回はここは変更無しです。

次はスタイルシートその２(default01側)。
ここでは先頭に「d_」の付いたものを追加してます。
ここも特に変わったものはありません。

以上がスタイルシート。

最後はXML。

ここも変わったところは・・・っとd_expが変わってますね。
d_exp内がHTML文が入っているので、ちょっと違和感があるかもしれませんが。
この方がリンクやイメージを自由に貼り付けられるので、使い勝手あるかなーと思って、こうしました。
最初は、簡単に書けるように、HTML文はなしでテキストをそのまま表示するようにしようかとも思ったん
ですけど。
それだとあまりにもTOPが殺風景になっちゃうしね。

以上です。

出来上がりは、今までと同じ様に、上のXMLファイルのリンクをクリックすると
見れます。

これでメイン部分完成。時間かかった割には、たいした説明もない状態です^^;

次回は、CM部分の説明です。
ここはちょっと特殊なので、がっちり説明するつもりです。
次回こそは・・・むー・・・もう言うのやめよ・・・今まで全然実行できてないしTT