PF作成：１５日目

１５日目。今日で中間地点。そろそろEC2の作業、作業の取捨選択などをして後半のテストに向けての準備をし始めないといけない。それにしてももう半月経ったのか。早いな。

進捗

• 現状で機能的問題がないか確認
• 管理者側やユーザーログイン後、ログイン前のページ閲覧許可機能を実装
• ransackを使用したキーワード検索の着手

学習

• ログイン前の表示やコントローラーはuser側を使用しようと思っていて、if文を使用して表示、非表示にしていたのだが管理者側から閲覧すると非表示にできなくてリンクや画像などが二つ現れるという現象が起きた。原因はif文の使い方が違うということはわかっていたのだが、実際どうすればいいのかわからず質問。結果、elseを入れ込んであげたら解決した。adminがログインしていたらこのリンクを表示させて、それ以外だったらこっちを表示させるという分岐の仕方。elseはそれ以外という使い方ができるのを忘れていた。
• 部分テンプレートを使用しているビューで特定の１ページで１文だけ消したいと思い、IF文を使用すれば可能かなと思ったがどう記述すればいいのかわからなくて質問。
  まずはapplication.html.erbの最後の方にに開発中にのみ現在のデータを確認できるコードを記述。

app/views/layouts/application.html.erb

<!--現在のviewデータを表示-->
<%= debug params if Rails.env.development? %>
<!--ログインしているユーザーデータを表示-->
<%= current_user.inspect if Rails.env.development? %>
<!--ログインしている管理者データを表示-->
<%= current_admin.inspect if Rails.env.development? %>
  </body>

このコードにで表示したくないページのデータを確認してIF文を使用して表示させないことが可能。

app/views/.erb

<!--この部分テンプレートを使用している特定のページにのみ寺社名を表示させないIf-->
<% if params[:controller] != 'user/places' && params[:action] != 'show' %>

今回の場合だったら投稿された御朱印がどこの寺社なのか分かり易いように寺社名を表示していたが、寺社詳細ページにもその寺社名を表示する必要はないと思ったのでこの記述となった。

エラー

• 管理者側の寺社詳細ページのページネーションがうまく機能しなくて、メソッドエラーが起きた。原因がわからず質問してからもう一度見直したら、管理者側のコントローラーページネーションの記述をしていなかった。質問前に確認いていたコントローラーがユーザー側だったことが原因。よくやるミスなので再度注意しよう。
• JavaScriptの挙動がおかしい。クリックしたらセレクトボックスが開いて、スペースをクリックしたら閉じる仕組みなのにクリックしたら開いてすぐ閉じるという挙動をしてしまっている。原因はよくわからなかったが、今までの記述がJavaScriptを使用した正しい記述ではなかったので修正したら治った。

app/javascript/packs/js

// セレクトボックスの中にチェックボックス
  // クリックしたら発火
  $('.checkbox-toggle').on('click', (e) => {
    const targetName = $(e.target).attr('id')
    $(`#${targetName}Checkboxes`).slideToggle();
    $(`#${targetName}Checkboxes`).css('display', 'flex');
  });
});

JavaScriptはバグの発見、修正が大変らしいので、丁寧に記述していく。consol logなどを使用してまず読み込まれているかの確認など。
下記一部抜粋

app/views/.erb

<form>
    <!--   チェックボックスの表示切替ボタン   -->
    <div class="checkbox-toggle mt-3 ml-auto mr-auto" id="petButton">
      ペット連れ<br>
      <font color="gray">▼</font>
    </div>
    <!--   チェックボックス   -->
    <div class="checkboxes" id="petButtonCheckboxes" style="display: none;">
      選択してください
      <label>
        <input type="checkbox">
        <span>OK</span>
      </label>
      <label>
        <input type="checkbox">
        <span>NG</span>
      </label>
      <label>
        <input type="checkbox">
        <span>わからない</span>
      </label>
    </div>
  </form>

viewの記述も変更。前だとbootstrapの記述でJavaScriptのクラスを兼用していたりしたがそういうことはしてはダメ。
id=クラス名を指定してあげることでセレクトボックスの中身を入れることに成功。

ヒント

• JavaScriptのイベントはイベントハンドラと言っていろいろ種類がある。
  参考資料：https://phpjavascriptroom.com/?t=js&p=event
• JavaScriptを使用する動くWebデザイン
  参考資料：https://coco-factory.jp/ugokuweb/

明日の予定

ransackを使用した検索の着手に入れたので最低でもキーワード検索機能は完成させて、次の絞り込み検索に着手できるようにする。ただ明日は学習時間の確保が難しそうなので頑張らないといけない。