BackEnd

Shrineを使って画像をアップロードする

投稿日:2017年4月21日 更新日:

はじめに

こんにちは、onoです。

以前、CarrierWaveを使って画像をアップロードするフォームを作成しました。

CarrierWaveは多機能で使いやすいGemだと思いますが、コードが大きく複雑なため、一般的な使い方から外れた場合や問題が発生した場合に処理を追っていくのが大変です。

そこで、今回は実装がシンプルで必要な機能を選んで追加できるShrineを使ってみます。

Shrineとは

簡単な説明

Shrineはファイルをアタッチするためのツールです。
主に画像をアップロードする際に利用されるのではないかと思います。

作者

ShrineはJanko Marohnić氏(リポジトリはこちら)が2015年9月から開発しています。

特徴

主な特徴としては下記の2つが挙げられます。

  • Shrine本体は必要最小限の機能のみを実装しているため、シンプルでコードが小さい。
  • リサイズやダイレクトアップロードなど、必要な機能のみをプラグインで追加できる。

 

下準備

Gemを追加

プロジェクトを作成後、Gemfileに下記のGemを追加します。

 

初期設定

画像をアップロードするディレクトリの指定と使用するプラグインを宣言します。
アプリケーション全体で共通の設定は、config/initializers/で行います。

 

テーブルを作成する

アップロードした画像を管理するテーブルを作成します。
アップロードした画像の情報を保存するカラムはtext型の「xxx_data」という名前にします(xxxはモデルの中でアップローダをアタッチする際に指定するシンボル名)

 

実装

Uploaderの実装

モデルにアタッチするアップローダを実装します。
特にディレクトリに指定はありませんが、app/uploaders/に追加していきます。

 

Modelの実装

実装したアップローダをアタッチします。

 

Controllerの実装

下記の通り、scaffoldで生成したコードの一部を修正します。

 

Viewの実装

画像をアップロードするフォームを実装します。
アップロードした画像のアドレスはxxx_urlで取得できます(xxxはモデルの中でアップローダをアタッチする際に指定するシンボル名)

 

インサートされるレコード

フォームから画像をアップロードして保存すると、下記のようなレコードがインサートされます。

 

さいごに

今後はプラグインを追加して、ファイル名の変更、リサイズ、サムネイルの作成などを行なっていきます。

page_footer_300rect




page_footer_300rect




-BackEnd

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

rails

RailsでSidekiqを使ってみた

1 はじめに1.1 実行環境2 前準備2.1 Redisのインストール3 Railsの準備3.1 プロジェクト作成3.2 新規登録時にAPIを叩く4 Sidekiqの準備4.1 Workerを作る5 ...

rails

Railsのバリデーション

1 はじめに2 基本的なバリデーション3 EachValidatorクラス4 Validatorクラス5 autoload_pathsの編集6 さいごに はじめに 今回はRailsのActiveRec ...

rails

さらば「rails migrate」、よろしく「ridgepole」

1 はじめに2 Ridgepoleとは3 rails migrateではなく、Ridgepoleを選定した理由4 rails migrateからRidgepoleへの移行手順5 capistrano3 ...

rails

半年ぶりにRails Tutorialをやったメモ

はじめに Railsを触り始めて半年ほどたちました、tonnyです。 復習もかねてRails Tutorialを実施したので、そのメモを残します。 やはり2回目でも気づくことは多いので、非常に勉強にな ...

Vue.js入門その4〜TODOアプリにサーバーサイドを追加してみる〜

1 はじめに2 準備2.1 今回作成したいもの2.2 環境構築3 サーバーサイド3.1 DB3.2 メモ:rails generateで余分なファイルを生成しない3.3 作成したファイル4 ビューの作 ...

page_side_300rect

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。
下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。

アプリ情報

私たちは、目標を達成したい方を応援する、TODOアプリもリリースしております。
下記のアイコンから無料でダウンロードできます。

リンク

follow us in feedly
2017年4月
« 3月 5月 »
 1
2345678
9101112131415
16171819202122
23242526272829
30