More than 3 years have passed since last update.

Spring 案件ソルーション画面系2　手順書フォルダ

Last updated at 2021-05-23Posted at 2020-01-03

1 / 2

#Spring画面系をどう乗り切るか（技術面）その2

##CSS/jQueryを試してみる。
###趣旨
とんがった案件でなくてもSpring画面系で必要な技術　HTML　CSS　jQuery　Bootstrap
が出てくるのが当たり前になっている状況がある。

###公開しているページを改良しながら電卓を作ってみる
####参考にしたページ
https://codeforfun.jp/jquery-how-to-create-a-simple-calculator/
####修正内容
・４則計算記号を変更した。
→　それに伴って正規表現を使用した。
・gridを使用するようにした。
.ライブラリを使って電卓を表示するようにした。
####モジュール一覧
・calc.css
・calculator.png
・calculatorBasic.html
・form.html
・jquery.calculator.js
・jquery.calculator.min.js
・jquery.plugin.js
・jquery.plugin.min.js

####学習用アプリの画像貼り付け
####ソース抜粋

####作るもの

<script>
$(function(){
    $('.button').click(function(){
        var pushed = $(this).text();
        var inputLabel = $('#boxinputLabel');

        var h1Text = inputLabel.text();
        h1Text = h1Text.replace("×", "*");
        h1Text = h1Text.replace("÷", "/");
        if (pushed == '=') {
            // 計算
            inputLabel.text(eval(h1Text));
        } else if (pushed == 'AC') {
            // 全てクリア
            inputLabel.text('0');
        } else {
          　alert(inputLabel.text())
            console.log(inputLabel.text());
            if (inputLabel.text() == '0') {
                inputLabel.text(pushed);
            } else {
                inputLabel.text(inputLabel.text() + pushed);
            }
        }
    });
});

  <style>
* {
    font-family: 'Inconsolata', monospace;
    color: #555;
　}
body
{
      background-color: white;
}
body > * {
    margin: 3px;
    padding: 10px;
}
.container {
margin: auto;
padding:auto;
display: grid;
grid-template-columns: 40px 40px 40px 40px;
grid-template-rows: 50x 40px 40px 40px 40px 40px;
width: 220px;
background-color: #E0DEDA;
grid-gap: 20px;
    margin: 3px;
    padding: 10px;
}
.container > * {
align : center;
}
#boxinputLabel{
grid-column: 1 / span 4;
grid-row-start: 1;
grid-row-end: 2;
background-color: #DFE9E9;
padding-left: 1rem;
padding-right: 1rem;
}

#boxAC {
grid-column: 1 / span 3;
grid-row-start: 2;
grid-row-end: 2;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box÷ {
width:10%;
grid-column: 4/ span 1;
grid-row:2;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box7 {
width:10%;
grid-column: 1/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;

}
#box8 {
width:10%;
grid-column: 2/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#box9 {
width:10%;
grid-column: 3/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box× {
width:10%;
grid-column: 4/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box4{
width:10%;
grid-column: 1/ 4;
grid-row:4;
background-color: white;
grid-gap: 10px;
padding-left: 1rem;
padding-right: 1rem;
}
#box5{
width:10%;
grid-column: 2/ 4;
grid-row:4;
background-color: white;
grid-gap: 10px;
padding-left: 1rem;
padding-right: 1rem;
}
#box6{
width:10%;
grid-column: 3/ 4;
grid-row:4;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#boxMinus{
width:10%;
grid-column: 4/ 4;
grid-row:4;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#box1{
width:10%;
grid-column: 1/ 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box2{
width:10%;
grid-column: 2/ 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#box3{
width:10%;
grid-column: 3/ 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#boxPlus{
width:10%;
grid-column: 4 / 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#box0{
grid-column:1 / span 2;
grid-row:6;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#boxTen{
width:10%;
grid-column: 3/ 4;
grid-row:6;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#boxEqual{
width:10%;
grid-column: 4/ 4;
grid-row:6;
background-color: white;
grid-gap: 10px;
padding-left: 1rem;
padding-right: 1rem;
}
© 2020 GitHub, Inc.

<html>
<head>
<meta http - equiv="Content-Type" content="text-html; charset=UTF-8">
<title>登録フォーム</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
	$("form").submit(function(){
		var checksubmit = true;
		if($("#uname").val() == ""){
			checksubmit = false;	
		}
		
		if($(":radio:checked").length == 0){
			checksubmit = false;
		}
		return checksubmit;
	});		
});
</script>
</head>
<body>
<form>
キャストID<br>
<input type="text" name="id" id = "id">
<br><br>
パスワード<br>
<input type="text" name="pass" id = "pass">
<br><br>
キャスト名（必須）<br>
<input type="text" name="uname" id = "uname">
<br><br>
<input type="submit" value="登録する">
</form>
</body>
</html>

【URL】
以前IBMクラウドに乗せたもの。
https://paasjqueryflask1001.mybluemix.net/
【Github】
ダウンロードしていただければ説明していた通りの動きをするはず。
https://github.com/noikedan/flask-sample
【言語・FW】
・HTML/CSS/ JQuery（jQuery UI）
・Flask
【開発環境】
・mi
・Atom
【インフラ等】
・IBM Cloud
IBMクラウドへの乗せ方はこちらを参考にしてください。
https://qiita.com/makaishi2/items/21cbdb99444fb50e01e1

###Formの練習をしてみる。

http://www.awsginaexample.com.s3-website-ap-northeast-1.amazonaws.com/form1.html
http://www.awsginaexample.com.s3-website-ap-northeast-1.amazonaws.com/form2.html

##やって見て
練習にはなると思う。やらないよりはマシ以上の手応えは感じると思う。
・クラスとIDの違いを実感する。
・JQueryになれる。
・ソースを読む体験ができる。
など

Spring 案件ソルーション 1
https://qiita.com/gina/items/02f64562b6928606c716
Spring 案件ソルーション 2
https://qiita.com/gina/items/7f027db7a3ba91266c59

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Spring 案件ソルーション画面系2 手順書フォルダ

Spring 案件ソルーション画面系2　手順書フォルダ