メトロポリタン美術館APIを使ってみた

#はじめに
当方、好きが高じてフランスに行ってしまうほど美術館巡りが好きなのですが、今年はこういった状況でなかなか行けません…
そこで、美術館に行けないならAPIを取って観ればいいじゃない！ということで、メトロポリタン美術館(以下METと呼びます。)が出しているAPIを触ってみました。(フランスの美術館ではないですが…)

#MET APIの使い方
MET API は無料かつ、登録やAPIキーの取得をする必要なく使えます。
下記のリンクで詳しく書かれています。
The Metropolitan Museum of Art Collection API

#とりあえずデータを取ってみる

met.js

const request = new XMLHttpRequest();
request.open('GET', 'https://collectionapi.metmuseum.org/public/collection/v1/objects', true);
request.responseType = 'json';
request.onload = function(){
  const data = this.response;
  console.log(data);
};
request.send();

このコードでAPIをたたくと

{total: 474494, objectIDs: Array(474494)}objectIDs: (474494) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 56, 57, 58, 59, 62, 63, 64, 65, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, …][0 … 9999][0 … 99]0: 11: 22: 33: 44: 55: 66: 77: 88: 99: 1010: 1111: 1212: 1313: 1414: 1515: 1616: 1717: 1818: 1919: 2020: 2121: 2222: 2323: 2424: 2525: 2626: 2727: 2828: 2929: 3030: 3131: 3232: 3333: 3434: 3535: 3636: 3737: 3838: 3939: 4040: 4141: 4242: 4343: 4444: 4545: 4646: 4747: 4848: 4949: 5050: 5151: 5252: 5353: 5654: 5755: 5856: 5957: 6258: 6359: 6460: 6561: 6862: 6963: 7064: 7165: 7266: 7367: 7468: 7569: 7670: 7771: 7872: 7973: 8074: 8175: 8476: 8577: 8678: 8779: 8880: 8981: 9082: 9183: 9284: 9385: 9486: 9587: 9688: 9789: 9890: 9991: 10092: 10193: 10294: 10395: 10496: 10597: 10698: 10799: 108[100 … 199][200 … 299][300 … 399][400 … 499][500 … 599][600 … 699][700 … 799][800 … 899][900 … 999][1000 … 1099][1100 … 1199][1200 … 1299][1300 … 1399][1400 … 1499][1500 … 1599][1600 … 1699][1700 … 1799][1800 … 1899][1900 … 1999][2000 … 2099][2100 … 2199][2200 … 2299][2300 … 2399][2400 … 2499][2500 … 2599][2600 … 2699][2700 … 2799][2800 … 2899][2900 … 2999][3000 … 3099][3100 … 3199][3200 … 3299][3300 … 3399][3400 … 3499][3500 … 3599][3600 … 3699][3700 … 3799][3800 … 3899][3900 … 3999][4000 … 4099][4100 … 4199][4200 … 4299][4300 … 4399][4400 … 4499][4500 … 4599][4600 … 4699][4700 … 4799][4800 … 4899][4900 … 4999][5000 … 5099][5100 … 5199][5200 … 5299][5300 … 5399][5400 … 5499][5500 … 5599][5600 … 5699][5700 … 5799][5800 … 5899][5900 … 5999][6000 … 6099][6100 … 6199][6200 … 6299][6300 … 6399][6400 … 6499][6500 … 6599][6600 … 6699][6700 … 6799][6800 … 6899][6900 … 6999][7000 … 7099][7100 … 7199][7200 … 7299][7300 … 7399][7400 … 7499][7500 … 7599][7600 … 7699][7700 … 7799][7800 … 7899][7900 … 7999][8000 … 8099][8100 … 8199][8200 … 8299][8300 … 8399][8400 … 8499][8500 … 8599][8600 … 8699][8700 … 8799][8800 … 8899][8900 … 8999][9000 … 9099][9100 … 9199][9200 … 9299][9300 … 9399][9400 … 9499][9500 … 9599][9600 … 9699][9700 … 9799][9800 … 9899][9900 … 9999][10000 … 19999][20000 … 29999][30000 … 39999][40000 … 49999][50000 … 59999][60000 … 69999][70000 … 79999][80000 … 89999][90000 … 99999][100000 … 109999][110000 … 119999][120000 … 129999][130000 … 139999][140000 … 149999][150000 … 159999][160000 … 169999][170000 … 179999][180000 … 189999][190000 … 199999][200000 … 209999][210000 … 219999][220000 … 229999][230000 … 239999][240000 … 249999][250000 … 259999][260000 … 269999][270000 … 279999][280000 … 289999][290000 … 299999][300000 … 309999][310000 … 319999][320000 … 329999][330000 … 339999][340000 … 349999][350000 … 359999][360000 … 369999][370000 … 379999][380000 … 389999][390000 … 399999][400000 … 409999][410000 … 419999][420000 … 429999][430000 … 439999][440000 … 449999][450000 … 459999][460000 … 469999][470000 … 474493]length: 474494__proto__: Array(0)total: 474494__proto__: constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

今は使用可能なすべてのオブジェクトのオブジェクトIDが返ってきている状態なので、適当なオブジェクトIDを指定して一つの作品のデータを取っていきます。

met.js

const request = new XMLHttpRequest();
request.open('GET', 'https://collectionapi.metmuseum.org/public/collection/v1/objects/60121'); //適当な数字を指定
request.responseType = 'json';
request.onload = function(){
  const data = this.response;
  console.log(data);
};
request.send();

返ってきたデータがこちら
タイトルや画像URLなどが取れていることが分かります。

{objectID: 60121, isHighlight: false, accessionNumber: "10.211.762", accessionYear: "1910", isPublicDomain: true, …}
GalleryNumber: ""
accessionNumber: "10.211.762"
accessionYear: "1910"
additionalImages: (4) ["https://images.metmuseum.org/CRDImages/as/original/LC-10_211_762-002.jpg", "https://images.metmuseum.org/CRDImages/as/original/LC-10_211_762-003.jpg", "https://images.metmuseum.org/CRDImages/as/original/LC-10_211_762-004.jpg", "https://images.metmuseum.org/CRDImages/as/original/LC-10_211_762-005.jpg"]
artistAlphaSort: ""
artistBeginDate: ""
artistDisplayBio: ""
artistDisplayName: ""
artistEndDate: ""
artistGender: ""
artistNationality: ""
artistPrefix: ""
artistRole: ""
artistSuffix: ""
artistULAN_URL: ""
artistWikidata_URL: ""
city: ""
classification: "Netsuke"
constituents: null
country: ""
county: ""
creditLine: "Gift of Mrs. Russell Sage, 1910"
culture: "Japan"
department: "Asian Art"
dimensions: "H. 1 5/8 in. (4.1 cm); W. 1 1/2 in. (3.8 cm)"
dynasty: ""
excavation: ""
geographyType: ""
isHighlight: false
isPublicDomain: true
isTimelineWork: false
linkResource: ""
locale: ""
locus: ""
measurements: [{…}]
medium: "Ivory"
metadataDate: "2020-11-14T04:40:04.457Z"
objectBeginDate: 1800
objectDate: "19th century"
objectEndDate: 1899
objectID: 60121
objectName: "Netsuke"
objectURL: "https://www.metmuseum.org/art/collection/search/60121"
objectWikidata_URL: ""
period: "Edo (1615–1868) or Meiji period (1868–1912)"
portfolio: ""
primaryImage: "https://images.metmuseum.org/CRDImages/as/original/LC-10_211_762-001.jpg"
primaryImageSmall: "https://images.metmuseum.org/CRDImages/as/web-large/LC-10_211_762-001.jpg"
region: ""
reign: ""
repository: "Metropolitan Museum of Art, New York, NY"
rightsAndReproduction: ""
river: ""
state: ""
subregion: ""
tags: (2) [{…}, {…}]
title: "Netsuke of Old Man and Stork"
__proto__: Object

鑑賞するために画像urlとタイトルを取得して表示させます。

<body>
    <div id="main">
      <p >MET Fine arts club</p>
      <p id="obj-title"></p>
      <img id="obj-image"></img>
    </div>
</body>

const request = new XMLHttpRequest();
request.open('GET', 'https://collectionapi.metmuseum.org/public/collection/v1/objects/60121');
request.responseType = 'json';
request.onload = function(){
  const data = this.response;
  console.log(data);
  
  const title = data.title;
  console.log(title);
  const titleName = document.getElementById('obj-title');
  titleName.innerText = title;
  
  const imageUrl = data.primaryImage;
  console.log(imageUrl);
  const image = document.getElementById('obj-image');
  image.src = imageUrl;
};
request.send();

無事に表示できました。
西洋絵画あたりがヒットするかと思っていたので、なんだか思っていたのと違いますが…47万点もあると日本の作品等色々あるみたいです。

#おわりに
今回はAPIを取得して表示するところまででしたが、これを使って何かアプリ的なものを作れたらいいなと思います。
実際にやりながら記事を書いていると、理解があいまいなところが分かり勉強になりました。
今回はアドベントカレンダーに参加させていただきありがとうございました！