Dribbble APIの使い方とランダムに画像とってくるやつの作り方
Dribbbleとは
一応解説。
dribbbleは、Webデザイナーやグラフィックデザイナー、イラストレーター、ロゴデザイナーなどのクリエイターが、作品をシェアしたり交流したりするWebコミュニティサービスです。
作品を見てデザイナーに仕事を依頼したり、求人情報を掲載したりと、デザイナーとのビジネスにも使えるところがポイントです。 --@ITより
ref) http://www.atmarkit.co.jp/ait/articles/1506/15/news006.html
ログインしよう
アカウント持ってる方はログイン。持ってない方は作ってログイン。
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です。
アクセスするたびに違う画像がでます。
こっちはリダイレクトする版。
ボタンぽちぽちすると画像かわるやつ。
Author And Source
この問題について(Dribbble APIの使い方とランダムに画像とってくるやつの作り方), 我々は、より多くの情報をここで見つけました https://qiita.com/nmta/items/663f40d64ed69b8aff12著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .