WIFI-ID:TP-LINK_3948
PASS :55784405
URL:https://onefall.co.jp/knowledge/doc/index_java.html/
本講座の対象者
・WEBアプリ作成したい人
・dockerで環境構築したい人
・docker-composeで環境構築したい人
・SpringBoot環境構築したい人
・SpringBootアプリ作成したい人
本講座のゴール
・JavaフレームワークSpringBootについて理解します。
・docker-composeについて理解します。
・docker-composeでSpringBoot環境のWEBアプリ構築について理解します。
自己紹介
氏名：梅本 利春：フリーランスエンジニア（15年くらい）
出身：北海道紋別郡湧別町
経歴：WEBアプリ（主にバックエンド）、Androidアプリ、GUIアプリなど
使用言語：Go/Java/Android/C#/Ruby/Python/Javascript
使用DB：Oracle/Postgresql/MySQL/SQLite
プログラミング言語シェア
プログラミング言語求人数
ハンズオンの流れ
１．Dockerセットアップ
２．JDKセットアップ
３．Sprint Tool Suite4環境構築
４．Docker環境構築
５．SpringBootで画面アプリ作成
時間があれば・・・
６．Docker概要
７．SpringBoot概要
８．SpringBootで登録機能作成
９．DBVearセットアップ
１０．さくらエディタセットアップ
１．Dockerセットアップ
（64bit Windows 11/Windows 10 Pro/10Pro以外)
Windows環境構築(64bit Windows 10 Pro)
１．Docker for Windowsのダウンロード
URL：https://docs.docker.com/docker-for-windows/install/
「Download from Docker Store」選択
「Get Docker」選択
２．Docker for Windowsのインストール
そのまま「OK」を選択
//バージョン確認
>docker --version
Docker version 20.10.21
>docker-compose --version
docker-compose version 2.13.0
Mac環境構築
バージョン確認
$ docker --version
Docker version 20.10.21
>docker-compose --version
docker-compose version 2.13.0
２．JDKセットアップ（Windows）
JDK17.0.6のダウンロード
URL：https://www.oracle.com/technetwork/java/javase/downloads/index.html
「Java17」タブ選択、Java 17.0.6のDownloadリンク選択
※Java17が表示されてない場合はJava19を選択
Windows： 「Accept」選択後、「jdk-17.0.6_windows-x64_bin.exe」選択してダウンロード
Mac ： 「Accept」選択後、「dk-17.0.6_osx-x64_bin.dmg」選択してダウンロード
ダウンロードされたファイルを実行
１．次へ
２．インストール先を入力して次へ
３．次へ
４．インストールされた旨の画面に進んだので「閉じる」選択
JAVA_HOME設定
１．コントロールパネル⇒システム⇒システムの詳細設定⇒環境変数
２．システム環境変数に「JAVA_HOME」があれば選択、編集ボタン、なければ新規ボタンを選択
※存在する場合は既存のアプリケーションに影響しますので終了後に戻してください。
３．インストールしたホームディレクトリを入力
例：C:\ProgramFIles\Java\jdk-17
確認
１．DOSを開く
java -version #java version "17.0.6" 2023-01-17 LTS
path #jdkのbinパスが出力されることを確認：C:\Program Files\Java\jdk-17\bin;
２．JDKセットアップ（Mac）
JDK17のダウンロード
URL：https://www.oracle.com/technetwork/java/javase/downloads/index.html
Java SE 17.0.6(LTS)の「Download」選択
Windows： 「Accept」選択後、「jdk-17.0.6_windows-x64_bin.exe」選択してダウンロード
Mac ： 「Accept」選択後、「dk-17.0.6_osx-x64_bin.dmg」選択してダウンロード
ダウンロードされたファイルを実行
１．ダブルクリック
２．続ける
３．インストール
４．閉じる
５．バージョン確認
#バージョン確認 java version "17.0.6" 2023-01-17 LTS
java -version
JDKのアンインストール※参考まで
cd /Library/Java/JavaVirtualMachines
ls #jdk確認
#ファイル命名：/Library/Java/JavaVirtualMachines/jdkmajor.minor.macro[_update].jdk
# jdk1.7.0_80.jdkをアンインストールする場合
sudo rm -rf jdk1.7.0_80.jdk
STS4インストール
１．適当な場所にsampleフォルダを作成します。
２．docker-compose.yml作成します。ファイル名：docker-compose.yml
version: '3'
services:
db:
image: postgres:10.1
ports:
- "5432:5432"
volumes:
- postgres-db:/var/lib/pgsql/data
volumes:
postgres-db:
driver: local
３．起動
docker-compose up -d
４．DBサーバ接続、環境設定
docker ps #dockerコンテナID取得
docker exec -it コンテナID bash #DBサーバ接続
su - postgres #postgresユーザ切替
psql -U postgres #DB接続
create user java_user with password 'java_user'; #java_userユーザ作成
create database java_db; #java_dbデータベース作成
\q #DB切断
psql -U postgres -d java_db #postgresユーザでjava_db接続
ALTER ROLE java_user WITH SUPERUSER; #ユーザ権限設定
CREATE SCHEMA java_user; #スキーマ作成
\q #DB切断
psql -U java_user -d java_db #java_userユーザで接続
create table java_user.uketuke (UKE_NO SERIAL,SEI_NAME varchar(100), MEI_NAME varchar(100) ,NK_ADD varchar(13), NM_ADD1 varchar(200), NM_ADD2 varchar(200) , NM_ADD3 varchar(200) ,NK_TEL varchar(15), GENDER_NO varchar(2), BIRTHDAY_DT timestamp without time zone , NK_MAIL varchar(300), NK_PASS varchar(50) );
ALTER TABLE java_user.uketuke ADD PRIMARY KEY(UKE_NO); #プライマリーキー追加
INSERT INTO java_user.uketuke ( SEI_NAME,MEI_NAME,NK_ADD,NM_ADD1,NM_ADD2,NM_ADD3,NK_TEL,GENDER_NO,BIRTHDAY_DT,NK_MAIL,NK_PASS) VALUES ( 'umemoto','toshiharu1','111-0001','kanagawa','yokohamasi-kohoku-ku','tunasima3-5-33','09012345678',1,'1979-05-22','test1@gmai.com','test');
INSERT INTO java_user.uketuke ( SEI_NAME,MEI_NAME,NK_ADD,NM_ADD1,NM_ADD2,NM_ADD3,NK_TEL,GENDER_NO,BIRTHDAY_DT,NK_MAIL,NK_PASS) VALUES ( 'umemoto','toshiharu2','111-0002','kanagawa','yokohamasi-kohoku-ku','tunasima3-5-34','09012345679',0,'1979-05-23','test2@gmai.com','test');
INSERT INTO java_user.uketuke ( SEI_NAME,MEI_NAME,NK_ADD,NM_ADD1,NM_ADD2,NM_ADD3,NK_TEL,GENDER_NO,BIRTHDAY_DT,NK_MAIL,NK_PASS) VALUES ( 'umemoto','toshiharu3','111-0003','kanagawa','yokohamasi-kohoku-ku','tunasima3-5-35','09012345670',1,'1979-05-24','test3@gmai.com','test');
INSERT INTO java_user.uketuke ( SEI_NAME,MEI_NAME,NK_ADD,NM_ADD1,NM_ADD2,NM_ADD3,NK_TEL,GENDER_NO,BIRTHDAY_DT,NK_MAIL,NK_PASS) VALUES ( 'umemoto','toshiharu4','111-0004','kanagawa','yokohamasi-kohoku-ku','tunasima3-5-36','09012345671',0,'1979-05-25','test4@gmai.com','test');
INSERT INTO java_user.uketuke ( SEI_NAME,MEI_NAME,NK_ADD,NM_ADD1,NM_ADD2,NM_ADD3,NK_TEL,GENDER_NO,BIRTHDAY_DT,NK_MAIL,NK_PASS) VALUES ( 'umemoto','toshiharu5','111-0005','kanagawa','yokohamasi-kohoku-ku','tunasima3-5-37','09012345672',1,'1979-05-26','test5@gmai.com','test');
\q #DB切断
機能概要
データベースからユーザー情報を取得して一覧表示
１．プロジェクト作成
パッケージエクスプローラ右クリック⇒新規⇒Spring スターター・プロジェクト
名前：test20230325
タイプ：Gradle
パッケージ：com.example
その他はそのままで次へ
Spring Bootバージョン：3.0.5
依存関係は下記を選択
Spring Web ：URL MappingなどのAPIを提供
Thymeleaf：テンプレートエンジン。HTMLでフロント作成できる。
JDBC API：DBドライバ
PostgreSQL Driver：DB
Lombok：アノテーション（@Data）でgetter/setterなどを自動生成
ファイル構成
ファイル構成（Maven標準ディレクトリ）
test20181223
├── src/main/java # 作成するアプリケーション/ライブラリのソースコード。
│ └── com.example #★
│ └── Test20181223Application # メインクラス
├── src/main/resources #★ 作成するアプリケーション/ライブラリのリソース。
│ ├── static # js/cssファイル格納用
│ ├── templates # テンプレートエンジン。HTMLが格納される
│ └── application.properties # 設定情報：DB接続/ポート番号
├── src/test/java #
│ └── com.example #
│ └── Test20181220ApplicationTests # 検証用クラス
├── JREシステムライブラリ # ライブラリ
├── Maven依存関係 # Maven依存関係
├── target/generated-sources/annotations # ソースコード生成
├── target/generated-test-sources/test-annotations # テスト用ソース生成
├── src # ディレクトリ
│ ├── main #
│ └── test #
├── target # ディレクトリ
│ ├── generated-sources #
│ └── generated-test-sources #
├── mvnw # Maven Warapperラッパースクリプト。バージョン互換性に対応
├── mvnw.cmd #
└── pom.xml # 依存関係
設定：src/main/resources/application.properties
application.properties：設定情報
※コピペする際はコメント欄は除外してください。
spring.datasource.url=jdbc:postgresql://localhost:5432/java_db
spring.datasource.username=java_user
spring.datasource.password=java_user
spring.datasource.driver-class-name=org.postgresql.Driver
server.port=8000
#コメント欄
#spring.datasource.url=jdbc:postgresql://localhost:5432/java_db PostgreSQLデータベース：Win10ProまたはMac
#spring.datasource.url=jdbc:postgresql://192.168.33.10:5432/java_db PostgreSQLデータベース：Vagrant環境※環境に応じて変更
#spring.datasource.username=java_user PostgreSQLユーザー
#spring.datasource.password=java_user PostgreSQLパスワード
#spring.datasource.driver-class-name=org.postgresql.Driver PostgreSQLドライバ
#server.port=8000 Webポート番号
WEBサーバー起動
起動確認：Webサーバを起動してログ上でエラーが発生していないか確認してください。
Uketukeクラス作成：src/main/java/com/example/Uketuke.java
Uketuke.java：Uketukeテーブルとマッピング（DBと連携）
package com.example;
import lombok.Data;
@Data
public class Uketuke {
private int ukeNo;
private String seiName;
private String meiName;
private String nkAdd;
private String nmAdd1;
private String nmAdd2;
private String nmAdd3;
private String nkTel;
private String genderNo;
private String birthdayDt;
private String nkMail;
private String nkPass;
}
UketukeMapperクラス作成：src/main/java/com/example/UketukeMapper.java
UketukeMapper.java：ORマップ定義。DBから取得したデータをUketukeクラスにセット
※コピペする際は開始タグ＜が全角の為、半角に修正お願いします。
package com.example;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import org.springframework.jdbc.core.RowMapper;
public class UketukeMapper implements RowMapper＜List＜Uketuke>> {
public List＜Uketuke> mapRow(ResultSet rs, int rowNum)
throws SQLException {
List＜Uketuke> list = new ArrayList<>();
do {
Uketuke uketuke = new Uketuke();
uketuke.setUkeNo(rs.getInt("uke_no"));
uketuke.setSeiName(rs.getString("sei_name"));
uketuke.setMeiName(rs.getString("mei_name"));
uketuke.setNkAdd(rs.getString("nk_add"));
uketuke.setNmAdd1(rs.getString("nm_add1"));
uketuke.setNmAdd2(rs.getString("nm_add2"));
uketuke.setNmAdd3(rs.getString("nm_add3"));
uketuke.setNkTel(rs.getString("nk_tel"));
uketuke.setGenderNo(rs.getString("gender_no"));
uketuke.setBirthdayDt(rs.getString("birthday_dt"));
uketuke.setNkMail(rs.getString("nk_mail"));
uketuke.setNkPass(rs.getString("nk_pass"));
list.add(uketuke);
} while (rs.next());
return list;
}
}
サービス：src/main/java/com/example/UketukeService.java
UketukeService.java：ビジネスロジック
SQLで取得した結果をUketukeクラスリストにセット
※コピペする際は開始タグ＜が全角の為、半角に修正お願いします。
package com.example;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
@Service
@Transactional //宣言的トランザクション管理：begin/commit/rollbackを直接書かない。publicのみ。メソッド開始/終了で制御
public class UketukeService {
@Autowired
private JdbcTemplate jdbcTemplate;
public List＜Uketuke> getUketukeList() {
List＜Uketuke> uketukeList = jdbcTemplate.queryForObject("select * from java_user.uketuke", new UketukeMapper());
return uketukeList;
}
}
コントローラ：src/main/java/com/example/UketukeController.java
UketukeController.java：リクエストを受け取りマッピングするコントローラ
※コピペする際は開始タグ＜が全角の為、半角に修正お願いします。
package com.example;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class UketukeController {
@Autowired
private UketukeService uketukeService;
@RequestMapping(path = "/uketuke", method = RequestMethod.GET)
String index(Model model) {
List＜Uketuke> list = this.uketukeService.getUketukeList();
model.addAttribute("list", list);
return "uketuke/index";
}
}
src/main/resources/templates⇒新規⇒フォルダ：uketuke
HTML：src/main/resources/templates/uketuke⇒新規⇒ファイル：index.html
index.html：画面表示するHTML
※コピペする際はDOCTYPE、html、head、bodyの開始タグ＜が全角の為、半角に修正お願いします。
＜!DOCTYPE html>
＜html xmlns:th="http://www.thymeleaf.org">
＜head>
Insert title here
＜/head>
＜body>
受付NO
名前（姓）
名前（名）
郵便番号
住所１
住所２
住所３
TEL
性別
誕生日
メールアドレス
パスワード
＜/body>
＜/html>
１．docker-compose.ymlファイルが存在する場所で下記コマンド実行
※すでに実行済の場合は不要です
docker-compose up -d
２．WEBサーバー起動
３．WEBブラウザで確認
URL：http://localhost:8000/uketuke
CSSで見た目の修正
src/main/resources/static/⇒新規⇒フォルダ：css
HTML：src/main/resources/static/css/⇒新規⇒ファイル：index.css
index.css：トップページのスタイルCSS
@charset "UTF-8";
/*********************************
* 表題 **
**********************************/
p {
text-align: center;
font-size: 30px;
}
/**********************************
* 線と表示サイズの設定 **
**********************************/
table {
border-collapse: collapse;
border: solid thick;
table-layout: fixed;
}
colgroup, tbody {
border: solid medium;
}
th {
border: solid thin;
height: 2.4em;
width: 2.4em;
}
td {
border: solid thin;
height: 2.4em;
width: 2.4em;
text-align: center;
padding: 0;
}
/**********************************
* 表の位置とデザインの設定 **
**********************************/
table.list {
font-size: 15px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 1px;
}
table.list th {
padding: 12px;
vertical-align: middle;
text-align: center;
border-bottom: #999 1px solid;
color:#fff;
}
table.list td {
padding: 12px;
vertical-align: middle;
text-align: left;
border-bottom: #999 1px solid;
font-size: 15px;
}
table.list th.r1 {
width: 152px;
border-right: #999 1px solid;
background: #447791;
}
table.list th.r2,
table.list td.r2 {
width: 128px;
border-left: #fff 1px solid;
border-right: #999 1px solid;
background: #5893b1;
}
table.list th.r2,
table.list th.r3,
table.list th.r4 {
text-align: center;
}
table.list th.r3,
table.list td.r3 {
width: 128px;
border-left: #fff 1px solid;
border-right: #999 1px solid;
background: #7cacc2;
}
table.list th.r4,
table.list td.r4 {
width: 128px;
border-left: #fff 1px solid;
background: #a0c2d3;
}
/**********************************************
* 表のマウスホバー時の配色変更の設定 **
**********************************************/
.list {
border:1px;
}
.list tr:hover
{
background: #fbf8e9;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
/**********************************************
* ボタンの設定 **
**********************************************/
.btn-circle-flat {
display: inline-block;
text-decoration: none;
background: #87befd;
color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
transition: .4s;
}
.btn-circle-flat:hover {
background: #668ad8;
}
.button {
text-align: center;
}
WEBブラウザで確認
URL：http://localhost:8000/uketuke
Dockerの登場背景
手順書が古くなる、無駄なリソースが必要など諸問題あり
スケールしやすい、リソース共有が便利、仮想化の流れへ
自分の環境では動くが他の環境では動かないといった問題が発生
Docker実行環境の例。
Dockerとは非常に軽量なコンテナ型のアプリケーション実行環境
CPUやメモリ、ディスク入出力など、コンテナ内で利用するリソースを他のコンテナから隔離したり、設定に基づいて振り分けたりする機能。
Dockerでは、最終的なアプリケーションはホストOS上の1つのプロセスとして実行されているため、余計なオーバーヘッドがない。
ハイパーバイザ型やホスト型の仮想実行環境の例。
この環境では、仮想化されたハードウェア上でLinux OSが動作し、さらにその上で目的のアプリケーションのプロセスが動作している。
アプリケーションを実行するためにはまずゲストOSを稼働させなければならず、起動に時間もかかるし、CPUやメモリ、ディスクなどのリソースも多く消費する。
Dockerと仮想マシンの比較
Dockerコンポーネント
Dockerのメリット
Dockerを一通りこなすためには・・・
Docker-composeとは
docker-composeのメリット
・開発、テスト環境に適している
・単一ホスト上でも環境を分けたい場合に利用
・Composeファイルを再利用できる
Spring Bootの特徴
MVCモデル
コントローラ：モデルで引っ張ってきた情報をどのようにみせるかを記述する場所
モデル：データベースと連携が取れる場所
ビュー：HTMLファイル。ユーザーに表示される場所
プロジェクトの依存関係
要するにここで使いたいSpringフレームワークを選ぶ
ここで選んだフレームワークが pom.xml に書き込まれ、Mavenが必要なJar一式を落としてくれる
今回のアプリで選んだフレームワークは以下の通り
・Web：リクエストマッピングで使用
・Thymeleaf：HTMLテンプレートエンジン。
・Postgresql：データベース
・JDBC：データベースを接続するドライバ
・Lombok：アノテーション（@Data）でgetter/setterなどを自動生成
基本的な使い方
フレームワークを利用する。必要に応じてpom.xmlに追加することで柔軟に拡張可能。
pom.xmlに追加するとMaven依存関係ライブラリに必要なJarファイルがダウンロードされる。
下記URLのリクエストマッピングを実装する場合
URL：http://localhost:8000/web/test
コントローラクラスにwebをマッピングしてメソッドにtestをマッピングします。
@Controller
@RequestMapping("web")
public class SampleController {
@RequestMapping(path = "/test", method = RequestMethod.GET)
String showPage(Model model) {
return "test";
}
}
pom.xml
org.springframework.boot
spring-boot-starter-jdbc
org.springframework.boot
spring-boot-starter-thymeleaf
org.springframework.boot
spring-boot-starter-web
org.postgresql
postgresql
runtime
org.projectlombok
lombok
true
org.springframework.boot
spring-boot-starter-tomcat
provided
org.springframework.boot
spring-boot-starter-test
test
UketukeFormクラス作成：src/main/java/com/example/UketukeForm.java
UketukeForm.java：HTMLと連携
package com.example;
import lombok.Data;
@Data
public class UketukeForm {
private int ukeNo;
private String seiName;
private String meiName;
private String nkAdd;
private String nmAdd1;
private String nmAdd2;
private String nmAdd3;
private String nkTel;
private String genderNo;
private String birthdayDt;
private String nkMail;
private String nkPass;
}
※コピペする際は開始タグ＜が全角の為、半角に修正お願いします。
//下記import追加
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
@Service
@Transactional
public class UketukeService {
@Autowired
private JdbcTemplate jdbcTemplate;
public List＜Uketuke> getUketukeList() {
List＜Uketuke> userList = jdbcTemplate.queryForObject("select * from java_user.uketuke", new UketukeMapper());
return userList;
}
//下記メソッド追加
public boolean insertUketuke(Model model, @ModelAttribute UketukeForm uketukeForm) {
jdbcTemplate.update("INSERT INTO java_user.uketuke(sei_name,mei_name,nk_add,nm_add1,nm_add2,nm_add3,nk_tel,gender_no,birthday_dt,nk_mail,nk_pass) VALUES(?,?,?,?,?,?,?,?,to_timestamp(?,'yyyy-MM-dd'),?,?)",uketukeForm.getSeiName(),uketukeForm.getMeiName(),uketukeForm.getNkAdd(),uketukeForm.getNmAdd1(),uketukeForm.getNmAdd2(),uketukeForm.getNmAdd3(),uketukeForm.getNkTel(),uketukeForm.getGenderNo(),uketukeForm.getBirthdayDt(),uketukeForm.getNkMail(),uketukeForm.getNkPass());
return true;
}
}
※コピペする際は開始タグ＜が全角の為、半角に修正お願いします。
package com.example;
//下記import追加
import org.springframework.web.bind.annotation.ModelAttribute;
@Controller
public class UketukeController {
//下記メソッド追加 UketukeControllerにリクエストマッピング＝/memberのメソッド＝GETで追加
@RequestMapping(path = "/member", method = RequestMethod.GET)
String member(Model model) {
return "/uketuke/member";
}
//下記メソッド追加 SampleControllerにリクエストマッピング＝/memberのメソッド＝POSTで追加
@RequestMapping(path = "/member", method = RequestMethod.POST)
String memberReg(Model model, @ModelAttribute UketukeForm uketukeForm ) {
this.uketukeService.insertUketuke(model, uketukeForm);
List＜Uketuke> list = this.uketukeService.getUketukeList();
model.addAttribute("list", list);
return "/uketuke/index";
}
}
※コピペする際はDOCTYPE、html、head、bodyの開始タグ＜が全角の為、半角に修正お願いします。
※；（セミコロン）でエラー表示されますが問題ありませんので無視してください。
＜!DOCTYPE html>
＜html xmlns:th="http://www.thymeleaf.org">
＜head>
Insert title here
＜/head>
＜body>
＜/body>
＜/html>
@charset "UTF-8";
.kana {
ime-mode: active;
}
button._hidden {
display: none;
}
.container {
width: 1100px;
margin-right: auto;
margin-left: auto;
}
.box {
display: table-cell;
}
.row {
display: table-row;
}
.gray {
background: gray;
width: 1000px
}
.silver {
background: silver;
}
.orange {
background: orange;
}
.row2 {
height: 100px;
}
.UserInfo1_1 {
width: 220px;
background: #e7f3f0;
float:left;
}
.UserDtl_1 {
font-size: 1.3em;
float:left;
width: 280px;
}
.UserInfoTitle {
width: 30px;
height: 276px;
font-size: 2.5em;
color: #FFFFFF;
background: #1e9484;
float:left;
border: 1px solid gray;
}
.UserInfoTitle2 {
width: 30px;
height: 90px;
font-size: 2.5em;
color: #FFFFFF;
background: #1e9484;
float:left;
border: 1px solid gray;
}
.head {
font-size: 1.3em;
font-weight: bold;
margin: 0 1px 0 2px;
height: 30px;
}
.head2 {
font-size: 1.3em;
font-weight: bold;
margin: 0 1px 0 2px;
height: 60px;
}
.head3 {
font-size: 1.3em;
font-weight: bold;
margin: 0 1px 0 2px;
height: 120px;
}
/** 登録ボタン **/
.flat.fade {
position: relative;
text-align: center;
/* 中央揃え */
display: block;
margin: 0 auto;
/* 幅の指定 */
width: 100%;
max-width: 200px;
box-sizing: border-box;
padding: 10px;
/* 色の指定 */
background: linear-gradient(135deg, #ffd900, #ff9300);
color: #fff;
font-weight: bold;
border-radius: 8px;
transition: 0.3s;
}
.flat.fade:hover {
opacity: 0.7;
}
.flat.fade:active, .flat.fade:focus {
top: 2px;
}
function executeSubmit() {
var name = document.getElementById('seiName').value;
if ( name == '' ) {
alert('氏名を入力してください');
return;
}
console.log(name);
document.forms[0].submit();
return;
}
$(function(){
// ここにプログラムを記述
$('#num-input').on('input', function() {
console.log('test1');
// 半角変換
var halfVal = $(this).val().replace(/[！-～]/g,
function (tmpStr) {
// 文字コードをシフト
return String.fromCharCode(tmpStr.charCodeAt(0) - 0xFEE0);
}
);
// 数字以外の不要な文字を削除
$(this).val(halfVal.replace(/[^0-9]/g, ''));
});
});
動作確認
URL：http://localhost:8080/uketuke
次回セミナー（まだ検討中ですが。。）
１．会員登録、注文登録
業務で扱うような画面設計を考慮した登録機能
２．API
JSONを使用したAPI連携機能
３．その他
DB設計しながら作成するアプリ、他検討中・・・