『Rails6』Actiontextでブログ機能を作ってみた
2019/08/23◉ 285 views

Actiontextを導入する
まずは参考にした記事を貼っておきます。
こちら
まずこのブログサイトを作成する時点でRailsのバージョンがRails 6.0.0.rc2でした。
rails 6からはデフォルトでactiontextがすでに導入されていると思います。
それとwebpackerもrails6から標準化されてますのでその辺りもちょこっと。
ターミナルでインストールします。
まずこのブログサイトを作成する時点で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/以下にズラーっと出てくると思います。


そしておきまりの〜
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の導入は終わりです。

webpackerの標準化
rails6からwebpackerが標準化されたらしく、初学者のちょめこには何それ状態でした。
actiontext導入してもwebpackで管理できなくて、苦戦しまくりました。
当時はググってもググっても答えが見つからずに何日か詰まって凹んでたのはいい思い出w
/views/layouts/application.html.slimを変えます

= stylesheet_pack_tagと = javascript_pack_tagの部分ですね
画像もwebpackerで管理しちゃいました!
ディレクトリはapp/javascriptに
/channels .js関連
/images 画像
/packs application.js
/stylesheets .scss
これらが入っています。

まずは/packs/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に関しては
そしてactiontextに関しては
require("trix")
require("@rails/actiontext")
ここで読み込んで更に
/javascript/stylesheets/actiontext.scssに追加
/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@ちょめこよりご連絡下さい。
人気記事
最新記事
タグリスト