메트로폴리탄 미술관에서 400,000건의 데이터 이용 가능

2018년 10월 25일, 미국 메트로폴리탄 미술관(MET)은 API 공개를 발표했습니다. API를 통해 이 건물의 40만 6,000점의 이미지를 저작권 등의 제한 없이 이용할 수 있습니다.

이 뉴스를 보고 신경이 쓰였으므로 API를 만들어 간단한 WEB 서비스를 만들어 보았습니다.

만든 것

메트로폴리탄 미술관의 데이터베이스를 방문하여 키워드와 관련된 미술 작품을 검색하는 앱입니다.



검색결과

사용한 기술

HTML/CSS
자바스크립트
GitHub
WebAPI
뿐입니다.

API에 대한 자세한 내용은 여기에 있습니다.
h tps : // / t t 음란 m. 기주 b. 이오/

코드

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에 대한 이해를 깊게 할 수 있었습니다.
예술이 더 친숙해지면 좋겠다고 생각합니다.