2016-04-28 10 views
1

私の問題は、フリッカー検索(タグ、カラー、ライセンス)からランダムな画像を取得する必要があることです。私はflickr APIがどのように動作しているのかを試してみたが、html、css、jsの基本的なスキルではこのことで迷ってしまった。flickrはsource.unsplash.comと等価です

私の最後のプロジェクトでは、私は超簡単なunsplash APIを使用しました.URLはあなたにイメージを与えます。例えば。私は私のウェブサイトでの犬の絵を埋め込みたい場合は、私はちょうどそれをする必要があります。

<img src="https://source.unsplash.com/featured/?{dog}"> 

Flickrとすることを実行する方法はありますか?たぶんPHPで、画像を生成するURLがありますか?誰かが私にflickr APIを使って作業する方法の非常に簡単なチュートリアルを教えてもらえますか?事前に

おかげで、すべての

答えて

0

flickr.photos.searchを照会し、返されたJSONを使用してimgタグのsrc値となるURLを作成します。次に、jQuery.getJSON()を使用してそれを行う方法の例を示します。

まず、アプリを登録してAPIキーhereを取得する必要があります。

APIキーを取得したら、APIを検索して1つの結果を返し、その結果をimgタグに表示する方法の基本的なデモンストレーションがあります。物事をシンプルに保つために、エラー処理は唯一のJSONを得ることができません。デモはjQueryのを必要とすることに注意してください。

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <title>Basic Flickr Image Search</title> 
</head> 

<body> 
    <label for="query">Search Flickr:</label> 
     <input id="query" type="text" placeholder="Dog"> 
     <input id="submit" type="submit"> 

    <div id="container"></div> 
    <script src="jquery.min.js"></script> 
    <script src="app.js"></script> 
</body> 

</html> 

のJavaScript(app.js)

var query = $('#query'); 
var submit = $('#submit'); 
var container = $('#container'); 

submit.click(function() { 

    // Clear the previously displayed pic (if any) 
    container.empty(); 

    // build URL for the Flickr API request 
    var requestString = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key="; 

    // Replace XXXXXXXX with your API Key 
    requestString += "XXXXXXXX"; 

    requestString += "&text="; 

    requestString += encodeURIComponent(query.val()); 

    requestString += "&sort=relevance&media=photos&content_type=1&format=json&nojsoncallback=1&page=1&per_page=1"; 

    // make API request and receive a JSON as a response 
    $.getJSON(requestString) 
     .done(function(json) { 

      // build URL based on returned JSON 
      // See this site for JSON format info: https://www.flickr.com/services/api/flickr.photos.search.html 
      var URL = "https://farm" + json.photos.photo[0].farm + ".staticflickr.com/" + json.photos.photo[0].server; 
      URL += "/" + json.photos.photo[0].id + "_" + json.photos.photo[0].secret + ".jpg"; 

      // build the img tag 
      var imgTag = '<img id="pic" src="' + URL + '">'; 

      // display the img tag 
      container.append(imgTag); 
     }) 
     .fail(function(jqxhr) { 
      alert("Sorry, there was an error getting pictures from Flickr."); 
      console.log("Error getting pictures from Flickr"); 
      //write the returned object to console 
      console.log(jqxhr); 
     }); 
}); 
+0

ありがとう!私は現在、jqueryを学んでいるので私には素晴らしい答えです。そのコードに入り、変更を加えることができます...他の答えも有効だと思いますが、私は今のところPHPを知らないのです。素晴らしい! – youpielove

1

まず、あなたはあなたが検索を実行することに興味が述べてきたことから、API documentationを見て、次App Garden

から秘密開発者のキーを取得する必要があります。左側にはいくつかの「キット」が、右側には「APIメソッド」が表示されます。 photosメソッドの下にはflickr.photos.searchがあり、APIに渡すことができる引数、期待する応答の種類などを説明しています...素晴らしいので、今すぐサンプルコードが必要です。

Googleで「flickr検索phpの例」を検索し、this tutorialにアクセスしました。このページからのコードは、あなたの便宜のために下に設けられた、と私はそれが実際に動作を確認するためにローカルでテストされます。

<?php 

$api_key = 'your api secret key'; 

$tag = 'flower,bird,peacock'; 
$perPage = 25; 
$url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search'; 
$url.= '&api_key='.$api_key; 
$url.= '&tags='.$tag; 
$url.= '&per_page='.$perPage; 
$url.= '&format=json'; 
$url.= '&nojsoncallback=1'; 

$response = json_decode(file_get_contents($url)); 
$photo_array = $response->photos->photo; 

foreach ($photo_array as $single_photo) { 
    $farm_id = $single_photo->farm; 
    $server_id = $single_photo->server; 
    $photo_id = $single_photo->id; 
    $secret_id = $single_photo->secret; 
    $size = 'm'; 
    $title = $single_photo->title; 
    $photo_url = 'http://farm'.$farm_id.'.staticflickr.com/'.$server_id.'/'.$photo_id.'_'.$secret_id.'_'.$size.'.'.'jpg'; 
    print "<img title='".$title."' src='".$photo_url."' />"; 
} 

がうまくいけば、これはあなたが始めるのに役立ちます。あるいは、上記のキットの1つをつかみ、そのキットを使用してさらなる例を見ることもできます。