絞込みをしたまま表示方法(デザイン)を変えるには?

「まったく何も分からない・・・」そんなユーザーさんの為のフォーラムです。どんなご質問でもお気軽にどうぞ。
返信
さとう
アクティブユーザー
記事: 24
登録日時: 2007年2月01日(木) 21:22

絞込みをしたまま表示方法(デザイン)を変えるには?

投稿記事 by さとう » 2007年2月06日(火) 20:17

お世話になっております。

エントリ一覧ページで、表示するエントリは同じで、見せ方だけを変えたい場合があります。
例えば、サムネール画像だけを並べたり、画像の大きさを変えるといった事です。

参考:Yahoo!オークションの場合
表示形式: [ タイトルと画像 ] [ タイトルのみ ] [ 画像のみ ]

ここまではデザイン定義をいくつか作り、それぞれ別のPHPファイルに埋め込めば簡単にできましたが、
『絞込みをした後で見せ方(デザイン)を変えられるようにするにはどうしたらよいか?』で悩んでいます。

試行錯誤して作っているのが下のページです。
中央上部の「画像のみ / 画像+名称」というリンクで切り替わります。

・画像のみ
http://www.03interior.com/furniture_list.php

・画像+名称
http://www.03interior.com/furniture_list_t.php

まず、「画像のみ / 画像+名称」の部分専用のデザイン定義を作りました。

・フォルダ名.list.デザイン名.design.xsl
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" encoding="EUC-JP" omit-xml-declaration="yes" />
<xsl:template match="/entrylist">
<xsl:for-each select="entry">
<a href="furniture_list.php{@href}">画像のみ</a> / <a href="furniture_list_t.php{@href}">画像+名称</a>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

PHPファイルには、
<?php cmsview::listpage("フォルダ名","デザイン名",1,array("item"=>null,"year2"=>null,"country"=>null)) ?>
を埋め込みました。

これで、item(チェア、ソファなど)year2(発表年)country(国名)の絞込み条件を保ったまま、表示方法を変えることが出来ています。

とりあえずは正常に動作しているのですが、一覧用のデザイン定義(listあり)を使っているせいで、リンクに「?eid=XXXXX(先頭のエントリID)」が混ざってしまいます。
一件用のデザイン定義(listなし)を使えば良いのかなと思いましたが、リンクに絞込み条件が反映されず、上手くいきませんでした。

もっとシンプルな解決方法があるのでしょうか。
よろしくお願いします。

webmaster
Site Admin
記事: 1451
登録日時: 2004年12月10日(金) 10:09

Re: 絞込みをしたまま表示方法(デザイン)を変えるには?

投稿記事 by webmaster » 2007年2月07日(水) 11:10

 さとうさんいつもお世話になっております。

 絞込み条件を別ページへ引き継ぎたい、というご用件だと理解しました。
 ズレていたらご指摘下さい。

 絞込み条件の引継ぎは、次の方法で可能となっています。
 仕組みとしては単純なのですが、CMSDの仕組みについてかなり深く理解して
いないと説明が難しい為、敢えて現在のリファレンスマニュアルでは説明して
おりませんでした。お手数をおかけして申し訳ありません。

 さとうさんはかなり使いこなしてらっしゃるので、恐らく理解可能かと思うのですが、
ご不明な点があったらご指摘下さい。

 CMSDからデザイン定義へ渡されるXMLデータには、以下のように絞込み条件が
含まれています。

コード: 全て選択

<entrylist>
  <group key="item" value="12" />
  <group key="year2" value="2005" />
  <group key="country" value="81" />
  <entry id="00001">
    エントリデータ1
  </entry>
  <entry id="00002">
    エントリデータ2
  </entry>
    :
</entrylist>
 なので、以下のようなデザイン定義で絞込み条件を取得する事が可能です。

コード: 全て選択

<xsl:for-each select="group">
<xsl:value-of select="@key" />=<xsl:value-of select="@value" />&
</xsl:for-each>
 上記の例の場合、出力結果は

コード: 全て選択

item=12&year2=2005&country=81&
 となります。これを、遷移先のページのURLの後につけてやれば、絞込み条件の
引継ぎが可能です。

 Aタグのhref属性の中に「item=12&year2=2005&country=81&」を追加
するには、xsl:attribute という命令を使います。
 これは、xsl:attributeタグが存在する一つ上の階層のタグに、name属性で
指定した名前の属性を追加し、値としてxsl:attributeの内容を設定する、という
ものです。

 例えば以下のようにすると、aタグのhref属性に「index.php」と設定できます。

コード: 全て選択

<a>
<xsl:attribute name="href">index.php</xsl:attribute>
トップページ
</a>
 出力結果は

コード: 全て選択

<a href="index.php">トップページ</a>
 となります。

 これを使って、先ほどの絞込み条件をつけたURLを生成してhref属性に
セットしてみます。

コード: 全て選択

<a>
<xsl:attribute name="href">
furniture_list.php?<xsl:for-each select="group"><xsl:value-of select="@key" />=<xsl:value-of select="@value" />&</xsl:for-each>
</xsl:attribute>
画像のみ
</a>
 出力結果は、

コード: 全て選択

<a href="furniture_list.php?item=12&year2=2005&country=81&">画像のみ</a>
 となります。
 駆け足で説明させて頂きましたが、前提とする知識の範囲が広い為、ご不明な点も
あるかと思います。
 また、このサンプルは実際に動かしている訳ではない為、文法エラーなど存在する
かもしれません。

 ご不明な点はなんなりとご指摘下さい。

p.s.
 この方法はentrylistでもentryでも利用できます。
 ただ、絞込み条件を取得する為だけにentryやentrylistを呼び出さなくてはならない
現状の仕様はちょっと冗長ですね…今後の改善リストに載せておきます。
最後に編集したユーザー webmaster on 2007年2月07日(水) 20:20 [ 編集 2 回目 ]

さとう
アクティブユーザー
記事: 24
登録日時: 2007年2月01日(木) 21:22

Re: 絞込みをしたまま表示方法(デザイン)を変えるには?

投稿記事 by さとう » 2007年2月07日(水) 17:57

お世話になっております。

コード: 全て選択

絞込み条件を別ページへ引き継ぎたい、というご用件だと理解しました。 
この内容でOKです。
早速やってみたところ上手くいきました。

コード: 全て選択

<a>
<xsl:attribute name="href">furniture_list.php?<xsl:for-each select="group">
<xsl:value-of select="@key" />=<xsl:value-of select="@value" />
</xsl:for-each>
</xsl:attribute>
画像のみ
</a>
・<for-each select="group">と</for-each>に「xsl:」を付け加えました。
・「&」は要らない?とりあえず消しました。
・「designer_list.php?」の前後を改行すると「%0」という文字が入ってしまいます。
改行しなければ問題はないようです。

一応このコードできちんと動作していますが、
xslは全く分かっていませんので、
何かお気づきになりましたらアドバイスお願いします。

今回の件で過去ログを検索していて、↓のトピックを見つけました。

http://cms.al-design.jp/phpbb/viewtopic ... 2%A6%A4%C7

なんとなく基本的なルールが一つ分かった気がするのですが、

コード: 全て選択

リンクをクリック→URLパラメータ→PHPファイル→xsl(デザイン定義)→PHPファイル→ブラウザに表示
「動的な絞込み」を行う時の処理の流れは、このようになっているという事でしょうか?

webmaster
Site Admin
記事: 1451
登録日時: 2004年12月10日(金) 10:09

Re: 絞込みをしたまま表示方法(デザイン)を変えるには?

投稿記事 by webmaster » 2007年2月07日(水) 20:35

 さとうさんご返信ありがとうございます。webmasterです。

 他の方への混乱があるといけないので、ご指摘のあった前回の回答のサンプルソースを修正致しました。
 ご指摘ありがとうございました。m(__)m

 & は、複数のパラメータを連結する為につけているので必須かと思います。
 ただ、ちょっと処理を手抜きしていて、URLの最後に余計な「&」が1つ入ってしまうのですが、
動作上問題はないと思います。
 URLの最後に余計な「&」が入ってしまうのを避けるには、「最後のgroup要素かどうか」
という判断(条件)をつけて、最後の場合には「&」を出力しないようにすればOKです。
 たぶん、

コード: 全て選択

<xsl:if test="position()!=last()">&<xsl:if>
 こんな感じでいけるのではないかと思います。

コード: 全て選択

リンクをクリック→URLパラメータ→PHPファイル→xsl(デザイン定義)→PHPファイル→ブラウザに表示
「動的な絞込み」を行う時の処理の流れは、このようになっているという事でしょうか?
 ありがとうございます、まさにそんな流れになっています。

 単純な画面遷移を作る場合にはなるべくその辺を意識せずに使えるようには
しているのですが、今回のさとうさんのようにより突っ込んだ使い方をする場合には、
どうしてもCMSDの仕組みそのものに突っ込んだ理解が必要になってしまいます。

 現在、CMSDの「講座」サイトを準備中で、そちらに今回のさとうさんのアイデア
なども紹介していければ・・・と思っております。

 またご不明な点がありましたらよろしくお願い致します。

p.s.
 ところで、さとうさんが現在利用されている埋め込みコマンドは、現在ではタグ形式で
記述できるようになっており、そちらのほうがソースコードの可読性も増す上に、
最新の機能はタグコマンドでないと一部使えないものがあります。
 (動的ソート機能やページ単位での文字コード指定などはその一つです)
 また、機を見て移行して頂ければ幸いです。
 ※旧式のコマンド形式は、将来サポートされなくなる恐れがございます。

さとう
アクティブユーザー
記事: 24
登録日時: 2007年2月01日(木) 21:22

絞り込み条件の取得

投稿記事 by さとう » 2008年10月06日(月) 02:05

「この方法はentrylistでもentryでも利用できます」との事ですが、エントリ一覧の中でも使えるのでしょうか。

コード: 全て選択

<xsl:template match="/entrylist">
ここに置くと上手くいくのですが、
<xsl:for-each select="entry">
ここだと絞込み条件を取得できません。
</xsl:for-each>
</xsl:template>
実現したい事は「Aという条件で絞込み一覧表示→詳細」と進んだ場合に、詳細ページで絞込み条件Aを色々な形で使いたい、ということです。
例えばパンくずリストで「トップ > トヨタ車一覧 > ヴィッツの詳細情報」と表示することです。

通常は[@href]で絞込み条件を取得すればOKなのですが、SEOのためにhtaccessで静的なURLに書き換えようとすると、[@href]では「?」や「&」もURLに含まれてしまうという問題があります。

つまり、一覧表示した各エントリに「詳細_00001_toyota.html」のような「絞込み条件を含んだ静的なURL」を表示させるにはどうすればいいのか悩んでいます。

(例)
(トヨタで絞り込んだ一覧ページ)一覧.php?maker=toyota
(ヴィッツの詳細ページ)詳細.php?eid=00001&maker=toyota

(トヨタで絞り込んだ一覧ページ)一覧_toyota.html
(ヴィッツの詳細ページ)詳細_00001_toyota.html

よろしくお願いします。

webmaster
Site Admin
記事: 1451
登録日時: 2004年12月10日(金) 10:09

Re: 絞り込み条件の取得

投稿記事 by webmaster » 2008年10月06日(月) 13:50

 さとうさん、ご質問ありがとうございます。
 ご質問の件ですが、可能です。

 恐らく、疑問点は
<xsl:template match="/entrylist">
ここに置くと上手くいくのですが、
<xsl:for-each select="entry">
ここだと絞込み条件を取得できません。
</xsl:for-each>
</xsl:template>
 の部分で、「各エントリの出力部分でURLを加工して出力しないといけないのに、
xsl:for-each select="entry"の中で絞込み条件を取得できないのでは困る」という
事だと思います。

 この部分は以前、お話を単純化する為にそのように説明させて頂きましたが、
select="entry"の中でも絞込み条件を取得する方法がございます。

コード: 全て選択

<xsl:for-each select="/entrylist/group">
<xsl:value-of select="@key" />=<xsl:value-of select="@value" />&
</xsl:for-each>


 このように、select属性の中に"/entrylist/group"のように、絶対パスを書く事
で、どこからでも参照できるようになります。
 ただし、こう書くことで、そのfor-eachの内部ではその外部のデータを参照
することができなくなります(独立した空間になります)。この為、例えば
この中で<xsl:value-of select="@id" />と書いてもエントリIDは取得できません。

 今回のケースですと、URLには各エントリのエントリIDも含むので、もし書く
とすると、次のように分けて書く必要がありそうです。

コード: 全て選択

<a>
<xsl:attribute name="href">page_<xsl:value-of select="@id" />_<xsl:for-each select="/entrylist/group">
<xsl:value-of select="@key" />-<xsl:value-of select="@value" />
</xsl:for-each>.html
</xsl:attribute>
画像のみ
</a>
 この結果は、例えば
<a href="page_00002_maker-toyota.html">画像のみ</a>
 のようになります。
 複数の条件がついていた場合(例えば、maker=toyota&size=big、など)には、
<a href="page_00002_maker-toyota_size-big.html">画像のみ</a>
 のようになります。
 maker条件だけを反映させて、「maker」という文字列を含めないように
する(page_00002_toyota.html)には、

コード: 全て選択

<a>
<xsl:attribute name="href">page_<xsl:value-of select="@id" />_<xsl:value-of select="/entrylist/group[@key='maker']/@value" />.html
</xsl:attribute>
画像のみ
</a>
 としても良いかもしれません。この記述方法はこれまでで説明しておりません。

コード: 全て選択

<xsl:value-of select="/entrylist/group[@key='maker']/@value" />
 の部分が肝で、xsl:value-of を使って、select内のセレクタに少し複雑な
指定をしています。意味合いとしては、「key属性が'maker'であるgroup
要素のvalue属性を出力」という意味になります。
 この部分は「XPath」と呼ばれるもので、詳しく知りたい場合にはXPath関連
のサイトや書籍などをご覧下さい。

 以上、ご不明な点はまたご質問頂ければ幸いです。

さとう
アクティブユーザー
記事: 24
登録日時: 2007年2月01日(木) 21:22

できました!

投稿記事 by さとう » 2008年10月06日(月) 15:51

教えていただいた通りやってみたら上手くいきました!
ありがとうございました!

こちらの質問の仕方が要領を得ず分かりずらいのではと心配でしたが、
完璧に理解していただけました。
疑問点はまさにその部分でした。

実はコレ、1年くらいずっと悩んでいたのですが氷解しました。
本当にありがとうございました。

返信