SHOEISHA iD

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

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

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

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

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

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

Shrineの導入(2)

ビューファイルの修正

 まず、フォームに画像パス用のフィールドを追加します。以下のように修正します。

[リスト 5]app/views/articles/_form.html.erb
…(中略)…
  <div class="field">
    <%= form.label :body %>
    <%= form.text_area :body %>
  </div>

  <div class="field">
    <%= form.label :image_data %>
    <%= form.hidden_field :image, value: article.cached_image_data %>
    <%= form.file_field :image %>
  </div>
…(中略)…

 cached_image_dataはShrineが提供するメソッドで、バリデーションエラー時にキャッシュ済みの、アップロード済みファイルを表示するためのものです。

 次に、アップロードした画像ファイルを表示するために以下のように修正します。

[リスト 6]app/views/articles/show.html.erb
…(中略)…
<p>
  <strong>Body:</strong>
  <%= @article.body %>
</p>

<p>
  <strong>Image:</strong>
  <% if @article.image.present? %>
    <%= image_tag @article.image_url %>
  <% end %>
</p>
…(中略)…

 「@article.image」とするとアップロード済みのファイルが関連付いている場合は、Shrineが提供するImageUploader::UploadedFileクラスのインスタンスが返却されます。アップロード済みのファイルがない場合は、nilが返却されます。

 「@article.image_url」とすると、ファイルがアップロード済みならそのファイルパスが、アップロード済みでないならnilが返却されます。

コントローラーの修正

 フォームに新たにfile_fieldを追加したので、Strong Parametersの設定に:imageを追加する必要があります。以下のようにArticlesコントローラーを修正します。

[リスト 7]
…(中略)…
    def article_params
      params.require(:article).permit(:title, :body, :image)
    end
…(中略)…

動作確認

 これでファイルアップロードの機能実装ができたので、動作確認を行います。rails sコマンドでpumaサーバーを起動し「http://localhost:3000」にアクセスした後、記事一覧から任意の記事を選択して画像ファイルをアップロードすると画像が表示されます。

 ここでは以下のようにRubyのロゴ画像をアップロードしました。

記事詳細
記事詳細

次のページ
ActiveStorageの導入(1)

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

これだけは押さえておきたい! 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本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

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

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/11339 2019/02/05 11:00

イベント

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

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

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

メールバックナンバー