🐟

[Rails] Simple_form gem

2021/10/26に公開

Rails

gem

tech

Simple_formとは

Railsにおいて入力フォームを簡単につくれるgemのことです｡

通常フォームを作るときはform_withやform_forを使うと実装できますが､このsimple_formというgemを使うとより簡単にフォームを実装することができます｡

導入

まずはgemを適用させます

gem 'simple_form'

bundle install

次にgenerateコマンドでインストールします｡

rails generate simple_form:install

# bootstrapを適用する場合はbootstrapオプションを付けます
rails g simple_form:install --bootstrap

書き方例

下記のように記述することで､ラベルと入力用のフォームが作成されます｡

また､ラベルは指定したカラム名でi18nで日本語訳を書いていれば､表示してくれるので､特に明示してラベル指定する必要はありません｡

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>

= simple_form_for @user do |f|
  = f.input :username
  = f.input :password
  = f.button :submit

i18nで日本語化

以下を追記します｡

config/application.rb

# アプリケーションでの利用を許可するロケールをホワイトリスト化する
config.i18n.available_locales = %i[ja]

# デフォルトの言語設定
config.i18n.default_locale = :ja

simple_formをインストールすると､config/locales/simple_form.**en**.ymlが作成されますが､削除します｡

このファイルの中は下記のようにフォームやviewで使う日本語訳訳を定義していきます｡

config/locales.ja.yml

ja:
  simple_form:
    "yes": 'はい'
    "no": 'いいえ'
    required:
      text: 'required'
      mark: '*'
      # You can uncomment the line below if you need to overwrite the whole required html.
      # When using html, text and mark won't be used.
      # html: '<abbr title="required">*</abbr>'
    error_notification:
      default_message: "エラーがあります。確認してください。"
    # Examples
    # labels:
    #   defaults:
    #     password: 'Password'
    #   user:
    #     new:
    #       email: 'E-mail to sign in.'
    #     edit:
    #       email: 'E-mail.'
    # hints:
    #   defaults:
    #     username: 'User name to sign in.'
    #     password: 'No special characters, please.'
    # include_blanks:
    #   defaults:
    #     age: 'Rather not say'
    # prompts:
    #   defaults:
    #     age: 'Select your age'
    labels:
      defaults:
        avatar: 'アバター'
        name: '名前'
        role: '役割'
      site:
        name: 'サイト名'
        subtitle: 'サブタイトル'
        description: '概要'
        favicon: 'favicon'
        og_image: 'og:image'
      category:
        name: 'カテゴリー名'
        slug: 'スラッグ'
      tag:
        name: 'タグ名'
        slug: 'スラッグ'
      author:
        name: '著者名'
        slug: 'スラッグ'
        description: 'プロフィール'
        avatar: 'アバター'
      article:
        title: 'タイトル'
        slug: 'スラッグ'
        state: '状態'
        description: '概要'
        eye_catch: 'アイキャッチ'
        category_id: 'カテゴリー'
        author_id: '著者'
        tag_ids: 'タグ'
      medium:
        media_type: 'メディアタイプ'
        attachment: 'ファイル'
      embed:
        embed_type: '埋め込みタイプ'
        identifier: 'ID'

それ以外の翻訳ファイルは下記のようなディレクトリ構成で管理しています｡

また､上図のような構成で管理する場合はconfig/application.rbの下記をコメントアウトする｡

# 言語ファイルを階層ごとに設定するための記述
# config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s

翻訳ファイルなどのconfigファイルを弄ったら必ずサーバーは再起動します｡再起動しないと反映されないので注意｡

オプション

オプションは下記のようにカンマで区切って追加していきます｡

<%= simple_form_for @user do |f| %>
  <%= f.input :username, label: "ラベルの名前" %>
<% end %>

ラベル名変更

※ ラベルをi18nで日本語化していない場合などはこのオプションで明示します｡

label: 'ラベル'

ラベル名を消す

label: false

プレースホルダ

入力欄の中にうっすら表示させる文字

placeholder: "プレースホルダ"

入力内容のヒント

入力欄の中ではなく､下にうっすら表示させる文字

hint: 'JPEG/PNG (1200x630)'

任意のhtml属性をそのままinputに渡す

例えば画像の複数投稿でmultiple: trueを付与したいときは､そのままmultiple: trueを付けるのでは無く､input_htmlの中で指定してあげます｡

input_html: { multiple: true }

ファイル投稿フォームに変更(file_field)

as: :file

submitボタン名変更

<%= f.button :submit, "ボタン名",

ヒントを付ける

hint: "入力の際の注意書きなど"

カレンダーで日付指定

:published_at, as: :date_time_picker

エラメッセージを表示

投稿に失敗したときに表示させる

error: "半角英数字で入力してください"

エラメッセージを表示させない

error: false