LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Kooszs12

PF作成：１２日

Posted at

11日はほとんど進捗がなかったので、12日にまとめてかこう。

進捗

  • 御朱印投稿機能

学習

  • JavaScriptを記述したら、ファイルを分けたほうがいい。
    当たり前だったのかも知れないが、JavaScriptについて無知すぎたのでapplication.jsに全て書いてしまったので新しいコードが機能しなくなってしまった。解決自体は簡単で記述順番を変えてあげるだけでよかったが、こういうことが起こらない為にもどこに必要か考えてファイルを分けて、<%= javascript_pack_tag 'ファイル名' %>をビューに記述してあげることで特定のビューでのみ呼び出してあげるという作業が必要。
  • JavaScriptのインデントを整える。これも当たり前ではあったが、どうインデントを整えればいいのかわからず手を出せなかった部分。基本的なインデントの整え方としては } でのくくりに対してインデントを一つ下げるのとifで下げる。他にもルールがあるかも知れないが、今はこれだけでも判断できるようにする。
  • ラジオボタンを選択したらセレクトボックスの中身を変える方法。
    今回の条件はラジオボタンはenumを使用していて、セレクトボックスの中身のデータはデータベースから引っ張ってきたい。それを踏まえてのやり方となる。
    まずは必要なコントローラーにenumの選択データを引き出すインスタンス変数を記述。
controllers
def new
    @goshuin = Goshuin.new

    # 神社data
    @jinja= Place.where(category: 0)
    # お寺data
    @otera= Place.where(category: 1)
  end

  def create
    @goshuin = Goshuin.new(goshuin_params)
    # 神社date
    @jinja= Place.where(category: 0)
    # お寺data
    @otera= Place.where(category: 1)
    if @goshuin.save
      flash[:notice] = "投稿されました"
      redirect_to place_path(@goshuin)
    #失敗したら
    else
      flash.now[:alert] = "失敗しました"
      render :new
    end
  end

コントローラーで変数を指定してあげたら、ビューで引き出した変数が入るセレクトボックスを用意。

views
<div class="form-group mt-3">
            <%= f.collection_radio_buttons :category, Place.categories_i18n, :first, :last do |b| %>
              <%= b.label(class: "mr-2") { b.radio_button(class: "mr-1") + b.text } %>
            <% end %>
          </div>

          <div class="form-group" id="zinzya"><!-- JavaScriptで能動的なセレクトボックスを作成する為にID設定 -->
            <%= f.label :place, "寺社名<font color='red'>*必須</font>".html_safe %>
            <%= f.select :place_id, @jinja.map { |place| [place.name, place.id] }, { prompt: "選択してください" }, { class: "form-control" } %>
          </div>

          <div class="form-group" id="otera"><!-- JavaScriptで能動的なセレクトボックスを作成する為にID設定 -->
            <%= f.label :place, "寺社名<font color='red'>*必須</font>".html_safe %>
            <%= f.select :place_id, @otera.map { |place| [place.name, place.id] }, { prompt: "選択してください" }, { class: "form-control" } %>
          </div>

ここまででビューにセレクトボックスが表示されるか確認し、中身も対応しているものかどうか確認（＊この時点では見た目は用意したセレクトボックス全て出てしまう）
確認できたらJavaScriptのコードを記述していく。この作業でセレクトボックスの中身が変わるというよりも用意したセレクトボックスを表示させたり消したりする作業となる。

JavaScript/packs/.js
$(document).ready(function() {
  //寺社選択でセレクトボックスの中身変更
  // デフォルトで表示されているセレクトボックスの表示を消す
  $('#otera').hide();　//.hide();で表示されているセレクトボックスを消す
  // ラジオボタンをデフォルトでチェックされているようにする
   //'input[name="goshuin[category]"でラジオボタンを選択、[value="shrine"]デフォルトの値を持ってきて、.prop('checked', true)これでどんなことをさせるか決めた
  $('input[name="goshuin[category]"][value="shrine"]').prop('checked', true);
  //$('#otera').show(); .show();次のセレクトボックスを表示させる
  // ラジオボタンの変更を監視
  $('input[type="radio"][name="goshuin[category]"]').change(function() {
    // 変数定義のようなもの
    var selectedValue = $(this).val();
    // ラジオボタンの選択に応じてセレクトボックスを更新
    // selectedValuehに入っているデータがshrine（カラム）と一緒なら
    if (selectedValue === 'shrine') { //ラジオボタンを神社選択した場合
      console.log('じんじゃ');
      // お寺セレクトボックスを消して
      $('#otera').hide(); // viewで設定したID
      // 神社のセレクトボックス表示
      $('#zinzya').show(); // viewで設定したID
      // 神社が選択された場合のセレクトボックスの更新
    } else if (selectedValue === 'temple') { //お寺を選択した場合
      console.log('お寺');
      // お寺セレクトボックスを表示
      $('#otera').show(); // viewで設定したID
      // 神社セレクトボックスを消す
      $('#zinzya').hide(); // viewで設定したID
    }
  });
});

最初に発動タイミングを記述。今回はページを開かれたらというタイミングでデフォルトに設定したラジオボタンにチェックが入り対応したセレクトボックスを表示。対応していないセレクトボックスは消すというコードを前半に記述。その後ラジオボタンを監視するコードを記述し（ここでラジオボタンの動きを確認しているから次のコードが生きてくる）ラジオボタンのチェックが入っているかどうかで表示させたり消したりしている。
これでラジオボタンのチェックに応じてセレクトボックスの中身を変化する機能は完成した。
ちなみに対応した箇所に console.log('じんじゃ');を入れると検証ツールのconsoleで動きの確認ができるのでポイントごとに入れたほうが良さそう。

-　入力フォームの履歴を消すautocomplete: 'off'このコードは記述しないほうがいい。履歴が残る機能を利用する人もいるのでそこは個人の判断に委ねたほうがいいという理由。
-　ブロック要素をブートストラップを使用して均等わけにした。
div class="d-flex justify-content-around"> を均等わけにしたい要素を囲む。d-flexで宣言してjustify-content-aroundで均等分けをする。なのでjustify-content-aroundを変更したら均等分けじゃないこともできる。（参考資料：https://getbootstrap.jp/docs/4.2/utilities/flex/)
-　入力フォームをカレンダーで出現するように設定。（参考資料:https://scrapbox.io/masuyama13/%E6%97%A5%E4%BB%98%E9%81%B8%E6%8A%9E%E3%82%92%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E5%BD%A2%E5%BC%8F%E3%81%AB%E3%81%99%E3%82%8B）

ヒント

エラー

  • 新規投稿が失敗する。アソシエーションで結んだデータがうまく保存されないことが原因で発生。
    解決方法は２つくらいある。コントローラーでインスタンス変数　＝　カラム＿idみたいな形で記述するか、hidden_fieldを使用してデータを渡してあげるかになる。今回はhidden_fieldを使用して<%= f.hidden_field :user_id, value: current_user.id %>な形で渡してあげたが、やっぱりおすすめはhidden_fieldを使用したやり方らしい。
  • 自分のことではないが、解決してこれからもありそうなことなので覚書として記述。
    Githubのコントリビューションが反映されない。原因はメールだろうと予測。$ git config user.emailコマンドを実行してメールアドレスがローカルに登録されているか確認。やっぱり登録されていなかったようでメールアドレスが出力されない。
    解決方法は作業ディレクトリでgit config --global user.email メールアドレスを実行。
    git config user.emailコマンドで確認。メールアドレスが表示されるのを確認。Githubにとりあえずpushしてみて、反映されたのを確認。
    以上が解決までの流れ。

明日の予定

御朱印投稿でエラーが発生しているのでその解決と、編集ページの作成。一覧ページの作成までは最低でも進める。そろそろ中盤戦に差し掛かってきたのでもう一度気合いを入れ直して頑張っていこう。

0
0
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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?