webapiの情報を一つにまとめたい

Question

ぐるなびapiで取得した情報を店舗の名前の中にまとめたいです。
つまり〇〇(店の名前)をクリックすると、その店の情報が出てくるようなものです。クリックの方法は<a href>を使うことは知っていますが、複数の情報を一つにまとめる方法がわかりません。教えて下さい。例えば、下記のコードの住所を店舗名をクリックした時に表示するにはどうすればいいですか？

foreach($xml->rest as $item){
    echo $item->name;
   echo $item->address;
}

<?php
$apikey='私のid';
$format='xml';
$offset_page='1';
$pref='PREF〇〇';
$url ='http://api.gnavi.co.jp/RestSearchAPI/?keyid=' . $apikey . '&format=' . $format . '&offset_page=' . $offset_page . '&pref=' . $pref;

	$xml = simplexml_load_file( $url );
		if(!$xml->rest){
			echo '見つかりませんでした';
		} else { 
			foreach($xml->rest as $r){echo $item->name;
   echo $item->address;
}
}
?>
   

amazonのサイトの写真を掲載します。
amazonのサイトのように書籍をクリックすると中身が観れる仕組みが作りたいんです。

Answer 1

PHPは基本的にサーバ側でHTMLを作る仕事をするだけで，Webブラウザ上でカッコイイ動きをさせたりするようなことはできません．そういうのはJavaScriptの仕事です．この時点でもう1つ全く別のプログラミング言語を学ばなければならないということは理解してください.とはいっても，jQueryライブラリを利用すると比較的簡単に実装できるようなので，以下に紹介しておきます．

• 超簡単jQuery！toggle系メソッドでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG

こちらのアコーディオンメニューですね．例のコードがonメソッドを使っているあたりあまりよろしくないので，clickメソッドを使う書き方に変更します．こちらのほうがパフォーマンスは向上します．

<script>
    $(function(){
        $('#acMenu dt').click(function() {
            $(this).next().slideToggle();
        });
    });
</script>

このコードを読み解くポイントを列挙します．

1. ロードが完了した後に，$(function () { ... }); の中身が実行される．
2. $('#acMenu dt') でCSSセレクタ#acMenu dtにマッチする要素の集合が抽出される．

そのすべてに対して，clickしたときのイベントをfunction () { ... }で登録する．
3. $(this)で自分自身を表し，更にその次の要素 (<dt>の次は<dd>である) を選択する．
そして，slideToggleという，まさに今回所望する動作を行うようにさせる．

このことがわかっていれば，2番や3番に関しては書き方次第でいろいろ応用はききますね．では，PHPからどうやってデータを渡せばいいか？

<dl id="acMenu">
    <dt>アコーディオンメニュー1</dt>
    <dd>アコーディオンメニューが開く。</dd>
    <dt>アコーディオンメニュー2</dt>
    <dd>アコーディオンメニューが開く。</dd>
    <dt>アコーディオンメニュー3</dt>
    <dd>アコーディオンメニューが開く。</dd>
</dl>

簡単です，この部分をPHPで書けばいいだけです．

Comments

[uverworld101nm]

xmlで書くにはどうすればいいですか？

[uverworld101nm]

できれば、xmlで使いたいんです。

[uverworld101nm]

全体のphpコードを載せます。

[mpyw]

XMLはAPIが返すデータ形式ですが，あなたはWebブラウザであなたのサイトを閲覧するユーザのためにHTML+CSS+JavaScriptを書かなければなりません．simplexml_load_fileで取得した内容をもとにHTMLを組み立ててください．echoとか書いてるんですから，あとはどうすればいいかだいたいわかりますよね．

[mpyw]

セキュリティ的に問題があったり，より綺麗に書く方法があれば手直ししますので，まずは自分で書いてください．

[uverworld101nm]

ご回答ありがとうございます。
コードまで書いてくれてありがとうございます。

Answer 2

<a href>のリンク先に、そのPHPのソースが書かれたページのアドレスを入れればよいのではないでしょうか？
ただ、そのPHPのコードの全体がわからないのと、どういうふうに表示したいのか？
「複数の情報を１つにまとめたい」ということですが、
どうまとめたいのか？などがわかりません。
カンマ区切りや、エンターで区切って表示したいとか、
もうすこし具体的に説明できませんか？

Comments

[uverworld101nm]

ご回答ありがとうございます。
本文にphpコードを掲載します。