[JavaScript]メトロポリタン美術館のAPIを使ってアプリを作ってみた

13516 ワード
WebAPI JavaScript github-pages bootstrap4 HTML5 JavaScript テキストリンク

メトロポリタン美術館の40万件のデータが利用可能

2018年10月25日、米・メトロポリタン美術館（MET）は、APIの公開を発表しました。APIを通じて、同館の40万6,000点の画像を著作権等の制限なしに利用することができます。

このニュースを見て気になったので、APIを作って簡単なWEBサービスを作ってみました

作ったもの

メトロポリタン美術館のデータベースにアクセスして、キーワードに関連する美術作品を取得するアプリです。

検索結果

使用した技術

HTML/CSS
JavaScript
GitHub
WebAPI
のみです。

APIについてはこちらに詳細が記載されています（英語です）
https://metmuseum.github.io/

コード

APIへアクセスする部分のコードです。

1.APIでキーワードに関連する作品のIDを配列の形で取得
2.取得したIDを使い、作品のデータを取得
3.取得したデータをDOMで画面に表示

という流れです。

2~3をfor文で繰り返し処理しているため、サーバーへの負担が非常に気になります。
一応、1で取得したIDの数が101件を越えると停止するように設計しました。

main.js
function searchArtObjects(){
  var result_area = document.getElementById('result');
  result_area.innerHTML=('');
  var input = document.getElementById("input").value;
  var request = new XMLHttpRequest();
  request.open("GET",`https://collectionapi.metmuseum.org/public/collection/v1/search?q=${input}`);
  request.addEventListener("load",(event)=>{
    if(event.target.status!==200){
      console.error(`${event.target.status}: ${event.target.statusText}`);
      return;
    }
    var objectsJson = JSON.parse(event.target.responseText);
    if(!objectsJson.objectIDs){
      nullInfo();
      return;
    }
    getArtInfo(objectsJson.objectIDs);
  });
  request.addEventListener("error",()=>{
    console.error("Network Error");
  });
  request.send();
}

function getArtInfo(objectIDs){
  if(objectIDs.length>101){
    searchInDetail();
    return;
  }
  objectIDs.sort(function(a,b){
     if(a<b) return -1;
     if(a>b) return 1;
     return 0;
  });
  for(var i=0;i<objectIDs.length;i++){
    var request = new XMLHttpRequest();
    request.open("GET",`https://collectionapi.metmuseum.org/public/collection/v1/objects/${objectIDs[i]}`);
    request.addEventListener("load",(event)=>{
      if(event.target.status!==200){
        console.error(`${event.target.status}: ${event.target.statusText}`);
        return;
      }
      var objectJson = JSON.parse(event.target.responseText);
      insertArtInfo(objectJson);
    });
    request.addEventListener("error",()=>{
      console.error("Network Error");
    });
    request.send();
  }
}

function insertArtInfo(objectJson){
  var result = document.getElementById('result');
  result.insertAdjacentHTML('afterbegin',
  `<div class="art_area col-md-4">
    <span class="art_img"><img src="${objectJson.primaryImage}"></span></br>
    <span class="art_title">タイトル：${objectJson.title}</span></br>
    <span class="art_artist_name">製作者：${objectJson.artistDisplayName}</span></br>
    <span class="art_culture">関連する国：${objectJson.culture}</span></br>
  </div>`);
}

コードはこちらで公開しています。

追加したい機能

できたら追加したいと思っている機能が、下の3つです。

最下層までスクロールすると、APIに通信してデータを取得する
メルカリやTwitterのように、スクロールがトリガーとなってAPIと通信して作品データを取得するようにしたいと考えています。

検索軸を追加
アーティスト名、年代、カテゴリ、国など、複数の検索軸を追加したいです

取得した画像をSNSでシェアできるように
取得した画像をSNSでシェアできたら面白いなあと思っています。インスタのレイアウトのように、複数の美術作品を組み合わせて一枚の画像にして、SNSに投稿できたらいいなと。

もちろんデザインや文章も洗練させていきたいです

まとめ

サービス作成を通してJavaScriptとWebAPIへの理解を深めることができました。
芸術がもっと身近なものになればなあと思います。