画像の複数表示について

「まったく何も分からない・・・」そんなユーザーさんの為のフォーラムです。どんなご質問でもお気軽にどうぞ。
返信
tarky

画像の複数表示について

投稿記事 by tarky » 2005年7月04日(月) 13:21

はじめまして。CMS Designer初心者です。

「CMS Designer チュートリアル1- 『簡単な日記帳を作る』」
「スターターパック(お手軽パック)」
を導入しながら、いろいろと勉強中ですが、
画像を1つだけでなく、複数表示させたいとき、どうすればいいのか
マニュアルを読んでもやはりうまくできません。

具体的には、下記のような詳細ページで
現在では、1つの画像しか挿入できませんが、

http://cms.al-design.jp/sample/starter/ ... ?eid=00001
http://cms.al-design.jp/sample/starter/ ... ?eid=00002

画像を2つ以上挿入させて、
そのあいだの好きな位置に、文章の説明を加えたいと思っているんです。

うまく言えないのですが、
ブログで写真を横に挿入しながら、解説文を横に配置していくような感じ
といえばいいのでしょうか。。。


▼こんな感じのイメージです。

┌──┐テキスト文章テキスト文章
│画像│テキスト文章テキスト文章
└──┘テキスト文章テキスト文章
テキスト文章テキスト文章
テキスト文章テキスト文章

┌──┐テキスト文章テキスト文章
│画像│テキスト文章テキスト文章
└──┘テキスト文章テキスト文章
テキスト文章テキスト文章
テキスト文章テキスト文章



listというあたりを読んでチャレンジしているのですが、
なかなかうまくいかないんです。
うまくやるための、何かヒントをいただけないでしょうか?

環境
サーバー ロリポップ
OS WindowsXP SP2
ブラウザー IE6.0SP2


CMS Designer、とても便利だと思ってチャレンジしています。
とくに、データベースを使わないところは、環境に左右されないので、
とてもいいと思っています。ただ、今回のようにページ編集において
自由度がないと、つらいなぁと苦労しているところです。

理解が足りないだけなのに生意気を書いてすみません。

ご指導、よろしくお願いいたします。

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

Re: 画像の複数表示について

投稿記事 by webmaster » 2005年7月04日(月) 17:35

 webmasterです。tarkyさん、はじめまして。 :D

 画像の複数表示は、tarkyさんがあたりをつけている通り、list項目を利用して
実現可能です。

 考え方としては、「画像と文章」を1つのブロックと考えて、そのブロックを
list項目として定義します。

 まず、下記のようなlist項目をスキーマに追加します。
 「写真リスト」というリスト項目の中に、写真と文章が定義されています。

コード: 全て選択

<data name="photolist" type="list" caption="写真リスト" >
  <listitem caption="写真リスト">
    <data name="photo" type="img" caption="写真" />
    <data name="description" type="textarea" caption="文章" output="html2" maxlength="2000" />
  </listitem>
</data>
 次に、デザイン定義に次のようなデザインを追加します。

コード: 全て選択

<xsl:for-each select="photolist/listitem">
  <a href="{photo}" target="_blank"><img src="{photo}&w=200" style="float:left;margin-right:1em;" /></a>
  <xsl:value-of select="description" disable-output-escaping="yes" />
  <br clear="all" />
</xsl:for-each>
 上記のデザインは、スキーマで指定したphotolist項目を繰り返し出力しています。

 これでおそらく実現できると思いますが、実は一つだけ問題があります。

 といいますのも、リスト項目には現在「リストの並べ替え」機能が無い為、
例えば「画像1、文章1」「画像2、文章2」と追加してから、1と2の間に新しい
画像を追加しようとしても、できないのです。常に最後尾に新しいリスト項目が
追加されていきます。

 この点は弊社でも認識しており、将来必ず並び替え機能を実装する予定です。
 申し訳ありませんが現状のところご留意頂ければ幸いです。

※今回のサンプルは、ちょっと時間がなかった為、動作未確認です。もしエラーがあったらごめんなさい。m(_ _)m

tarky

さっそくのご回答、ありがとうございます。

投稿記事 by tarky » 2005年7月06日(水) 11:51

さっそくのご回答、ありがとうございます。
親切で丁寧なコメントに感謝しています。
たいへん助かります。

いま、コメントいただいた内容をもとに、がんばってみているところです。

解決したら、またご報告させていただきます。

tarky

解決しました。ひとつ追加質問させて下さい。

投稿記事 by tarky » 2005年7月06日(水) 14:45

おかげさまで、アドバイスのとおり、
list項目をスキーマに追加、
デザイン定義に追加、
したところ、すぐに解決しました。 :D

結局、完全な理解はできていませんが、
プログラムと言うのは、
解決するときはうそのように一瞬で解決するのですね。

苦労していたので、とってもびっくりしました。
気になっていたので、気分もすっきりもしました。 :P


●ひとつ追加質問させて下さい。

関連して、追加の質問ですが、

写真の表示と、写真の説明文の表示は、今回のようにすると
きちんとできますが、

1.写真を入力しないで、写真の説明文のほうだけ入力すると、
  管理画面にエラーはでませんが、表示画面で写真の部分が画像のリンクが
  ないような表示状態になりますね。

  これを解決しようと思ったら、今の段階では、
  includeファイルのところを修正するとか、プログラム本体自体の
  修正をするしか方法がないのですよね?

  対応が自分で可能なのかどうか知りたいので、
  もし可能であれば教えて下さい。


2.「写真の表示と、写真の説明文の表示」はできますが、
  「写真のタイトル」を表示するというように、この写真やコメントに対して、
  見出しをつける、ということはできないのでしょうか。

  スキーマのところに、

コード: 全て選択

<data name="title" type="text" output="text1" caption="タイトル" />
  みたいなのを追加したのですが、管理画面でエラーが出てしまいますね。

  もしよろしければ、対応が可能なのかどうか知りたいので、
  お教え下さい。



お手数をおかけします。
よろしくお願いいたします。

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

Re: 解決しました。ひとつ追加質問させて下さい。

投稿記事 by webmaster » 2005年7月06日(水) 18:32

 webmasterです。サンプルの動作確認していなかったので、うまく動いてよかった
です。(^^;

 このサンプルを元に、いろいろといじっていってもらえれば・・・と思います。

 ところでご質問の件ですが、どちらも可能です。
 まず1つめの「画像が無い場合」ですが、

コード: 全て選択

<xsl:for-each select="photolist/listitem"> 
  <!-- 画像が存在する場合のみ表示する -->
  <xsl:if test="photo/@org!=''">
  	<a href="{photo}" target="_blank"><img src="{photo}&w=200" style="float:left;margin-right:1em;" /></a>
  </xsl:if>
  <xsl:value-of select="description" disable-output-escaping="yes" /> 
  <br clear="all" /> 
</xsl:for-each>
でOKです。
「○○が○○だった場合、表示する/しない方法」については、
リファレンスマニュアルの「5.5.6 データ値の内容によって処理を変える」が
参考になるかと思います。

 2つ目の件ですが、その内容で問題はないはずなのですが・・・。
 一度、スキーマ全体を掲載して頂けないでしょうか?

 以上、よろしくお願いいたします。m(_ _)m

tarky

「○○が○○だった場合、表示する/しない方法」についてなど。

投稿記事 by tarky » 2005年7月07日(木) 14:33

ご回答、ありがとうございます。
いろいろと苦労はしていますが、
おかげさまでやってみたいことが順調に進んでいます。


●1つ目の件

「○○が○○だった場合、表示する/しない方法」について、
教えていただいたとおりでやってみて、正しく処理されるようになりました。

画像を入力しなくても、文章だけキレイに表示されるようになりました。
これは、使えそうです。^^


「○○が○○だった場合、表示する/しない方法」の項目を
正しく理解していると、今後もいろいろと応用範囲が広がるのですね。

なるほど、と思いました。

言われてみると、単純なことがまだわかっていないで苦労しているのかもしれませんが、
プログラム初心者で、こうした考え方がまだなかなかできないので
困ったものです。^^;

これでも少しCMSDのプログラムが徐々に読めてきたのですが、
基本的なことや根本的なところがまだまだ抜けてしまっていたりしますね。。

逆に言うと、CMSDは、プログラムの基礎知識があると、ものすごく使い方の幅が広がりそうですね。

せっかくの機会ですので、徐々に身につけていきたいと思います。


ちなみに、
「 <xsl:if test="photo/@org!=''"> 」
のところの、
「 @org!=''" 」
というのは、どういう意味なのでしょうか。

リファレンスマニュアルには見当たりませんでした。
xml的な構文か何かなのでしょうか。



●2つ目の件

下記のとおりです。
イメージ的には、「おすすめ情報」が毎月発生して、今月のおすすめ情報の中に、
いろいろと項目がある、というようなイメージです。

これができると、ホームページの基本的な部分がかなりこれで作成可能になりそうで、
他のページをやるときにも応用範囲が広いと思っています。
応用範囲の広いブログの入力機能的な感じですし。

もしかして、下記のような特殊なことをやろうとしているからなのでしょうか。。。
トップページの画像や説明文も、画像の大きさや文字の内容など個別に指定したいため、別に指定しようとしています。

<変更前>

コード: 全て選択

<?xml version="1.0" encoding="UTF-8"?>
<schema name="cosme" caption="今月のおすすめ情報" title="title">
	<data name="title" type="text" output="text1" caption="タイトル" />
	<data name="photo" type="img" maxfilesize="1000000" caption="トップページ写真" />
	<data name="description" type="textarea" output="html2" cols="70" rows="6" caption="トップページ紹介文" />
	<data name="photolist" type="list" caption="写真リスト" >
		<listitem cartion="写真リスト">
			<data name="photo" type="img" caption="写真" />
			<data name="description" type="textarea" output="html2" cols="70" rows="6" caption="文章" maxlength="2000" />
		</listitem>
	</data>
</schema>

<変更後>

コード: 全て選択

<?xml version="1.0" encoding="UTF-8"?>
<schema name="cosme" caption="今月のおすすめ情報" title="title">
	<data name="title" type="text" output="text1" caption="タイトル" />
	<data name="photo" type="img" maxfilesize="1000000" caption="トップページ写真" />
	<data name="description" type="textarea" output="html2" cols="70" rows="6" caption="トップページ紹介文" />
	<data name="photolist" type="list" caption="写真リスト" >
		<listitem cartion="写真リスト">
			<data name="title" type="text" output="text1" caption="写真タイトル" />
			<data name="photo" type="img" caption="写真" />
			<data name="description" type="textarea" output="html2" cols="70" rows="6" caption="文章" maxlength="2000" />
		</listitem>
	</data>
</schema>

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

Re: 「○○が○○だった場合、表示する/しない方法」についてなど。

投稿記事 by webmaster » 2005年7月07日(木) 15:28

 webmasterです。ありがとうございます。こういうご質問が改善の大きな
ヒントになっております。m(_ _)m
tarky さんが書きました: 逆に言うと、CMSDは、プログラムの基礎知識があると、ものすごく使い方の幅が広がりそうですね。
 確かに、プログラミングの下地があると、いろんな発想が浮かんで応用が
利きそうですね・・・。

 もちろんそれはそれで作った側としてはうれしいのですが、プログラミングが
分からなくてもある程度使えるように配慮していきたいと思っております。

 基本的な事はリファレンスマニュアルやチュートリアルに具体的なサンプルを
記載しているのですが、そもそも「どんなことができるのか?」という部分で、
プログラミング的な発想が無いと想像すらつかないという方も多いようです。

 この辺はマニュアルやツールの改善が必要と感じています。m(_ _)m
tarky さんが書きました: ちなみに、
「 <xsl:if test="photo/@org!=''"> 」
のところの、
「 @org!=''" 」
というのは、どういう意味なのでしょうか。

リファレンスマニュアルには見当たりませんでした。
xml的な構文か何かなのでしょうか。
 すいません、やはり突っ込まれてしまいました。m(_ _)m
 マニュアルには、<xsl:if test="photo/text()">と書いてあったかと思います。
 今回その方法ではなく<xsl:if test="photo/@org!=''">と書いたのは、結論
から言うとあまり気にしないでくださいませ。

 ・・・といっても気になると思いますのでご説明しますと、現在とある不具合が
報告されており、マニュアル通りの方法を使うと、うまく行かないケースがある
ようなのです。
 http://cms.al-design.jp/phpbb/viewtopic.php?t=160
 ただ、こちらで調査を進めていますがこちらでは再現させることができず、
他の方からの同様のご報告も無い為、非常にレアなケースか、もしくはバージョン
が古い為に起きている現象ではないかということで現在確認中です。
 当方ではマニュアルの方法を使ってサイトを構築していますが、問題は起きて
おりません。

 今回提示させて頂いた<xsl:if test="photo/@org!=''">は、マニュアルの方法
に代わる代替策です。安全策としてこちらを紹介させて頂きました。
 マニュアルの方法が間違っている訳ではないので、気になる場合はマニュアルの
方法を使ってください。おそらく問題は起きないと思います。
 
 以下、非常にややこしい説明ですので理解する必要は全くありませんが、
興味がある方の為に解説させて頂きます。
 以降、興味ない場合は読み飛ばして頂いて結構です。
 
 <xsl:if test="******"></xsl:if>のタグは、CMSDが採用しているXML業界標準の
テンプレート言語「XSLT」のタグで、test属性の中の条件が満たされる時のみ、
<xsl:if>タグの中身を表示する、という意味になります。

 test属性の中に注目すると、"photo/@org!=''"とあります。
 これはプログラミングの世界で「条件式」と言われているもので、A!=Bと書くと
「AとBが等しくない」という意味になります。
 つまり、上記の条件式は「photo/@org と '' が等しくない場合」を表して
いることになります。

 photo/@org は、「photo項目のorg属性」という意味です。org属性は画像項目や
ファイル項目のエントリデータに含まれているCMSDの属性で、アップロード時の
ファイル名が格納されています。ファイルがアップロードされていなければ、
@orgには何も設定されていません。このorg属性はマニュアルには記載されていません。

 対して条件式右辺の''は、プログラミングの世界で「空文字」と言われている
もので、「文字が何も設定されていない」というような意味になります。
 文字を表すのには'abc'などと書きますが、これの中身が無いので''です。
 
 これらを総合すると、この条件式は
 「photo項目のorg属性が、空っぽでなかった場合」、つまり、
 「photo項目にファイルがアップロードされていなかった場合」という意味になります。
 
 以上、非常にややこしい内容で、CMSDを使用するにあたってまったく理解
する必要はありません。
 
 気持ち悪い場合はマニュアル推奨の<xsl:if test="photo/text()">を使ってください。
 こちらの方は、データの中身を表す text() を使っていて見た目にもシンプルです。
 この例には「=」や「!=」などの等号や不等号がありませんので、値そのものが存在
するかどうかが条件になります。値が存在すれば条件が成立し、存在しなければ不成立に
なります。
 
 「じゃ、<xsl:if test="photo">じゃダメなの?」という方がいらっしゃるかも
しれませんので説明しますと、"photo"だけだと、photoというデータ項目が存在
するかどうか?という条件式になってしまいます。
 画像がアップロードされていなくても項目そのものは存在しますので、この書き方
だと常に条件が成立してしまいます。

 「<xsl:if test="photo/@org!=''">」を「<xsl:if test="photo/@org">」と書いても
同様に常に条件成立になってしまいます。

 ・・・と、ちょっと勢い余って書きすぎてしまいました。
 複雑な事をしようとすれば確かにそれなりの理解が必要になると思いますが、
通常の使い方の範囲であればマニュアルのサンプルをそのままコピーでいけますし、
理解の範囲を超えていればここでサポートしますので、ぜひご活用くださいませ。m(_ _)m

tarky さんが書きました: ●2つ目の件
 なぜか、こちらで実際に<変更後>のスキーマ設置してみたところ、問題なく
動いています・・・。
 本当は、一つのスキーマの中に同じ名前の項目が複数存在してはいけないのですが、
たまたま上手く動いているようです。

 この内容でコンテンツ管理画面でエラーが出るとの事ですが、エラーメッセージをコピーして
貼り付けて頂くか、もしくは直接メールして頂けないでしょうか?

 以上、よろしくお願いいたします。

tarky

ありがとうございます。

投稿記事 by tarky » 2005年7月14日(木) 16:36

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

間のお返事がしばらく空いてしまいました。

「 <xsl:if test="photo/@org!=''"> 」 のご説明など、
いろいろとかなりご丁寧にありがとうございます。

何度も読み返させていただき、内容を理解してみました。
そうすると、だんだんわかることも多くなってきました。

CMS Designerのこと、少しずつわかってきます。

目の前のことで精一杯で、なかなかですが、
また書き込みさせて下さい。

今後ともよろしくお願いいたします。

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

Re: ありがとうございます。

投稿記事 by webmaster » 2005年7月15日(金) 15:57

 webmasterです。
 いっぺんにいろいろと書いてしまってすいませんでした。
 また一つ一つ、分からないところなどご質問頂ければと思います。

 今後ともよろしくお願いいたします。

返信