ハイパーニートプログラマーへの道

頑張ったり頑張らなかったり

【Ruby on Rails】carrierwave-dropboxを使ってDropboxにファイルアップロード

元ネタはこちら

https://www.udemy.com/ruby-on-rails-4-a-test-driven-approach/#/lecture/2310264

Dropboxでアプリ作成

https://www.dropbox.com/developers/apps

にアクセスしまして。Create Appを押す。

f:id:noriyo_tcp:20150412105834p:plain

名前はMy_bookstore_appとでもします。テキトーに。

App keyとかApp secretが表示されますが、それはあとで必要になります。

carrierwave-dropbox,mini_magickインストール

まだ入れていない場合はbrew install imagemagick

そしてGemfileにて次のように追記してbundle install

gem 'carrierwave-dropbox'
gem 'mini_magick'

アプリ認証

rake -Tで確認すると、このようなコマンドがあることがわかります。

rake dropbox:authorize                  # Obtains your Dropbox credentials

github.com

ここを見ると色々書いてあるのですけど、rake taskを走らせればいいん?

rake dropbox:authorize APP_KEY=app_key APP_SECRET=app_secret ACCESS_TYPE=dropbox|app_folder

先ほど取得したapp_keyとapp_secretを入れる。ACCESS_TYPEはdropbox,app_folderあるが、今回はapp_folder

するとここのurlにアクセスしてね!みたいな感じで出るので

Visit this URL: https://www.dropbox.com/1/oauth/authorize?oauth_token=************

ブラウザにてそのURLにアクセス

こんなんでますので許可。

f:id:noriyo_tcp:20150412110309p:plain

画像を見ればお分かりのとおり、Dropboxに同名のフォルダが作成されていて、そこにアクセスできると。

で、コンソール上では入力待ちになってますので、yを入力して次へ進む。

Authorization was successful. Here you go:

access_token: **************
access_token_secret: *************
user_id: *********

これらはあとで使うのでメモっとく。
My_bookstore_appがフォルダ内に作成されました!との通知も来ます。

設定

CarrierWave.configure do |config|
  config.dropbox_app_key = ENV["APP_KEY"]
  config.dropbox_app_secret = ENV["APP_SECRET"]
  config.dropbox_access_token = ENV["ACCESS_TOKEN"]
  config.dropbox_access_token_secret = ENV["ACCESS_TOKEN_SECRET"]
  config.dropbox_user_id = ENV["USER_ID"]
  config.dropbox_access_type = "dropbox"
end

このように設定するようなので、定数管理できれば便利だなと。

gem 'figaro'

これは定数管理するのに便利なgemのようだ。

Udemyの講座内では次のようにしていたが、うまくいかない。

rails g figaro:install

普通に?figaro installでいいようです。

github.com

$ figaro install
      create  config/application.yml
      append  .gitignore

これでconfig/application.ymlが作成され、それが.gitignoreに追加される。

そこにデベロッパーの画面で取得できるapp_key,app_secretや、アクセストークンなどをここに書いておく。

.
.
APP_KEY: ****************
APP_SECRET: ****************
ACCESS_TOKEN: ****************
ACCESS_TOKEN_SECRET: ****************
USER_ID: "****************"

注意点

上記の最後、USER_IDは初めは整数で記述していたのですけど、後ほどこんな警告が出ました。

WARNING: Use strings for Figaro configuration. ***** was converted to "*****".

文字列に変換されたので、文字列を使用してよ、ということかと。
なのでダブルクォーテーションで囲って文字列にしました。これで一応警告は出なくなりました。
下記の設定を見るとENV["USER_ID"]となっているので、文字列として扱っているのかなと。

config/initializers/carrierwave.rb

config/initializers/carrierwave.rbというものを作成する。そこに下記の設定を公式からコピペ

CarrierWave.configure do |config|
  config.dropbox_app_key = ENV["APP_KEY"]
  config.dropbox_app_secret = ENV["APP_SECRET"]
  config.dropbox_access_token = ENV["ACCESS_TOKEN"]
  config.dropbox_access_token_secret = ENV["ACCESS_TOKEN_SECRET"]
  config.dropbox_user_id = ENV["USER_ID"]
  config.dropbox_access_type = "app_folder"
end

一番最後の設定はdropboxでなくapp_folderにします。

Setting up Carrierwave

$ rails gで確認すると

Uploader:
  uploader

なるものがあるので

$ rails g uploader book_cover
      create  app/uploaders/book_cover_uploader.rb

app/uploaders/book_cover_uploader.rb

.
.
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :dropbox

CarrierWave::MiniMagickの部分をアンコメント。ストレージはdropbox

さらにサムネイルのリサイズの設定

  Create different versions of your uploaded files:
  version :thumb do
    process :resize_to_fit => [75, 10000]
  end

ここの部分はアンコメントしつつheightを(かなり余裕を持たせて)10000と設定する。

process :resize_to_fit => [300, 10000]
さらにこのラインを追加する。(これは元画像のリサイズ設定かな)つまり

  # Create different versions of your uploaded files:
  version :thumb do
    process :resize_to_fit => [75, 10000]
  end

  process :resize_to_fit => [300, 10000]

このように設定します。 ここもアンコメント

  def extension_white_list
    %w(jpg jpeg gif png)
  end

モデルに追加

book.rb

.
.
  mount_uploader :book_cover, BookCoverUploader
end

フォームに追加

  <div class="form-group">
    <label class="control-label col-sm-3">Book cover</label>
    <div class="col-sm-9">
      <%= f.file_field :book_cover, class: 'form-control', hide_label: true %>
    </div>
  </div>

file_fieldを使用する。

f:id:noriyo_tcp:20150412112343p:plain

こんな感じでアップロードできるようになってます。うpするとDropboxのアプリ>アプリ名>uploads>book>book_coverの中にそれぞれフォルダができてる(階層深いw)

f:id:noriyo_tcp:20150412112738p:plain

f:id:noriyo_tcp:20150412112907p:plain

元画像とサムネイルと2種類できてる。上記画像ですと元は300 * 300ですが、サムネのほうは75 * 75になってます。

      <div class="col-sm-12">
        <div class="col-sm-3">
          <strong>Book cover:</strong>
        </div>
        <div class="col-sm-9">
          <%= image_tag(@book.book_cover_url) if @book.book_cover? %>
        </div>
      </div>

詳細画面の表紙を表示させる部分。image_tagを使用し、book_cover_urlを指定する。

こんなんなってます。

f:id:noriyo_tcp:20150412113933p:plain