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

CSS/Jqueryを試してみる。

趣旨

とんがった案件でなくてもSpring画面系で必要な技術　HTML　CSS　jQuery　Bootstrap
が出てくるのが当たり前になっている状況がある。今回は公開しているページを改良しながら
電卓を作ってみることによりCSS/Jqueryの練習をしてみようと思う。

参考にしたページ

https://codeforfun.jp/jquery-how-to-create-a-simple-calculator/

修正内容

・　４則計算記号を変更した。
→　それに伴って正規表現を使用した。
・　gridを使用するようにした。

モジュール一覧

・calc.html
・calc.css

学習用アプリの画像貼り付け

プログラム部分

<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: 80px 40px 40px 40px 40px 40px;
width: 220px;
background-color: #E0DEDA;
grid-gap: 20px;
}
.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;
}

IBMCloud上に乗せたもの。

Flaskアプリ上に先ほどのアプリを乗せている。
試せる。

https://flask-sample-jquery.mybluemix.net/
参考　URL
https://www.ibm.com/cloud/blog/simple-hello-world-python-app-using-flask

今後

気になっているところ
→　Form＋Jquery

100日チャレンジの202日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

202日目は

おはようございます
202日目

udemyでcss+メディアクエリ、webサイトコーディング、Git
いろいろやった。

休みがあと3日でおわるので、あと3つぐらい講座おわらせたい#100DaysOfCode #早起きチャレンジ#駆け出しエンジニアと繋がりたい

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 2, 2020

動画版：https://youtu.be/HtZjECM1M4I

渋谷という街は、かつてビットバレーと呼ばれ
IT企業の聖地とされてきました。

残念ながら、いまでは世界とだいぶ差をつけられていて
ビットバレー(笑) みたいなところはありますが
いまなお国内のIT企業がひしめきあう場所です。

そんな渋谷には、フロントエンドエンジニアなら見つけなければならない
フロントエンドの最新技術が散りばめられています。

第1問: フロントエンドを見つけなさい

1枚目	2枚目	3枚目

お分かりいただけただろうか？

これは ブロークングリッドレイアウト というWebデザインです。

ブロークングリッドレイアウトとは？

綺麗に整えられたグリッドレイアウトをあえて崩すことによって
オリジナリティを演出するデザイン手法です。

2017年頃からWebデザインでも採用されるようになりました。

marginで実現しているサイトが多い

今回頭の片隅に入れておくべき情報としては2つあって
1つは、ブロークングリッドレイアウトを実装する場合はmarinをズラして実現しているサイトが多いこと。

やはり奇抜なデザインが来ると
position: absoluteとか使いたくなるのですが
まあ当然副作用もあるので、世の中のブロークングリッドレイアウトのサイトでは
結構marginで実現しているものが多い印象です。

参考：
- https://frame-optik.de
- http://www.dhf.co.jp

display: gridで実現している猛者がいた

2つ目は、ブロークングリッドレイアウトを、わざわざgridレイアウトで実現している猛者がいました。

.grid1 {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
  grid-template-rows: 100px auto 15px auto auto;
}

出典：
- https://codepen.io/tutsplus/pen/oqpyBE
- https://webdesign.tutsplus.com/tutorials/create-a-broken-grid-layout-using-css-grid--cms-30870

gridレイアウトで実現できるなら、当然marginをズラすよりもシステマティックに実装できると思うので
今後ブロークングリッドレイアウトの実装があるときは、攻めの一手としてはアリかもしれません。

まとめ

このように、渋谷にはフロントエンドの最新技術が散りばめられているのですが
いきなりおかしなことすると、みんなビックリしてしまうかもしれないので
今回は1問のみとします。