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_responsive




-BackEnd

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

aws

Amazon API Gatewayざっくり概要

1 はじめに2 Amazon API Gatewayとは?2.1 なにができる?2.2 作成できるAPIの種類2.3 REST APIとHTTP APIの違い3 Amazon API Gatewayの ...

Go言語

Go言語、ゴルーチン(goroutine)で並列処理を

1 はじめに2 ゴルーチン2.1 go文2.2 ゴルーチンの終了条件2.3 WaitGroup3 チャネル3.1 チャネルの型3.2 チャネルの生成3.3 チャネルの送受信3.4 チャネルとゴルーチン ...

laravel logo

Laravelの便利なメールアドレスのバリデーション設定

1 はじめに2 不具合内容2.1 バリデーションルール設定2.2 不正なメールアドレス例3 対応3.1 email:rfc3.2 email:strict3.3 email:dns3.4 email: ...

laravel logo

[Laravel]データベースの暗号化について考えてみる

1 はじめに2 環境3 Laravelでの暗号化4 暗号化されたカラムは、そのままではLIKE検索ができない4.1 問題点4.2 解決案1:全件取得してPHP側でがんばって検索する4.3 解決案2:暗 ...

[Dialogflow + CF] アクア様が罵倒してくれたり天気を教えてくれるSlackボットを作る

1 はじめに2 Dialogflowの準備2.1 プロジェクトを作る2.2 Intentを作る2.3 試してみる2.4 WELCOME Intentを作る3 Slackボットを作る4 名前を答える5 ...

フォロー

blog-page_side_responsive

2017年4月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

アプリ情報

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