flickrのAPIを用い、任意の写真を表示する方法

2023/08/08 22:52

このQ&Aのポイント

flickrのAPIを用いて、個人のページに、指定した写真を表示させたいと思っています。写真を“撮影した時の時間”で表示させたいと思っています。
flickrは、HPを見ると、taken on～　と写真を撮った時のデータも表示されており、撮影した時間もAPIから取ってこれると思うのですが、以下のソースをどのように変えたらよいでしょうか。
実際のコードでは、指定したタグ（ここでは「HDR」）が付いた最新の写真を表示させることができます。ただし、撮影日時を指定して表示するためには、APIの仕様を理解し、コードを変更する必要があります。具体的な変更方法については、以下のコードを参考にしてください。

ベストアンサー

flickrのAPIを用い、任意の写真を表示する方法

2009/05/18 21:42

flickrのAPIを用いて、個人のページに、指定した写真を表示させたいと思っています。こちらのページを、参考にして（そのままのソースで）、flickrにアップロードされた最新の写真の中から、「HDR」というタグが付いた写真は表示させられるようになりました。 http://itpro.nikkeibp.co.jp/article/COLUMN/20061101/252356/?ST=swd-tech これを、写真を“撮影した時の時間”で表示させたいと思っています。たとえば、2004年1月16日に撮った写真を表示、といった具合です。 flickrは、HPを見ると、taken on～　と写真を撮った時のデータも表示されており、撮影した時間もAPIから取ってこれると思うのですが、以下のソースをどのように変えたらよいでしょうか。よろしくお願いいたします。 flickr-search.js -------------------------- // 画像検索を行う関数 function photo_search ( param ) { // APIリクエストパラメタの設定 param.api_key = 'APIキー'; param.method = 'flickr.photos.search'; param.per_page = 9; param.sort = 'date-posted-desc'; param.format = 'json'; param.jsoncallback = 'jsonFlickrApi'; // APIリクエストURLの生成(GETメソッド) var url = 'http://www.flickr.com/services/rest/?'+ obj2query( param ); // script 要素の発行 var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.src = url; document.body.appendChild( script ); }; // 現在の表示内容をクリアする function remove_children ( id ) { var div = document.getElementById( id ); while ( div.firstChild ) { div.removeChild( div.lastChild ); } }; // オブジェクトからクエリー文字列を生成する関数 function obj2query ( obj ) { var list = []; for( var key in obj ) { var k = encodeURIComponent(key); var v = encodeURIComponent(obj[key]); list[list.length] = k+'='+v; } var query = list.join( '&' ); return query; } // オブジェクトからクエリー文字列を生成する関数 function obj2query ( obj ) { var list2 = []; for( var key in obj ) { var k = encodeURIComponent(key); var v = encodeURIComponent(obj[key]); list2[list2.length] = k+'='+v; } var query = list2.join( '&' ); return query; } // Flickr検索終了後のコールバック関数 function jsonFlickrApi ( data ) { // データが取得できているかチェック if ( ! data ) return; if ( ! data.photos ) return; var list = data.photos.photo; if ( ! list ) return; if ( ! list.length ) return; // 現在の表示内容（Loading...）をクリアする remove_children( 'photos_here' ); // 各画像を表示する var div = document.getElementById( 'photos_here' ); for( var i=0; i<list.length; i++ ) { var photo = list[i]; // a 要素の生成 var atag = document.createElement( 'a' ); atag.href = 'http://www.flickr.com/photos/'+ photo.owner+'/'+photo.id+'/'; // img 要素の生成 var img = document.createElement( 'img' ); img.src = 'http://static.flickr.com/'+photo.server+ '/'+photo.id+'_'+photo.secret+'_s.jpg'; img.style.border = '0'; atag.appendChild( img ); div.appendChild( atag ); } } search-hdr.html ------------------------------ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Flickr APIによる画像検索 (text)</title> <script type="text/javascript" src="flickr-search.js"></script> <script type="text/javascript"></script> </head> <body> <hr> <div id="photos_here">Loading...</div> <hr> </body> </html>

noname#93286

その他（プログラミング・開発）
回答数1
ありがとう数0

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

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

ベストアンサー

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

2009/05/18 23:39 回答No.1

jsonFlickrApi ( data ) このdataの内容を、for-inで１つずつ調べながら、指定された日付ならimg要素を生成して表示してください。

関連するQ&A

Jsonpのコールバック関数に内に引数を渡すには？
APIで返されたJsonpコールバック関数に引数を渡したいのですが、やり方が判りません。それともそもそも、間違っていて１．引数を渡さない２．コールバック関数内のデータを一旦変数にいれてコールバック関数内から取り出す。３．　２で取り出したコールバック関数内のデータと１で渡そうとしていた引数を使う。とやったほうがいいのでしょうか。当方経験が浅いためよくわかっていません。基本的な間違いの可能性が高いと思います。識者の方ご教授下さい。お願いします。 function start(){ var str = "渡したい引数"; var param = new Object(); param.keyword = '東京'; param.inputcharset = 'utf8'; param.outputcharset = 'utf8'; param.format = 'jsonp'; param.callback = 'jsonp4travelAPI'; var url = 'http://api.4travel.jp/Ver1/SearchAlbum.php?'+obj2query( param ); // script 要素の発行//ここでAPIへリクエストを送る。 var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.src = url; document.body.appendChild( script ); } // 4travel検索終了後のコールバック関数 function jsonp4travelAPI ( data ) { // データが取得できているかチェック // //ここに渡したい引数も持ってきたい。でも str is not definedになります。 alert(str); } // オブジェクトからクエリー文字列を生成する関数 function obj2query ( obj ) { var list = []; for( var key in obj ) { var k = encodeURIComponent(key); var v = encodeURIComponent(obj[key]); list[list.length] = k+'='+v; } var query = list.join( '&' ); return query; } window.onload =start;
- ベストアンサー
- JavaScript
phpを２つ書くと表示されない
こちらのサイトを見てflickrの写真を取得することができました。 divタグで区切って2段にして上は猫の写真、下は犬の写真を表示させたいのですが犬の写真用のphpのコードを書くと1段目の猫の画像すら表示されなくなります。一体なぜでしょうか。 <div id="cats"> <?php //flickrから写真を検索してimgタグを返す関数 function search_flickr($keyword,$limit){ //取得したAPIキーを設定 $api_key = '86f08c1dec4643d02154d65ed******'; //メソッドに写真検索を設定 $method = 'flickr.photos.search'; //検索キーワードをURLエンコードして設定 $text = urlencode($keyword); //人気の高い順に検索 $sort = "interestingness-desc"; //取得件数を設定 $per_page = $limit; //URLを生成 $url = 'https://api.flickr.com/services/rest/?'. 'method='.$method. '&api_key='.$api_key. '&text='.$text. '&sort='.$sort. '&per_page='.$per_page; //取得したXMLファイルをパースし、オブジェクトに代入 $data = simplexml_load_file($url) or die("XMLパースエラー"); //表示写真サイズをmサイズに設定 $size = "_m"; //変数初期化 $ret = ""; //取得できた写真の数だけループ処理 foreach($data->photos as $photos){ foreach($photos->photo as $photo){ $ret .= '<a href="http://www.flickr.com/photos/'.$photo['owner'].'/'.$photo['id'].'/">'; $ret .= '<img src="http://farm'.$photo['farm'].'.static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].$size.'.jpg" alt="'.$photo['title'].'">'."\n"; $ret .= '</a>'; } } return $ret; } //検索ワード $keyword = "Britishmuseum"; //取得数 $limit = 10; //写真を検索して表示 echo search_flickr($keyword,$limit); ?> </div> <div id="dogs"> <?php //flickrから写真を検索してimgタグを返す関数 function search_flickr($keyword,$limit){ //取得したAPIキーを設定 $api_key = '86f08c1dec4643d02154d65ed59915c0'; //メソッドに写真検索を設定 $method = 'flickr.photos.search'; //検索キーワードをURLエンコードして設定 $text = urlencode($keyword); //人気の高い順に検索 $sort = "interestingness-desc"; //取得件数を設定 $per_page = $limit; //URLを生成 $url = 'https://api.flickr.com/services/rest/?'. 'method='.$method. '&api_key='.$api_key. '&text='.$text. '&sort='.$sort. '&per_page='.$per_page; //取得したXMLファイルをパースし、オブジェクトに代入 $data = simplexml_load_file($url) or die("XMLパースエラー"); //表示写真サイズをmサイズに設定 $size = "_m"; //変数初期化 $ret = ""; //取得できた写真の数だけループ処理 foreach($data->photos as $photos){ foreach($photos->photo as $photo){ $ret .= '<a href="http://www.flickr.com/photos/'.$photo['owner'].'/'.$photo['id'].'/">'; $ret .= '<img src="http://farm'.$photo['farm'].'.static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].$size.'.jpg" alt="'.$photo['title'].'">'."\n"; $ret .= '</a>'; } } return $ret; } //検索ワード $keyword = "Britishmuseum"; //取得数 $limit = 10; //写真を検索して表示 echo search_flickr($keyword,$limit); ?> </div>
- ベストアンサー
- PHP
flickrでの画像を取得について
次の関数はflickr.interesting.getListでflickrから人気の高い画像を取得する関数ですが、パラメータのdateを指定すると Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\flickr-interesting.php on line 34 と表示されます。 date => 2013-07-24,の行を消すと画像が正常に表示されます。 dateを指定するにはどうすればいいでしょうか？ function search_photos($per_page, $page) { $proxy = array( "http" => array( "proxy" => "tcp://大学のIPアドレス", 'request_fulluri' => true, ), ); $proxy_context = stream_context_create($proxy); $params = array( 'method' => 'flickr.interestingness.getList', 'api_key' => API_KEY, 'date' => 2013-07-24, 'per_page' => $per_page, 'page' => $page ); $pictureSize = "b"; $query = http_build_query($params, '', '&'); $url = 'http://www.flickr.com/services/rest/?' . $query; //$data = @simplexml_load_string(@file_get_contents($url)); $data = @simplexml_load_string(@file_get_contents($url, false, $proxy_context)); if ($data === false) { return 'エラー' . PHP_EOL; } $ret = ''; $format = '<a href="http://www.flickr.com/photos/%s/%s/"><img src="http://farm%s.static.flickr.com/%s/%s_%s_m.jpg" alt="%s"></a>' . PHP_EOL; foreach ($data->photos->photo as $p) { $ret .= sprintf($format, $p['owner'], $p['id'], $p['farm'], $p['server'], $p['id'], $p['secret'], $p['title'], $pictureSize); } return $ret; }
- ベストアンサー
- PHP
Flickrの写真に対するコメント取得
Flickrに投稿された写真のコメントをAPIを使って取得しようと考えています。写真の取得はこのサイトを参考にしてできましたが、コメントの取得がうまくいきません。コードはこのサイトに書いてある通りで変えていませんが、どの部分を変更すればうまくコメント取得はできるのでしょうか。検索結果をJSONに変換することはできましたが、コメントを画面に出力することができません。わかるかたお願いします。コードはここに載せておきます。 <?php //ライブラリを読み込む require_once 'phpflickr-master/phpFlickr.php' ; // Consumer Key $app_key = '' ; // Consumer Secret $app_secret = '' ; // インスタンスを作成する $flickr = new phpFlickr( $app_key , $app_secret ) ; //オプションの設定 $option = array( 'tags' => 'Tokyo, Japan', 'per_page' => 50 , // 取得件数 'extras' => 'description' , // 画像サイズ 'safe_search' => 3 , // セーフサーチ 'sort' => 'interestingness-desc', ) ; // GETメソッドで指定がある場合 foreach( array( 'tag' , 'per_page' , 'woe_id' , 'license' , 'sort' , 'bbox' ) as $val ) { if( isset( $_GET[ $val ] ) && $_GET[ $val ] != '' ) { $option[ $val ] = $_GET[ $val ] ; } } // 検索を実行し、取得したデータを[$result]に代入する $result = $flickr->photos_search( $option ) ; // [$result]をJSONに変換する $json = json_encode( $result ); // JSONをオブジェクト型に変換する $obj = json_decode( $json ) ; // HTML用 $html = '' ; // 写真検索を実行する $html .= '<h2>条件を指定する</h2>' ; $html .= '<p>条件を指定して、写真を検索してみて下さい。</p>' ; $html .= '<form>' ; $html .= '<p style="font-size:.9em; font-weight:700;"><label for="text">検索キーワード (text)</label></p>' ; $html .= '<p style="margin:0 0 1em;"><input id="text" name="text" value="寺" placeholder="寺"></p>' ; $html .= '<p style="font-size:.9em; font-weight:700;"><label for="bbox">位置範囲 (bbox)</label></p>' ; $html .= '<p style="margin:0 0 1em;"><input id="bbox" name="bbox" list="bbox-data" placeholder=""></p>' ; $html .= '<datalist id="bbox-data">' ; $html .= '<option value="139.74136476171873,35.67800739824976,139.78565339697263,35.71146639304908">' ; $html .= '</datalist>' ; $html .= '<p><button>検索する</button></p>' ; $html .= '</form>' ; // 実行結果の表示 $html .= '<h2>実行結果</h2>' ; $html .= '<p>リクエストの実行結果です。</p>' ; // リスト形式で表示する $html .= '<ul style="margin:2em 0 0; padding:0; overflow:hidden; list-style-type:none; text-align:center;">' ; // ループ処理 foreach( $obj->photo as $photo ) { // データが揃っていない場合はスキップ if( !isset($photo->url_q) || !isset($photo->width_q) || !isset($photo->height_q) ) { continue ; } // データの整理 $t_src = $photo->url_q ; // サムネイルの画像ファイルのURL $t_width = $photo->width_q ; // サムネイルの横幅 $t_height = $photo->height_q ; // サムネイルの縦幅 $o_src = ( isset($photo->url_c) ) ? $photo->url_c : $photo->url_q ; // 画像ファイルのURL // 出力する $html .= '<li style="float:left; margin:1px; padding:0; overflow:hidden; height:112.5px">' ; $html .= '<a href="' . $o_src . '" target="_blank">' ; $html .= '<img src="' . $t_src . '" width="' . $t_width . '" height="' . $t_height . '" style="max-width:100%; height:auto">' ; $html .= '</a>' ; $html .= '</li>' ; } $html .= '</ul>' ; // 取得したデータ $html .= '<h2>取得したデータ</h2>' ; $html .= '<p>下記のデータを取得できました。</p>' ; $html .= '<h3>JSONに変換後</h3>' ; $html .= '<p><textarea rows="8">' . $json . '</textarea></p>' ; ?><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="robots" content="noindex,nofollow"> <link rel="stylesheet" type="text/css" href="style.css">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flickr APIで写真を検索するサンプルデモ</title> </head> <body> <div id="main"> <p>aaa</p> </div> <div id="main2"> <?php echo $html ?> <p style="text-align:center"><a href="https://syncer.jp/flickr-api-matome">配布元: Syncer</a></p> </div> </body> </html>
- 締切済み
- PHP
flickrから画像を取得するプログラムが動かない。
こんばんわ。 flickrという画像サイトから画像を取得するという方法を試して見たのですが、うまく動きませんでした。何も表示されませんでした。 flickrのキーは取得してあり、キーも、入力した状態です。レンタルサーバーにて実行しています。 <?php define (APIKEY , "[取得したキー]"); $searchWord = "猫"; //検索したい画像のキーワード $pictureSize = "t"; //画像サイズ $url = "http://www.flickr.com/services/rest/?" . "method=flickr.photos.search" . "&format=rest" . "&api_key=".APIKEY . "&per_page=20" . "&license=1,2,3,4,5,6" . "&extras=owner_name" . "&text=".urlencode($searchWord); $xml = simplexml_load_file($url); //print_r($xml); $iLoop = 0; echo "<table>"; foreach($xml->photos->photo as $photoValue){ if( $iLoop == 0){ echo "<tr><td>"; } else { echo "<td>"; } $farmId = $photoValue['farm']; $serverId = $photoValue['server']; $photoId = $photoValue['id']; $secret = $photoValue['secret']; $owner = $photoValue['owner']; $ownername = $photoValue['ownername']; //改行はレイアウトのため echo "<a href=\"http://www.flickr.com/photos/{$owner}/{$photoId}/\"> <img src=\"http://farm{$farmId}.static.flickr.com/{$serverId}/ {$photoId}_{$secret}_{$pictureSize}.jpg\" /></a><br>"; echo "author by <a href=\"http://www.flickr.com/photos/{$owner}/\"> {$ownername}</a>"; $iLoop++; if( $iLoop == 4){ echo "</td></tr>"; $iLoop = 0; } else { echo "</td>"; } } if( $iLoop != 0 ){ echo "</tr>"; } echo "</table>"; ?> 掲載していたＨＰはこちら http://webservice.kabufuru.net/flickr/photosPhp.php
- 締切済み
- PHP
flickrAPIでの画像取得について
下のphpスクリプトでflickrAPIを用いて画像を取得しようとしたらエラーが起こって取得できません。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>flickr API サンプル</title> </head> <body> <h1>flickr API サンプル</h1> <?php set_time_limit(60); //flickrから写真を検索してimgタグを返す関数 function search_flickr($keyword,$limit){ //取得したAPIキーを設定 $api_key = '（僕のAPIキー）'; //メソッドに写真検索を設定 $method = 'flickr.photos.search'; //検索キーワードをURLエンコードして設定 $text = urlencode($keyword); //人気の高い順に検索 $sort = "interestingness-desc"; //取得件数を設定 $per_page = $limit; //URLを生成 $url = 'http://www.flickr.com/services/rest/?'. 'method='.$method. '&api_key='.$api_key. '&text='.$text. '&sort='.$sort. '&per_page='.$per_page; //取得したXMLファイルをパースし、オブジェクトに代入 $data = simplexml_load_file($url) or die("XMLパースエラー"); //表示写真サイズをmサイズに設定 $size = "_m"; //変数初期化 $ret = ""; //取得できた写真の数だけループ処理 foreach($data->photos as $photos){ foreach($photos->photo as $photo){ $ret .= '<a href="http://www.flickr.com/photos/'.$photo['owner'].'/'.$photo['id'].'/">'; $ret .= '<img src="http://farm'.$photo['farm'].'.static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].$size.'.jpg" alt="'.$photo['title'].'">'."\n"; $ret .= '</a>'; } } return $ret; } //検索ワード $keyword = "sea"; //取得数 $limit = 10; //写真を検索して表示 echo search_flickr($keyword,$limit); ?> <p>powerd by <a href="http://www.flickr.com/services/api/">Flickr Services</a></p> </body> </html> 表示されたページはこうなりました。 flickr API サンプル Warning: simplexml_load_file(http://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=（僕のAPIキー）&text=sea&sort=interestingness-desc&per_page=10): in C:\xampp\htdocs\flickrAPI.php on line 38 Warning: simplexml_load_file(): I/O warning : failed to load external entity "http://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=（僕のAPIキー）&text=sea&sort=interestingness-desc&per_page=10" in C:\xampp\htdocs\flickrAPI.php on line 38 XMLパースエラーそこでhttp://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=（僕のAPIキー）&text=sea&sort=interestingness-desc&per_page=10にアクセスすると次のようなXMLが表示されました。 <?xml version="1.0" encoding="UTF-8"?> -<rsp stat="ok">-<photos total="9663727" perpage="10" pages="966373" page="1"><photo title="row" isfamily="0" isfriend="0" ispublic="1" farm="1" server="55" secret="86cffac801" owner="89972557@N00" id="148800272"/><photo title="Live" isfamily="0" isfriend="0" ispublic="1" farm="8" server="7381" secret="d5af918c8c" owner="36621592@N06" id="9017742627"/><photo title="In search of the pot of gold at the end of the Rainbow..." isfamily="0" isfriend="0" ispublic="1" farm="4" server="3717" secret="bf47d94889" owner="56936646@N07" id="8851282635"/><photo title="Melting ice 130424 F368" isfamily="0" isfriend="0" ispublic="1" farm="8" server="7404" secret="907a7c260e" owner="44855005@N04" id="8771141696"/><photo title="Coachella Valley" isfamily="0" isfriend="0" ispublic="1" farm="8" server="7310" secret="5d47f6cb45" owner="53760536@N07" id="8729902328"/><photo title="End of a summer day" isfamily="0" isfriend="0" ispublic="1" farm="8" server="7434" secret="46a80bb865" owner="72179079@N00" id="8722395239"/><photo title="angles of sea" isfamily="0" isfriend="0" ispublic="1" farm="9" server="8253" secret="32fc571841" owner="39638504@N07" id="8696358702"/><photo title="Summer sunset ( view larger size: please press "L")" isfamily="0" isfriend="0" ispublic="1" farm="9" server="8261" secret="21c4642b39" owner="72179079@N00" id="8688567245"/><photo title="Smoo Cave II" isfamily="0" isfriend="0" ispublic="1" farm="9" server="8403" secret="b6d637d603" owner="8407953@N03" id="8672345286"/><photo title="In The Middle of Nowhere" isfamily="0" isfriend="0" ispublic="1" farm="9" server="8533" secret="1ba0e8574c" owner="8407953@N03" id="8666924709"/></photos></rsp> どうすればエラーが直るでしょうか？
- ベストアンサー
- PHP
Google Maps API の IE表示
一部のIEでGoogle Maps APIがうまく作動しません。 Safari/FF/IE8 では表示されます。以下の処理は一通り試しました。 http://maps.google.com/support/bin/answer.py?hl=ja&answer=21849# よろしくお願いいたします。 ■HTML … <link href="style.css" rel="stylesheet" type="text/css" media="screen, print "/> <link rel="stylesheet" type="text/css" href="map.css" media="screen, print "/> <script type="text/javascript" src="gmap.js"></script> <script src="http://maps.google.com/maps?file=api&v=2&key=●●●" type="text/javascript"></script> … <div id="canvas"></div> … ■JavaScript // JavaScript Document window.onload = function() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("canvas")); var point = new GLatLng(●緯度●, ●経度●) var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml('<img src="●●●.gif"><br/><div id="gma">〒●●●-●●●<br/>●●●<br/><br/>TEL:●●●</div><img src="●●●.jpg">')}); map.addOverlay(marker); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl()); map.setCenter(point, 15); map.openInfoWindowHtml(point, '<img src="●●●.gif"><br/><div id="gma">〒●●●-●●●<br/>●●●<br/><br/>TEL:●●●</div><img src="●●●.jpg">'); } };
- ベストアンサー
- JavaScript
Google AJAX API のmapsのロードとＩＥでの表示について
いつもお世話になっています。 Google AJAX APIについて質問です。デベッロッパーガイドに従って以下のようにスクリプトを書いたのですが IEのみエラーが出て表示されません。 (IE7でも表示はされましたが、不安定でした） <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi?key=登録したAPIキー"></script> <script type="text/javascript"> google.load("maps", "2"); function initialize() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); } google.setOnLoadCallback(initialize); </script> </head> <body> <div id="map" style="width: 400px; height: 400px"></div> <div id="searchcontrol"></div> </body> </html> なぜIEだけが表示されないのか、エラーが出るのかわかる方いらっしゃいましたらよろしくお願いします。
- 締切済み
- JavaScript
任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？
任意のフォルダ内の画像をランダムに呼び出し、ランダムに配置するには？よろしくお願い致します。 jQueryを使用して、複数の画像をランダムに配置する（読み込むごとに）というページを作成しております。この場合、予め配置した画像の表示順番をランダムに変えるだけなので、任意のフォルダに数十枚の画像を入れておき、そこからランダムに数枚の画像を呼び出し、かつランダムに表示順番を変えることはできないものでしょうか。例：images というフォルダに50枚の画像を入れておき、その中から10枚の画像をランダムに呼び出し、かつランダムに配置する。いろいろ調べてみたのですが、知識が足りず理解出来なかったため質問させて頂きました。お詳しい方がいらっしゃいましたら、どうかご教授頂けると幸いです。 ■現在のコードです。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function shuffle(list) { var i = list.length; while (i) { var j = Math.floor(Math.random()*i); var t = list[--i]; list[i] = list[j]; list[j] = t; } return list; } $(function() { $('#sbox').append(shuffle($('.hogehoge', '#box'))); }); </script> </head> <body> <div id="box"> <div class="hogehoge"><img src="1.jpg"></div> <div class="hogehoge"><img src="2.jpg"></div> <div class="hogehoge"><img src="3.jpg"></div> <div class="hogehoge"><img src="4.jpg"></div> <div class="hogehoge"><img src="5.jpg"></div> </div> </body> </html>
- ベストアンサー
- JavaScript
Google AJAX Feed APIについて
ブログのRSSを使って自動的にホームページに新着ブログ記事の日付とタイトルを表示されるようにしたいと思い、Google AJAX Feed APIを使用しました。下記のソースだとこのように表示されます。・タイトル(2009年6月22日) ・タイトル(2009年6月20日) 表示方法をもう少し変えたいんですが、文字サイズと行間の変更はどのようにすれば可能か、ご存知の方は教えて下さい。 1.文字サイズをもう少し小さく(10pxに)したい 2.行間がくっ付いているのでもう少し広くしたい <script type="text/javascript" src="http://www.google.com/jsapi?key=APIキー"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("フィードのアドレス"); feed.setNumEntries(10); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a"); a.href = entry.link; a.target = "_top" ; var date = new Date(entry.publishedDate); a.appendChild(document.createTextNode(entry.title + " (" + date.toLocaleDateString() + ")" )); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> <div id="feed"></div>
- ベストアンサー
- JavaScript