SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

これだけは押さえておきたい! Rails開発で使えるgemパッケージ/ツール

Railsアプリケーションにファイルを簡単にアップロードするgem「Shrine」と「ActiveStorage」

これだけは押さえておきたい! Rails開発で使えるgemパッケージ/ツール 第10回

  • このエントリーをはてなブックマークに追加

 前回は、ファイルアップローダーの代表的なgemであるCarrierWave/Refileの基本的な使い方を紹介しました。今回は、ShrineとRails 5.2から導入されたActiveStorageについても紹介します。

  • このエントリーをはてなブックマークに追加

Shrineの導入(1)

 Railsアプリケーションで、Shrineを使ってファイルアップロード機能を実装していきます。なお、前回記事で紹介済みの手順でCarrierWave/Refileの実装を行った後に以下の手順を試す場合は、いったん適用したマイグレーションをロールバックしておく必要があります。

インストール

 GemfileにShrineを追記します。

[リスト 1]Gemfile
…(中略)…
gem 'shrine'
…(中略)…

 以下のコマンドを実行しShrineをインストールします。

bin/bundle

 執筆時点では、2.13.0がインストールされました。

マイグレーション

 articlesテーブルにimage_dataカラムを追加するマイグレーションファイルを追加します。

bin/rails g migration add_image_to_articles image_data:string

 生成されたマイグレーションファイルが以下のようになっていることを確認しておきましょう。

[リスト 2]db/migrate/20181120112141_add_image_to_articles.rb
class AddImageToArticles < ActiveRecord::Migration[5.2]
  def change
    add_column :articles, :image_data, :string
  end
end

 マイグレーションファイルに問題がなければ、以下のコマンドを実行します。

bin/rails db:migrate

アップローダーの作成

 Shrineでは、CarrierWaveとは異なり、アップローダー用のクラスを作成するコマンドは提供されていないので、アップローダークラスを以下のように新規追加します。

[リスト 3]app/uploaders/image_uploader.rb
class ImageUploader < Shrine
end

アップローダーをモデルにインクルード

 作成したアップローダーをArticleモデルとして使えるようにする設定を入れるため、以下のようにArticleモデルに追記します。

[リスト 4]app/models/article.rb
class Article < ApplicationRecord
  include ImageUploader[:image]
…(中略)…

 このようにアップローダークラスをインクルードするだけで、モデルから画像を扱えるようになります。

 注意すべきは、アップローダークラスのキーである「:image」が、先ほどマイグレーションで追加したカラム名の「image_data」のprefixと一致している必要がある点です。

 例えばマイグレーションで追加したカラム名を「profile_data」とすると、追加するキー名は「:profile」とする必要があります。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Shrineの導入(2)

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
これだけは押さえておきたい! Rails開発で使えるgemパッケージ/ツール連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 竹馬 力(チクバ ツトム)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11339 2019/02/05 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング