TOP BLOG Rails| Actiontext|

『Rails6』Actiontextでブログ機能を作ってみた

2019/08/23◉ 7 views


Actiontextを導入する


まずは参考にした記事を貼っておきます。
こちら

まずこのブログサイトを作成する時点でRailsのバージョンがRails 6.0.0.rc2でした。

rails 6からはデフォルトでactiontextがすでに導入されていると思います。

それとwebpackerもrails6から標準化されてますのでその辺りもちょこっと。

ターミナルでインストールします。
rails action_text:install

インストールしたら以下のファイルと
app/assets/stylesheets/actiontext.scss
test/fixtures/action_text/rich_texts.yml
app/views/active_storage/blobs/_blob.html.erb

db/migrate/以下にズラーっと出てくると思います。
migrate

migrate

そしておきまりの〜

bin/rails db:migrate

これで3つのテーブルができました。

上画像参照


scaffoldで記事を投稿するモデルの雛形を作成


scaffoldの説明は省きます....

マルッと一通りの投稿機能を作れちゃう魔法ですね(笑)

コントローラーの作成をする
bin/rails g scaffold blog title:string

そしておきまりのこいつ
bin/rails db:migrate

この時点ですでに色々とできあがってます。


リッチテキストを追加できるようする


/models/blog.rbに下記を追加
 has_rich_text :body

/controllers/blogs_controller.rbに追加
def blog_params
   params.require(:blog).permit(:title, :body)
end

/views/blogs/_form.html.erbに追加
<div class="field">
    <%= form.label :記事内容 %>
    <%= form.rich_text_area :body %>
  </div>

ここまでで、入力フォームにリッチテキストが出てくるようになります。

ここから詳細画面に記事内容を表示させます。

/views/blogs/show.html.erbに追加
<%= @blog.body %>


image_processingの追加


このままだとactiontextで画像を貼っても表示されないし、記事を書いてもHTMLがそのまま表示されて、うまくいきませんでした。

理由はslim化してたこと、 'image_processing'のインストールをしていなかったことが原因でした。

なので/views/blogs/show.html.erbのslim化はやめて、erbに戻しました。

ちょめこのコードはslim化されてるやつと、erbのままのやつとで、ぐちゃぐちゃの状態ですw

Gemfileにコメントアウトされているから外してインストールする

gem 'image_processing'

そしてbundle


bootstrap3の導入もしていたら下のような感じになっていると思います。

ちょめこのactiontextは、少しいじってありますがこんな感じになってます。

何をいじったかは後ほど説明します!!

これでactontextの導入は終わりです。
actiontext



webpackerの標準化


rails6からwebpackerが標準化されたらしく、初学者のちょめこには何それ状態でした。

actiontext導入してもwebpackで管理できなくて、苦戦しまくりました。

当時はググってもググっても答えが見つからずに何日か詰まって凹んでたのはいい思い出w

/views/layouts/application.html.slimを変えます
webpacker


= stylesheet_pack_tagと
= javascript_pack_tagの部分ですね

画像もwebpackerで管理しちゃいました!

ディレクトリはapp/javascriptに
/channels .js関連
/images       画像
/packs   application.js
/stylesheets   .scss
これらが入っています。
ディレクトリ

まずは/packs/application.jsに追加していきます。

デフォルトですでに追加されているかもしれません。


application.js

/channels/ .js関連は
require("channels")ここで読み込んでます

/images / 画像は
require.context('../images', true)ここで読み込んでます

/stylesheets /.scssは
import "../stylesheets/reset"
import "../stylesheets/actiontext"
import "../stylesheets/application"
import "../stylesheets/custom"
ここでimportしています。

そしてactiontextに関しては
require("trix")
require("@rails/actiontext")
ここで読み込んで更に

/javascript/stylesheets/actiontext.scssに追加
@import '~trix/dist/trix';

これでwebpackerで管理できるようになります。
そもそも管理っていう表現でいいのかわからないが....。

更に画像に関してはこれでviewに読み込めます
= image_pack_tag 'media/images/〜〜〜.jpg'


最近参考記事を見つけましたありがとうございます
こちら




今回はactiontextを導入する記事でしたが、次回はこのactiontextを少しいじった所を紹介しようと思います。

サムネ画像をアップロードできるようにした
記事の枠を少し広げてみた
記事のh1要素にborderを追加した
書き記事と公開記事で保存できるようにした

記事はこちら

この辺りを書いて行こうと思います。

あと思い出しながら記事にしてるから何か抜けがありそうでこわいな〜。

そもそも記事自体書くことに慣れていないから文章もおかしい気がする。

ま〜でもいっか(笑)

ちょめこの記事力が覚醒する時はくるのだろうか。

優しく見守っていてくださいねwww

ばいなら〜 ノシ

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