TOP BLOG Rails| Actiontext|

『Rails6』Actiontextに機能追加してみた

2019/09/01◉ 5 views


Action textに画像アップロードを追加


前回の記事でAction textを導入した記事を超ざっくり書きました。

ざっくり書きすぎて初学者には全然わからなかったかもしれません...

文章力無さすぎて....もっとうまく書かなくちゃね!!!!!!!!

さて今回はまず記事を投稿したらサムネ画像も表示させたくないですか?

その機能を追加してみます。

これのことですね

サムネ

サムネ

若干小さい画像のところで画像が中心になってないのが手直し必須の所ですが...
直しました!!!

とりあえず参考にした物を貼っておきます!
こちら

まずimage_processing gemの導入をしてください。

Gemfileにコメントアウトされているもしくは、すでに導入されていると思います。
gem 'image_processing', '~> 1.2'

image_processingではimage_magickも必要なので、installしておいてください。

そしたらここから機能追加に入ります。

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

そのサイズの画像があれば変換なしで使うみたいな感じっぽい!
多分そうです多分

class:'img-fluid' はclass="img-fluid"のことで幅と高さ指定してます
 max-width: 100%;
 height: auto;
ここがないとレスポンシブにならないので付け足しました。

ここでは念の為ファイルが添付されているかどうかを確認してから次の処理を実行させています。
if @blog.image.attached? 


ここ注目テストに出るよー


ファイルを変換するためのgemが、mini_magickからimage_processingに変更されました。

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:

この辺もあるので各自調べてみてください!!

参考記事はこちら

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を使わないとサイズがバラバラになったので設定してみてください。

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なんかも変えれます。


記事の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@ちょめこよりご連絡下さい。