CP 사이트들의 레이팅을 자동적으로 적용해보자!

갑자기 API?

Bucket list를 쓰려고 하는데 목표치와 비교하게 내 데이터를 실시간으로 불러오는 방법에 대해서 고민해보았다.

BOJ에서 내 데이터를 어떤 식으로 가져오는가 궁금해하던중, @jwvg0425 님과 @baekjoon 님이 API를 알려주셨다. jekyll에서는 어떤식으로 API를 불러올 수 있는지 알아보자.

어떤 원리로 적용되나?

API(Application Programming Interface)는 함수의 모임으로, 응용프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 의미한다.

흔히 사용하는 코딩 사이트(Codeforces와 TopCoder)는 사이트별 API를 가지고 있다. 그렇다면 사이트별 API에서 JSON파일을 파싱해서 원하는 정도인 색과 레이팅만 가져와보도록 하자.

javascript에서 ajax를 통해 json파일을 받아오면 된다. getJSON등 여러 방법으로 파일을 불러올 수 있다.

. . .

3시간동안 씨름 끝에 Ajax가 계속 에러가 떠서 스스로 짜기를 포기하고 구글링을 통해 소스코드를 찾았다. 또한 소스코드에서 atcoder까지 YQL로 가져오는 방법이 되어 있어 적용해보았다.

레이팅을 가져오면 색은 직접 RGB값으로 지정하도록 하였다. 색상 코드와 레이팅은 다음과 같다. RGB값을 참조할 사람을 위해 코드를 웹상에 올려두겠다.

var colors = {
  'atcoder':[
    { color:'#808080', min:0,    max:399  },
    { color:'#804000', min:400,  max:799  },
    { color:'#008000', min:800,  max:1199 },
    { color:'#00C0C0', min:1200, max:1599 },
    { color:'#0000FF', min:1600, max:1999 },
    { color:'#C0C000', min:2000, max:2399 },
    { color:'#FF8000', min:2400, max:2799 },
    { color:'#FF0000', min:2800, max:9999 }
  ],
  'codeforces':[
    { color:'#808080', min:0,    max:1199 },
    { color:'#008000', min:1200, max:1399 },
    { color:'#03A89E', min:1400, max:1599 },
    { color:'#0000FF', min:1600, max:1899 },
    { color:'#AA00AA', min:1900, max:2199 },
    { color:'#FF8C00', min:2200, max:2399 },
    { color:'#FF0000', min:2400, max:9999 }
  ],
  'topcoder':[
    { color:'#999999', min:0,    max:899  },
    { color:'#00A900', min:900,  max:1199 },
    { color:'#6666FF', min:1200, max:1499 },
    { color:'#DDCC00', min:1500, max:2199 },
    { color:'#EE0000', min:2200, max:9999 }
  ]
};

적용한 결과는 다음과 같다.

AtCoder : loading
Codeforces : loading
TopCoder SRM : loading

REF

참고코드 @algon

Leave a Comment