• 締切済み

TumblrのJSONについて

現在自分のwebsiteに、tumblrからとってきたjsonを駆使してブログパーツを取り付けようと思っています。 以下の様にhtmlに書き込んでいます。 <center> <script type="text/javascript" src="http://○○○（ユーザー名）.tumblr.com/api/read/json?num=50&type=photo"></script> <script type="text/javascript"> show_number = 50; // 表示数 for (i = 0; i < show_number; i++) { label= tumblr_api_read["posts"][i]["photo-url-500"]; text=tumblr_api_read["posts"][i]["photo-caption"] url = tumblr_api_read["posts"][i]["url"]; document.write('<a href="', url, '" target="_blank"><img src="',label,'"><br/></a><br/><br/><div class="tumblr_title">',"", text,"", '</div>' ); } </script> </center> ●何がしたいか● 貼付ければ全く問題なく動作するのですが、表記されるそれぞれのコンテンツを立て並びではなく、横並びにするには一体どうすれば良いのでしょうか。 document.write(',,, の部分にcss等を呼び起こす事は考えたのですが、何を応用すれば良いのか全くわかりません。アイディアがある方、共有して頂けますでしょうか？ レベルの低い質問かとは思いますが、何卒宜しくお願い致します。

  • HTML
  • 回答数1
  • ありがとう数1

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

<center>は非推奨の代表格でHTML4.01strict以降はない要素(HTML5にも当然ない)ですが・・ それはさておいて、 　javascritでソースを書き出しているのですから、その結果のHTMLに対してスタイルを適用させれば良いです。 　firefoxのfirebugアドオンを利用して、表示されるHTMLから、スタイルを適用させたい要素を見つけ出し、それに対して左のスタイルシート編集枠で色々と付け加えてみるのが良いでしょう。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • tumblrのxmlをsimplexml_load_fileで取得して参照するには

    よろしくお願いします。 tumblrというサイトのxmlを phpのsimplexml_load_fileを使って取得したいのですが 1) $xml->posts->post->photo-url[0]; とするとphoto-urlの値にアクセスできず 下記のように記述すると値を取得できます。 2) $pu=$xml->posts->post->{"photo-url"}[0]; なぜ1の方法でアクセス出来ないのでしょうか？ ■xml <?xml version="1.0" encoding="UTF-8"?> <tumblr version="1.0"> <tumblelog></tumblelog> <posts start="0" total="10"> <post> <photo-caption></photo-caption> <photo-link-url></photo-link-url> <photo-url max-width="1280"></photo-url> <photo-url max-width="500"></photo-url> <photo-url max-width="400"></photo-url> <photo-url max-width="250"></photo-url> <photo-url max-width="100"></photo-url> <photo-url max-width="75"></photo-url> </post> </posts> </tumblr> ■php $xml=simplexml_load_file("http://example.tumblr.com/api/read"); $pu=$xml->posts->post->{"photo-url"}[0]; print "<img src=\"".$pu."\">";

    • ベストアンサー
    • XML
  • 別URLからのJSON取得がうまくいかないので教えてください

    楽天書籍検索APIをJSONで取得したいのですが、うまく表示されません。 以下のソースで何がまずいか教えていただけますでしょうか。 ※[YOUR_developerID]にはIDが入っているものとします <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JSON</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2.6");</script> <script type="text/javascript"> $(function(){ $.getJSON("http://api.rakuten.co.jp/rws/2.0/json?developerId=[YOUR_developerID]&operation=BooksTotalSearch&version=2009-03-26&keyword=%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0&sort=-releaseDate", function(jsonData){ $(jsonData.Body.BooksBookSearch.Items.Item).each(function(){ $("body").append(this.title+"<hr />"); }) }) }) </script> </head> <body>

  • HTMLをPHPでJSONにして返すには

    jqueryでurlをPHPに送って、そのurlのhtmlファイルから、titleタグやh1タグの内容を抽出し、連想配列に格納。そして、その連想配列をJSON形式にしてjqueryに返し、ｈｔｍｌにレンダリングしたいのですが上手くいきません。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function site_check(){ var url = $("#url").val(); if(url=="") return; $.getJSON("test.php?url=" + encodeURIComponent(url) ,function(res){ $("#title").html(res.title); $("#h1").html(res.h1); }); } </script> </head> <body> <div class="form"> URL <input type="text" id="url" value="" style="width:300px;" onfocus="this.select()" onkeypress="if(event.keyCode==13) site_check()" /> <button onclick="site_check()" />チェック</button> </div> title：<span id="title"></span></br> h1：<span id="h1"></span> </body> test.php↓ <?php $html=mb_convert_encoding(file_get_contents($_GET['url']), 'UTF-8', 'auto'); $array = array(); $pattern = "/(?<=<title>).+?(?=<\/title>)/mis"; preg_match($pattern,$html,$array['title']); $pattern = "/(?<=<h1>).+?(?=<\/h1>)/mis"; preg_match($pattern,$html,$array['h1']); header("Content-Type: application/json; charset=UTF-8"); echo json_encode($array); ?> このコードだと、test.phpからは、[object Object]と、レスポンスが返ってきてしまいます。

    • ベストアンサー
    • PHP
  • $.getJSONにJSON.stringifyを

    $.getJSONに、JSON.stringifyした結果を指定したいのですが、どうすればよいでしょうか？ ■現状 ・コンソールにJSONは出力されているのですが、$.getJSONでこのファイルを指定しても、画面真っ白です ▼index.html <script type="text/javascript" src="hoge.json"></script> <script type="text/javascript"> $.getJSON('hoge.json', function(data) { ▼hoge.json var obj =([ [略], ]); var json_text = JSON.stringify(obj); // テスト出力 console.log(json_text); ■質問 ・$.getJSONにこの出力結果(json_text)を指定するためには、どうすれば良いでしょうか？ ・一旦ファイル出力しなければいけないのでしょうか？ ・どうやるのでしょうか？ ・AJAXでサーバ側へデータを渡してファイル出力した後、$.getJSONでその出力したファイルを指定するしかない？

  • jQueryで配列JSONの読み込み方法

    phpからの返り値data（json形式）を表示したいのですがうまくいきません。 コンソール上でjsonを取得できているようなのですが、値を表示しようとするとundifinedと表示されてしまいます。 どのように書き換えれば動作するようになるのでしょうか？ よろしくおねがいします！ -------------------------------------------------------- ■ receive.js　■ -------------------------------------------------------- $.ajax({ type: "POST", url: "receive.php", data: { "id": 3 }, success: function(data){ console.log(data); alert(data.time); //ここで「undifined」のエラーが出ます！！ $("#go").after(data.id); //ここは何も表示されません。 $("#str").html('準備完了'); }, error: function(data){ $("#str").html('準備未完了'); }, }); -------------------------------------------------------- ■　receive.php　■ -------------------------------------------------------- <?php require 'dbconnect.php';//dbconnectを呼び出し $data = array(); $id = $_POST['id']; $sql = " SELECT * FROM sample_table WHERE id = " . $id; $result = mysqli_query($connect,$sql) or die("クエリの送信に失敗しました。<br />SQL:".$sql); while ($row = mysqli_fetch_array($result)) { $data[] = $row; } mysqli_close($connect) or die("MySQL切断に失敗しました。"); // MySQLへの接続を閉じる header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); ?> -------------------------------------------------------- ■　index.html　■ -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <title>PHP * jQuery * ajax * MySQL</title> <script type="text/javascript" src="receive.js"></script> <script type="text/javascript" src="post.js"></script> </head> <body> <div class="ltd-form"> <form id="inquiry-form" method="get"> <fieldset> ・ ・ ・ </fieldset> <div id="go"></div> </form> </div> <div id="str"></div> </body> </html> -------------------------------------------------------- ■　実行後のChromeのコンソール　■ -------------------------------------------------------- 0: Object 0: "3" 1: "1423789247" 2: "96" 3: "963" data1: "96" data2: "963" id: "3" time: "1423789247" --------------------------------------

  • JSONデータをｊQueryにわたす際に文字化け

    MySQLからのデータをPHPでJSON形式に加工して、ｊQueryで表示させようしているのですが、 どうしても日本語だけ文字化けをしてしまい、エンコードを色々変えても文字化けしてしまい困っています。 どなたか助けていただけませんでしょうか？ -文字化け結果- No：1　Title：¤Ç¤­¤¿¡ªÂçÀ®¸ù¡ª No：2　Title：¤³¤ì¤«¤é´èÄ¥¤ë¡ª phpにアクセスしても文字化けはいたしません。 ｊQueryからアクセスをすると完璧に文字化けをしてしまいます。 json.php (UTF-8) [ { no: "1", title: "できた！大成功！" }, { no: "2", title: "これから頑張る！" } ] index.html (UTF-8) <!DOCTYPE HTML> <html> <head> <meta charset="euc"> <title>jsonテスト</title> <link rel="stylesheet" type="text/css" href="style/desktop.css"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript"> jQuery(function(){ $.getJSON("./json.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No：'+items.no+'　Title：'+items.title }).appendTo('ul','#demo'); }); }); }); </script> </head> <body> <div> <div id="demo"> <h4>リスト</h4> <p></p> </div> </div> </body> </html>

  • 複数のjsonファイルを「もっと見る」ボタンで出力

    プログラム初心者です。 Instagramからハッシュタグで画像を抽出し、「もっと見る」ボタンで少しずつHTMLに出力したいです。 ↓こちらのブログを参考にさせていただき、Instagramの画像をHTMLに出力するところまで、何とか辿り着きました。 http://blog.hello-world.jp.net/php/2777/ <script> $(function() { $.ajax({ url: "json/1.json", dataType: "json", error: function(jqXHR, textStatus, errorThrown) { $("#content").text(textStatus); }, success: function(data) { var dataArray = data; $.each(dataArray, function(i){ $("#content").append("<div><p id='" + dataArray[i].id + "'><a href='" + dataArray[i].link + "' target='_blank'><img src='" + dataArray[i].image_url + "'></a></p></div>"); }); } }); }); </script> この状態だと1枚目のjsonしか読み込んでいないので、2枚目以降のファイルも2.json、3.json…「もっと見る」ボタンで取得するようにしたいのですが、知識が足りず。。。 ↓こちらのサイトのように、スクロールで表示させるものでも良いのですが。 http://nekostagram.com/ 詳しい方、ご協力いただけるとありがたいです。 どうぞよろしくお願いいたします。m(__)m

  • JSONのデータから商品名の取得の仕方

    今現在下記の記述でJSONを取得しています。 ＝＝＝＝＝ <html> <head> <title>JSONのデータを使ってみる</title> </head> <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> function execute() { var url = './ItemSearch_json.php'; var paramList = "keyword=" + encodeURIComponent("ふくろう"); var a = new Ajax.Request( url, { method: 'get', parameters: paramList, onSuccess: function(request) { // alert('読み込み成功しました'); // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onComplete: function(request) { alert('読み込みが完了しました'); $('container').innerHTML = request.responseText; // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> <body> <div id="container">content</div> <button onclick="execute()">サンプル実行</button> </body> </html> ＝＝＝＝＝ このままだと、プレーンテキストは表示されるのですが、商品名や価格の一覧などを選択して表示できません。 evalなどを使うのかなと思うのですが、はっきり分かりません。 ヒントを教えていただけないでしょうか。

    • ベストアンサー
    • AJAX
  • Googlemapb api　複数のマーカー表示に

    基礎的なことかもしれませんが、結構調べたりしても分からなかったので、教えてほしいです。 Googlemap api を使った複数のマーカー表示を$getJSON（jQuery)を使用しようして表示させたいのですが、表示できません。 どこがおかしいか教えてください。 【HTML】 1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>map</title> 6.<style type="text/css"> 7.html,body,#map { 8.height: 100%; 9.} 10.</style> 11.</head> 12.<body> 13.<div id="map"></div> 14.<script type="text/javascript" src="map.js"></script> 15.<script type="text/javascript" src="jquery-3.6.0.min.js"></script> 16.<script async defer 17.src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"> 18.</script> 19.</body> 20.</html> 【JavaScript】 1.var map; 2.var marker = []; 3.var data = []; 4.var center = {lat: 36.72073,lng: 137.27112}; 5.function initMap() {//地図の作成 6.map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む 7. center: center,// 地図の中心を指定 8. zoom: 15 // 地図のズームを指定 9. }); 10. $.getJSON("aaaaa.json", function(json){ 11. for (var i = 0; i <= json.length-1; i++) { 12. data.push( 13. { 14. 'name': json[i].name, 15. 'lat': json[i].lat, 16. 'lng': json[i].lng 17 }); 18 }; 19. for (var i = 0; i < data.length; i++) { 20. markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 21. marker[i] = new google.maps.Marker({　//マーカーの追加 22. position: markerLatLng,//マーカーを立てる位置を指定 23. map: map//マーカーをたてる地図を指定 24. }); 25. } 26 });//jsonの閉じ 27.} 【JSON】 [ { "name": "名古屋駅", "lat": 35.170897, "lng": 136.881558 }, { "name": "大名古屋ビルヂング", "lat": 35.172311, "lng": 136.884568 }, { "name": "国際センター駅", "lat": 35.172038, "lng": 136.887701 } ]

  • 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をアンカーに設定 }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する