Dribbble API를 사용하는 방법과 무작위로 이미지를 가져오는 사람을 만드는 방법

Dribbble이란?

일단 해설.

dribbble은 웹 디자이너, 그래픽 디자이너, 일러스트레이터, 로고 디자이너 등의 제작자가 작품을 공유하거나 상호 작용하는 웹 커뮤니티 서비스입니다.
작품을 보고 디자이너에게 일을 의뢰하거나 구인 정보를 게재하는 등 디자이너와의 비즈니스에도 사용할 수 있는 곳이 포인트입니다. --@IT에서

ref) h tp // w w. 아 t r t. 이. jp / ai t / archi c0s / 1506/15 / 네 ws006. HTML

로그인하자

URL : h tps://d 랏 bぇ. 코m/

계정 가지고 계신 분은 로그인. 가지고 있지 않은 분은 만들어 로그인.

API 사용 준비

API의 페이지는 이쪽.

URL : ぇぇぺぺr. d 리트 bぇ. 코m/

애플리케이션 등록

dribbble api 사용할 준비입니다.



dribbble.neutrinoboy.jp라는 것을 등록하려고하면 화가났습니다.
Brand Guidelines 읽자.

URL : h tps://d 랏 bぇ. 코 m / b 란 ぢ g # b 란 드 나 민 g

Client ID+Secret+Access Token

애플리케이션을 등록할 수 있으면

Client ID

Client Secret

Client Access Token

가 할당됩니다. 이것은 나중에 API를 사용할 때 필요합니다.
이제 API를 사용할 준비가 되었습니다.

그럼 실제로 사용해 보자!

dribbble api로 보기

api 문서

URL : ぇぇぺぺr. d 리트 bぇ. 이 m/v1/

이것을 보면서 이것을 시도해 보겠습니다.

curl에서 실행해보기

터미널 시작. Mac에서 해요.

Step 1

먼저 간단한 곳에서 자신의 사용자 정보를 살펴 보겠습니다.

URL : ぇぇぺぺr. d 리트 bぇ. 이 m/v1/오아 th/

여기의 3번을 참고로.

GET https://api.dribbble.com/v1/user?access_token=...

필요한 것은 Client Access Token 입니다.

$로 시작하는 곳이 터미널에서 실행하는 사람입니다.
그럼 다음 명령을 실행!

$ curl https://api.dribbble.com/v1/user\?access_token\=309fjdaiofj0fmao2i0fmimaf20mkr

즐라~ 하고 정보가 돌아오면 성공입니다.

※기재하고 있는 Client Access Token은 적당한 것입니다.
※ 자신의 Access Token으로 바꾸세요

Step 2

여기에서도 사용자를 취합니다.
다만, Step 1에서는 파라미터의 access_token을 붙이고 있었습니다만, 이번은 헤더에 토큰 넣어 보겠습니다.

통상, PHP나 JS등에서 처리하는 경우 헤더에 넣어 사용하는 것이 아닐까 생각하기 때문에 이쪽의 패턴도 시험해 보겠습니다.

그럼 다음 명령을 실행!

$ curl -H "Authorization: Bearer 309fjdaiofj0fmao2i0fmimaf20mkr" https://api.dribbble.com/v1/user

움직였어?

Step 3

기다리게했습니다. 원하는 이미지를 찍고 싶습니다.
이번에 오는 것은/shots 애니메이션

URL : h tps://d 랏 bぇ. 이 m/쇼 ts?ぃst = 애니메 d

이것을 API에서 가져오고 싶습니다.

그냥 쏘는 것만으로도 간단

$ curl -H "Authorization: Bearer 309fjdaiofj0fmao2i0fmimaf20mkr" https://api.dribbble.com/v1/shots

Step 1,2의 user를 shots로 바꾸기만 하면 됩니다.
참조는 다음.

URL : ぇぇぺぺr. d 리트 bぇ. 코 m/v1/쇼 ts/

목적은 애니메이션입니다.
매개 변수를 보면 list 설명에 animated가 있습니다.

매개 변수를 지정하고 다시 실행해 봅니다.

$ curl -H "Authorization: Bearer 309fjdaiofj0fmao2i0fmimaf20mkr" https://api.dribbble.com/v1/shots\?list\=animated

그 외에도 timeframe=[week,month,year,ever], sort=[comments,recent,views]등의 파라미터를 지정하는 것으로, 시기를 지정하거나 표시 순서를 지정할 수 있습니다.

참고로

$ curl -H "Authorization: Bearer 309fjdaiofj0fmao2i0fmimaf20mkr" https://api.dribbble.com/v1/shots\?list\=animated\&timeframe\=year | grep screenshots | grep hidpi

무작위로 이미지를 가져오는 사람

JS당 dribbble api를 사용하여 무작위로 이미지를 가져오는 녀석을 만들려고 했지만 또 다음에.
(추기할 생각)

- 추가 -

JS 썼습니다.
curl에서 실행하고 있던 내용을 jQuery의 ajax로 다시 작성했습니다.

$.ajax({
    url: 'https://api.dribbble.com/v1/shots',
    type: 'GET',
    dataType: 'json',
    data: {
        'list': 'animated',
        'timeframe': 'year'
    },
    beforeSend: function(xhr) {
        xhr.setRequestHeader(
            "Authorization", "Bearer 309fjdaiofj0fmao2i0fmimaf20mkr"
        );
    }
}).done(function(json, statusText, jqXHR) {
    var images = [];
    var images_type = "";
    $.each(json, function(i, v) {
        images_type = (v['images']['hidpi'])? 'hidpi' : 'normal';
        images.push(v['images'][images_type]);
    });
    var n = images.length, i;
    i = Math.floor(Math.random() * n--);
    console.log(images[i]);
}).fail(function(jqXHR, statusText, errorThrown) {
    console.log("Fail: ");
    console.log(jqXHR);
});

dribbble api 두드려 shots/animated의 일람을 취득해,gif의 url로 짜내, 랜덤으로 1URL만 취득하는 JS입니다.

액세스 할 때마다 다른 이미지가 나타납니다.

이쪽은 리디렉션하는 판.

버튼 포치포치하면 이미지 바뀌는 녀석.