2019-09-21

タスク管理アプリで新規登録前の確認画面を作る

f:id:golikyua:20190921204525j:plain

こんにちは！今日はタスク管理アプリの新規登録前の確認画面を実装したので、その方法をアウトプットします！

目標

「新規登録前に確認画面を作る」

やること

・確認画面のアクションを作成

・ルーティングの設定

・確認画面のビューファイル作成

・新規登録画面からconfirm_newアクションへ遷移するようにする

・新規登録画面の戻るボタンからの遷移に対応する

本題

・アクションの作成！

def confirm_new
    @task = current_user.tasks.new(task_params)
    render :new unless @task.valid?
  end

アクション名は「confirm_new」とする。

このアクションでは、

新規登録フォームに入力された値からオブジェクを作成し、＠taskに代入する。

新規登録画面に入力された値に検証をかけ、引っかかったら新規登録画面へ戻り、問題なければ確認画面へ。

・ルーティングの設定！

Rails.application.routes.draw do
  ...


  resources :tasks do
    post :confirm, action: :confirm_new, on: :new
  end
end

確認画面のアクションは、よくあるRUCDのアクションではないため、resources :taskでは定義されいためこのような書き方をする。

Prefixは「confirm_new_task」Verbは「Post」URLパターンは「/tasks/new/confirm」

・confirm_newのビューファイルを作成！

h1 登録内容の確認

= form_with model: @task, local: true do |f|
  table.table.table-hover
    tbody
      tr
        th= Task.human_attribute_name(:name)
        td= @task.name
        = f.hidden_field :name
      tr
        th= Task.human_attribute_name(:description)
        td= simple_format(@task.description)
        = f.hidden_field :description
  = f.submit '戻る', name: 'back', class: 'btn btn-primary mr-3'
  = f.submit '登録', class: 'btn btn-primary'

・新規登録画面からconfirm_newアクションへ遷移するようにする！

h1 タスクの新規登録

.nav.justify-content-end
  = link_to '一覧', tasks_path, class: 'nav-link'

- if @task.errors.present?
  ul#error_explanation
    - @task.errors.full_messages.each do |message|
      li= message

= form_with model: @task, local: true, url: confirm_new_task_path do |f|
  .form-group
    = f.label :name
    = f.text_field :name, class: 'form-control', id: 'task_name'
  .form-group
    = f.label :description
    = f.text_area :description, row: 5, class: 'form-control', id: 'task_description'
  = f.submit '確認', class: 'btn btn-primary

form_withのurlオプションを「confim_new_task_path」にする！

・新規登録画面の戻るボタンからの遷移に対応する！

def create
    @task = current_user.tasks.new(task_params)

    if params[:back].present?
      render :new
      return
    end

    if @task.save
      redirect_to @task, notice: "タスク「#{@task.name}」を登録しました。"
    else
      render :new
    end
  end

confirm_new.html.slim では、戻るボタンに '戻る' という名前を与えている為、

params[:back]で、'戻る' という文字列を得られる。

'戻る'が存在すれば、新規登録画面へ。

これで、確認画面の実装は完了！

まとめ

アクション作成

ルーティングの設定

新規登録画面から確認画面への遷移を設定

確認画面の戻るボタンを押された時の遷移の設定

2019-09-20

国際化（internationalization) について

f:id:golikyua:20190920174005j:plain

はじめに

現場で使える　Ruby on Rails 5 速習実践ガイド　Chapter6で国際化について勉強したのアウトプットします！

国際化とは、その地域に適した表現で文字列等を表示すること。

（日本なら日本語翻訳、英語なら英語翻訳みたいな感じ）

以前タスク管理アプリを日本語表記にした時に以下のことを行いました。

1. GitHubのrails-I18n リポジトリの日本語翻訳ファイルを config/locales/ja.ymlとしてダウンロードする。

2. デフォルトの地域設定を日本にする

config/initializers/locale.rb

Rails.application.config.i18n.default_locale = :ja

3. ja.ymlにモデルのクラスや属性に対応する日本語を記述する

本題

地域に適した言語やタイムゾーンを適応させる為には次のことを把握しておく。

＊利用する地域に対応するymlファイルをconfig/locales下に置く。

＊「現在の地域」の意味を示す「I18n」のデフォルト値を利用する地域設定する。

◯　config/initializers/locale.rbでconfig.I18n.default_localeの値を設定

※ちなみに「I18n」はinternationalizationの「i」と「n」の間に18文字あるからこの表記らしです！

＊目的の翻訳データを利用する。基本的にI18n.localeに設定された地域の翻訳が使われるが、個別の地域の翻訳も可能。

◯　I18n.tメソッド（I18n.translateメソッド）を呼ぶことで任意の翻訳データを利用することができる。

◯　I18n.lメソッド（localizeメソッド）をにDate系、Time系のオブジェクトを渡すと、地域に適した文字列表現を取得できる。

基本はこんなところ！

（この説明を読んでタスク管理アプリを作った時にやったことを理解しました...苦笑）

I18n.tメソッドとI18n.lメソッドの使い方

I18n.tメソッドについて

タスク管理アプリ作成時、Task.human_attribute_name(:name)のような方法で、属性名の翻訳を取得しました。

I18nメソッドを使っても属性名の翻訳を取得できます！

たとえばこのようなja.htmlファイルがあるとします。

ja:
  taskleaf:
    page:
      titles:
        tasks: "タスク一覧"

この時現在の地域（config.I18n.default_locale）が :ja（日本）の状態で I18n.t("taskleaf.page.titles.tasks") を実行すると　"タスク一覧"　を取得できます！

また現在の地域に関係なく、localeオプションを指定することで指定した地域の翻訳された値を取得できます!

Task.human.attribute_name(:name, locale: :ja) 　日本語を取得

I18n.t("taskleaf.page.titles.tasks", locale: :en) 　英語を取得

I18n.lメソッドについて

I18n.lメソッドは日付や時刻を表す為に使います。

I18nl(Time.current)を実行すると現地時刻に対応できる。これにより、入力した現地時間が表示される（間違ってるかも）

:ja
  time:
    current: "%Y年%m月%d日"

日時の扱い

railsで日時を扱う際に注意することがあります。それがタイムゾーンです。

タイムゾーンはI18nと役割ががよく似ているもので、地域ごとの日時を表したものです。

RailsコンソールでTime.zoneを実行すると

>Time.zone

#<ActiveSupport::TimeZone:0x00007f9eeb26c118 @name="UTC", /n@utc_offset=nil, @tzinfo=#<TZInfo::DataTimezone: Etc/UTC>>

これは今タイムゾーンがUTC（協定世界時）になっています。これがデフォルト

RailsコンソールでTime.zone.nowを実行すると

>Time.zone.now

=> Fri, 20 Sep 2019 08:04:16 UTC +00:00

UTC基準の現在時刻が表示される！

（※Time.zone.nowとTime.currentは同じ結果を得られるので、I18nlで現在時刻を取得できるのではないかと思います。）

どうやったら日本時間を表示できるのか？？？

Railsコンソールで「　Time.zoneに"Asia/Tokyo"を代入　」

>Time.zone = "Asia/Tokyo"

=> "Asia/Tokyo"

これで現在の時間を表示したら

>Time.zone.now

=> Fri, 20 Sep 2019 17:09:47 JST +09:00

日本時間で表示できた！

それじゃあアプリケーションのデフォルトのタイムゾーンを日本時間にするには？？

config/application.rbにconfig.time_zone = 'Asia/Tokyo'を追加

module Taskleaf
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2
    config.time_zone = 'Asia/Tokyo'

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
  end
end

これで日本時間がデフォルトで設定される！！

takumiのエンジニア技術ブログ

未経験からエンジニアを目指しています！技術定着の為にこのブログにアウトプットしていきます！気軽にコメント等いただけるとありがたいです！

タスク管理アプリで新規登録前の確認画面を作る

国際化（internationalization) について