Dribbble APIの使い方とランダムに画像とってくるやつの作り方

## Dribbbleとは

一応解説。

> dribbbleは、Webデザイナーやグラフィックデザイナー、イラストレーター、ロゴデザイナーなどのクリエイターが、作品をシェアしたり交流したりするWebコミュニティサービスです。
> 作品を見てデザイナーに仕事を依頼したり、求人情報を掲載したりと、デザイナーとのビジネスにも使えるところがポイントです。 --@ITより

ref) http://www.atmarkit.co.jp/ait/articles/1506/15/news006.html

### ログインしよう

URL: https://dribbble.com/

アカウント持ってる方はログイン。持ってない方は作ってログイン。

## APIを使う準備

APIのページはこちら。

URL: http://developer.dribbble.com/

### アプリケーションを登録する

dribbble api 使う準備です。

![image](https://qiita-image-store.s3.amazonaws.com/0/49070/5c27ba92-52b7-c6c3-8541-e62de9b8f403.png)

dribbble.neutrinoboy.jpってのを登録しようとしたら怒られました。
Brand Guidelines読もう。

URL: https://dribbble.com/branding#brand-naming

### Client ID+Secret+Access Token

アプリケーションが登録できたら、

- Client ID
- Client Secret
- Client Access Token

が割り振られます。これは後でAPI使う時に必要です。
これでAPI使う準備ができました。

それでは実際に使ってみよう！

## dribbble apiを使って見る

### apiのドキュメント

URL: http://developer.dribbble.com/v1/

これを見ながらあれこれ試してみます。

### curlで実行してみる

ターミナル起動。Macでやってます。

#### Step 1

最初に簡単なところから、自分のユーザー情報とってみます。

URL: http://developer.dribbble.com/v1/oauth/#web-application-flow

ここの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: https://dribbble.com/shots?list=animated

これをAPIからとってきたいと思います。

ただshotsをとるだけならとても簡単

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

Step 1,2のuserをshotsに変えるだけです。
リファレンスは、以下。

URL: http://developer.dribbble.com/v1/shots/

目的はアニメーションです。
パラメータを見ると、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です。

http://dribbble.neutrinoboy.jp/

アクセスするたびに違う画像がでます。

http://dribbble.neutrinoboy.jp/gif

こっちはリダイレクトする版。

http://codepen.io/nmtakay/pen/PNKxgL

ボタンぽちぽちすると画像かわるやつ。