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

#メトロポリタン美術館の40万件のデータが利用可能
http://current.ndl.go.jp/node/36927
>2018年10月25日、米・メトロポリタン美術館（MET）は、APIの公開を発表しました。APIを通じて、同館の40万6,000点の画像を著作権等の制限なしに利用することができます。

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

#作ったもの

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

<img width="497" alt="スクリーンショット 2019-06-30 22.26.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266753/7e83f3ca-5fbf-b921-38d5-b95f74ca2bfa.png">

検索結果
<img width="770" alt="スクリーンショット 2019-06-30 22.32.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266753/35834640-125b-99ce-f643-5328400e43e0.png">



#使用した技術
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>`);
}

```

コードは[こちら](https://github.com/siophp/searchMet)で公開しています。


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

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


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

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



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

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