LoginSignup
0
1

More than 3 years have passed since last update.

@sakamiti_46(Kenyu Saito)

【学習メモ】tempusdominus turbolink form_with fields_for cron migration

Last updated at Posted at 2020-05-22

0.目次

1.本日の学習内容
2.次週までの学習内容

1.本日の学習内容

①ナビゲーションバーが実行されないエラーの解決

【実現したいこと】
ナビゲーションバー（ハンバーガーメニュー）でボタンをクリックして、メニューを開いたり閉じたりができる状態にすること

【起こったこと・試したこと】
画面遷移すると、一度開くと閉じられなくなってしまった。

【原因】
teratailの似た質問から、turbolinkが邪魔している？

【解決策】

部分のturbolinkを消去したところ、解決。
app/views/layouts/application.html
※本当はerbだがわかりやすいようhtmlで閉じている
  <head>
    <title>Testapp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all'%>
    <%= javascript_include_tag 'application' %>
  </head>

※参照：元々のナビゲーションバー

app/views/layouts/application.html
※本当はerbだがわかりやすいようhtmlで閉じている
<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">TTManager</a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="#">ホーム</a>
          <a class="nav-item nav-link" href="#">リマインダー設定</a>
          <a class="nav-item nav-link" href="#">レポートを見る</a>

②フォームをクリックしてもカレンダーが表示されないエラーの解決

【実現したいこと】
Bootstrap4で、フォームにカレンダーを表示させて日付をクリックし、フォームに表示させる

【起こったこと・試したこと】
「tempusdominus-bootstrap-4」を実装し、カレンダーのマークは表示はされるが実行できなかった

以下は下記3つを実装

app/assets/stylesheets/application.scss
@import "tempusdominus-bootstrap-4.css";
app/assets/javascripts/application.js
//= require moment
//= require moment/ja.js
//= require tempusdominus-bootstrap-4.js
app/views/layouts/application.html
※本当はerbだがわかりやすいようhtmlで閉じている
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

【調査方法】
デベロッパーツールのConsole・Sourcesで確認。
※既に修正済で、別のエラーが出ていますがみているものはこれです
スクリーンショット 2020-05-22 23.37.06.png

【調査結果・原因】
tempusdominus実行する前にjQueryを導入する必要があるため、導入してね
→jQueryがインストールされていなかったことが原因

【解決策】
https://www.sejuku.net/blog/57790
を参考にjQueryをGemifile、app/assets/javascripts/application.js、app/assets/stylesheets/application.scssに追記

gem 'jquery-rails'
app/assets/javascripts/application.js
//= require moment
//= require moment/ja.js
//= require jquery #ここを追記
//= require jquery_ujs #ここを追記
//= require tempusdominus-bootstrap-4.js

③1つの画面（URL）で複数のテーブルのカラムをDBに格納させる方法

【実現したいこと】
複数の親・子関係のテーブルのDBに格納するフォーム入力事項について、どうやってそれぞれ正しいテーブルに正しいカラムを格納したら良いか？

【起こったこと・試したこと】
「= fields_for」があるらしいが、どうやって使えば良いのか調べても理解仕切れず、質問。slimで実装はしていたが、、、

= form_with model:record, local:true do |f|
= f.submit

【解決策】
下記が基本

1.Model,DBの状態を確認し、ちゃんと反映されているか確認する（rails db:migrate:statusなど）
2.モデルで、親子関係・リレーションが正しいか確認する
→複数形をつけるのは、今見ているマイグレーションファイルから見て、
複数の関係性があるから（逆を言えば、単一の関係であれば、単数形にすること）

user.rb
has_many :records
task.rb
has_many :records

3.コントローラを確認し、「.build」を活用しながら実装

controller.rb
  def new
    @record = Record.new　#newメソッドでインスタンス変数#record入れ込む
    output = @record.outputs.build　#入れ込んだ#recordと結合させるために「.（モデル）.build」を入れ込む
    practice = @record.practices.build　#上記と同じ要領で
    task = @record.tasks.build　#上記と同じ要領で
  end
※recordモデルは、ooutput,practice,taskモデルとは親・子関係

4.viewを実装

new.html.slim
= form_with model:@record, url: records_path, method: :post local:true do |f|
 = f.fields_for :output
  .form-group
   = f.text_field :output_name, class: 'form-control mb-4', id: 'output_name'
[中略]
= f.submit 'この内容で登録する', new_record_path, class: 'btn btn-primary'

※f.submitは1番下じゃなくてもOK。ちゃんと「form_with」と「f.submit」の関係性ができていればOK
※コードはこれから実装

④マイグレーションの注意事項

【状況】
モデルに新しくカラムを追加して、db:migrateしたら、「既にできています」と表示された

【原因】
マイグレートは、テーブルを作成するために実行するもの（マイグレーションファイルは、その実行内容を示したファイル）であって、モデルに変更を加えただけでは反映されない！！

【解決策】
①db:reset
DBの内容を全てリセットし、もう一度マイグレーションする処理

②変更用のマイグレーションファイルを作成すること
・UPしている状態を、DOWNにするためのマイグレーションの処理
・変更用のマイグレーションファイルを別途作成
※ここ理解が弱いので調べて追記予定

⑤その他

・デベロッパーツールのエラーの「$」は「jQuery」を指す
・リマインダーメールの実装について
→Web上で動くものではない（＝クライアントの操作によるトリガーがない）ため、サーバー（インフラ）でプログラムを実行させる必要あり！つまり、最後の実装
→方法の1つが、cron
・日付のみ示すデータ型：date

2.次週までの学習内容

▼マイグレーションのUP、DOWNさせる事例・対応方法のインプット・実践
▼マイグレーションの変更方法のインプット・実践（Rails速習に載ってる？user_idをTaskテーブルに追加だったかな）
▼AWSのudemy動画学習
▼レポート表示のJS実装
▼Bootstrapのpadding設定の事例・方法のインプット・実践
▼cronのインプット

参照

【BOOTSTRAP4でフォーム入力の際にカレンダーから日付入力する方法】
https://its-office.jp/blog/bootstrap/2019/02/18/bs4calendar.html
【bootstrapのNavbarのハンバーガーメニューが閉じない[原因はTurbolinks]】
https://qiita.com/kota-shidara/items/964f9fe92a467cd28583
【【Rails】turbolinksを無効化する】
https://qiita.com/kota-shidara/items/964f9fe92a467cd28583
【accepts_nested_attributes_forで親子孫関係のレコードを同時作成する方法【実装例・rspecあり】】
https://shinmedia20.com/rails-relation-create
【【Rails】form_withの使い方を徹底解説！】
https://pikawaka.com/rails/form_with
【Rails Ambassador】
https://rails-ambassador.herokuapp.com/tips/FormWithHelper
【fields_forの上手な使い方】
https://qiita.com/kouuuki/items/5daf2b5f34273d8457f7
【fields_forを使った子モデルへの複数レコード保存【cocoonが便利】】
https://www.y-hakopro.com/entry/2019/08/03/234126
【cronの設定 - プログラムを指定した時間に定期的に自動的に実行する方法】
https://memorva.jp/memo/linux/cron.php
【5.5. 日付/時刻データ型　※DB：Postgresql】
https://www.postgresql.jp/document/7.3/user/datatype-datetime.html

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1