フリーランスエンジニア→法人化した人の技術ブログ。フリーランス事情や会社の作り方、経営などについても徒然なるままに書いていきます。主な使用言語はRuby、JavaScript。

Permanent Til

Ruby プログラミング

Ruby on Rails6 + ActionTextを使ってみる

投稿日:


Rails入れる

まず自分の最新のrubyにはrails入っていなかったのでrails入れる


gem install rails

 

Railsプロジェクトを作成する

rails new miniblog --skip-turbolinks

6.00系からは、デフォルト設定ではcoffeescriptは廃止。デフォルトでwebpackerが用意され、みんなES6で書き始められるようになった。

Turbolinksはデフォルトでは未だ健在なので、rails newするときにTurbolinksを外したければ、 --skip-turbolinks オプションをつけてあげる必要がある。

Action Text入れる

bundle exec rails g scaffold content
bundle exec rails action_text:install

image_processingとimagemagick入れる

image_processingはアップロードした画像の変換に必要なライブラリ。

# Gemfile
gem "image_processing"

Mac上で

brew install imagemagick

必要なものが揃ったら、

bundle exec rails db:migrate

を実行。action_text

ScaffoldされたContentモデルをいい感じにする

Contentモデル

class content < ApplicationRecord
  has_rich_text :body
end

erb上でのフォームを作成

<%= form_with(model: message, local: true) do |form| %>
  <% if message.errors.any? %>
    

<div id="error_explanation">
      

<h2><%= pluralize(message.errors.count, "error") %> prohibited this message from being saved:</h2>



      

<ul>
        <% message.errors.full_messages.each do |message| %>
          

<li><%= message %></li>


        <% end %>
      </ul>


    </div>


  <% end %>

  

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



  

<div class="actions">
    <%= form.submit %>
  </div>


<% end %>

controllerのバリデーション追加

class ContentController < ApplicationController
  before_action :set_content, only: [:show, :edit, :update, :destroy]
  ...
  def create
      # Contentを作成する処理(Scaffoldそのままでも動く)
  end
  private
  # Never trust parameters from the scary internet, only allow the white list through.
  def content_params
    params.require(:content).permit(:body)
  end
end

applidation.jsをここで確認してみる

自動生成されるapplication.jsがこれ

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start() // rails-ujs()
// turbolinkを有効にしていれば、この行にrequire("turbolinks").start() 
require("@rails/activestorage").start() //activeStrorage周りのjs
require("channels") // Webhook Subscribeの仕組み


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

require("trix") //actiontextの実装としてのJSライブラリ
require("@rails/actiontext")

基本的にはrequireベースで依存モジュールをロードするような感じになっています。

動かしてみる

bundle exec rails s

Contentの新規作成画面に行くとお待ちかねのエディタが開いていて、

こんな感じに入力できてしまう。特にコードを書かずに自動生成でここまでいけるのはすごいですね。


-Ruby, プログラミング

Copyright© Permanent Til , 2019 All Rights Reserved Powered by AFFINGER5.