Flickr APIの使い方【実装編】

CODE
のり
のり

FlickrのAPIを使って写真を取得/表示させたいけど、どうやって実装すればいいんだろう?

そんな疑問に答えます。

今回は、前回理解したリクエストURLを元にFlickrの画像を取得/表示させるところまでを実現したいと思います。また、クレジット(著作権)による表示についても触れます。

前回までのおさらい

前回では、写真の一覧を取得するURLは以下のようなものにすれば良いことがわかりました。

https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=apiキー&text=検索文字列&format=json&nojsoncallback=1

それでは、画像を表示するにあたって簡単なHTML、CSSを用意しておきましょう。CSSは後ほど使います。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Flickr API Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="container">
    <div id="main"></div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

main.css
.flickr-link {
  display: inline-block;
}

リクエストURLを生成して、オブジェクトを表示する

それでは、Javascriptを書いていきます。

APIキーの設定

まずは、APIキーを定義しておきましょう。

main.js
// Flickr API key
var apiKey = "ここにAPIキーを入れます";

パラメーターからURLを生成する

ここでは、JQueryの$.param({パラメーター})を使います。$.param({パラメーター})は、配列やオブジェクトをURLやAjaxリクエスト用の文字列に変換してくれるメソッドです。

例えば、method: "flickr.photos.search"は、method=flickr.photos.searchという文字列に変換してくれます。

それでは、色々なパラメーターを設定してURLを生成してみましょう。

main.js
$(function(){
  var parameters = $.param({
    method: "flickr.photos.search", 
    api_key: apiKey,
    text: "city", // 検索文字列
    sort: "interestingness-desc", // 興味深さ順
    per_page: 12, // 取得件数
    license: "4", // Creative Commons Attributionのみ
    extras: "owner_name,license", // 追加で取得する情報
    format: "json", // レスポンスをJSON形式に
    nojsoncallback: 1 // コールバック関数呼び出さない
  });
  var flickr_url = "https://api.flickr.com/services/rest/?" + parameters;
  console.log(flickr_url);
});

ここまで作成したら、何も表示されませんがHTMLを表示してデベロッパーツールなどでコンソールログを確認してみてください。以下のようなURLが生成されているはずです。

https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=各自のAPIキー&text=city&sort=interestingness-desc&per_page=10&license=4&extras=owner_name%2Clicense&format=json&nojsoncallback=1

上記のURLをブラウザで確認してみましょう。

{
 "photos":
  {"page":1,"pages":89100,"perpage":10,"total":"890996","photo":[
    {"id":"16102004043","owner":"96346885@N04","secret":"f1f1d9a2ee","server":"8659","farm":9,"title":"Golden City","ispublic":1,"isfriend":0,"isfamily":0,"license":"4","ownername":"a.canvas.of.light"},
    {"id":"15467365751","owner":"120486077@N08","secret":"d7b37c6787","server":"2947","farm":3,"title":"City Sailor","ispublic":1,"isfriend":0,"isfamily":0,"license":"4","ownername":"Marco N\u00fcrnberger"},
    {"id":"11285730373","owner":"89228431@N06","secret":"2b07a176ec","server":"3671","farm":4,"title":"City","ispublic":1,"isfriend":0,"isfamily":0,"license":"4","ownername":"reynermedia"},
    {"id":"5206140273","owner":"36146276@N07","secret":"91f64e2994","server":"5084","farm":6,"title":"sydney city looking south...","ispublic":1,"isfriend":0,"isfamily":0,"license":"4","ownername":"djgr"},
    {"id":"24668779081","owner":"57527070@N06","secret":"87a6a18cf3","server":"1697","farm":2,"title":"The Waking City","ispublic":1,"isfriend":0,"isfamily":0,"license":"4","ownername":"Lenny K Photography"},
    {"id":"6203111667","owner":"53884652@N03","secret":"a698d00cf0","server":"6159","farm":7,"title":"HDR Hiroshima City","ispublic":1,"isfriend":0,"isfamily":0,"license":"4","ownername":"Imahinasyon Photography"},
    {"id":"8680244963","owner":"79051745@N08","secret":"054889046f","server":"8115","farm":9,"title":"My City","ispublic":1,"isfriend":0,"isfamily":0,"license":"4","ownername":"brillianthues"},
    {"id":"6766512805","owner":"73422502@N08","secret":"422efb11c0","server":"7035","farm":8,"title":"New York City","ispublic":1,"isfriend":0,"isfamily":0,"license":"4","ownername":"Zeeyolq Photography"},
    {"id":"3409468822","owner":"32426344@N00","secret":"53ecb0d525","server":"3649","farm":4,"title":"city","ispublic":1,"isfriend":0,"isfamily":0,"license":"4","ownername":"_gee_"},
    {"id":"15575279430","owner":"33284937@N04","secret":"a946afed8f","server":"5604","farm":6,"title":"Fog city","ispublic":1,"isfriend":0,"isfamily":0,"license":"4","ownername":"Nick-K (Nikos Koutoulas)"}
 ]},
 "stat":"ok"
}

生成したURLからJSONオブジェクトを取得することができました。続いて、JavascriptでこのJSONオブジェクトを取得したいと思います。

JSONオブジェクトを受け取る

JSONオブジェクトを受け取るには、jQueryの$.getJSON()を使用します。

$.getJSON(リクエストURL, callback関数)というように記載し、URLには、先程のflickr_urlを記載します。callback関数の記載は、function(引数){}で、引数にはリクエストURLから取得したオブジェクトが入ります。引数の変数名は何でもOKです。関数の中身は一旦console.logを設定しておきましょう。

main.js
$(function(){
  〜 中略 〜

  $.getJSON(flickr_url, function(data){
    // リクエストが成功するとfunctionが実行されます
    // 取得したjsonオブジェクトがdataに入ってきます(変数名は何でもOK)
    console.log(data);
  });
      
});

デベロッパーツールを使って、console.logを確認してみましょう。先程のブラウザで確認したようにオブジェクトが取得できているのがわかるかと思います。

写真の一覧オブジェクトが取得できたので、次は個々の写真を表示出来るようにしたいと思います。

写真を表示するURLを生成する

写真の一覧に関する情報は取得できましたが、まだ写真を表示できていません。ここからは、写真の表示する方法についてまとめていきます。

URLを確認する

ここで、またドキュメントに戻ります。TOPページの「Read these first:」にある「URLs」をクリックしてください。

まず最初に「Photo Source URLs」があります。これは、各写真にアクセスするためのURLのフォーマットです。また、その下には写真のサイズを指定するsuffixとそれに合わせた記載例が掲載されています。これを参考にしていきましょう。

続いて、「Web Page URLs」という項目があります。これは、FlickrページのURLフォーマットです。写真のリンクとして、Flickrページに飛ぶようにしたいので、枠線で囲ったこちらのURLフォーマットを参考にしましょう。

URLを生成するメソッドを作成する

それでは、上記のURLを生成するためのメソッドを作成していきましょう。まず、レスポンスでJSONオブジェクト(data)の中身を確認していきましょう。

Photo Source URLsに必要なものは、「farm-id」、「server-id」、「id」、「secret」の4つですが、全て含まれています。

また、Web Page URLsの「user-id(=owner)」、「photo-id(=id)」も全て揃っています。

まずは、Photo Source URLsを作成していきましょう。

main.js
// Flickr API key
var apiKey = "ここにAPIキーを入れます";

// photoオブジェクトから画像のURLを作成して返す
// 戻り値の例: https://farm9.staticflickr.com/8659/16102004043_f1f1d9a2ee_q.jpg
function getFlickrImageURL(photo, size) {
var url = "https://farm" + photo.farm + ".staticflickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret;
  if(size){
    url += "_" + size;
  }
  url += ".jpeg";
  return url;
}

$(function(){
  〜 中略 〜
  $.getJSON(flickr_url, function(data){
    〜 中略 〜
    console.log(getFlickrImageURL(data.photos.photo[0],"q"));
  });
});

上記を記載したら、デベロッパーツールで確認してみましょう。期待通りのURLが得られていると思います。

続いて、Web Page URLsを作成します。

main.js
// photoオブジェクトからFlickrページのURLを作成して返す
// 戻り値の例: https://www.flickr.com/photos/96346885@N04/16102004043
function getFlickrPageURL(photo) {
  return "https://www.flickr.com/photos/" + photo.owner + "/" + photo.id;
}

$(function(){
  〜 中略 〜
  $.getJSON(flickr_url, function(data){
    〜 中略 〜
    console.log(getFlickrImageURL(data.photos.photo[0],"q"));
    console.log(getFlickrPageURL(data.photos.photo[0]));
  });
});

実装したら、デベロッパーツールで確認してみましょう。以下のように期待したURLが生成されていると思います。

次は、写真をHTMLに表示してましょう。

写真を1枚表示する

写真のURLが全て生成出来たので、HTMLに写真を表示してみましょう。

表示用のdivを生成

jQueryオブジェクトの変数は慣習的に頭に$を付けます。$(“<div>”)で空のdiv要素を生成するという意味です。

main.js
$.getJSON(flickr_url, function(data){
  〜 中略 〜

  // 空のdiv要素を生成する
  $div = $("<div>");

});

今の状態はこんな感じですね。ちなみにまだHTMLなどに属していないjQueryのオブジェクト上にある状態です。

jQueryオブジェクト上
<div></div>

次に写真と写真のリンクを<div>の中に入れます。div.append()で<div>ここの中に追加する</div>という処理になり、<div><a><img></a></div>を作りたいのでappendを2回使用しています。{}には属性が入る予定です。(リファレンス

main.js
$.getJSON(flickr_url, function(data){
  〜 中略 〜
  $div = $("<div>");

  // divに<a href="..." ...><img src="..." ...></a>を追加する
  $div.append($("<a>", {}).append($("<img>", {})));

});

ここまでで以下の状態です。見やすいようにインデントを付けています。

jQueryのオブジェクト上
<div>
  <a><img></a>
</div>

これだと、画像も何も表示できないので属性を追加していきましょう。また、photoに入る値として、最初のオブジェクトを仮で入れます。

main.js
$.getJSON(flickr_url, function(data){
  〜 中略 〜
  $div = $("<div>");

  // テスト用オブジェクト
  var photo = data.photos.photo[0];
 
  // divに<a href="..." ...><img src="..." ...></a>を追加する
  $div.append(
    $("<a>", {
      href: getFlickrPageURL(photo),
      "class": "flickr-link", // inline-block表示にする(main.cssに記載)
      "target": "_blank"     // リンクを新規タブで開く
    }).append(
     $("<img>", {
       src: getFlickrImageURL(photo, "q"),
       width: 150,
       height: 150
     })
    )
  );
});

上記の記載で以下のようなdiv要素が出来上がっています。

jQueryのオブジェクト上
<div>
  <a href"flickrページのurl" class="flickr-link" target="_blank">
    <img src="flickrの写真のURL" width="150" height="150">
  </a>
</div>

最後にこれをHTMLに追加しましょう。

main.js
$.getJSON(flickr_url, function(data){
  〜 中略 〜
  $div.append(
    〜 中略 〜
  );
  
  // $divを#mainに追加する
  $div.appendTo("#main"); 
});

以下のような記載になるはずです。

実行後のindex.html予想
<div class="container">
    <div id="main">
      <div>
        <a href"flickrページのurl" class="flickr-link" target="_blank">
          <img src="flickrの写真のURL" width="150" height="150">
        </a>
      </div>
    </div>
</div>

今までのjsファイルを見てみましょう。

main.js
// Flickr API key
var apiKey = "ここにAPIキーを入れます";

// photoオブジェクトから画像のURLを作成して返す
// 戻り値の例: https://farm9.staticflickr.com/8659/16102004043_f1f1d9a2ee_q.jpg
function getFlickrImageURL(photo, size) {
var url = "https://farm" + photo.farm + ".staticflickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret;
  if(size){
    url += "_" + size;
  }
  url += ".jpeg";
  return url;
}

// photoオブジェクトからFlickrページのURLを作成して返す
// 戻り値の例: https://www.flickr.com/photos/96346885@N04/16102004043
function getFlickrPageURL(photo) {
  return "https://www.flickr.com/photos/" + photo.owner + "/" + photo.id;
}

$(function(){
  var parameters = $.param({
    method: "flickr.photos.search", 
    api_key: apiKey,
    text: "city", // 検索文字列
    sort: "interestingness-desc", // 興味深さ順
    per_page: 12, // 取得件数
    license: "4", // Creative Commons Attributionのみ
    extras: "owner_name,license", // 追加で取得する情報
    format: "json", // レスポンスをJSON形式に
    nojsoncallback: 1 // コールバック関数呼び出さない
  });
  var flickr_url = "https://api.flickr.com/services/rest/?" + parameters;
  console.log(flickr_url);

  $.getJSON(flickr_url, function(data){
    // リクエストが成功するとfunctionが実行されます
    // 取得したjsonオブジェクトがdataに入ってきます(変数名は何でもOK)
    console.log(data);
    
    // URL確認用
    // console.log(getFlickrImageURL(data.photos.photo[0],"q"));
    // console.log(getFlickrPageURL(data.photos.photo[0]));

    // 空のdiv要素を生成する
    $div = $("<div>"); 

    // テスト用オブジェクト
    var photo = data.photos.photo[0];

    // divに<a href="..." ...><img src="..." ...></a>を追加する
    $div.append(
      $("<a>", {
        href: getFlickrPageURL(photo),
        "class": "flickr-link", // inline-block表示にする(main.cssに記載)
        "target": "_blank"     // リンクを新規タブで開く
      }).append(
       $("<img>", {
         src: getFlickrImageURL(photo, "q"),
         width: 150,
         height: 150
       })
      )
    );
    // $divを#mainに追加する
    $div.appendTo("#main");
  });
});

写真がHTMLに表示されるようになりました。divも想定通りに作成されています。また、クリックするとFlickrのページに遷移するところも確認出来ます。

次は、写真の一覧を表示してみましょう。

写真を一覧で表示する

写真を一覧で表示するには、一覧で取得したオブジェクトをfor文を使って繰り返せば良いですね。テスト用のオブジェクトは削除しています。

main.js
$.getJSON(flickr_url, function(data){
  〜 中略 〜
  // 空のdiv要素を生成する
  $div = $("<div>"); 

  for (var i = 0; i < data.photos.photo.length; i++){
    var photo = data.photos.photo[i]; 

    // divに<a href="..." ...><img src="..." ...></a>を追加する
    $div.append(
     〜 中略 〜
    );
  }
  // $divを#mainに追加する
  $div.appendTo("#main");
});

これで、写真の一覧表示は完成です。

クレジット(著作権)を明記する

FlickrのデフォルトのライセンスはAll Rights Reservedですが、多くのユーザーはCreative Commonsライセンスを使用することを選択しています。

Creative Commons ライセンスとは

クリエイティブ・コモンズは、クリエイティブ・コモンズ・ライセンス(CCライセンス)を提供している国際的非営利組織とそのプロジェクトの総称です。
CCライセンスとはインターネット時代のための新しい著作権ルールで、作品を公開する作者が「この条件を守れば私の作品を自由に使って構いません。」という意思表示をするためのツールです。
CCライセンスを利用することで、作者は著作権を保持したまま作品を自由に流通させることができ、受け手はライセンス条件の範囲内で再配布やリミックスなどをすることができます。

https://creativecommons.jp/licenses/

今回、APIで取得したライセンスはCreative Commons Attributionというものです。以下のパラメーター設定時にライセンスを指定していました。

  var parameters = $.param({
    method: "flickr.photos.search", 
    api_key: apiKey,
    text: "city", // 検索文字列
    sort: "interestingness-desc", // 興味深さ順
    per_page: 12, // 取得件数
    license: "4", // Creative Commons Attributionのみ
    extras: "owner_name,license", // 追加で取得する情報
    format: "json", // レスポンスをJSON形式に
    nojsoncallback: 1 // コールバック関数呼び出さない
  });

指定できるライセンスの一覧
https://www.flickr.com/services/api/flickr.photos.licenses.getInfo.html

ここで、licenseの”4″は、Attribution LicenseでURLが記載されています。これを見ると、再配布可能で商用利用も可能なライセンスですが、適切なクレジットを明記して、ライセンスへのリンクを提供することが条件というように書いてあります。

先ほど取得した写真一覧には、掲載元のリンクしか付けていないので、クレジットを明記が必要です。今回はBootstrapのTooltipを使って著作者名などを入れたいと思います。

Tooltip

Tooltipは、マウスを乗せると吹き出しの出る機能です。今回は、写真の下に吹き出しを付けてタイトル、作者名を入れたいと思います。

■Tooltip
https://getbootstrap.com/docs/4.1/components/tooltips/

Tooltipを実装するのにソースコードには以下を追加します。

  • <a> の属性にdata-toggle="tooltip"を追加
  • <a> の属性にdata-placement="bottom"を追加
  • <a> の属性にTooltipのメッセージとなるtitleを追加
  • 呼び出しのために$("[data-toggle='tooltip']").tooltip();を追加
  • titleとなるvar photoText = getFlickrText(photo);を追加

また、titleを生成するgetFlickrText()メソッドを作成し、titleにクレジットが入るようにしています。ここで生成された文字列は、img画像のalt属性にも追加しています。

main.js
〜 中略 〜
// photoオブジェクトからクレジットを生成して返す
function getFlickrText(photo) {
  var text = '"' + photo.title + '" by ' + photo.ownername;
  if (photo.license == "4") {
    // Creative Commons Attribution(CC BY)ライセンス
    text += ' / CC BY';
  }
  return text;
}

$(function() {
 〜 中略 〜
  $.getJSON(flickr_url, function(data){
  〜 中略 〜
      for (var i = 0; i < data.photos.photo.length; i++) {
        var photo = data.photos.photo[i];
        var photoText = getFlickrText(photo);

        // $divに <a href="..." ...><img src="..." ...></a> を追加する
        $div.append(
          $("<a>", {
            href: getFlickrPageURL(photo),
            "class": "flickr-link",
            "target": "_blank",     // リンクを新規タブで開く
            "data-toggle": "tooltip",
            "data-placement": "bottom",
            title: photoText,
          }).append($("<img>", {
            src: getFlickrImageURL(photo, "q"),
            width: 150,
            height: 150,
            alt: photoText,
          }))
        );
      }
      // $divを#mainに追加する
      $div.appendTo("#main");

      // BootstrapのTooltipを呼び出し
      $("[data-toggle='tooltip']").tooltip();
 }
}

これでTootipでクレジットの表示が出来ました。

おまけ

最後にもう少しだけ手を加えます。

取得エラーの場合は処理しない条件分岐

main.js
〜 中略 〜
$.getJSON(flickr_url, function(data){
    console.log(data);
    if (data.stat == "ok") {
      var $div = $("<div>");
        〜 中略 〜
      $("[data-toggle='tooltip']").tooltip();
    }
}

トータル件数の表示

main.js
// トータル件数
$div.append("<div>" + data.photos.total + " photos in total</div>");

最後にmain.jsソースを掲載して終了になります。お疲れさまでした!

main.js
// Flickr API key
var apiKey = "ここにAPIキーを入れます";

// photoオブジェクトから画像のURLを作成して返す
// 戻り値の例: https://farm9.staticflickr.com/8659/16102004043_f1f1d9a2ee_q.jpg
function getFlickrImageURL(photo, size) {
  var url = "https://farm" + photo.farm + ".staticflickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret;
  if(size){
    url += "_" + size;
  }
  url += ".jpeg";
  return url;
}

// photoオブジェクトからFlickrページのURLを作成して返す
// 戻り値の例: https://www.flickr.com/photos/96346885@N04/16102004043
function getFlickrPageURL(photo) {
  return "https://www.flickr.com/photos/" + photo.owner + "/" + photo.id;
}

// photoオブジェクトからクレジットを生成して返す
function getFlickrText(photo) {
  var text = '"' + photo.title + '" by ' + photo.ownername;
  if (photo.license == "4") {
    // Creative Commons Attribution(CC BY)ライセンス
    text += ' / CC BY';
  }
  return text;
}

$(function(){
  var parameters = $.param({
    method: "flickr.photos.search", 
    api_key: apiKey,
    text: "city", // 検索文字列
    sort: "interestingness-desc", // 興味深さ順
    per_page: 12, // 取得件数
    license: "4", // Creative Commons Attributionのみ
    extras: "owner_name,license", // 追加で取得する情報
    format: "json", // レスポンスをJSON形式に
    nojsoncallback: 1 // コールバック関数呼び出さない
  });
  var flickr_url = "https://api.flickr.com/services/rest/?" + parameters;
  console.log(flickr_url);

  $.getJSON(flickr_url, function(data){
    // リクエストが成功するとfunctionが実行されます
    // 取得したjsonオブジェクトがdataに入ってきます(変数名は何でもOK)
    console.log(data);
    
    if (data.stat == "ok") {
      // 空のdiv要素を生成する
      $div = $("<div>"); 
      
      // トータル件数
      $div.append("<div>" + data.photos.total + " photos in total</div>");
  
      for (var i = 0; i < data.photos.photo.length; i++){
        var photo = data.photos.photo[i];
        var photoText = getFlickrText(photo);
        
        $div.append(
          $("<a>", {
            href: getFlickrPageURL(photo),
            "class": "flickr-link", // inline-block表示にする(main.cssに記載)
            "target": "_blank",   // リンクを新規タブで開く
            "data-toggle": "tooltip",
            "data-placement": "bottom",
            title: photoText
          }).append(
            $("<img>", {
              src: getFlickrImageURL(photo, "q"),
              width: 150,
              height: 150,
              alt: photoText
            })
          )
        );
      }
      // $divを#mainに追加する
      $div.appendTo("#main");
      
      // BootstrapのTooltipを呼び出し
      $("[data-toggle='tooltip']").tooltip();
    }
  });
});

まとめ

いかがでしたか?

Web APIを使うには、いろいろな知識が必要でしたね。他のAPIを使用する時にも、幅広い知識が必要だと思いますが一つ一つ丁寧に見ていって身につけるようにしましょう。

この記事で、Web APIを使えるようになるきっかけになってもらえると幸いです。では!

コメント

タイトルとURLをコピーしました