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はモデルの中でアップローダをアタッチする際に指定するシンボル名)

 

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

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

 

さいごに

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

blog-page_footer_336




blog-page_footer_336




-BackEnd

執筆者:


comment

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

CAPTCHA


関連記事

laravel logo

コードでわかるLaravelのブラウザ認証

1 はじめに1.1 認証機能の概要2 Controller3 SessionGuard3.1 fireAttemptEvent3.2 retrieveByCredentials3.3 hasValid ...

laravel logo

Deployerで複数の環境やサーバにデプロイするには

1 はじめに2 hosts.ymlファイルの作成3 プロダクション・ステージング環境を分ける3.1 ymlファイルの記載3.2 デプロイコマンド4 複数台のサーバに同時リリースする4.1 ymlファイ ...

rails

Rails 6の変更点と新機能

1 はじめに2 概要3 Rubyのサポートバージョン4 Webpacker4.1 Webpackerの設定4.2 Webpackerでのビルド4.3 ビルドしたJavaScriptファイルを読み込む4 ...

laravel logo

Laravel SailでDocker環境構築

1 はじめに2 Laravel Sailの基本2.1 Dockerの構成2.2 コンテナの起動・停止2.3 sailで使用できるコマンド3 Laravel Sailの設定3.1 ポートフォワードの設定 ...

rails

Railsでの非同期処理とDelayed Job

1 はじめに2 Active Job2.1 Active Jobの役割2.2 ジョブを作成する2.3 ジョブをキューに登録する2.4 コールバック2.5 例外3 Delayed Job3.1 設定3. ...

フォロー

blog-page_side_responsive

2017年4月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。