nXnでエントリーを表示させる方法

hiroshot · 投稿記事 by **hiroshot** » 2006年3月28日(火) 11:09

はじめまして。hiroshotと申します。
現在、本番サイトでCMSDを使った運用ができないかとLAN環境で実験しています。
今回分からなくて困っているのは、表題どおりのことなのです。
最初はtableで表示させればいいやと実験を始めたのですが、
過去ログから難しいそうなことが分かりました。
CSSで同じことができればいいので、
DIVを使った方法をとろうと思ったのですが、
いまいち方法が分かりませんでした。
表示させたいエントリー毎の項目はとりあえず「タイトル」と「画像」で、
2列で表示できればと思っています。

過去ログで示唆されていた<div class="cellcontainer">と<div class="cell">で、
<div class="cellcontainer">
<div class="cell">
<h3><xsl:value-of select="title" /></h3>
<img src="{photo}&h=100" />
</div>
</div>
とするのは分かるのですが、
どこに<xsl:for-each select="entry">や
<xsl:if test="(position() mod 2)=0"><br clear="all" /></xsl:if>
を入れればいいのかが分かりませんでした。

あるいは他にいい方法（簡単な方法）があるのでしょうか？

よろしくお願いいたします。

　webmasterです。hiroshotさん、ご質問ありがとうございます。

　テーブル形式での表示方法は、リファレンスマニュアルの「６．３．１１　エントリ一覧
のテーブル表示機能」をご覧下さい。

　また、CSSを使ったセル状のレイアウトに関しては、

コード: 全て選択

<xsl:for-each select="entry">
<div class="cellcontainer">
<div class="cell">
<h3><xsl:value-of select="title" /></h3>
<img src="{photo}&h=100" />
</div>
<xsl:if test="(position() mod 2)=0"><br clear="all" /></xsl:if>
</div>
</xsl:for-each>

　といった感じになるかと思います。CSSでdiv.cellにwidthとheight、及び
display:inline を指定して下さい。

　div.cellcontainer に width を指定する場合にはcellが自動的に折り返され
ますので、

<xsl:if test="(position() mod 2)=0"><br clear="all" /></xsl:if>

　の行は不要です。

　以上、またご質問がありましたらご連絡下さい。

hiroshot · 投稿記事 by **hiroshot** » 2006年3月28日(火) 14:03

hiroshotです。webmasterさん、早々のご回答ありがとうございます。

ご提示いただいたCSSを使ったセル状レイアウトは、
うまくいきました。ありがとうございます。

テーブル形式の方ももう少し詳しくお聞きしたいのですが、
リファレンスマニュアル「6.3.11　…　」では、
１エントリ＝１写真で説明が進んでおり、
１エントリに複数項目がある場合の方法がいまいちつかめませんでした。
１組の<tr></tr>内に「タイトル」と「写真」を入れてしまうのはできたのですが、
■１行目に「タイトル」を２列配置し、
■２行目に「写真」を１行目に対応する形で配置し、
■３行目以降その繰り返しを行う
といったことは可能なのでしょうか？

お手数ですがよろしくお願いいたします。

　webmasterです。

　ご要望の件ですが、この場合、１行に４件のエントリを表示したいとして、
その４件分を表示するのに２行（タイトルで１行、内容で１行）必要という事だと
理解致しました。

コード: 全て選択

　件名１　件名２　件名３　件名４
　本文１　本文２　本文３　本文４
　件名５　件名６　件名７　件名８
　本文５　本文６　本文７　本文８
　　：

　この為、<xsl:for-each select="entry">を2回使うことになります。

コード: 全て選択

<xsl:template match="/entrylist">
 <table border="1">
 <xsl:for-each select="row">

 <!-- タイトル行 -->
 <tr>
 <xsl:for-each select="entry">
 <td>
 <xsl:value-of select="title" />
 </td> 
 </xsl:for-each> 
 </tr>

 <!-- 内容行 -->
 <tr>
 <xsl:for-each select="entry">
 <td>
 <xsl:value-of select="content" />
 </td> 
 </xsl:for-each> 
 </tr>

 </xsl:for-each>
 </table> 
</xsl:template>

　以上、シンプルな例ですので分からない点などあるかと思います。
　ご不明な点はまたご連絡頂ければと思います。

hiroshot · 投稿記事 by **hiroshot** » 2006年4月03日(月) 13:19

webmasterさん、ご返答ありがとうございます。
返事が遅くなり申し訳ございません。
示していただいたものでいいはずなのですが、
こちらの環境でうまく表示されません。
ブラウザ上に出力されたhtmlを見ると
<table></table>のタグ間がすっかり入っていません。
念のために作成した　catalog.list.test.design.xslは
以下のようです。

コード: 全て選択

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="EUC-JP" omit-xml-declaration="yes" />
<xsl:template match="/entrylist">
<xsl:for-each select="row">
<table border="1">

 <!-- タイトル行 -->
 <tr>
 <xsl:for-each select="entry">
 <td>
 <xsl:value-of select="title" />
 </td>
 </xsl:for-each>
 </tr>

 <!-- 内容行 -->
 <tr>
 <xsl:for-each select="entry">
 <td>
 <xsl:value-of select="description" />
 </td>
 </xsl:for-each>
 </tr>
</table>
 </xsl:for-each>
</xsl:template>
</xsl:stylesheet>

何か間違ってるんでしょうか…？

　webmasterです。
　*.php ファイル側の、埋め込みタグを引用していただいてもよろしいでしょうか？

　テーブル状の出力を行いたい場合には、cmsd:entrylist タグに cols属性を
設定する必要があります。
　ひょっとして、cols属性がうまく設定されていないのかもしれません。

hiroshot · 投稿記事 by **hiroshot** » 2006年4月05日(水) 13:15

hiroshotです。

ご回答ありがとうございます。

　

テーブル状の出力を行いたい場合には、cmsd:entrylist タグに cols属性を
設定する必要があります。
　ひょっとして、cols属性がうまく設定されていないのかもしれません。

ご指摘とおりでした。テストで試していたので、シンプルにしようとしすぎて、
うっかり抜け落ちていました。お騒がせいたしました。
じっくりデザインを作りこんでみます。

丁寧なご回答ありがとうございました。

　ご報告ありがとうございます。
　無事動作したようでほっとしております。

　いろいろ使いこなして頂けて、弊社としても大変心強いです。

　また何かありましたらご連絡下さい。

hiroshot

お世話になっております。hiroshotです。
前回の投稿から随分時間が経っておりますが、
質問がここに関係があるので追記させていただきます。

現在エントリー表示を2×2でtableタグを使って実現しています。
そこで問題となっているのが、表示されるべきエントリーが1件しかないとき、
tableのなかが崩れてしまいます。

具体的に言えば、tableタグでwidthを580ｐｘに固定し、
tdタグでひとつのエントリーのイメージの幅と
テキストの幅を指定して区切っているのですが、
エントリーがひとつしかないとき、
そのエントリーが580ｐｘの幅のなかで中央に配置されてしまいます。

方法としてはifを使用してエントリーがひとつのときは
ブランクのセルを置くということになるのかと
思うのですが、xsltとしてはどのように記述すればいいのか分かりません。
質問させていただくにあたり、どのあたりまでのコードを載せればいいのかも
分かりませんでした。

このあたり教えていただけませんでしょうか？
必要な情報をがあれば、追記させていただきます。

よろしくお願いいたします。

tsu · 投稿記事 by **tsu** » 2006年11月18日(土) 00:53

理解出来てないかもしれませんが、
「エントリが存在する場合のみにセルを追加する」的なことでなんとかなりませんか？

もしよろしければ、実際使っているXSLTファイルを丸ごと載せてもらえると良いかもです。

hiroshot

tsuさん、こんにちは。

ＸＳＬＴのコードはこんな感じです。

コード: 全て選択

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="EUC-JP" omit-xml-declaration="yes" />
<xsl:template match="/entrylist">
<table width="580" border="0" cellspacing="0" cellpadding="0">
<xsl:for-each select="row">
 <tr>
 <xsl:for-each select="entry">
	<td width="116" align="center"><img class="lineup" width="108" height="135" border="0" src="{photo}" />
 	</td>
	<td width="174" align="left" valign="bottom" class="lineuptxt">
<!-- New命令 -->
	<xsl:if test="@daysago<30"><div class="new">New!</div></xsl:if>
<!-- ここまで -->
	<xsl:value-of select="name" disable-output-escaping="yes" /><br />
	<xsl:value-of select="description" disable-output-escaping="yes" />
	</td>
 </xsl:for-each>
 </tr>
</xsl:for-each>
 </table>
</xsl:template>
</xsl:stylesheet>

そのまま引っ張ってきました。
2×2という表記は分かりにくいですね。微妙にずれている気がしてきました。
スイマセン…

状況としてはこんな感じです。

コード: 全て選択

ーーーーーーーーーーーーーーーーーー
|　　　　　|　　　　　　　|　　　　　|　　　　　　　|
|　画像　|　タイトル　|　画像　|　タイトル　|
|　　　　　|　　　　　　　|　　　　　|　　　　　　　|
−ーーーーーーーーーーーーーーーーー
（繰り返し）

画像+タイトルで１エントリーです。
こんな感じをtabelタグで組んでるのですが、
１エントリーしかないときはテーブルの中のセルが二つになってしまうので、
widthを指定していても中央によってしまいます。
通常ならブランクのセルを作ればいいのですが、
XSLTでどう条件付けして、空セルを入るようにすればいいのかと
分かりませんでした。

もしＩＦを使った条件付け以外にいい方法があればそれでも結構ですので、
教えていただければうれしいです。

tsu · 投稿記事 by **tsu** » 2006年11月23日(木) 23:56

hiroshotさん

うまく動作するか分かりませんがちょっと書いてみました。
使えなかったらごめんなさい。

コード: 全て選択

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="EUC-JP" omit-xml-declaration="yes" />
<xsl:template match="/entrylist">
<table width="580" border="1" cellspacing="0" cellpadding="0">
<!--CMSDタグでのテーブル状出力-->
<xsl:for-each select="row">
<tr>
<!--エントリ出力-->
<xsl:for-each select="entry">
<td width="116" align="center">
<img class="lineup" width="108" height="135" border="0" src="{photo}" />
</td>
<td width="174" align="left" valign="bottom" class="lineuptxt">
<!-- New命令 -->
<xsl:if test="@daysago<30"><div class="new">New!</div></xsl:if>
<!-- ここまで -->
<xsl:value-of select="name" disable-output-escaping="yes" /><br />
<xsl:value-of select="description" disable-output-escaping="yes" />
</td>

<!--書き加えた条件／エントリが奇数の場合にのみ最後の出力を変える-->
<xsl:if test="position() mod 2=1 and position()=last()">
<td width="116" align="center">
<img class="lineup" width="108" height="135" border="0" src="noimage.jpg" />
</td>
<td width="174" align="left" valign="bottom" class="lineuptxt">
<img class="lineup" width="174" height="135" border="0" src="noentry.jpg" />
</td>
</xsl:if>
<!--ここまで-->

</xsl:for-each>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>

hiroshot · 投稿記事 by **hiroshot** » 2007年1月05日(金) 10:33

tsuさん

コード書いていただきましてありがとうございます。

返信が非常に遅くなり申し訳ありません。
ほかの業務にかかりっきりで、
サイトの管理に手を回せませんでした…

質問しておきながら返事ができずに心苦しく思っておりました。

で、やっとこちらの作業に戻ってこれ、コード追記いたしました。
結果はばっちりでした！

ホントに助かりました。ありがとうございました！

私もバチッとXSLTを理解したいのですが、何かいい教材がありますでしょうか？
XML関連の書籍は種類も多いのですが、XSLTは少ない気がします…

tsu · 投稿記事 by **tsu** » 2007年1月10日(水) 14:49

とりあえず、あけましておめでとうございます。
今年も宜しくお願いします！

hiroshotさん

うまくいって良かったですね！
XSLTについて参考になりそうなサイトをまとめてありますので、眺めてみると良いかもです。
http://cms.al-design.jp/phpbb/viewtopic.php?t=550
理解出来てくると他のプログラミング言語と同じように面白いです。

私もまだまだなのでお互い頑張りましょう。

CMS Designerユーザーズフォーラム

nXnでエントリーを表示させる方法

nXnでエントリーを表示させる方法

Re: nXnでエントリーを表示させる方法