id:love-peanut
ポイントあり70ptベストアンサーあり
ウェブ制作

楽天市場の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>';


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

回答の条件
  • 1人3回まで
  • 登録：
  • 終了：2011/03/29 09:44:21
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:deflation No.1

回答回数1036ベストアンサー獲得回数126

ポイント35pt

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

変数 $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";
id:love-peanut

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);

?>
2011/03/28 14:26:26

その他の回答（1件）

id:deflation No.1

回答回数1036ベストアンサー獲得回数126ここでベストアンサー

ポイント35pt

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

変数 $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";
id:love-peanut

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);

?>
2011/03/28 14:26:26
id:deflation No.2

回答回数1036ベストアンサー獲得回数126

ポイント35pt

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

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


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

$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";
id:love-peanut

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

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

2011/03/28 17:07:07

コメント（2件)

  • id:deflation
    deflation 2011/03/29 11:47:10
    //RESTで返されるXMLファイルを取得する
    $str = file_get_contents($url);

    この部分で$strに正しいXMLが入っているかどうかご確認下さい。

    echo $str;

    などとすれば確認できます。
  • id:love-peanut
    うんこ 2011/03/29 12:17:54
    コメントありがとうございます。

    つい先程、別件の質問でPHPのコードを丸ごと2回使用しているのが
    原因と分かりました…お手数かけてすみません。

    でも、一連のdeflationさんの回答のおかげで、
    プログラミングの楽しさが、垣間見えて来た気がします。

    重ね重ね、ありがとうございました。

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ