『Rails6』Actiontextに機能追加してみた
2019/09/01◉ 335 views

Action textに画像アップロードを追加
前回の記事でAction textを導入した記事を超ざっくり書きました。
ざっくり書きすぎて初学者には全然わからなかったかもしれません...
文章力無さすぎて....もっとうまく書かなくちゃね!!!!!!!!
さて今回はまず記事を投稿したらサムネ画像も表示させたくないですか?
その機能を追加してみます。
これのことですね


直しました!!!
とりあえず参考にした物を貼っておきます!
こちら
まずimage_processing gemの導入をしてください。
Gemfileにコメントアウトされているもしくは、すでに導入されていると思います。
gem 'image_processing', '~> 1.2'
image_processingではimage_magickも必要なので、installしておいてください。
そしたらここから機能追加に入ります。
Active Storage を使った画像アップロードをやっていきます。
Active Storage を使った画像アップロードをやっていきます。
/models/blog.rbにhas_one_attached :imageの追加をする
has_one_attached :image has_rich_text :body
/controllers/blogs_controller.rbのストロングパラメーターに:imageの追加をします
def blog_params params.require(:blog).permit(:title, :body, :image) end
/controllers/blogs_controller.rbのcreateアクションとupdateアクションは以下のようにしたとします
@blog = Blog.new(blog_params)
/views/blogs/form.html.erbにフォームの追加をする
<div class="images"> <%= form.label :画像 %> <%= form.file_field :image, accept: "image/png, image/jpeg, image/gif"%> </div>
/views/blogs/show.html.erbに追加して表示させる
<%= image_tag @blog.image.variant(resize_to_fill:[800,600]).processed, class:'img-fluid' if @blog.image.attached? %>
image_tag @blog.imageで画像を呼び出し、variant(resize_to_fill:[800,600])でsize指定、
.processedは...なんだろ?www
そのサイズの画像があれば変換なしで使うみたいな感じっぽい!
max-width: 100%; height: auto;
ここがないとレスポンシブにならないので付け足しました。
ここでは念の為ファイルが添付されているかどうかを確認してから次の処理を実行させています。
ここでは念の為ファイルが添付されているかどうかを確認してから次の処理を実行させています。
if @blog.image.attached?
ここ注目テストに出るよー
ファイルを変換するためのgemが、mini_magickからimage_processingに変更されました。
image_processingはmini_magickとruby-vipsのwrapperで、画像のリサイズや加工を行います。
Gemfile
image_processingはmini_magickとruby-vipsのwrapperで、画像のリサイズや加工を行います。
Gemfile
- gem "mini_magick" + gem "image_processing", "~> 1.0"
- <%= image_tag user.avatar.variant(resize: "300x200") %> + <%= image_tag user.avatar.variant(resize_to_fit: [300, 200]) %>
他にも色々設定できるようです。
resize_to_fill:
resize_to_limit:
resize_to_fit:
resize_to_limit:
resize_to_fit:
cropの設定もできました。
<%= image_tag b.image.variant(resize_to_fill:[120,120],crop:("120x120+0+0")).processed, class:"image-index" if b.image.attached? %>

むしろcropを使わないとサイズがバラバラになったので設定してみてください。
crop:("120x120+0+0")ここで設定できるよ〜。
2時間ハマったちょめこ。
以上で画像アップロードは完了です。
ちなみに画像はどこに保存してあるかというと、デフォルトのままだとローカル環境では、storageに保存されています。
ちなみに本番環境で画像保存をamazon s3に保存しようとしましたが、サムネは保存されるけどActiontext内の画像は保存できなくて、localストレージでの保存にしてます。
もしやり方知ってる人がいたらぜひ教えて欲しいです。お願いします。
バリデーションの設定
サムネがないのは論外なので、まずこやつを!
validates :image, presence: true
validate :image_content_type, if: :was_attached? private def image_content_type extension = ['image/png', 'image/jpg', 'image/jpeg'] errors.add(:image, "の拡張子が間違っています") unless image.content_type.in?(extension) end def was_attached? self.image.attached? end
image_content_typeを作り
extensionに拡張子を入れて
入れた拡張子以外のものがあればエラーメッセージを返すって感じですね。
ザックリ!!!!!!
was_attached?では、画像が添付されているか確認ですね
image.attached?がfalseの時はvalidateしないようにしてる。
selfを付ける理由が初学者なちょめこにはまだわかってない...
selfって難しくない?w
記事の枠を少し広げてみた
お次はデフォルトの記事の枠が狭いので拡張しました。
trix.cssを変えてやればできると思うのですが今回は、custom.scss等にCSSを書いちゃいます。
.trix-content { font-size: 16px; line-height: 26px; color: #111111; min-height: 20em; }
- min-height: 20em;
ここで好みのサイズに指定してください。
フォントのcolorなんかも変えれます。
フォントのcolorなんかも変えれます。
記事のh1要素にborderを追加した
.trix-content h1 { border-bottom: 1px solid #ccc; font-size: 1.6em; line-height: 1.2; margin: 0; }
- border-bottom: 1px solid #ccc;
ここで下線を追加しました。
他にも色々変えてみたいけどとりあえずこの程度にしときます。
少し長くなってきたので続きは次の記事に書いていこうと思います。
少し長くなってきたので続きは次の記事に書いていこうと思います。
次回
です!!!
ここまで読んで頂きありがとうございます。
超初学者なので間違ったことや説明が下手くそな部分もありますが、優しい目で見てあげてください。
ちょめこ頑張りますから。
ではまたお会いしましょう!
ばいなら〜

このブログサイトは初学者の僕が独学で
Ruby on Railsで作ったブログサイトです。
間違っている所もあるかもしれません。
あくまで参考程度にしていただけたらなと思います。
何かありましたらお問い合わせか、Twitter@ちょめこよりご連絡下さい。
人気記事
最新記事
タグリスト