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

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 使う準備です。

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です。

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

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

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