プログラミング備忘録

プログラミングメモ

Ruby・Rails

Action TextをRails6で導入する方法を分かりやすく説明

Action Text

今回はRails6でAction Textの導入の手順を紹介していきます。

一応、前回の「Cloud9でRails6の環境構築の手順を分かりやすく説明」の続きとなっています。
もしよろしければ、こちらの記事を読んでからの方が、分かりやすいかもです。

それでは、解説を始めていきます。

 

Action Textを導入するアプリケーションのディレクトリに移動

Action Text ディレクトリ移動

ディレクトリ移動の参考画像


cd app_name/

 

まずはAction Textを導入するアプリケーションのディレクトリに移動するため上記のコマンドを実行してください。
※app_nameの部分は各自のアプリケーション名に変更してください。今回の記事では「app_name」で進めていきます。

 

 

scaffoldで記事投稿機能の雛形を作成

action Text scaffold

scaffoldの参考画像


rails g scaffold Post title:string

 

scaffoldを使って、記事投稿機能の雛形を作成していきます。

モデル名を「Post」、カラムを「title」、データ型を「string」にします。

 

scaffoldの詳しい説明はこちら!
「Ruby on Railsのscaffoldの使い方・作成されるファイルなどを解説」

 

マイグレーションファイルをデータベースに反映させる

db:migrate

db:migrateの参考画像


rails db:migrate

 

先ほどの「rails g scaffold」で、マイグレーションファイルが作成されていると思うので、「rails db:migrate」でデータベースに反映させてください。

 

Action Textのインストール

Action Text インストール

Action Textをインストールするコマンドの参考画像


rails action_text:install

 

では、Action Textをインストールするために上記のコマンドを実行してください。

 

 

マイグレーションファイルをデータベースに反映させる

db:migrate

db:migrateの参考画像


rails db:migrate

 

「rails db:migrate」を実行してください。

 

モデルにリッチテキストの記述

Action Text リッチテキスト

Postモデルの参考画像


has_rich_text :content

 

リッチテキストエディタを使用するために、モデルに宣言をします。

 

 

ストロングパラメーターの編集

Action Text ストロングパラメーター

posts_controller.rbの参考画像


params.require(:post).permit(:title, :content)

 

ストロングパラメーターの編集をしましょう。

既に「title」はありますので、「content」を追加してください。

 

投稿画面の編集

Action Text 編集画面

_from.html.erbの参考画像


<div class="field">
 <%= form.label :content %>
 <%= form.rich_text_area :content %>
</div>

 

投稿画面にリッチテキストエリアを表示するために、上記のコードをコピペしてください。

この処理を行うことで、よくブログで見かけるようなテキストエディタが表示されます。

 

 

記事表示画面の編集

Action Text 表示画面


<div>
 <strong>Content:</strong>
 <%= @post.content %>
</div>

 

では、最後に投稿した内容を表示するための、処理を追記しましょう。

これで、投稿画面で記事を作成して、その記事を表示するという記事投稿機能が完成しました。

 

※ただし、まだ「表示画面」で画像が表示されません。次の章で説明していますので、次の「画像を表示させる」の工程も必ず行ってください。

 

画像を表示させる

画像を表示させる処理は自分でも苦労したので、別の記事にしました

こちらの記事を参考にしてください。

Action Textで画像が表示されない時の対処法

 

こちらの処理をしなければ、表示画面で画像が、このような非表示アイコンになってしまいます。

Action Text画像が表示されない

ちなみに、投稿画面ではちゃんと表示されています(^▽^)/

 

 

まとめ

今回はAction Textのインストール方法について、説明させていただきました。

Railsでブログサービスのようなものを作るときにはぜひ活用してみてください!

 

-Ruby・Rails

Copyright© プログラミングメモ , 2022 All Rights Reserved Powered by AFFINGER5.