常連

こんにちは。
この間アマゾンのサイトにログインしていたのですが、上部の人間のアイコンが動くことに気づきました。

面白いと思って大変興味を持ったのですが、ググってもなんの技術か出てきません。

このアイコンはなんの技術を使用しているのでしょうか。
https://www.youtube.com/watch?v=RyBabnTyXQw

アマゾンの動くアイコンについて

###前提・実現したいこと

javaで禁則文字チェックを作成しています。

禁則文字はプロパティで保持し、javaで取得した際にエスケープが必要な文字が含まれていた場合は
その文字に対してエスケープ処理をしたいです。

禁則文字の一覧は変更可能な設定のため、プロパティの禁則文字じたいにエスケープ処理はいれられません。
あくまでJavaで取得した後に、エスケープ処理をいれたいです。

１．プロパティで保持する禁則文字 ： !"#*$%&'()-^\@[;:],./\
２．エスケープが必要な文字    ： ¥ * + . ? { } ( ) [ ] ^ $ - | " 

上記「1.」で取得した禁則文字列内に「2.」に該当する文字がある場合は、エスケープ処理を施したいです。

エスケープ前の文字列：!"#$%&'()-^\@[;:],./\
エスケープ後の文字列：!\"#\*\$%&'\-\^\@\[;:\],\./\\



###該当のソースコード
public static void main(String[] args) throws IOException {

	BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
	while (true) {
		System.out.println("文字列を入力してください。");
		String str = br.readLine();
		idCheck(str);
	}
}

private static void idCheck(String i) {

	// 禁則文字
	String str = "!"#$%&'()-^\@[;:],./\"

    // ここにエスケープ処理を実装したいです

	if (i.matches(".*[" + str + "]+.*")) {// ここで違反文字を判定
		System.out.println("NG");
	} else {
		System.out.println("OK");
	}
}

java 記号文字のエスケープ処理について

### 前提
Wordpressの記事絞り込み検索にて、[このページの専有面積部分](https://suumo.jp/sp/chintai/tokyo/sc_101/cond/?moreCond=1)ような事をしたいと思い錯誤しています。
　
　
### 実現したいこと
初めにpriceと言うカテゴリーを作り、中に

「100万円、200万円、300万円、400万円、500万円、600万円、700万円、800万円、900万円、1000万円」

上記のように計12個の分類を作成をしました。
※スラッグがそれぞれ「price100～price1000」で設定しています。

これを元に絞り込み検索フォームを作成しようとした所、範囲検索（下減なしから500万円まで）などを実装する方法及びValue内を表示させる所で躓いてしまっております。
　
　
### 試した事①
初めに範囲検索の定番でもあるinput type="range"を使ってみましたが、そもそも値の部分が数字でしか設定が行えなかった為
[この方法](https://cdn.codegrid.net/2018-customizing-input-range/demo/5.html)に沿って行ってみましたが
```ここに言語名を入力
<div>総額：<span class="price_text"></span></div>
<input type="range" list="price-datalist" class="price-data" step="12">
<datalist id="price-datalist">
  <option value="">下限なし</option>
  <option value="price100">100万円</option>
  <option value="price200">200万円</option>
  <option value="price300">300万円</option>
  <option value="price400">400万円</option>
  <option value="price500">500万円</option>
  <option value="price600">600万円</option>
  <option value="price700">700万円</option>
  <option value="price800">800万円</option>
  <option value="price900">900万円</option>
  <option value="price1000">1000万円</option>
  <option value="pricemax">上限なし</option>
</datalist>

<script>
function render (output, value) {
  output.innerHTML = value
}
const input = document.querySelector('.price-data')
const output = document.querySelector('.price_text')
input.addEventListener('input', function (e) {
  render(output, e.target.value)
}, false)
render(output, input.value)
</script>
```
上記のように試してみましたが値を拾って貰えず、また<span class="price_text"></span>の部分も50と言った風に出てしまい、Value内容やラベル内容の表示もされませんでした。
　
rangeですと、やりたい事が行えないと思い、次にチェックボックスを用いた方法で下記方法を試してみました。
### 試した事②
```
<div class="sample">
    <input type="checkbox" name="s3" id="select1" value="" checked="">
    <label for="select1"></label>
    <input type="checkbox" name="s3" id="select2" value="price100">
    <label for="select2"></label>
    <input type="checkbox" name="s3" id="select3" value="price200">
    <label for="select3"></label>
    <input type="checkbox" name="s3" id="select4" value="price300">
    <label for="select4"></label>
    <input type="checkbox" name="s3" id="select5" value="price400">
    <label for="select5"></label>
    <input type="checkbox" name="s3" id="select6" value="price500">
    <label for="select6"></label>
    <input type="checkbox" name="s3" id="select7" value="price600">
    <label for="select7"></label>
    <input type="checkbox" name="s3" id="select8" value="price700">
    <label for="select8"></label>
    <input type="checkbox" name="s3" id="select9" value="price800">
    <label for="select9"></label>
    <input type="checkbox" name="s3" id="select10" value="price900">
    <label for="select10"></label>
    <input type="checkbox" name="s3" id="select11" value="price1000">
    <label for="select11"></label>
    <input type="checkbox" name="s3" id="select12" value="">
    <label for="select12"></label>
</div>

<style>
.sample input{
	display: none;
}
.sample label{
	display: inline-block;
	float: left;
	cursor: pointer;
	width: 80px;
	height: 30px;
	margin: 0;
	padding: 0 5px;
	border-right: 0px solid #abb2b7;
	background: #ccct;
	font-size: 14px;
	text-align: center;
	line-height: 1;
	transition: .2s;
}
.sample label:first-of-type{
	border-radius: 3px 0 0 3px;
}
.sample label:last-of-type{
	border-right: 0px;
	border-radius: 0 3px 3px 0;
}
.sample input[type="radio"]:checked + label {
	background: #fff000;
	position: relative;
	color: #fff;
}
</style>
```
この方法ですと、1つ越えて選択をしてしまったり、また1番高い値をチェックしてもそれより低い部分（左）までチェックが自動で出来なかったので、うまくいきませんでした。

理想は、[このページの築年数部分](https://suumo.jp/sp/chintai/tokyo/sc_101/cond/?moreCond=1)のように、rangeを使ったような挙動でチェックボックスなどで同等の動きが出来き、別箇所にValue内容を表示できるような仕組みなのですが、試した事以外で方法などが見つからず躓いております。

お手数では御座いますが、お知恵お借りできれば幸いです。

完全にドツボにはまってしまっており、まとまりのない文章で申し訳ございません。

よろしくお願いいたします。

チェックボックス、もしくはラジオボタンを用いた絞り込み検索でinput type=rangeのような挙動で行いたい

###前提・実現したいこと
掲題の通りなのですが、javaでログ出力（イベントログ的）の機能を作成したいです。

複数プロセスから同時に書込みがされる事を考え排他制御を行いたいのですが、
素人考えで作成すると排他制御できずにログ内容が混ざって出力されたりすることが不安です。

通常、javaでログ出力機能を作成する場合、どのような方法を取るのでしょうか？
簡単な方法があるのでしょうか？ご教授お願いいたします。

また、排他制御は大きく分けて以下の2パターンになるかと思うのですが、パターン（１）は実現可能でしょうか？
（１）ログ書込み前に排他を取り、既に取られている場合、開放されるまで待機し、解放後処理継続する。
（２）ログ書込み前に排他を取り、既に取られている場合、一定時間待機し、規定回数リトライを行う。一定期間内に排他が開放された場合、ログ出力を行い、開放されなかった場合、ログ出力エラーで例外扱いとする。

質問ばかりで申し訳ありませんが、ご回答の程宜しくお願い致します。


###補足情報(言語/FW/ツール等のバージョンなど)
使用しているのは、java7になります。


###該当のソースコード
package jp.sample;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.channels.FileChannel;
import java.nio.channels.FileLock;

/**
 * ログ出力機能のサンプルクラスです。
 *
 */
public class LogWritter {

    /** 最大リトライ回数 */
    private static final int MAX_RETRY_COUNT = 3;

    /** インターバル（ミリ秒） */
    private static final int RETRY_INTERVAL = 10000;

    public static void main(String[] args) throws IOException {

        logWritter("user123", "OK", "2016-0807-1200-00");
    }

    /**
     * ログ出力の処理です。（引数はとりあえず固定値）
     *
     * @param userId ユーザーID
     * @param result 処理結果
     * @param trunDate 処理日時
     * @throws IOException
     */
    private static void logWritter(String userId, String result, String trunDate) throws IOException {

        // ログ出力内容を編集する
        StringBuilder sb = new StringBuilder();
        sb.append(userId);
        sb.append(result);
        sb.append(trunDate);
        sb.append(System.getProperty("line.separator")); // 改行コード

        File file = new File("C:/work/log/test.log");
        FileOutputStream fs = null;
        int retryCount = 0;
        try {
            while (true) {
                if (retryCount > MAX_RETRY_COUNT) {
                    break;
                }
                fs = new FileOutputStream(file, true);
                FileChannel ch = fs.getChannel();
                FileLock lock = null;
                try {
                    lock = ch.tryLock(); //ロックを取得

                    // 他プロセスがロック取得してない場合、ログ出力処理を行う。
                    // ロックがかかっていた場合、1秒待機後にリトライを行う。
                    if (lock != null) {
                        fs.write(new String(sb).getBytes("UTF-8"));
                        break;
                    } else {
                        Thread.sleep(RETRY_INTERVAL);
                        retryCount++;
                    }

                } catch (InterruptedException e) {
                    System.out.println("Thread.sleepで例外発生");
                    e.printStackTrace();
                    break;
                } finally {
                    if (lock != null) {
                        System.out.println("排他ロックの開放");
                        lock.release();
                    }
                }
            }
        } finally {
            if (fs != null)
                System.out.println("ファイルストリームのクローズ");
            fs.close();
        }
    }
}

javaでログ出力の排他制御を行いたいですのが、どのような手段があるのでしょうか？

java,HTML,CSS,MySQLをほんの少しかじった程度の学生なのですが
、javascriptを用いてオンライン上でのチャットシステムを作りたいです。javascriptの学習を始めたいのですが何から学習を始めればよいでしょうか。


javascriptのチャットシステム

### 前提・実現したいこと

課題で、JavaのCRUDアプリを作成しています。
学生が授業の登録をして、授業一覧と登録した学生をブラウザに（特に絞らず全件）表示させるアプリです。

コードをそのまま記載できないので質問がわかりづらくなります、申し訳ないです。

【課題の前提】
・MySQLを使う、テーブルはすでにできているので作成しなくてよい。
・学生のテーブルと、授業のテーブルがありOneToMany（学生対授業）となっている。
・配布された未完成のファイルの穴を埋めるようにする。**すべて使わなくともいいし、加えてもよい。**
・Javaだがどのような技術を使うかはわからない（Spring bootはこれからやるので違う）。

100時間以上考えたのですが、どうしても詰まってしまったので質問させてください。
今回は「どのクラスにどんな役割がある（と予想される）のか」を教えていただきたいです。

どうぞよろしくお願いいたします。

### 発生している問題・エラーメッセージ

```
配布されたファイルが、どれがどの役割を持ったものかわかりません。

以下の６つのjavaファイルがあり、

User.java
Lesson.java
Bean.java
UserBean.java
UserRepository.java
UserService.java

それぞれ以下のような記載がありました。

User.java　←@Entity（setter/getterがずらずら並んでいる）
Lesson.java　←@Entity（setter/getterがずらずら並んでいる）
Bean.java　←Loggerやserializableがある
UserBean.java　←postconstructやgetListがある
UserRepository.java　←interfaceやJpaRepositoryがある
UserService.java　←@serviceやfindList()がある

上2つはエンティティということはわかったのですが、他は何を書く（と思われる）ものなのでしょうか？
一番下の「UserService.java」はfindListと書いてあったので検索などの実際の機能を入れておくところかと思いました。
```


### 試したこと
とにかく途中まで似ているソースコードをウェブ上から探し出して入力してみましたがどれもうまくいきませんでした。
色々な解説サイトを見たり書籍を買ってみたりしましたが、同じやり方（ファイル構成）でアプリケーションを作っているものが見つかりませんでした。
似ているものを作っていてもDao、facade、Bean、Controllerなど概念が異なっており、本課題にあてはめるならばどのクラスに記述すればよいのかがわかりませんでした。

JavaのCRUDアプリを作成したいが各クラスの役割がわからない

※内容修正しました（16：00）
よろしくお願いいたします。
jsfで作った画面に、Javaでコードを記述し実装ししています。
今回やりたい事は、**commandLinkからの違うページへの遷移**です。

表に任意のデータを入力し、検索ボタンを押下すると、商品の検索結果が出ます。
検索結果の一番右のカラムには、**「商品詳細」とかかれたcommandLinkを都度表示させ、このリンクを押下すると
任意の違うページに遷移するようにしたい**です。
下記図のように、
![イメージ説明](b53d49a3e6a5c439f15191386d0e7175.png)

検索結果が出る際に、「商品詳細」commandLinkを表示させることは出来たのですが、
押下後の画面遷移の実装がわかりません。

さらに、outputLinkを追記してURLを表示させ、それを押下すれば画面遷移はできたのですが、（参：下記図）
![イメージ説明](56b84755d093fbe2249331ef9e4d06e2.png)
青のcommandLinkから画面遷移がしたいのです。

[JSFによるWebアプリケーション開発](http://www.atmarkit.co.jp/fjava/special/jsf02/jsf02_02.html)や、
[JSF HTMLタグサンプル](http://muimi.com/j/jsf/htmltag/)などを参考にしてみたのですが、具体的な方法がわからず
有職者の皆様方にご教示を頂きたく存じます。

**下記ソースを参考に、どうぞお知恵をお貸しください。**

**■画面（xhtml）のjsfコード（商品詳細リンク部分）**
```ここに言語を入力
…
中略
…

<h:commandLink value="商品詳細"

						disabled=""
						class="btn-xs btn-info "
						actionListener="#{goodsSearchBean.attrListener}"
						action="#{goodsSearchBean.detailAction}">
//この一行を使わずに、commandLinkだけで画面遷移がしたい→</h:commandLink><h:outputLink value="http://localhost:8080/hoge/jsp/hoge/hoge/Test.xhtml">
    					<h:outputText value="test.com"/>
```

【jsf　java　webアプリ】commandLink押下後、任意の違うページに遷移したい

よろしくお願いいたします。

CSS超初心者です。
現在、webアプリ開発の中で**jsf**を初めて使う事になり、それにあたって**CSS**の勉強もしながら下記画面を作っています。

![イメージ説明](1d63643c6dd46fcf010930a0c3ca83c2.png)

**この画面を、「分類」を左側にそのまま配置し、
・「部門」
・「品番」
・「商品名」
・「仕入先コード」
・「仕入先名」
を縦に並べて「分類」の左側に配置したいと思っています。**
わかりにくくて汚いですが、以下の画像ような感じです。
![イメージ説明](da3a3ba9a98b986f9afb2d73d8210450.png)


ソースは下記に記してありますが、このままのコードではこれ以上の配置換えはできません。
そこで、**「分類」側に「rowspan="5"」などを配置すればうまくいくのでは？**と上司よりヒントをもらったのですが、**どこに配置すればよいのかうまく理解が出来ずレイアウトが崩れるばかり**です。
・以下ソース
```<table class="table-condensed table-form" style="border-collapse: separate;width: 1000px;">
						<tr>
							<th style="text-align:center;">分 類</th>
								<td style="width: 300px;">

							<table class="table-category" style="border-collapse: separate;">
								<tr>
								<th style="font-weight:lighter;">大分類</th>
									<td >
										<h:selectOneMenu id="cate1" styleClass="form-control" style="min-width:235px;"></h:selectOneMenu>
									</td>
								</tr>

								<tr>
								<th style="font-weight:lighter;">中分類</th>
									<td>
									<h:selectOneMenu id="cate2" styleClass="form-control" style="min-width:200px;"></h:selectOneMenu>
									</td>
								</tr>
								<tr>
								<th style="font-weight:lighter;">小分類</th>
									<td>
										<h:selectOneMenu id="cate3"  styleClass="form-control"  style="min-width:200px;"></h:selectOneMenu>
									</td>
								</tr>
								<tr>
								<th style="width:60px; font-weight:lighter;"> 細分類</th>
									<td>
										<h:selectOneMenu id="cate4"  styleClass="form-control"  style="min-width:200px;"></h:selectOneMenu>
									</td>
								</tr>
							</table>
							</td>
						</tr>

						<tr>

							<th style="text-align:center;">部 門</th>
							<td>
								<h:selectOneMenu  styleClass="form-control">
								</h:selectOneMenu>
							</td>
							<th style="text-align:center;">品 番</th>
							<td><h:inputText id="hinban" class="form-control"/></td>
							<th style="text-align:center;">商品名</th>
							<td><h:inputText id="hinmei" class="form-control" /></td>
							<td class="escape" colspan="2"/>
						</tr>
						<th style="text-align:center; width:100px; height:10px;">仕入先コード</th>
							<td><h:inputText id="suppliercd" class="form-control" /></td>
						<th style="text-align:center;">仕入先名</th>
							<td><h:inputText id="suppliernm" class="form-control"/></td>
							<td class="escape" colspan="2"></td>

						</table>
```

**「rowspan」のやり方はもちろん、他の方法でも構いません**ので有職者の皆様、実現方法のご教示の程お願いいたします。

JavaServer Faces