「kaz_javaSpringBootプログラム自動作成◎自動生成」のレスポンシブデザイン的な調査

18:43
①今日は「kaz_javaSpringBootプログラム自動作成◎自動生成」のレスポンシブデザイン対応を調査している。
www.vector.co.jp
・Zenn本(SpringBoot、Thymeleaf　プログラム自動作成（マクロ使用版）)
zenn.dev

とりあえずこんな感じに考えている。CSSとJavaScriptでやっているが、スマホ実機ではまだ、確認していない。ので、これからまだまだ調査する予定。
■PC向けWEB画面
・PC画面には、サイドメニューがある

■スマホ向けWEB画面
・スマホ画面の初期画面及び、管理メニュー押下後画面。（サイドメニュー表示）

・スマホ画面のユーザー情報登録画面を想定。右側が切れるのをどう処理するかは後で考える。

03:01
①レスポンシブデザインのスマホ向け画面。こんな感じまでできた。けど、あまり良い出来ではない。←2022/04/22の20時ごろの日記に新たなやり方が書いてある。それはなかなかよくできた。
　・今ある画面のメニューと情報画面を、分離しようという考えでやってる。入力画面や、検索画面の画面からはみ出た分は、見れればいい。って感じで作成。
　・スマホ実機で動かしたところ、不具合？みたいな以下現象が起きる。
　　メニューを少しスクロールすると、クリックなしでメニューが消える（『管理者メニュー』が押下されたみたい）。ちょっとした瞬間にメニューが消えるのでストレス高い。
　　原因不明だ。『管理者メニュー』に入力項目がないからちょっと触っただけでサブミットされているのではと思い、HIDDEN項目を２個追記したが変わらなかった。（気持ち、すこしは良くなったかも。でもこの現象は起きる）
■とりあえずできたとこまでの画面。
・まず、スマホ実機のchrome初期画面

・『管理者メニュー』押下後。←このメニューを少しスクロールすると、クリックなしでメニューが消える。これがストレス。


・ユーザー情報登録画面。はみだした分は、見れればいい。って感じなので、これでもいいかな。

・ユーザー情報一覧（更新削除）画面。はみだした分は、見れればいい。って感じなので、これでもいいかな。

■とりあえず。できたソースの抜粋

＜＜追加　start＞＞
<style type="text/css">
@media screen and (max-width: 768px) {
.drawer {
  display:block;
  float: left;
  margin-left: 5px;
}
.drawer-list {
  display:none;
}
#main
{
	background-color: #990000;
	margin:0 10px 0 5px;
	background-color:#FFFFFF;
	border:solid 1px #C6C6C6;
	padding:15px 15px 40px 15px;
	
	font-size: 8px;
}
}
@media screen and (min-width: 768px) {
.drawer {
  display:none;
  float: left;
  margin-left: 5px;
}
.drawer-list {
  display:block;
}
}
</style>
＜＜追加　end＞＞

	・・・
		<div id="header">
			<a href="javascript:submitFrm5(&#39;/members/admin/index&#39;, &#39;&#39;)"><div style="font-size: large; color:#FFFFFF; text-align: center;"><strong>あなたのPGMタイトル&nbsp;&nbsp;管理システム</strong></div></a>
＜＜追加　start＞＞
	<a href="#" class="drawer" style="color:#FFFFFF;">管理者メニュー</a>
＜＜追加　end＞＞
			<div id="r-navi">
	・・・
＜＜修正後　start＞＞
		<div class="drawer-list" id="side">
＜＜修正後　end＞＞
			<form name="frm5" method="post" action="/members/admin/index"><input type="hidden" name="_csrf" value="f38b26ed-7c09-4b81-87c1-1ebaa8a0910a"/>
	・・・
＜＜追加　start＞＞
<!-- ドロワーメニュー用ロジック -->
<script>
$ (function() {
  $(".drawer").click (function() {
    // サイドメニュー非表示時
    if ($(".drawer-list").is(':visible') == false){
      // メイン、フッターを非表示しておく。（次ステップで、サイドメニュー表示になるので）
      $("#main").css("display","none");
      $("#footer").css("display","none");
    } else {
      // メイン、フッターを表示しておく。（次ステップで、サイドメニュー非表示になるので）
      $("#main").css("display","block");
      $("#footer").css("display","block");
    }
    // サイドメニュー表示非表示トグル
    $(".drawer-list").slideToggle();
  });
  $(".menu > li > a").click (function() {
	var windowSize =window.innerWidth;
	// 
	if (windowSize < 768) {
	  // サイドメニュー非表示にする
      $(".drawer-list").slideToggle();
	}
  });
});

// ウィンドウサイズを動かした時の処理
var timer = '';
$(window).on('resize', function(){
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function(){
    var windowSize =window.innerWidth;
    // スマホとPCサイズ。PCの時
    if (windowSize >= 768) {
      // サイドメニュー非表示時
      if ($(".drawer-list").is(':visible') == false){
        // 表示にする
        $(".drawer-list").slideToggle();
      }
      // メイン、フッターを表示する。
      $("#main").css("display","block");
      $("#footer").css("display","block");
    // スマホとPCサイズ。スマホの時
    } else {
      // サイドメニュー表示時
      if ($(".drawer-list").is(':visible')){
        // サイドメニュー非表示にする
        $(".drawer-list").slideToggle();
        $("#main").css("display","block");
        $("#footer").css("display","block");
      }
    }
  }, 200); // 200ミリ秒づつチェック
});
</script>
＜＜追加　end＞＞