常連

### 試したこと
ライブラリ『jQuery UI Touch Punch』 によって、スマホでの並び替えができるみたいなのですが上手くできませんでした。間違ってる点やアドバイス等頂けると幸いです。

```PHP
<html>
<head>
<meta charset="utf-8">
    <title>jQuery UI Touch Punch sample</title>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
    <ul id="sortable">
        <li><i class="handle fas fa-arrows-alt-v"></i> Item 1</li>
        <li><i class="handle fas fa-arrows-alt-v"></i> Item 2</li>
        <li><i class="handle fas fa-arrows-alt-v"></i> Item 3</li>
        <li><i class="handle fas fa-arrows-alt-v"></i> Item 4</li>
        <li><i class="handle fas fa-arrows-alt-v"></i> Item 5</li>
        <li><i class="handle fas fa-arrows-alt-v"></i> Item 6</li>
        <li><i class="handle fas fa-arrows-alt-v"></i> Item 7</li>
    </ul>

    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="./jquery.ui.touch-punch.min.js"></script>
    <script>
    $(function() {
        $('#sortable').sortable({
            handle: 'i.handle',
            axis: 'y'
        });
        $('#draggable').draggable({
            handle: 'i.handle'
        });
    });
    </script>
</body>
</html>
```

【jQuery】リストのドラッグ＆ドロップの並び替えをスマホで実現したい

### 
ここに実現したいことを箇条書きで書いてください。
- [ ]　Tomcatのstartup.batが動かず困っています。
http://localhost:8080/に接続できない
せかチャン　spring boot#1と同じように設定しています。
Tomcat がおかしいと思い、tomcat が起動がうまくいかないことに気づき、
いろいろ試しましたが、tomcatが動かず困っています。


### 前提

ここに質問の内容を詳しく書いてください。
（例）
eclipse でspring bootを動かし、簡単なプログラムを動かしていますが、tomcatが起動せず、
localhost：8080　に作成したHTMLページを表示できず、困っています。

■■な機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ

```
コマンドプロンぷとでstart.upを実行すると、CATALINA_HOMEの環境変数の
設定のエラーが出ますが、CATALINA＿HOMEはC:\apache-tomcat-9.0.71にしています。
C:\apache-tomcat-9.0.71\bin>startup.bat
The CATALINA_HOME environment variable is not defined correctly
This environment variable is needed to run this program
```

### 該当のソースコード

```Fortune.java
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class Fortune {
	@RequestMapping("/fortune")
	public String start() {
			double fn = Math.random(); // 0.00～1.0の乱数
			if (fn >=0.7) {
				return "greatFortune.html";
			} else if (fn >= 0.4) {
				return "middleFortune.html";
			} else if (fn >= 0.1) {
				return "smallFortune.html";
			} else {
				return "misFortune.html";
		}
		
	}
}

```
```greatFortune.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>占い</title>
</head>
<body>
<h1>あなたの運勢は...大吉です！</h1>

</body>
</html>
```
### 試したこと
CATALINA＿HOMEはtomcatのあるフォルダにしています。余計なスペースはありません。
‪C:\apache-tomcat-9.0.71
Tomcatはc:ドライブ直下に置いています。

windowsセキュリティの設定を試しました。

### 補足情報（FW/ツールのバージョンなど）
eclipseのコンソールのエラーはこのようになっています。
エラー: メイン・クラスcom.example.demo.SampleWebApplicationを検出およびロードできませんでした
原因: java.lang.ClassNotFoundException: com.example.demo.SampleWebApplication

ここにより詳細な情報を記載してください。
windowsファイヤーフォールの設定や、クロムのポートの設定は試しました。
よろしくお願いします。

tomcatのstartup.batが動かず困っています。

ハンバーガーメニューを作ってます。
headerの中にハンバーガーメニューが入るようにHTMLを書いたつもりなのですが、画像のように右に飛び出してしまいます。
headerにposition: fixed;を書いたのが原因かと思いposition: fixed;を消してみたのですが一向に改善されません。

どなたかご享受いただけないでしょうか？

![イメージ説明](b181dccbc68a18be300ff1a4aac17d44.png)

```html


  
    <div id="header" class="wrapper">
      <header class="header">
        <div class="header-container">
          <h1 class="header-logo">
            <a href="index.html">
              <img src="img/logo.svg">
            </a>
          </h1>
          <div id="hamburger">
            <p class="btn-gNav">
              <span></span>
              <span></span>
            </p>
            <nav id="gNav" class="gNav">
              <ul class="gNav-menu">
                <li><a href="products.html">PRODUCTS</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="company.html">COMPANY</a></li>
                <li><a href="#">CONTACT</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </header>
    </div> 
  

```

```CSS
.wrapper {
  padding-top: 60px;
}

/* header */

.header {
  width: 1280px;
  height: 80px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 40px;
  z-index: 10;
  margin-top: 0;
  background-color: pink;
}

.header-logo {
  padding: 16px 0;
}

.header-logo img {
  width: 180px;
  height: 20px;
}

/*-- hamburger ------------------------------------*/

.header-container #hamburger .btn-gNav{
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 24px;
  z-index: 3;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.header-container #hamburger .btn-gNav span{
  position: absolute;
  width: 100%;
  height: 2px;
  background: #666;
  border-radius: 10px;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.header-container #hamburger .btn-gNav span:nth-child(1) {
  top:0;
}

.header-container #hamburger .btn-gNav span:nth-child(2) {
  top:10px;
}

.header-container #hamburger .btn-gNav.open span:nth-child(1){
  background: #fff;
  top: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.header-container #hamburger .btn-gNav.open span:nth-child(2),.header-container #hamburger .btn-gNav.open span:nth-child(3){
  top: 6px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

#gNav{
  position: fixed;
  top: 0;
  margin: 0;
  padding: 22px 50px;
  right: -100%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  font-size: 14px;
  box-sizing: border-box;
  z-index: 2;
}

#gNav.open{
  right: 0px;
}

#gNav .gNav-menu{
  width: 100%;
  height:100%;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-top: 20px;
  /*justify-content: left;*/

  animation-name: faderight;
  animation-duration: 2s;
}

@keyframes faderight {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

#gNav .gNav-menu li{
  display: block;
  padding-bottom: 14px;
}

#gNav .gNav-menu li a{
  color: #fff;
  text-decoration: none;
}



```

```jQery
$(function() {
  $('.btn-gNav').on("click", function(){

    $(this).toggleClass('open');
    $('#gNav').toggleClass('open');
  });

});

// メニューをクリックされたら、非表示にする
$(function() {
  $('.gNav-menu li a').on("click", function(){
     $('#gNav').removeClass('open');
  });
});
```

ハンバーガーメニューをヘッダーの中に入れたい

参考書片手にサーブレット＆JSPの勉強を始めたばかりのものです。

Eclipseも不慣れですが、こちらの上で　J2EEプレビューなどという　簡易Webサーバを立ちあげつつ
ブラウザで　初めてJSPで作成したWebページにアクセスすると　以下のエラーを招いてしまいます。　
```error
JSP support not configured
```　
![500エラー](de714a65974c25f283a07f059cf9b217.png)

私的には　
①コマンドプロンプトで　どこのカレントディレクトリでも、java　-versionで　"1.8.0_221"の応答をうける。【パスがとおっている】
②C:\Program Files (x86)に　java のフォルダがある。【お古のパソコンのため】
③システム環境変数JAVA_HOMEに　上記②のC:\Program Files (x86)\Java\jre1.8.0_221　の記載がある。【削除するも変わりない！】
というところを怪しんでいます。


### 【質問】
やはり**上記設定が災いしているのでしょうか？**
**どういった対策を施せば　JSPで作成したWebページをブラウザで　無事表示できるでしょうか？**

尚、Eclipseのワークスペースは　Dドライブにあります。
参考書どおり新しいプロジェクトをこのワークスペース内に作成したのですが、この際JREフォルダも仕上がった様子です。
これが本来活用されるのでは？　と素人考えをしているのですが　如何でしょうか？？？？？

EclipseでJ2EEプレビューなるWebサーバを立ち上げた際、以下のように　c:\Program Files(x86)　のパスを表示している部分があります。
![Eclipse](e0913c213792e9d9acc41f1de367a476.png)　
画像見づらくて　申し訳ありません。
ご見解をよろしくお願いします。

### 2020.07.28 09:10AM　追記
```java
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSPの基本</title>
</head>
<body>
	<h3>JSPの基本的なタグ</h3>
	<%-- JSPのコメント --%>
	<%!
		// 変数宣言
		String message = "Hello JSP World!!";
	%>
	<p>データの出力</p>
	<%= message %><br>
</body>
</html>
```

### 2020/08/03 23:25追記
![色々な種類](ef94adbb595b33133078e0f00c85fc50.png)

サーブレット & JSP 初歩の初歩、"JSP support not configured" というエラーの要因・対策を知りたい

###用語集
解説サイトA＝　https://logmi.jp/tech/articles/322067
画像A＝　https://img.logmi.jp/article_images/CnNjsbCDuXcau2y612zVvW.jpg
画像B＝　https://img.logmi.jp/article_images/8ueUvyGywcmH2rx8eTssCM.jpg

### 抱えている問題・実現したいこと

html・css・javascriptでゲームを作っているが、
「このwebページは多くのメモリを使用しています」と警告が出る。
無視していると強制的にブラウザがページを再読み込みさせてしまうらしい。
ゲームプレイ途中にページが再読み込みされて処理がリセットされては困るので
メモリリークについて理解し、対策を取りたい。
### 前提
いろいろ解説サイトを読んだが、中でもゲームについて言及している
解説サイトAをメインで読んでいます。
解説サイトAによるとクロージャーがメモリに関係ありそうなので、理解をしたいが、難しくて理解できないです。


###ガベージコレクションが発揮される条件が不明
画像Aに対して「ルートオブジェクトからたどれるものは消せないルール。だから、globalObjから辿り、something関数、NOT_USE_CLOSURE関数、localClosure変数は繋がりがあるので逐一消せなくなります」とありますが、globalObjはleakSampleスコープの中にあるのでルートオブジェクトではありませんよね？それともルートオブジェクトである「var test」のイコールの右辺の中にあるものは全てルートオブジェクトから辿れるとみなされるのですか？

###クロージャーを使わないケースを理解できない
解決先としてクロージャーを使わないソース(画像B)が載っていますが、このソースもクロージャーを使っていませんか？解説サイトAには「別のスコープのローカル変数を参照できる仕組み自体がクロージャ」とありました。画像Bにおいては、nonLeakSampleスコープのローカル変数であるglobalObjを、NOT_USE_CLOSURE関数スコープ内で参照しているので、そう思いました。

### 備考
以前
https://teratail.com/questions/280194
に質問しましたが、1つの実現したいこと・抱えている問題に対して課題が複数あったので、課題ごとに分けて質問する為、その理由を添えて削除依頼しました。削除依頼は運営にも受理され、現在は削除されています。運営に受理されたということで複数に分けて質問させていただきます。