JSONを使ってページ間で情報を渡す方法

2012/03/11 03:20

このQ&Aのポイント

JSONを使って、同じレイアウトの複数ページから情報をまとめる方法を知りたいです。各ページの一部分を1つのページに表示したいです。
JSONを利用して、ページ間で共有したい情報を設定し、他のページから取得して表示する方法がわかりません。アドバイスをいただけませんか。
JSONを使って、集めたページから必要な情報を取得して表示する方法について教えてください。ページ間で同じデータを扱う方法がわかりません。

JSONを使いページから他ページへ情報を渡す方法

同じレイアウトのページが数百ページあり、各ページの一部分を1つのページにまとめる方法を知りたいです。 JSONでできるようなので、サイトを参考にしながら作ってみました。各ページの集めたい部分をオブジェクトで指定してJSONのテキストへ変換し、集めたページにJSONを読み込み、変数に代入したJSONの情報を取得して表示を試みました。しかし、やってみるとページ間で同じデータを扱うのが上手にできませんでした。アドバイスを頂けないでしょうか。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>集めたページ</title> <script type="text/javascript" src="js/json.js"></script> </head> <body onload="jsontop()"> <div> <ul> <li><a href=""><span></span></a></li> <li><img src=""></li> </ul> ・・・・・・ULがページ数の数だけ続く </div> </body> </html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>各ページのサンプル</title> <script type="text/javascript" src="js/json.js"></script> </head> <body onload="json(1)"> <h1>1ページ目</h1> <h2>タイトル</h2> <p>複数ページある中の1ページ目です。このページの一部分を他のページに利用したいです。</p> <dl> <dt>サンプル画像</dt> <dd><img src="img/sample01.jpg"></dd> </dl> </body> </html> -----json.js------ function json(no){ var obj = { h1: no+"ページ目", imgsrc: "img/sample0"+no+".jpg", thisurl:"page01/sample01.html" }; var str = JSON.stringify(obj); } function jsontop(){ JSON.parse(str); var tagimg = document.getElementsByTagName("img"); var tagspan = document.getElementsByTagName("span"); var tagli1 = document.getElementsByTagName("li")[0]; tagspan[0].innerHTML = obj.h1; //１ページ目のタイトルを取得し置き換える var img = new Image(); tagimg[0].src = obj.imgsrc; //１ページ目の画像のパスを取得し置き換える tagli1.href = obj.thisurl; //１ページ目のURLをアンカーに設定 }

kiseki777
お礼率80% (211/261)

JavaScript
回答数6
ありがとう数5

みんなの回答 （6）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/03/13 09:28 回答No.6

「Ajax」で検索してみてください。「Ajax」という言葉の中に、『用紙の種類』『郵送手段』『手紙を受け取る手段』『机に置き、読めるようにする（ドキュメントに書き出す）手段』など、たくさんの手段が「Ajax」一言にまとめられています。プログラムの用語で言い直すと『データフォーマット』『通信（送信）』『受信と受信データの解析』『出力』です。サーバー側にも、『受信と受信データの解析』『送信データの準備』『出力（送信）』があります。改めて言い直すと、JSONはデータフォーマットです。もちろん、送受信両方に使えますが、サーバープログラムの得意不得意の関係で、ブラウザからの送信にJSONを使うことはマレです。

ログインすると、全ての回答が全文表示されます。

その他の回答 (5)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/03/12 17:20 回答No.5

私事 ---------------- IEのfilterがわけわからん（AA略） ---------------- 私事（愚痴）終わり -------------------- 質問のタイトルを見ると >ページから他ページへ情報を渡す方法ですけど、質問本文中 >各ページの一部分を1つのページにまとめる方法つまり、これですか？ ↓ http://okwave.jp/qa/q7346039.html もちろんJSONから『JavaScriptで共通部分を生成する』ことはできますが、、、 JSONはあくまで、『情報が書いてある紙』にすぎません。「誰が、どこから持ってきた紙なのか」「どうやって持ってくるのか」というのが必要です。 ><p>複数ページある中の1ページ目です。このページの一部分を他のページに利用したいです。</p> あるページの一部を他のページに流用するという考え方ではなく、むしろ、そのページさえも、「他の部分と共通」と考えてみてはいかがでしょうか？ http://msdn.microsoft.com/ja-jp/library/bzt2dkta(v=VS.94).aspx

質問者

お礼 2012/03/12 22:10

ありがとうございます。 >>各ページの一部分を1つのページにまとめる方法 >つまり、これですか？すみません、違います。http://www.youtube.com/ Youtubeで何か検索するとズラーと出てくるのがイメージ的に近いです。動画部分は画像として表示し、タイトルも表示し、その説明文章も入れて・・・各ページの代表的なポイントを抽出し、あるページでその一覧のようにまとめる。このような感じです。 >あるページの一部を他のページに流用するという考え方ではなく、 >むしろ、そのページさえも、「他の部分と共通」と考えてみてはいかがでしょうか？書き忘れてしまったことがあったのですが、抽出の対象のページは基本的に全て同じHTMLのコードを使います。なのでページを増やすときは元のHTMLファイルをコピーしてテキスト部分と画像を変更するくらいです。

ログインすると、全ての回答が全文表示されます。

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/03/12 11:57 回答No.4

http://www.usamimi.info/~geko/arch_web/02_sample/016/index.html location.searchを使う方法です。サーバーに郵便を出したつもりが送り返された、って所ですかね。 >L_Search("data1") ⇒ "01" などと書かれた下に『デモ』があるので、そのページがわかりやすいと思います。一般的に使われる用紙の種類は（いわゆる）QUERY_STRINGですが、JSONでもやれなくはないと思います。

質問者

お礼 2012/03/12 22:29

クエリーストリングの部分を利用して何かすることもできるのですね。参考にさせていただきます。ありがとうございます。

ログインすると、全ての回答が全文表示されます。

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/03/12 10:55 回答No.3

JSONが何か、SQLが何か、という所から勉強するのが良いのでは？ PHPはJSONで書かれたデータファイルを扱うのは、どちらかというと苦手ですから、単純なテキストファイルにするなら、むしろCSVが多いと思います。一度、データベースというのを作ってみることをお勧めします。（もちろん既製品のMySQLみたいなものを作るのではなく、もっと小規模で良いから自分でそれ、そのものを作る http://okwave.jp/qa/q7356939.html こういうのもデータベースです。） http://okwave.jp/qa/q7352373.html 例えば。「400字詰め原稿用紙」「7mm罫線原稿用紙」「JSON原稿用紙」は、それぞれどんな場合に使うのでしょうか？そしてこのスレッドの内容。「アメリカに居るAさんに資料を送るにはどうすればいいですか？」この場合の「どうすれば」で重要なのは、ファックスや郵便のことであって、 JSON用紙でもMySQL用紙でも何でも、自分が書きやすい用紙、相手が理解しやすい用紙なら、それでいいです。

質問者

お礼 2012/03/12 22:48

＞JSONが何か、SQLが何か、という所から勉強するのが良いのでは？拡張子.json（テキストファイル）で、Javascriptのオブジェクトと配列に文字列、数値、ブール値、nullを扱え、そのコードをテキスト化して使うことができ、データベースは一応SQLiteを一通りとPHPの使い方と、PHPからSQLiteへ接続するところまでは学んでいます。http://www.phpbook.jp/tutorial/sqlite/ しかし、Javascript、PHP、SQLiteはそれぞれ独立して扱うことはできても相互で利用し合えるように使うことはまだできていません。＞自分が書きやすい用紙、相手が理解しやすい用紙なら、それでいいです。エラーなしで、相手が操作したときにサクサク動けば何でもありということですね。

ログインすると、全ての回答が全文表示されます。

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/03/12 08:08 回答No.2

>No.1 では、PHPで、どうやって初めて訪れた人なのか、２回目以降の人なのかを判断するつもりですか？ http://javascript.eweb-design.com/1401_cn.html 初めてなら初めての人に向けた言葉、２回目以降なら２回目以降の人に向けた言葉を表示するサンプルです。

質問者

お礼 2012/03/12 10:01

＞データベースを作って、それをPHPで利用するというのが一般的な方法になるのでしょうか？ JSONやCSVなどにあらかじめデータを保存しておき、クッキーは利用せずに、ページを開いたらJSONなどの保存データを表示させることは可能か。または、SQLなどのデータベースを作ってそれからデータを引っ張ってきて表示させる方法のほうが一般的なのかということを知りたかったです。すみません、私の書き方がよくありませんでした。

ログインすると、全ての回答が全文表示されます。

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/03/11 05:22 回答No.1

cookieか、sessionStorage、localStorageを使ってください。

質問者

お礼 2012/03/11 21:07

ありがとうございます。いろいろ調べてみました。クッキーにデータを保存しておき、それを利用できるのですね。しかし、初めて訪問する方が集めページを開いたとき、クッキーにはデータがないので表示されず、表示させるには、各ページの全てのページを開いた後でないといけないのではと思いました。 Javascriptでは作れない、ということでしょうか。データベースを作って、それをPHPで利用するというのが一般的な方法になるのでしょうか？

ログインすると、全ての回答が全文表示されます。