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

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

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

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

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

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


cd app_name/

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

scaffoldの参考画像


rails g scaffold Post title:string

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

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

db:migrateの参考画像


rails db:migrate

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

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


rails action_text:install

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

db:migrateの参考画像


rails db:migrate

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

Postモデルの参考画像


has_rich_text :content

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

posts_controller.rbの参考画像


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

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

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

_from.html.erbの参考画像


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

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

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


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

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

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

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

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

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

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

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

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

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