しふぉんのテックなブログ

女性,35才,飲食業退職,IT転職希望,HTML/CSS, Ruby, Ruby on Rails|techcamp83期卒

Rails/javascript/人数変更ボタンを追加する(マルが揃ったらアラートメッセージが出る,ログが残る)

動作環境

  • Rails 6.0.3.3

  • ruby 2.6.5

    f:id:shifonnu:20201023092308g:plain
    人数変更ボタンを追加して10人まで対応できるようにしました。

/app/javascript/checked.js

addEventListener("load",function() {
// ページが読み込まれたら実行する
let ele1_1 = document.getElementById("buttun1ok");
// 1個目のマルのidを取得して定義 
let ele1_2 = document.getElementById("buttun1ng");
// 1個目のバツのidを取得して定義 以下全部で10回分繰り返し
let ele2_1 = document.getElementById("buttun2ok");
let ele2_2 = document.getElementById("buttun2ng");
let ele3_1 = document.getElementById("buttun3ok");
let ele3_2 = document.getElementById("buttun3ng");
let ele4_1 = document.getElementById("buttun4ok");
let ele4_2 = document.getElementById("buttun4ng");
let ele5_1 = document.getElementById("buttun5ok");
let ele5_2 = document.getElementById("buttun5ng");
let ele6_1 = document.getElementById("buttun6ok");
let ele6_2 = document.getElementById("buttun6ng");
let ele7_1 = document.getElementById("buttun7ok");
let ele7_2 = document.getElementById("buttun7ng");
let ele8_1 = document.getElementById("buttun8ok");
let ele8_2 = document.getElementById("buttun8ng");
let ele9_1 = document.getElementById("buttun9ok");
let ele9_2 = document.getElementById("buttun9ng");
let ele10_1 = document.getElementById("buttun10ok");
let ele10_2 = document.getElementById("buttun10ng");
let people_1 = document.getElementById("people_1_button")
// 1個目の人数変更ボタンのidを取得して定義 以下全部で10回分繰り返し
let people_2 = document.getElementById("people_2_button")
let people_3 = document.getElementById("people_3_button")
let people_4 = document.getElementById("people_4_button")
let people_5 = document.getElementById("people_5_button")
let people_6 = document.getElementById("people_6_button")
let people_7 = document.getElementById("people_7_button")
let people_8 = document.getElementById("people_8_button")
let people_9 = document.getElementById("people_9_button")
let people_10 = document.getElementById("people_10_button")
let people_1_maru = document.getElementById("peoplemaru_1")
let people_2_maru = document.getElementById("peoplemaru_2")
let people_3_maru = document.getElementById("peoplemaru_3")
let people_4_maru = document.getElementById("peoplemaru_4")
let people_5_maru = document.getElementById("peoplemaru_5")
let people_6_maru = document.getElementById("peoplemaru_6")
let people_7_maru = document.getElementById("peoplemaru_7")
let people_8_maru = document.getElementById("peoplemaru_8")
let people_9_maru = document.getElementById("peoplemaru_9")
let people_10_maru = document.getElementById("peoplemaru_10")
  people_1.onclick = function(){
// 従業員は1人だけという人数変更ボタンを押した時
    people_1_maru.innerText = "○";
// 従業員は1人とする行に○を入れる
    people_2_maru.innerText = "";
// 従業員2人〜10人とする行には空白を入れる
    people_3_maru.innerText = "";
    people_4_maru.innerText = "";
    people_5_maru.innerText = "";
    people_6_maru.innerText = "";
    people_7_maru.innerText = "";
    people_8_maru.innerText = "";
    people_9_maru.innerText = "";
    people_10_maru.innerText = "";
    ele1_2.innerText = "×";
// 従業員1人だけなので、1人分のバツを表示させる
    ele2_2.innerText = "";
// 2人〜10人の×には空を指定するもし途中まで○を打っていたとしたらリセットしたいので◯にも空を指定する 以下全部で10回分繰り返し
    ele3_2.innerText = "";
    ele4_2.innerText = "";
    ele5_2.innerText = "";
    ele6_2.innerText = "";
    ele7_2.innerText = "";
    ele8_2.innerText = "";
    ele9_2.innerText = "";
    ele10_2.innerText = "";
    ele1_1.innerText = "";
    ele2_1.innerText = "";
    ele3_1.innerText = "";
    ele4_1.innerText = "";
    ele5_1.innerText = "";
    ele6_1.innerText = "";
    ele7_1.innerText = "";
    ele8_1.innerText = "";
    ele9_1.innerText = "";
    ele10_1.innerText = "";
  };
  people_2.onclick = function(){
// 従業員は2人だけという人数変更ボタンを押した時
    people_1_maru.innerText = "";
// 従業員1人とする行には空白を入れる
    people_2_maru.innerText = "○";
// 従業員は2人とする行に○を入れる
    people_3_maru.innerText = "";
// 従業員3人〜10人とする行には空白を入れる 以下全部で10回分繰り返し
    people_4_maru.innerText = "";
    people_5_maru.innerText = "";
    people_6_maru.innerText = "";
    people_7_maru.innerText = "";
    people_8_maru.innerText = "";
    people_9_maru.innerText = "";
    people_10_maru.innerText = "";
    ele1_2.innerText = "×";
    ele2_2.innerText = "×";
    ele3_2.innerText = "";
    ele4_2.innerText = "";
    ele5_2.innerText = "";
    ele6_2.innerText = "";
    ele7_2.innerText = "";
    ele8_2.innerText = "";
    ele9_2.innerText = "";
    ele10_2.innerText = "";
    ele1_1.innerText = "";
    ele2_1.innerText = "";
    ele3_1.innerText = "";
    ele4_1.innerText = "";
    ele5_1.innerText = "";
    ele6_1.innerText = "";
    ele7_1.innerText = "";
    ele8_1.innerText = "";
    ele9_1.innerText = "";
    ele10_1.innerText = "";
  };
  people_3.onclick = function(){
    people_1_maru.innerText = "";
    people_2_maru.innerText = "";
    people_3_maru.innerText = "○";
    people_4_maru.innerText = "";
    people_5_maru.innerText = "";
    people_6_maru.innerText = "";
    people_7_maru.innerText = "";
    people_8_maru.innerText = "";
    people_9_maru.innerText = "";
    people_10_maru.innerText = "";
    ele1_2.innerText = "×";
    ele2_2.innerText = "×";
    ele3_2.innerText = "×";
    ele4_2.innerText = "";
    ele5_2.innerText = "";
    ele6_2.innerText = "";
    ele7_2.innerText = "";
    ele8_2.innerText = "";
    ele9_2.innerText = "";
    ele10_2.innerText = "";
    ele1_1.innerText = "";
    ele2_1.innerText = "";
    ele3_1.innerText = "";
    ele4_1.innerText = "";
    ele5_1.innerText = "";
    ele6_1.innerText = "";
    ele7_1.innerText = "";
    ele8_1.innerText = "";
    ele9_1.innerText = "";
    ele10_1.innerText = "";
  };
  people_4.onclick = function(){
    people_1_maru.innerText = "";
    people_2_maru.innerText = "";
    people_3_maru.innerText = "";
    people_4_maru.innerText = "○";
    people_5_maru.innerText = "";
    people_6_maru.innerText = "";
    people_7_maru.innerText = "";
    people_8_maru.innerText = "";
    people_9_maru.innerText = "";
    people_10_maru.innerText = "";
    ele1_2.innerText = "×";
    ele2_2.innerText = "×";
    ele3_2.innerText = "×";
    ele4_2.innerText = "×";
    ele5_2.innerText = "";
    ele6_2.innerText = "";
    ele7_2.innerText = "";
    ele8_2.innerText = "";
    ele9_2.innerText = "";
    ele10_2.innerText = "";
    ele1_1.innerText = "";
    ele2_1.innerText = "";
    ele3_1.innerText = "";
    ele4_1.innerText = "";
    ele5_1.innerText = "";
    ele6_1.innerText = "";
    ele7_1.innerText = "";
    ele8_1.innerText = "";
    ele9_1.innerText = "";
    ele10_1.innerText = "";
  };
  people_5.onclick = function(){
    people_1_maru.innerText = "";
    people_2_maru.innerText = "";
    people_3_maru.innerText = "";
    people_4_maru.innerText = "";
    people_5_maru.innerText = "○";
    people_6_maru.innerText = "";
    people_7_maru.innerText = "";
    people_8_maru.innerText = "";
    people_9_maru.innerText = "";
    people_10_maru.innerText = "";
    ele1_2.innerText = "×";
    ele2_2.innerText = "×";
    ele3_2.innerText = "×";
    ele4_2.innerText = "×";
    ele5_2.innerText = "×";
    ele6_2.innerText = "";
    ele7_2.innerText = "";
    ele8_2.innerText = "";
    ele9_2.innerText = "";
    ele10_2.innerText = "";
    ele1_1.innerText = "";
    ele2_1.innerText = "";
    ele3_1.innerText = "";
    ele4_1.innerText = "";
    ele5_1.innerText = "";
    ele6_1.innerText = "";
    ele7_1.innerText = "";
    ele8_1.innerText = "";
    ele9_1.innerText = "";
    ele10_1.innerText = "";
  };
  people_6.onclick = function(){
    people_1_maru.innerText = "";
    people_2_maru.innerText = "";
    people_3_maru.innerText = "";
    people_4_maru.innerText = "";
    people_5_maru.innerText = "";
    people_6_maru.innerText = "○";
    people_7_maru.innerText = "";
    people_8_maru.innerText = "";
    people_9_maru.innerText = "";
    people_10_maru.innerText = "";
    ele1_2.innerText = "×";
    ele2_2.innerText = "×";
    ele3_2.innerText = "×";
    ele4_2.innerText = "×";
    ele5_2.innerText = "×";
    ele6_2.innerText = "×";
    ele7_2.innerText = "";
    ele8_2.innerText = "";
    ele9_2.innerText = "";
    ele10_2.innerText = "";
    ele1_1.innerText = "";
    ele2_1.innerText = "";
    ele3_1.innerText = "";
    ele4_1.innerText = "";
    ele5_1.innerText = "";
    ele6_1.innerText = "";
    ele7_1.innerText = "";
    ele8_1.innerText = "";
    ele9_1.innerText = "";
    ele10_1.innerText = "";
  };
  people_7.onclick = function(){
    people_1_maru.innerText = "";
    people_2_maru.innerText = "";
    people_3_maru.innerText = "";
    people_4_maru.innerText = "";
    people_5_maru.innerText = "";
    people_6_maru.innerText = "";
    people_7_maru.innerText = "○";
    people_8_maru.innerText = "";
    people_9_maru.innerText = "";
    people_10_maru.innerText = "";
    ele1_2.innerText = "×";
    ele2_2.innerText = "×";
    ele3_2.innerText = "×";
    ele4_2.innerText = "×";
    ele5_2.innerText = "×";
    ele6_2.innerText = "×";
    ele7_2.innerText = "×";
    ele8_2.innerText = "";
    ele9_2.innerText = "";
    ele10_2.innerText = "";
    ele1_1.innerText = "";
    ele2_1.innerText = "";
    ele3_1.innerText = "";
    ele4_1.innerText = "";
    ele5_1.innerText = "";
    ele6_1.innerText = "";
    ele7_1.innerText = "";
    ele8_1.innerText = "";
    ele9_1.innerText = "";
    ele10_1.innerText = "";
  };
  people_8.onclick = function(){
    people_1_maru.innerText = "";
    people_2_maru.innerText = "";
    people_3_maru.innerText = "";
    people_4_maru.innerText = "";
    people_5_maru.innerText = "";
    people_6_maru.innerText = "";
    people_7_maru.innerText = "";
    people_8_maru.innerText = "○";
    people_9_maru.innerText = "";
    people_10_maru.innerText = "";
    ele1_2.innerText = "×";
    ele2_2.innerText = "×";
    ele3_2.innerText = "×";
    ele4_2.innerText = "×";
    ele5_2.innerText = "×";
    ele6_2.innerText = "×";
    ele7_2.innerText = "×";
    ele8_2.innerText = "×";
    ele9_2.innerText = "";
    ele10_2.innerText = "";
    ele1_1.innerText = "";
    ele2_1.innerText = "";
    ele3_1.innerText = "";
    ele4_1.innerText = "";
    ele5_1.innerText = "";
    ele6_1.innerText = "";
    ele7_1.innerText = "";
    ele8_1.innerText = "";
    ele9_1.innerText = "";
    ele10_1.innerText = "";
  };
  people_9.onclick = function(){
    people_1_maru.innerText = "";
    people_2_maru.innerText = "";
    people_3_maru.innerText = "";
    people_4_maru.innerText = "";
    people_5_maru.innerText = "";
    people_6_maru.innerText = "";
    people_7_maru.innerText = "";
    people_8_maru.innerText = "";
    people_9_maru.innerText = "○";
    people_10_maru.innerText = "";
    ele1_2.innerText = "×";
    ele2_2.innerText = "×";
    ele3_2.innerText = "×";
    ele4_2.innerText = "×";
    ele5_2.innerText = "×";
    ele6_2.innerText = "×";
    ele7_2.innerText = "×";
    ele8_2.innerText = "×";
    ele9_2.innerText = "×";
    ele10_2.innerText = "";
    ele1_1.innerText = "";
    ele2_1.innerText = "";
    ele3_1.innerText = "";
    ele4_1.innerText = "";
    ele5_1.innerText = "";
    ele6_1.innerText = "";
    ele7_1.innerText = "";
    ele8_1.innerText = "";
    ele9_1.innerText = "";
    ele10_1.innerText = "";
  };
  people_10.onclick = function(){
    people_1_maru.innerText = "";
    people_2_maru.innerText = "";
    people_3_maru.innerText = "";
    people_4_maru.innerText = "";
    people_5_maru.innerText = "";
    people_6_maru.innerText = "";
    people_7_maru.innerText = "";
    people_8_maru.innerText = "";
    people_9_maru.innerText = "";
    people_10_maru.innerText = "○";
    ele1_2.innerText = "×";
    ele2_2.innerText = "×";
    ele3_2.innerText = "×";
    ele4_2.innerText = "×";
    ele5_2.innerText = "×";
    ele6_2.innerText = "×";
    ele7_2.innerText = "×";
    ele8_2.innerText = "×";
    ele9_2.innerText = "×";
    ele10_2.innerText = "×";
    ele1_1.innerText = "";
    ele2_1.innerText = "";
    ele3_1.innerText = "";
    ele4_1.innerText = "";
    ele5_1.innerText = "";
    ele6_1.innerText = "";
    ele7_1.innerText = "";
    ele8_1.innerText = "";
    ele9_1.innerText = "";
    ele10_1.innerText = "";
  };
    ele1_1.onclick = function(){
// 一人目の○表示をクリックした時
      ele1_1.innerText = "";
// テキスト○は消える
      ele1_2.innerText = "×";
// テキスト×が入る
 };
    ele1_2.onclick = function(){
// 一人目の×表示をクリックした時
      ele1_2.innerText = "";
// テキスト×は消える
      ele1_1.innerText = "○";
// テキスト○が入る 以下全部で10回分繰り返し
    };
    ele2_1.onclick = function(){
      ele2_1.innerText = "";
      ele2_2.innerText = "×";
    };
    ele2_2.onclick = function(){
      ele2_2.innerText = "";
      ele2_1.innerText = "○";
    };
    ele3_1.onclick = function(){
      ele3_1.innerText = "";
      ele3_2.innerText = "×";
    };
    ele3_2.onclick = function(){
      ele3_2.innerText = "";
      ele3_1.innerText = "○";
    };
    ele4_1.onclick = function(){
      ele4_1.innerText = "";
      ele4_2.innerText = "×";
    };
    ele4_2.onclick = function(){
      ele4_2.innerText = "";
      ele4_1.innerText = "○";
    };
    ele5_1.onclick = function(){
      ele5_1.innerText = "";
      ele5_2.innerText = "×";
    };
    ele5_2.onclick = function(){
      ele5_2.innerText = "";
      ele5_1.innerText = "○";
    };
    ele6_1.onclick = function(){
      ele6_1.innerText = "";
      ele6_2.innerText = "×";
    };
    ele6_2.onclick = function(){
      ele6_2.innerText = "";
      ele6_1.innerText = "○";
    };
    ele7_1.onclick = function(){
      ele7_1.innerText = "";
      ele7_2.innerText = "×";
    };
    ele7_2.onclick = function(){
      ele7_2.innerText = "";
      ele7_1.innerText = "○";
    };
    ele8_1.onclick = function(){
      ele8_1.innerText = "";
      ele8_2.innerText = "×";
    };
    ele8_2.onclick = function(){
      ele8_2.innerText = "";
      ele8_1.innerText = "○";
    };
    ele9_1.onclick = function(){
      ele9_1.innerText = "";
      ele9_2.innerText = "×";
    };
    ele9_2.onclick = function(){
      ele9_2.innerText = "";
      ele9_1.innerText = "○";
    };
    ele10_1.onclick = function(){
      ele10_1.innerText = "";
      ele10_2.innerText = "×";
    };
    ele10_2.onclick = function(){
      ele10_2.innerText = "";
      ele10_1.innerText = "○";
    };
});
addEventListener("click",function() {
// クリック動作があった時
  let ele1_1 = document.getElementById("buttun1ok").innerText;
// 1個目の○の値を定義
  let ele2_1 = document.getElementById("buttun2ok").innerText;
// 1個目の×の値を定義
  let ele3_1 = document.getElementById("buttun3ok").innerText;
  let ele4_1 = document.getElementById("buttun4ok").innerText;
  let ele5_1 = document.getElementById("buttun5ok").innerText;
  let ele6_1 = document.getElementById("buttun6ok").innerText;
  let ele7_1 = document.getElementById("buttun7ok").innerText;
  let ele8_1 = document.getElementById("buttun8ok").innerText;
  let ele9_1 = document.getElementById("buttun9ok").innerText;
  let ele10_1 = document.getElementById("buttun10ok").innerText;
  let people_1_maru_text = document.getElementById("peoplemaru_1").innerText;
// 人数変更ボタンを押した時に出てくる判別用の○のテキストを定義 以下全部で10回分繰り返し
  let people_2_maru_text = document.getElementById("peoplemaru_2").innerText;
  let people_3_maru_text = document.getElementById("peoplemaru_3").innerText;
  let people_4_maru_text = document.getElementById("peoplemaru_4").innerText;
  let people_5_maru_text = document.getElementById("peoplemaru_5").innerText;
  let people_6_maru_text = document.getElementById("peoplemaru_6").innerText;
  let people_7_maru_text = document.getElementById("peoplemaru_7").innerText;
  let people_8_maru_text = document.getElementById("peoplemaru_8").innerText;
  let people_9_maru_text = document.getElementById("peoplemaru_9").innerText;
  let people_10_maru_text = document.getElementById("peoplemaru_10").innerText;
  let check_text = document.getElementById("check-text");
//  人数の数字を編集する為のテキスト入力部分のidを取得して定義
  let check_form = document.getElementById("check-form");
//  人数入力の送信ボタンを押す為のフォームのidを取得して定義
  if (ele1_1 != "" &&  people_1_maru_text != ""){
// もし1個目の丸が値が空ではないかつ人数変更1人の行の○の値が空でなければ
    check_text.value = "1";
// テキスト1入力(閉店人数1人という情報を保存したい為)
    check_form.submit();
// 送信ボタン押す
      alert("お疲れ様でした!\n閉店チェックOKです。\n気をつけて帰って下さい。");
//  アラートで閉店できましたという旨のメッセージを伝える  
}else if(ele1_1 != "" && ele1_1 == ele2_1 && people_2_maru_text != ""){
// もしくは、もし1個目の丸が値が空ではないかつ1個目と2個目の値が同じかつ人数変更2人の行の○の値が空でなければ
  check_text.value = "2";
// テキスト2入力(閉店人数2人という情報を保存したい為)
  check_form.submit();
// 送信ボタン押す
    alert("お疲れ様でした!\n閉店チェックOKです。\n気をつけて帰って下さい。");
//  アラートで閉店できましたという旨のメッセージを伝える  全部で10回分繰り返し
  }else if (ele1_1 != "" && ele1_1 == ele2_1 && ele2_1 == ele3_1 && people_3_maru_text != ""){
    check_text.value = "3";
    check_form.submit();
      alert("お疲れ様でした!\n閉店チェックOKです。\n気をつけて帰って下さい。");
  }else if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1 && ele2_1 == ele3_1 && people_4_maru_text != ""){
    check_text.value = "4";
    check_form.submit();
      alert("お疲れ様でした!\n閉店チェックOKです。\n気をつけて帰って下さい。");
  }else if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1 && ele4_1 == ele5_1 && ele2_1 == ele3_1 && people_5_maru_text != ""){
    check_text.value = "5";
    check_form.submit();
      alert("お疲れ様でした!\n閉店チェックOKです。\n気をつけて帰って下さい。");
  }else if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1 && ele5_1 == ele6_1 && ele4_1 == ele5_1 && ele2_1 == ele3_1 && people_6_maru_text != ""){
    check_text.value = "6";
    check_form.submit();
      alert("お疲れ様でした!\n閉店チェックOKです。\n気をつけて帰って下さい。");
  }else if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1 && ele5_1 == ele6_1 && ele6_1 == ele7_1 && ele2_1 == ele3_1 && ele4_1 == ele5_1 &&people_7_maru_text != ""){
    check_text.value = "7";
    check_form.submit();
      alert("お疲れ様でした!\n閉店チェックOKです。\n気をつけて帰って下さい。");
  }else if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1 && ele5_1 == ele6_1 && ele7_1 == ele8_1 && ele6_1 == ele7_1 && ele2_1 == ele3_1 && ele4_1 == ele5_1  && people_8_maru_text != ""){
    check_text.value = "8";
    check_form.submit();
      alert("お疲れ様でした!\n閉店チェックOKです。\n気をつけて帰って下さい。");
  }else if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1 && ele5_1 == ele6_1 && ele7_1 == ele8_1 && ele8_1 == ele9_1 && ele2_1 == ele3_1 && ele4_1 == ele5_1 && ele6_1 == ele7_1 && people_9_maru_text != ""){
    check_text.value = "9";
    check_form.submit();
      alert("お疲れ様でした!\n閉店チェックOKです。\n気をつけて帰って下さい。");
  }else if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1 && ele5_1 == ele6_1 && ele7_1 == ele8_1 && ele9_1 == ele10_1 && ele8_1 == ele9_1 && ele2_1 == ele3_1 && ele4_1 == ele5_1 && ele6_1 == ele7_1 && people_10_maru_text != ""){
    check_text.value = "10";
    check_form.submit();
      alert("お疲れ様でした!\n閉店チェックOKです。\n気をつけて帰って下さい。");
  }else{
  };
});

/app/views/closes/_main.html.erb

<div class = "check-main">
  <div class = "check-mains">
    <div class = "log-button">
      <% if user_signed_in? %>
        <%= link_to "ログを参照する", close_path(current_user.id) %>
      <%else%>
        <%= link_to "ログを参照する", "#" %>
      <%end%>
    </div>
    今日の閉店人数
    <div class = "buttonspace">
    <div class = "kaigyou">
      <div class = "peoplebutton-block">
      <%= submit_tag"1人 ", class: "peoplebutton", id: "people_1_button"%>
      </div>
      <div class = "peoplebutton-block">
      <%= submit_tag"2人 ", class: "peoplebutton", id: "people_2_button"%>
      </div>
       <div class = "peoplebutton-block">
      <%= submit_tag"3人 ", class: "peoplebutton", id: "people_3_button"%>
      </div>
       <div class = "peoplebutton-block">
      <%= submit_tag"4人 ", class: "peoplebutton", id: "people_4_button"%>
      </div>
       <div class = "peoplebutton-block">
      <%= submit_tag"5人  ", class: "peoplebutton", id: "people_5_button"%>
      </div>
      </div>
      <div class = "kaigyou">
       <div class = "peoplebutton-block">
      <%= submit_tag"6人 ", class: "peoplebutton", id: "people_6_button"%>
      </div>
       <div class = "peoplebutton-block">
      <%= submit_tag"7人 ", class: "peoplebutton", id: "people_7_button"%>
      </div>
       <div class = "peoplebutton-block">
      <%= submit_tag"8人 ", class: "peoplebutton", id: "people_8_button"%>
      </div>
       <div class = "peoplebutton-block">
      <%= submit_tag"9人 ", class: "peoplebutton", id: "people_9_button"%>
      </div>
      <div class = "peoplebutton-block">
      <%= submit_tag"10人", class: "peoplebutton", id: "people_10_button"%>
      </div>
      </div>
    </div>

  </div>
    <% if user_signed_in? %>
    <div class = "block">
      <h2 class = "peoplemaru" id = "peoplemaru_1"></h2>
      <h2 class = "peoplemaru" id = "peoplemaru_2"></h2>
      <h2 class = "peoplemaru" id = "peoplemaru_3"></h2>
      <h2 class = "peoplemaru" id = "peoplemaru_4"></h2>
      <h2 class = "peoplemaru" id = "peoplemaru_5"></h2>
      <h2 class = "peoplemaru" id = "peoplemaru_6"></h2>
      <h2 class = "peoplemaru" id = "peoplemaru_7"></h2>
      <h2 class = "peoplemaru" id = "peoplemaru_8"></h2>
      <h2 class = "peoplemaru" id = "peoplemaru_9"></h2>
      <h2 class = "peoplemaru" id = "peoplemaru_10"></h2>
    </div>

    <div class = "block">
    <div class = "kaigyoumarubatu">
      <h2 class = "marubatubuttonok" id = "buttun1ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun1ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun2ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun2ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun3ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun3ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun4ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun4ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun5ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun5ng"></h2>
      </div>
    <div class = "kaigyoumarubatu">
      <h2 class = "marubatubuttonok" id = "buttun6ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun6ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun7ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun7ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun8ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun8ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun9ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun9ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun10ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun10ng"></h2>
      </div>
    </div>

   <div class = "form">
    <%= form_with model:@closes, url:closes_path, method: :post, class:"check-form", id: "check-form", local: true do |f|%>
          <%= text_field_tag(:number_of_people,"4", class: "check-text", id: "check-text")%>    
           <%= submit_tag"ログ投稿", class: "check-submit", id: "check-submit"%>
    <%end%>
    <%else%>
    ログインしたら、チェック、ログ参照ができるようになります!
    <%end%>
</div>
</div>

/app/assets/stylesheets/closes.css (一部抜粋)

.check-form{
  visibility: hidden;
}
.check-submit{
  visibility: hidden;
}
.peoplebutton-block{
  padding: 5px;
}
.peoplebutton{
  border: 1px solid black;
  padding: 14px;
  color: black;
  background-color: #abced8;
  text-decoration: none;
}
.peoplebutton {
font-size: 30px;
}
.peoplemaru{
  display: none;
}

f:id:shifonnu:20201023151429p:plain
隠してる○とフォームをあえて表示させた画像です。

人数変更のボタンを押すと対応したidの○が出ます。 If文で人数変更ボタンの○と、下の○の数が同じなら下のログ投稿ボタンを3人なら3の値をつけて押すようにしています。 そして人数変更の○とログ投稿フォームは visibility: hidden;やdisplay: none;を使って見えないようにしています。

f:id:shifonnu:20201023151529p:plain
ログが残る部分に人数が閉店人数が入るようにして、日付は月、日表記に変更しました。

/app/views/closes/_main.html.erb

<div class = "check-main">
  <div class = "check-mains">
    <div class = "log-button">
      <%= link_to "もどる",  root_path %>
    </div>
    <div class = "log-title">
      閉店チェックした日付
    </div>
  </div>
  <% if user_signed_in?%> 
  <% @close.where(user_id: current_user.id).each do |close| %>
 <div class = "logtexts">
    <div class = "logtext">
      <%= close.number_of_people%>人で<%= close.created_at.strftime("%m月%d日")%>閉店しました!
         <%end%>
        <%end%> 
       <%if @close.nil?%>
         (例)2020/10/19閉店しました!
        <%end %> 
    </div>
  </div>

苦労した所

  • マルになる条件付が甘いので思い通りになかなかならなかった所です。例えば10人○にしないといけないのに6人目でお疲れ様でした!と言われる事象が多かったです。○を何回も押し続けて修正しました。 全体的にもっと効率良いやり方があるだろうなと思いました。

良かった点

  • 前回までにやってみた条件と同じやり方で全てできたので、できる事が一つ増えたら応用を効かせられると知れたことが良かったです。 ここまでが最終課題発表でやりたかった事なので14日過ぎてしまいましたが単純に嬉しくなりました。
  • 話ズレますが、github2台操作が当然のようにできるようになった事です。受講中githubを2台のパソコンで操作することは凄く難しい事だと感じていました。昨日やってみたら指定したローカルリポジトリにcloneして、片方のパソコンでpushしたら、もう片方で作業する時にはpullするだけでした。すごい便利じゃん!とびっくりして、当たり前の事が当たり前にわかるようになっている自分に気づいて、嬉しくなりました。

次はテックキャンプ の最終課題のフリマアプリのjavascript部分を見直してみます。 今なら前より理解できる部分があるかもしれない為。 オリジナルアプリについてはまだ出来てない事だらけですが、ゲストユーザーログイン機能を実装したいです。 最後まで読んでいただいてありがとうございます。

Rails/javascript/マルが4つ揃ったらアラートメッセージが出る,ログが残る

動作環境

f:id:shifonnu:20201019222837g:plain
マルが4つになったらアラートメッセージが出てログが残ります。

(前回と重複したコメントも載せています。)

/app/javascript/checked.js

addEventListener("load",function() {
// ページが読み込まれたら実行する
let ele1_1 = document.getElementById("buttun1ok");
// 1個目のマルのidを取得して定義
let ele1_2 = document.getElementById("buttun1ng");
// 1個目のバツのidを取得して定義 以下全部で4つ分繰り返し
let ele2_1 = document.getElementById("buttun2ok");
let ele2_2 = document.getElementById("buttun2ng");
let ele3_1 = document.getElementById("buttun3ok");
let ele3_2 = document.getElementById("buttun3ng");
let ele4_1 = document.getElementById("buttun4ok");
let ele4_2 = document.getElementById("buttun4ng");

ele1_2.innerText = "×";
// ページを開いた最初にテキスト×が入るように定義 以下全部で4つ分繰り返し
ele2_2.innerText = "×";
ele3_2.innerText = "×";
ele4_2.innerText = "×";

ele1_1.onclick = function(){
// 1個目のマルをクリックしたとき
  ele1_1.innerText = "";
// 1個目のマルのテキストは空になる
  ele1_2.innerText = "×";
// 1個目のバツにテキスト×が入る
};
ele1_2.onclick = function(){
// 1個目のバツをクリックしたとき
  ele1_2.innerText = "";
// 1個目のバツのテキストは空になる
  ele1_1.innerText = "○";
// 1個目のマルにテキスト○が入る 以下全部で4つ分繰り返し
};

ele2_1.onclick = function(){
  ele2_1.innerText = "";
  ele2_2.innerText = "×";
};

ele2_2.onclick = function(){
  ele2_2.innerText = "";
  ele2_1.innerText = "○";
};

ele3_1.onclick = function(){
  ele3_1.innerText = "";
  ele3_2.innerText = "×";
};

ele3_2.onclick = function(){
  ele3_2.innerText = "";
  ele3_1.innerText = "○";
};

ele4_1.onclick = function(){
  ele4_1.innerText = "";
  ele4_2.innerText = "×";
};

ele4_2.onclick = function(){
  ele4_2.innerText = "";
  ele4_1.innerText = "○";
};
});

addEventListener("click",function() {
// クリック動作が起きたら実行する
  let ele1_1 = document.getElementById("buttun1ok").innerText;
// 1個目のマルのidとテキスト内容を取得して定義 以下4つ分繰り返し
  let ele2_1 = document.getElementById("buttun2ok").innerText;
  let ele3_1 = document.getElementById("buttun3ok").innerText;
  let ele4_1 = document.getElementById("buttun4ok").innerText;
  let check_form = document.getElementById("check-form");
// 4つマルが揃ったら送信するform_withのidを取得して定義
 
if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1 && ele2_1 == ele3_1 ){
// もし1個目のマルが空ではない、かつ1個目のマルと2個目のマルのテキスト内容が同じ、
//かつ3個目のマルと4個目のマルのテキスト内容が同じ、かつ2個目のマルと3個目のマルの
//テキスト内容が同じ場合
  check_form.submit();
//閉店ログを残す為に隠したformから送信
    alert("お疲れ様でした!\n閉店チェックOKです。\n気をつけて帰って下さい。");
//アラートで閉店しましたメッセージを出す
 };
});

/app/views/closes/_main.html.erb

<div class = "check-main">
  <div class = "check-mains">
    <div class = "log-button">
      <% if user_signed_in? %>
        <%= link_to "ログを参照する", close_path(current_user.id) %>
      <%else%>
        <%= link_to "ログを参照する", "#" %>
      <%end%>
    </div>
  </div>
    <% if user_signed_in? %>
    <div class = "block">
      <h2 class = "marubatubuttonok" id = "buttun1ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun1ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun2ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun2ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun3ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun3ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun4ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun4ng"></h2>
    </div>
   <div class = "form">
    <%= form_with model:@closes, url:closes_path, method: :post, class:"check-form", id: "check-form", local: true do |f|%>
          <%= text_field_tag(:number_of_people,"4", class: "check-text", id: "check-text")%>    
           <%= submit_tag"ログ投稿", class: "check-submit", id: "check-submit"%>
    <%end%>
    <%else%>
    ログインしたら、チェック、ログ参照ができるようになります!
    <%end%>
</div>
</div>

/closed-app/app/views/closes/_log.html.erb

<div class = "check-main">
  <div class = "check-mains">
    <div class = "log-button">
      <%= link_to "もどる",  root_path %>
    </div>
    <div class = "log-title">
      閉店チェックした日付
    </div>
  </div>
  <% if user_signed_in?%> 
  <% @close.where(user_id: current_user.id).each do |close| %>
 <div class = "logtexts">
    <div class = "logtext">
      <%= close.created_at.strftime('%Y/%m/%d')%>閉店しました!
         <%end%>
        <%end%> 
       <%if @close.nil?%>
         (例)2020/10/19閉店しました!
        <%end %> 
    </div>
  </div>

/app/assets/stylesheets/closes.css (一部抜粋)

.block{
  display: flex;
  justify-content: space-evenly;
}
.marubatubuttonok{
  font-size: 200px;
  color: red;
}
.marubatubuttonng{
  font-size: 200px;
  color: blue;
}
.check-form{
  visibility: hidden;
}
.check-submit{
  visibility: hidden;
}

/closed-app/app/controllers/closes_controller.rb

class ClosesController < ApplicationController
  before_action :authenticate_user!, only: [:new]
  before_action :set_list, only: [:index, :show, :create]
 
  def index
    @closes = Close.new
  end
 
  def show
    @close = Close.order("created_at desc").limit(100)
  end

  def create
    @closes = Close.new(close_params)
    if  
      @closes.save
      redirect_to root_path
    else
      flash.now
      render :index
    end
  end
 
  def set_list
    @list = List.order("created_at desc").limit(1)
  end

 private
 def close_params
  params.permit(:number_of_people).merge(user_id: current_user.id)
 end
end

/closed-app/app/controllers/lists_controller.rb

class ListsController < ApplicationController
  before_action :authenticate_user!, only: [:new]

  def new
    @list = List.order("created_at desc").limit(1)
    @lists = List.new
  end

  def create
    @lists = List.new(list_params)
    if 
      @lists.save
      redirect_to root_path
    else
      flash.now
      render :new
    end
  end
  
  private
  def list_params
    params.permit(:check_list).merge(user_id: current_user.id)
  end
end

f:id:shifonnu:20201019223135p:plain
ここにフォームを置いてcssのvisibility: hidden;で隠しています。

f:id:shifonnu:20201019223215p:plain
ログ画面です。チェック表と同じ構造なので楽でした。

前と違う所

  • チェック表とログで2種類createしたくなったのでコントローラーを2つに増やしました。 下の白部分は不要に感じられたので消しました。

  • <%= close.created_at.strftime('%Y/%m/%d')%> ここの表記でcreated_atの表記を日付のみに変更しています。時間表示もここを変えればできます。 時間の情報は不要なので日付のみにしました。

苦労した所

  • check_form.submit();をするとページがリロードされるので、 前回までのメッセージが保持できなくなりました。 いくつか解決方法がありますが現時点で実現できませんでした。 達成体験を得たかったので、 alertを使えば○表示がちょっとスッキリしませんが使用はできると思いつきました。

次は閉店人数を変更できるように考えます。
最後まで読んで頂いてありがとうございます。

参考:railsの日付(created_at)の表示表記を変更する
https://qiita.com/salvage0707/items/5f7888c6b5725a0aa6f3

Rails/javascript/マルが4つ揃ったらメッセージが出る

動作環境

f:id:shifonnu:20201017003552g:plain
マルが4つ揃ったら「お疲れ様でした!」と下に表示されます。

/app/javascript/checked.js

addEventListener("load",function() {
// ページが読み込まれたら実行する
let ele1_1 = document.getElementById("buttun1ok");
// 1個目のマルのidを取得して定義
let ele1_2 = document.getElementById("buttun1ng");
// 1個目のバツのidを取得して定義 以下全部で4つ分繰り返し
let ele2_1 = document.getElementById("buttun2ok");
let ele2_2 = document.getElementById("buttun2ng");
let ele3_1 = document.getElementById("buttun3ok");
let ele3_2 = document.getElementById("buttun3ng");
let ele4_1 = document.getElementById("buttun4ok");
let ele4_2 = document.getElementById("buttun4ng");

ele1_2.innerText = "×";
// ページを開いた最初にテキスト×が入るように定義 以下全部で4つ分繰り返し
ele2_2.innerText = "×";
ele3_2.innerText = "×";
ele4_2.innerText = "×";

ele1_1.onclick = function(){
// 1個目のマルをクリックしたとき
  ele1_1.innerText = "";
// 1個目のマルのテキストは空になる
  ele1_2.innerText = "×";
// 1個目のバツにテキスト×が入る
};
ele1_2.onclick = function(){
// 1個目のバツをクリックしたとき
  ele1_2.innerText = "";
// 1個目のバツのテキストは空になる
  ele1_1.innerText = "○";
// 1個目のマルにテキスト○が入る 以下全部で4つ分繰り返し
};

ele2_1.onclick = function(){
  ele2_1.innerText = "";
  ele2_2.innerText = "×";
};

ele2_2.onclick = function(){
  ele2_2.innerText = "";
  ele2_1.innerText = "○";
};

ele3_1.onclick = function(){
  ele3_1.innerText = "";
  ele3_2.innerText = "×";
};

ele3_2.onclick = function(){
  ele3_2.innerText = "";
  ele3_1.innerText = "○";
};

ele4_1.onclick = function(){
  ele4_1.innerText = "";
  ele4_2.innerText = "×";
};

ele4_2.onclick = function(){
  ele4_2.innerText = "";
  ele4_1.innerText = "○";
};
});

addEventListener("click",function() {
// クリック動作が起きたら実行する
  let ele1_1 = document.getElementById("buttun1ok").innerText;
// 1個目のマルのidとテキスト内容を取得して定義 以下4つ分繰り返し
  let ele2_1 = document.getElementById("buttun2ok").innerText;
  let ele3_1 = document.getElementById("buttun3ok").innerText;
  let ele4_1 = document.getElementById("buttun4ok").innerText;
  let check_ok = document.getElementById("check_ok");
// 4つマルが揃ったら出るメッセージのidを取得して定義
  
  check_ok.innerText ="";
// 4つマルが揃ったら出るメッセージは最初はテキストが空であることを定義

if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1 && ele2_1 == ele3_1 )check_ok.innerText = "お疲れ様でした!";
});
// もし1個目のマルが空ではない、かつ1個目のマルと2個目のマルのテキスト内容が同じ、
//かつ3個目のマルと4個目のマルのテキスト内容が同じ、かつ2個目のマルと3個目のマルの
//テキスト内容が同じ場合は、メッセージにテキスト「お疲れ様でした!」が入る。

/app/views/closes/_main.html.erb

<div class = "check-main">
  <div class = "check-mains">
    <div class = "log-button">
      <% if user_signed_in? %>
        <%= link_to "ログを参照する", close_path(current_user.id) %>
      <%else%>
        <%= link_to "ログを参照する", "#" %>
      <%end%>
    </div>
  </div>

    <div class = "block">
      <h2 class = "marubatubuttonok" id = "buttun1ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun1ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun2ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun2ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun3ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun3ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun4ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun4ng"></h2>
    </div>

</div>
<div class = "check-answer">
       <h2 class = "check-ok" id = "check_ok"></h2>
</div>

/app/assets/stylesheets/closes.css (一部抜粋)

.marubatubuttonok{
  font-size: 200px;
  color: red;
  align-items: flex-start;
}
.marubatubuttonng{
  font-size: 200px;
  color: blue;
  align-items: flex-start;
}

.check-ok{
  font-size: 100px;
  color: red;
  vertical-align: top;
}

前回と違う事

  • 前回はdisplayプロパティを使用したが今回はinnerTextプロパティを使用しました。 innerHTMLでも可能かと思います。 元々は何もテキストがない状態で、javascriptでテキストを表示させています。

悩んだ事

  • if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1 )check_ok.innerText = "お疲れ様でした!"; 最初これで考えたら1個目と2個目のマルが揃ったらメッセージが出るので悩みました。

f:id:shifonnu:20201016104719p:plain
悩んだ時の画面

ふと そうか!!と思ったのですが、

if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1  )check_ok.innerText = "お疲れ様でした!";
//もし1個目のマルは空でなくて、1個目のマルと2個目のマルのテキストは同じ内容
//かつ3個目のマルと4個目のマルのテキストは同じ内容だったら、
//メッセージにテキスト「お疲れ様でした!」を入れる

確かに1個目は空ではない、1個目と2個目は両方マルで同じテキスト内容、3個目と4個目は両方空で同じテキスト内容だからお疲れ様でした!判定になっていたのでした。
最後に && ele2_1 == ele3_1(2個目のマルと3個目のマルは同じテキスト内容)を足したら、思い通りになりました。

次回はログを残せるように考えたいと思います。
最後まで読んでいただきありがとうございます。

https://teratail.com/questions/35022
参考:三目ならべの勝敗判定がうまく動作しません

Rails/javascript/マルバツの表示を切り替える 

動作環境

単純にマルとバツを切り替える方法です。

f:id:shifonnu:20201012212630g:plain
バツを押したらマルがうつります。マルを押したらバツがうつります。

/app/javascript/checked.js

addEventListener("load",function() {
// ページが読み込まれたら実行する

let ele1_1 = document.getElementById('buttun1ok');
// 1個目のマルのidを取得して定義

let ele1_2 = document.getElementById('buttun1ng');
// 1個目のバツのidを取得して定義 以下全部で4つ分繰り返し

let ele2_1 = document.getElementById('buttun2ok');
let ele2_2 = document.getElementById('buttun2ng');
let ele3_1 = document.getElementById('buttun3ok');
let ele3_2 = document.getElementById('buttun3ng');
let ele4_1 = document.getElementById('buttun4ok');
let ele4_2 = document.getElementById('buttun4ng');

const ok1_1 = ele1_1.style.display;
// 1個目のマルを表示する事を定義

const ng1_1 = ele1_2.style.display;
// 1個目のバツを表示する事を定義 以下全部で4つ分繰り返し

const ok2_1 = ele2_1.style.display;
const ng2_1 = ele2_2.style.display;
const ok3_1 = ele3_1.style.display;
const ng3_1 = ele3_2.style.display;
const ok4_1 = ele4_1.style.display;
const ng4_1 = ele4_2.style.display;

ele1_1.style.display = 'none';
// ページを開いた最初にマルボタンは見えないように定義 以下全部で4つ分繰り返し
ele2_1.style.display = 'none';
ele3_1.style.display = 'none';
ele4_1.style.display = 'none';

ele1_1.onclick = function(){
// 1個目のマルをクリックしたとき
  ele1_1.style.display = 'none';
// 1個目のマルは消える
  ele1_2.style.display = ng1_1;
// 1個目のバツを表示させる 
}
ele1_2.onclick = function(){
// 1個目のバツをクリックしたとき
  ele1_2.style.display = 'none';
// 1個目のバツは消える
  ele1_1.style.display = ok1_1;
// 1個目のマルを表示させる 以下全部で4つ分繰り返し
}

ele2_1.onclick = function(){
  ele2_1.style.display = 'none';
  ele2_2.style.display = ng2_1;
}

ele2_2.onclick = function(){
  ele2_2.style.display = 'none';
  ele2_1.style.display = ok2_1;
}

ele3_1.onclick = function(){
  ele3_1.style.display = 'none';
  ele3_2.style.display = ng3_1;
}

ele3_2.onclick = function(){
  ele3_2.style.display = 'none';
  ele3_1.style.display = ok3_1;
}

ele4_1.onclick = function(){
  ele4_1.style.display = 'none';
  ele4_2.style.display = ng4_1;
}

ele4_2.onclick = function(){
  ele4_2.style.display = 'none';
  ele4_1.style.display = ok4_1;
}
})

/app/views/closes/_main.html.erb

<div class = "check-main">
  <div class = "check-mains">
    <div class = "log-button">
      <% if user_signed_in? %>
        <%= link_to "ログを参照する", close_path(current_user.id) %>
      <%else%>
        <%= link_to "ログを参照する", "#" %>
      <%end%>
    </div>
  </div>
    <div class = "block">
      <h2 class = "marubatubuttonok" id = "buttun1ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun1ng">×</h2>
      <h2 class = "marubatubuttonok" id = "buttun2ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun2ng">×</h2>
      <h2 class = "marubatubuttonok" id = "buttun3ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun3ng">×</h2>
      <h2 class = "marubatubuttonok" id = "buttun4ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun4ng">×</h2>
    </div>
</div>
<div class = "check-answer">
</div>

/app/assets/stylesheets/closes.css (一部抜粋)

.block{
  display: flex;
  justify-content: space-evenly;
}
.marubatubuttonok{
  font-size: 200px;
  color: red;
}
.marubatubuttonng{
  font-size: 200px;
  color: blue;
}

visibilityプロパティも試してみましたが、2箇所別れてマルバツが出てきました。
displayプロパティの方がやりたい表示に近かったです。

閉店しましたと出てくる処理もしたいので
次はマルが揃った事を判断できる文を考えます。

最後まで読んで頂いてありがとうございます。

https://techacademy.jp/magazine/24738
参考:JavaScriptで要素の表示・非表示を切り替える方法を現役エンジニアが解説【初心者向け】

Rails/書き込み最新一件だけを表示させる

動作環境

ログインログアウトにdevice使用

f:id:shifonnu:20201011000931g:plain
オリジナルアプリ閉店時のチェックリストを作っています。

f:id:shifonnu:20201011001020g:plain
左側のチェックリストを編集をするを押すと、書き込める画面に遷移します。ログインした人の最新一件の書き込みが表示されるようにしたいです。

ログイン関係なく最新一件になってたので、ログインした時の最新一件になるように編集しました。

app/views/closes/_side_bar.html.erb

<div class = "side-bar-main">
  <div class = "side-bar-mains">
    <div class = "check-list-title">
      チェックリスト
    </div>
    <div class = "edit-check-list">
      <%= link_to "チェックリストを編集する", new_close_path %>
    </div>
    <div class = "check-list">
      <h2 class = "name">
        <% if user_signed_in?%>
          <% @list.where(user_id: current_user.id).each do |list| %>
            <%=list.check_list%>
          <%end%>
        <%end%> 
        <%if @list.nil?%>
          ウォッシャー電源止めて水抜いた<br>食材期限確認した<br>フライヤー電源止めた<br>炊飯器洗った
        <%end %> 
      </h2>
   </div>
  </div>
</div>

こちらがindex.html.erbです。showページ、newページ割愛しますが基本のページ割は同じです。 ヘッダーとサイドバーを分けてrenderで表示しています。 app/views/closes/index.html.erb

<div class = "header">
  <%= render "header" %>
</div>
<div class = "wrapper">
  <div class = "side-bar">
    <%= render "side_bar" %>
  </div>
  <div class = "main">
    <%= render "main" %>
  </div>
</div>

app/controllers/closes_controller.rb

class ClosesController < ApplicationController
  before_action :authenticate_user!, only: [:new]

  def index
    @list = List.order("created_at desc").limit(1)
  end
 
  def show
    @list = List.order("created_at desc").limit(1)
  end

  def new
    @closes = List.new
    @list = List.order("created_at desc").limit(1)
  end

  def create
    @closes = List.new(list_params)
    if 
      @closes.save
      redirect_to root_path
    else
      flash.now
      render :new
    end
  end
 
 private
 def list_params
  params.permit(:check_list).merge(user_id: current_user.id)
 end
end

app/models/close.rb

class Close < ApplicationRecord
  belongs_to :user
  belongs_to :list
end

schema.rb(create_table "lists”部分)

create_table "lists", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t|
    t.text "check_list", null: false
    t.integer "user_id", null: false
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

app/controllers/closes_controller.rb 一部抜粋

class ClosesController < ApplicationController
  before_action :authenticate_user!, only: [:new]

  def index
    @list = List.order("created_at desc").limit(1)
  end
 
  def show
    @list = List.order("created_at desc").limit(1)
  end

  def new
    @closes = List.new
    @list = List.order("created_at desc").limit(1)
  end

@list = List.order("created_at desc").limit(1)で、 チェックリストを書き込みしたテーブルを指し、orderメソッドで 書き込んだ時間(“created_at desc”)の逆順に並べて、最新の書き込みが一番初めになるようにします。 limit(1)部分で1件だけ表示を指定しています。

@list = List.order("created_at desc”).take

でも同じです。

takeメソッドはレコードを1つ取り出します。どのレコードが取り出されるかは指定されません。

https://railsguides.jp/active_record_querying.html

参考:Active Record クエリインターフェイス - Railsガイド




app/views/closes/_side_bar.html.erb 一部抜粋

        <% if user_signed_in?%>
          <% @list.where(user_id: current_user.id).each do |list| %>
            <%=list.check_list%>
          <%end%>
        <%end%> 
        <%if @list.nil?%>
          ウォッシャー電源止めて水抜いた<br>食材期限確認した<br>フライヤー電源止めた<br>炊飯器洗った
        <%end %> 

if user_signed_in?でログインした人だけがチェックリスト自体見れるようにしています。 ログインしていない人には何も見えません。 if user_signed_in?はgem deviceを入れてる場合に使えるヘルパーメソッドです。

https://github.com/heartcombo/devise

参考:heartcombo/devise: Flexible authentication solution ... - GitHub

@list.where(user_id: current_user.id).each do |list| で、 whereメソッドでテーブルListから該当するデータを探します。 user_id(書き込んだ時のユーザーID)とcurrent_user.id(今ログインしている人のユーザーID)が同じ書き込みをeach doメソッドで要素がある分繰り返し探すように指示しています。 current_user.idもdevice専用のヘルパーメソッドです。

@list = List.order("created_at desc").limit(1)にて書き込んだ順に1件だけと指定していますので、一件だけデータを取得できます。

このままでは一件全部のデータが取り出せる(書き込みのid,書き込みの内容、書き込んだ時間、更新された時間)ので、 <%=list.check_list%> これで書き込んだ内容だけを取り出して表示させています。

f:id:shifonnu:20201011001128p:plain
ログアウト時は書き込みが見えない状態で・・・

f:id:shifonnu:20201011001207p:plain
ねねちゃんうどん店でログインした時の最新一件

f:id:shifonnu:20201011001242p:plain
のののカレー店でログインした時の最新一件

それぞれのお店の最新一件が表示されるようになりました。

コントローラーのメソッドについて、 before_actionで同じ変数をまとめて指定できるのでやった方がスッキリします。 とりあえず現状報告です。

最後まで読んでいただきありがとうございます。

ブログにコードブロックを作る方法

ブログを書こうと思って気付いたシリーズ

コードブロックを作れるようになりたいです。

というわけで調べます。

Markdown記法で書くのが一番良さそうです。

はてなブログではMarkdown記法が使えます。 qiitaとかgithubとか 他のブログとかでも使える所があるらしいです。 メモ帳に書いて溜めとけば、他の媒体にすぐ貼れたりするわけです。

一番最初にMarkdown記法が何に役立つかわかりません!と 無邪気に書いてたので、成長してよかったです。 (はてな記法という方法でも書けます。)

というわけでMarkdown記法で今回から書いてみます。

書き方

参考:ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプ

Markdownモードでは、コードブロックのシンタックスハイライトに対応しており、```perlのように言語を指定できます。

だそうです。

f:id:shifonnu:20201005230120p:plain

メモ帳でこう書いたものが

こうなります

  def create
    @hogehoge = hogehoge.new
    if @hogehoge.valid?
      @hogehoge.save
      redirect_to root_path
  end

おー とりあえず出来てることが素晴らしい

上下にバックティックという点々を3つずつつけて、 上の点々の横に言語を書くと、シンタックスハイライトという 色付きの表示にしてくれます。

参考:Markdown記法 チートシート - Qiita

最初も紹介しましたがここ見ながら色々試行錯誤してみます。

ラーメン・ソラノイロBOXのうまさを語るだけ

ツイートって140文字しかないので、文字数が限界になってしまうんですね。
初めて頼んだ ぶどうの冷やし麺を食べて、美味しさを伝えきれずに、
絵文字で試行錯誤して慌てふためいている感じの過去ツイートです。
ブログは文字制限が無いのがいいですね!

ソラノイロBOXとは?こちらご参照ください!
soranoiro4u.thebase.in

月に一度の定期便が今回初めて届きました!


↑今日はこちらの感想をひたすら書きます。
取り留めなく書くのでサーッと見てください。

○神山すだちの冷かけ

里山みらいさん
NPO法人 里山みらい|徳島県神山町をみんなのふるさとにするメディア

f:id:shifonnu:20201001232801j:plain
神山すだちの冷かけと瀬戸牧場のもち豚ハムを作って食べました

すだちのパンチ力が凄いです。ビタミンの爆弾です。
酸味がしっかりあります。
薄ーく切ると酸味がちょうど良いですね。食べてわかりました。
冷やしだと酸味が映えます。
分厚めにもりもりに切って入れたので、
パソコンの課題で疲れてた脳と目にエネルギーがダイレクトチャージされました。

f:id:shifonnu:20201001233003j:plain
麺のアップ

麺にかつおぶしが混ざってます!(もし違ってたらすみません)
そして醤油のスープはさっぱりとしています。
でも出しが効いてます。
うどんのかけだしに近いと思いました。
私前職最後うどん屋の店長だったんです。うどんは美味しいですよね!

うま味成分が合わされば合わさるほど美味しくなるので、
スープの旨味と麺の鰹節と、
合わさるトッピングで美味しさを引き出してくれる麺とスープなんだなぁと感じました。
しっかりだしがきいてるけど、すだちに活躍の場を与えてくれています。

広島県福山市瀬戸牧場のもち豚ハム

瀬戸牧場さん
www.setofarm.com

f:id:shifonnu:20201001233234j:plain
広島県福山市瀬戸牧場のもち豚ハムと神山すだち

フルーツ、メロン、ブドウとともに。て書いてくださってたのに、
無意識にすだちを添えてました。
体がビタミンを欲してたのかもしれません。

このもち豚ハムはお肉の甘味とかコクを感じます。
全体的に素材がいいので、余計なものはいらなくて、個々が優秀です。
脂身もなんか嫌味がないけど口に残る美味しさです。

それにこの出汁のきいた感じのスープと麺が合うんです!
ラーメンなのにご飯と味噌汁と主菜を食べているような感覚がありました。

○神山すだちの冷かけの あたたかい方

f:id:shifonnu:20201001233542j:plain
今日は神山すだちの冷かけの あたたかい方を作りました

2食分あるので今日はあたたかくしました。
昨日学習したのですだちは薄く切りました。
暖かいと酸味が和らぐので酸っぱいの苦手な人はいいかもです!
スープと麺のコクは暖かい方が深みと余韻がありました!

f:id:shifonnu:20201001234029j:plain
豪快に切ったナシに巻いた瀬戸牧場のもち豚ハム

もち豚ハムは今日はナシに巻きました。
ナシ甘くて柔らかめでシャキシャキしてておいしかったです。
切った瞬間の透明感がすごいなあと思いました。

○瀬戸牧場のウインナー 粗挽きとピリ辛

f:id:shifonnu:20201001234128j:plain
瀬戸牧場のウインナー 粗挽きとピリ辛 切って一緒に神山すだちと炒めました

全部きっちりキリよく旨さを報告したかったので
食べた後に作ってみました。
茹でて切ってごま油とクミンシードで炒めて余ったすだちを刻んで入れました。
意外とすだちは炒めても風味を持っている!ゆずみたいに使えますね〜

ウインナーとかハムってパリパリの印象ないですか?
瀬戸牧場のウインナーとかハムは、なんか「肉の腸詰」って感じです。
練り製品ではない感じがします。ウインナーなのに高級ハムって感じの味と歯応えです。
折角美味しいので明日のお昼のメインになってもらいます。

みんな優秀なんだけど、出しゃばらないで、
他の人の良さを認め合っている特進クラスって感じがします。
ここが凄い!と思いました。

後5倍くらい語れますけど
今日はこの辺にしときます!
読んでいただきありがとうございます。