Dribbbleとは？

Dribbble - Show and tell for designers

デザイナー向けの招待制SNSです。

Dribbble APIとは？

Overview | Dribbble API

Dribbbleが提供している開発者向けAPIです。
このAPIを利用すること投稿された作品(Shots)の情報などが取得できるようになります。

準備

Dribbble APIを使う準備についてはこちらの投稿を参考にさせていただきました。

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

解説

RubyからDribbble APIを利用してShotsの情報を取得します。

Shots | Dribbble API

サンプルプログラム

解説に利用したプログラムをGitHubで閲覧したい方はこちらからどうぞ。

Ruby-Sample-Dribbble/Qiita at master · NaokiIshimura/Ruby-Sample-Dribbble

1. RubyからDribbble APIを実行する

HTTPリクエストの送信には（私が使い慣れているという理由で）Faradayを利用するのでインストールしておきます。

$ gem install faraday

Applicationを登録すると発行されるClient Access Tokenを変数tokenに、とリクエストURLをurlを設定します。

リクエストURLにはsort=recentという条件を追加してあります。

sample1.rb

# tokenを設定する
token = '<Client Access Token>'
# URLを設定する
url = 'https://api.dribbble.com/v1/shots?sort=recent'

# リクエストを送信
require 'faraday'

client = Faraday.new
res = client.get do |req|
  req.url url
  req.headers['Authorization'] = "Bearer #{token}"
end

# レスポンスを表示
puts '>>> STATUS'
p res.status

puts '>>> BODY'
p res.body

実行するとレスポンスボディにjson形式の文字列が返却されます。

$ ruby sample1.rb

>>> STATUS
200
>>> BODY
"[\n  {\n    \"id\": 3874819,\n    \"title\": \"The Good Photo Co.\", ...
...

DribbbleのRecentでソートしたShotsと比較すると1件目の作品名がjsonでも取得できてることがわかります。

2. shotsの情報を1件ずつ取り出せるようにする

レスポンスボディを扱いやすくするために、jsonに変換します。

レスポンスボディには複数のjsonオブジェクトが（こんな{},{},{},,,感じに複数）含まれているため、jsonに変換してshotsの情報を1つずつ取り出せるようにします。

sample2.rb

# tokenを設定する
token = '<Client Access Token>'
# URLを設定する
url = 'https://api.dribbble.com/v1/shots?sort=recent'

# リクエストを送信
require 'faraday'

client = Faraday.new
res = client.get do |req|
  req.url url
  req.headers['Authorization'] = "Bearer #{token}"
end

# レスポンスを表示
puts '>>> STATUS'
p res.status

# レスポンスボディをパースする
require 'json'

body = JSON.parse res.body

# jsonオブジェクトを1つずつ取り出す、
body.each.with_index(1) do |shots, i|

  # Shotsの情報を表示
  puts ">>> SHOTS:#{i}"
  p shots

end

実行すると、Shotsの情報が1件ずつ取り出せるようになります。

$ ruby sample2.rb

>>> STATUS
200
>>> SHOTS:1
{"id"=>3874823, "title"=>"October 14 2017- Daily Vectors", ...
...
>>> SHOTS:12
{"id"=>3874806, "title"=>"Tank Stream App", ...
...

3. Shotsの情報から必要な情報だけ取り出す

最後にshotsの情報から必要な項目だけを取り出します。
idとhidpiの情報を取得する場合は以下のようになります。

sample3.rb

# tokenを設定する
token = '<Client Access Token>'
# URLを設定する
url = 'https://api.dribbble.com/v1/shots?sort=recent'

# リクエストを送信
require 'faraday'

client = Faraday.new
res = client.get do |req|
  req.url url
  req.headers['Authorization'] = "Bearer #{token}"
end

# レスポンスを表示
puts '>>> STATUS'
p res.status

# レスポンスボディをパースする
require 'json'

body = JSON.parse res.body

# jsonオブジェクトを1つずつ取り出す、
body.each.with_index(1) do |shots, i|

  # Shotsの情報を表示
  puts ">>> SHOTS:#{i}"
  p shots['title']
  p shots['images']['hidpi']

end

実行するとshotsのidとhidpiの情報が取得できます。

$ ruby sample3.rb 

>>> STATUS
200
>>> SHOTS:1
"TIWMUG"
"https://cdn.dribbble.com/users/1186561/screenshots/3874835/tiwmug.png"
>>> SHOTS:2
"Russian Yeti"
"https://cdn.dribbble.com/users/1186561/screenshots/3874834/russian_yeti.png"
...

Dribbble API を Rubyで利用する

もくじ