人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

楽天市場のAPIを使い、商品情報を取得した際に出てくる要素の見栄えをよくしたい。

以下のサイトのような商品画面にしたいです。

http://bag.b-new.net//

表示したいものは「商品画像」「商品名」です。
楽天Webサービスの記載は、別のところにしますので必要ありません。

1)商品画像の下に、商品名
2)横に(4つほど)並べたい。縦ではなく、横です。
3)商品同士の間には余白がほしい(各要素がぴったりくっつかないように)
4)商品画像と商品名には、商品ページへのリンクを貼りたい

上記サイトのサイドバーの「楽天市場で探す」の各要素をクリックすると商品が
ババーンと出てくるのですが、あのようにしたいのです。


現在は以下のように、簡易な感じです。

//Item数だけ繰り返す
foreach($Items as $Item){
$ret .= '<a href="'.$Item->affiliateUrl.'">';
$ret .= '<img src="'.$Item->mediumImageUrl.'" alt="'.$Item->itemName.'">';
$ret .= "</a>\n";
$ret .= '<p>【商品名】'.$Item->itemName.'</p>';
$ret .= '<p>【商品説明】'.$Item->itemCaption.'</p>';
}

//divタグを閉じる
$ret .= '</div>';


知恵をかしていただけると、とても助かります・・。

●質問者: うんこ
●カテゴリ:ウェブ制作
✍キーワード:API AS Webサービス いもの をかし
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● deflation
●35ポイント ベストアンサー

下記のような感じでいかがでしょう。

変数 $ret に出力したい文字列が入ります。

$col = 4;
$count = 1;
$ret .= "<table border=\"0\">\n";
foreach($Items as $Item) {
 if ($count % $col == 1) $ret .= "<tr>\n";
 $cap = (mb_strlen($Item->itemCaption) <= 100) ? $Item->itemCaption : mb_strcut($Item->itemCaption, 1, 100) . '...';
 $ret .=<<< EOD
<td style=padding:4px;">
<div style="text-align:center;>
<a href="{$Item->affiliateUrl}">
<img style="border-style:none; margin:2px; src="{$Item->mediumImageUrl}" alt="item image" />
</a>
</div>
<h3><a href="{$Item->affiliateUrl}">{$Item->itemName}</a></h3>
<div>{$cap}</div>
</td>


EOD;
$count++;
if ($count % $col == 1) $ret .= "</tr>\n";
}
if ($count % $col > 1) {
 foreach ($i = $count % $col; $i <= $col; $i++) $ret .= "<td>&nbsp;</td>\n";
 $ret .= "</tr>\n";
}
$ret .= "</table>\n";
◎質問者からの返答

deflation さん、さきほどはありがとうございました、そして再びありがとうございます!

しかし、今回のだと何も表示されませんでした><。

一応、コード全文を載せさせていただきます。

私の元のコードが悪い気もするので、何かアドバイスいただけたら幸いです。



<?php

//楽天から商品を検索してHTMLタグを返す関数
function search_rakuten($keyword,$limit){

//developerIdを設定する
 $developerId = 'hogehoge';

//affiliateIdを設定する
 $affiliateId = 'hogehoge';

//使用するAPIの操作名を設定する
 $operation = 'ItemSearch';

//バージョンを設定する
 $version = '2010-09-15';

 //取得件数を設定する
 $hits = $limit;

 //検索キーワードをURLエンコードして設定する
 $text = urlencode($keyword);

 //人気の高い順に検索する
 $sort = urlencode("standard");

 //URLを生成する
 $url = 'http://api.rakuten.co.jp/rws/3.0/rest?'.
 'developerId='.$developerId.
 '&affiliateId='.$affiliateId.
 '&operation='.$operation.
 '&version='.$version.
 '&keyword='.$text.
 '&hits='.$hits.
 '&sort='.$sort;

 //RESTで返されるXMLファイルを取得する
 $str = file_get_contents($url);

 //XMLを解析してオブジェクトにセットする
 $xml = simplexml_load_string($str);

 //xpathによって、Item要素だけを取り出す
 $Items = $xml->xpath('//Items/Item');

 //divタグでくくる
 $ret = '<div id="rakuten_item">';

$col = 4;
$count = 1;
$ret .= "<table border=\"0\">\n";
foreach($Items as $Item) {
 if ($count % $col == 1) $ret .= "<tr>\n";
 $cap = (mb_strlen($Item->itemCaption) <= 100) ? $Item->itemCaption : mb_strcut($Item->itemCaption, 1, 100) . '...';
 $ret .=<<< EOD
<td style=padding:4px;">
<div style="text-align:center;>
<a href="{$Item->affiliateUrl}">
<img style="border-style:none; margin:2px; src="{$Item->mediumImageUrl}" alt="item image" />
</a>
</div>
<h3><a href="{$Item->affiliateUrl}">{$Item->itemName}</a></h3>
<div>{$cap}</div>
</td>


EOD;
$count++;
if ($count % $col == 1) $ret .= "</tr>\n";
}
if ($count % $col > 1) {
 foreach ($i = $count % $col; $i <= $col; $i++) $ret .= "<td> </td>\n";
 $ret .= "</tr>\n";
}
$ret .= "</table>\n";






//divタグを閉じる
$ret .= '</div>';




 //作成したHTMLを返す
 return $ret;
}

//検索ワードを設定する
$keyword = "人力検索はてな";

//取得数を設定する
$limit = 4;

//楽天から商品を検索して表示する
echo search_rakuten($keyword,$limit);

?>

2 ● deflation
●35ポイント

申し訳ありませんでした。

何カ所かダブルクォーテーションが抜け落ちていました。.


下記のスクリプトで試してみてください。

$col = 4;
$count = 1;
$ret .= "<table border=\"0\">\n";
foreach($Items as $Item) {
 if ($count % $col == 1) $ret .= "<tr>\n";
 $cap = (mb_strlen($Item->itemCaption) <= 100) ? $Item->itemCaption : mb_strcut($Item->itemCaption, 1, 100) . '...';
 $ret .=<<< EOD
<td style="padding:4px;">
<div style="text-align:center;">
<a href="{$Item->affiliateUrl}">
<img style="border-style:none; margin:2px;" src="{$Item->mediumImageUrl}" alt="item image" />
</a>
</div>
<h3><a href="{$Item->affiliateUrl}">{$Item->itemName}</a></h3>
<div>{$cap}</div>
</td>

EOD;
$count++;
if ($count % $col == 1) $ret .= "</tr>\n";
}
if ($count % $col > 1) {
 foreach ($i = $count % $col; $i <= $col; $i++) $ret .= "<td>&nbsp;</td>\n";
 $ret .= "</tr>\n";
}
$ret .= "</table>\n";
◎質問者からの返答

レスありがとうございます!

しかしながら、何も表示されませんでした…><。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ