読者です 読者をやめる 読者になる 読者になる

sinatraを使ってtumblr API を叩いて画像を投稿してみる

こんにちは、エンジニアの kouno です。 大本営から春イベントは総力戦になるとの発表があったので、戦々恐々しながら戦力の増強と備蓄を本格的に始めたところです。

今回は、sinatraを使ったwebアプリからtumblrAPIを使って画像を投稿してみようと思います。

前提

  • tumblrのアカウントを持っている事

環境

インストール

$ gem install sinatra
$ gem install tumblr_client
$ gem install thin

tumblrの準備

  1. tumblrにログイン
  2. https://www.tumblr.com/oauth/apps にてアプリを追加し、consumer_keyとconsumer_secretを取得
  3. https://api.tumblr.com/console/calls/user/info に上記で取得した、consumer_keyとconsumer_secretを使って、oauth_tokenとoauth_token_secretを取得

実装

[config.ru]
require 'sinatra'
require 'tumblr_client'
require 'mime/types'
load  'myapp.rb'

configure do
  set (:client) {
    Tumblr::Client.new({
      :consumer_key => '#{your_consumer_key}',
      :consumer_secret => '#{your_consumer_secret}',
      :oauth_token => '#{your_oauth_token}',
      :oauth_token_secret => '#{your_oauth_token_secret}'
    })
  }
end

run Sinatra::Application
[myapp.rb]
get '/' do
  erb :index, :layout => :application
end

post '/tumblr_post' do
  if settings.client?
    client = settings.client
    post_option = {}

    %w(data caption tags link state).each do |column|
      post_option[column.to_sym] = params[column]
    end
    
    if File.directory?(params[:data])
      path = params[:data]
      Dir.open(path).each do |file|
        next if MIME::Types.type_for(file) == [] or File.directory?(file)
        post_option[:data] = "#{path}#{file}"
        post_option.delete("data")
        post_option.delete(:type)
        client.photo("#{client.info["user"]["name"]}.tumblr.com",post_option)
      end
    else
      client.photo("#{client.info["user"]["name"]}.tumblr.com",post_option)
    end

    # puts response
    erb :tumblr_post, :layout => :application
  end
end
[views/index.erb]
<form action='./tumblr_post' method='post'>
        画像パス<input type="text" name="data" size=" 100" />※ローカルファイルのフルパスを設定<br />
        タイトル<input type="text" name="caption" size="100" /><br />
        url<input type="text" name="link" size="100" /><br />
        tags<input type="text" name="tags" size="100" /><br />
        ステータス<select name="state">
            <option value="draft">draft</option>
            <option value="queued">queued</option>
            <option value="published">published</option>
        </select>
        <input type="submit" name="submit" value="送信" />
</form>
[views/application.erb]
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
</head>
<body>
    <%= yield %>
</body>
</html>
[views/application.erb]
<p>送信完了しました。</p>

使い方

  1. $ thin start して起動してください。
  2. localhost:3000 にブラウザでアクセス
  3. 画像パスtumblrに投稿したい画像か画像のあるディレクトリをフルパスで指定
  4. タイトル に画像のキャプションをurlにリンクを、tagsにカンマ区切りで投稿に付けるタグを、それぞれ設定
  5. ステータスdraft(下書き),queued(自動投稿),published(即時投稿) のいずれかを設定
  6. 送信をクリック
  7. 画像が投稿されます

注意事項的な何か

  • thinの設定次第では送信後に画面がタイムアウトします。thinの設定をさがしてみてください。

参考URL

名前 url
tumblr API開発者向けドキュメント https://www.tumblr.com/docs/en/api/v2
tumblr本家git https://github.com/tumblr/tumblr_client
sinatra日本語ドキュメント http://www.sinatrarb.com/intro-ja.html