mrgarita/index.html

## index.html
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,user-scalable=yes">
	<title>JavaScriptでスワイプ処理をする</title>
	<link rel="stylesheet" href="style.css">
	<script src="main.js" type="text/javascript"></script>
</head>
<body>
	<header>
		<h1>JavaScriptでスワイプ処理をする</h1>
	</header>

	<div id="contents">
		<p id="number"></p>
		<p>左右にスワイプすると数値が増減します</p>
	</div>

	<footer><small>&copy; 2019 dianxnao.com</small></footer>
</body>
</html>

## main.js
/* main.js */

/*
 * グローバル変数
 */
var no;				// 数値格納用
var number;		// 数値表示部分のDOM取得用

/*
 * スワイプイベント設定
 */
function setSwipe(elem) {
	let t = document.querySelector(elem);
	let startX;		// タッチ開始 x座標
	let startY;		// タッチ開始 y座標
	let moveX;	// スワイプ中の x座標
	let moveY;	// スワイプ中の y座標
	let dist = 30;	// スワイプを感知する最低距離（ピクセル単位）

	// タッチ開始時： xy座標を取得
	t.addEventListener("touchstart", function(e) {
		e.preventDefault();
		startX = e.touches[0].pageX;
		startY = e.touches[0].pageY;
	});

	// スワイプ中： xy座標を取得
	t.addEventListener("touchmove", function(e) {
		e.preventDefault();
		moveX = e.changedTouches[0].pageX;
		moveY = e.changedTouches[0].pageY;
	});

	// タッチ終了時： スワイプした距離から左右どちらにスワイプしたかを判定する/距離が短い場合何もしない
	t.addEventListener("touchend", function(e) {
		if (startX > moveX && startX > moveX + dist) {		// 右から左にスワイプ
			previous();
		}
		else if (startX < moveX && startX + dist < moveX) {	// 左から右にスワイプ
			next();
		}
	});
}

/*
 * 次の番号を表示
 */
function next(){
	no ++;
	setNumber();
}

/*
 * 前の番号を表示
 */
function previous(){
	no --;
	setNumber();
}

/*
 * 数値を画面に表示する
 */
function setNumber(){
	number.innerHTML = no;
}

/*
 * 起動時の処理
 */
window.addEventListener("load", function(){
	// 数値表示部分のDOM取得
	number = document.getElementById("number");

	// 数値を画面に表示
	no = 0;
	setNumber();

	// スワイプイベント設定
	setSwipe("#contents");
});

## style.css
/* style.css */
@charset "utf-8";

*{
	margin: 0;
	padding: 0;
}
body{
	-webkit-text-size-adjust: none;	/* iPhoneのSafariで左上が拡大されて表示される場合の対処 */
	font-family: 'メイリオ', Helvetica;
	font-size: 16pt;
	width: 100%;
	margin: 0 auto;
}
header{
	padding: 1em;
	background-color: teal;
}
header h1{
	font-size: 16pt;
	text-align: center;
	color: white;
}
#contents{
	background-color: white;
	text-align: center;
}
#number{
	padding: 1em 0;
	font-family: Impact, Helvetica;
	font-weight: 900;
	font-size: 64pt;
}
p{
	font-size: 12pt;
}
footer{
	font-size: 0.8em;
	padding: 1em;
	text-align: center;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* タブレット用のcssを記述 */
	header h1{
		font-size: 20pt;
	}
	#contents{
		background-color: white;
		text-align: center;
	}
	#number{
		padding: 1em 0;
		font-family: Impact, Helvetica;
		font-weight: 900;
		font-size: 128pt;
	}
	p{
		font-size: 18pt;
	}

}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,user-scalable=yes">
	<title>JavaScriptでスワイプ処理をする</title>
	<link rel="stylesheet" href="style.css">
	<script src="main.js" type="text/javascript"></script>
	</head>
	<body>
	<header>
	<h1>JavaScriptでスワイプ処理をする</h1>
	</header>

	<div id="contents">
	<p id="number"></p>
	<p>左右にスワイプすると数値が増減します</p>
	</div>

	<footer><small>© 2019 dianxnao.com</small></footer>
	</body>
	</html>
	/* main.js */

	/*
	* グローバル変数
	*/
	var no; // 数値格納用
	var number; // 数値表示部分のDOM取得用

	/*
	* スワイプイベント設定
	*/
	function setSwipe(elem) {
	let t = document.querySelector(elem);
	let startX; // タッチ開始 x座標
	let startY; // タッチ開始 y座標
	let moveX; // スワイプ中の x座標
	let moveY; // スワイプ中の y座標
	let dist = 30; // スワイプを感知する最低距離（ピクセル単位）

	// タッチ開始時： xy座標を取得
	t.addEventListener("touchstart", function(e) {
	e.preventDefault();
	startX = e.touches[0].pageX;
	startY = e.touches[0].pageY;
	});

	// スワイプ中： xy座標を取得
	t.addEventListener("touchmove", function(e) {
	e.preventDefault();
	moveX = e.changedTouches[0].pageX;
	moveY = e.changedTouches[0].pageY;
	});

	// タッチ終了時：スワイプした距離から左右どちらにスワイプしたかを判定する/距離が短い場合何もしない
	t.addEventListener("touchend", function(e) {
	if (startX > moveX && startX > moveX + dist) { // 右から左にスワイプ
	previous();
	}
	else if (startX < moveX && startX + dist < moveX) { // 左から右にスワイプ
	next();
	}
	});
	}

	/*
	* 次の番号を表示
	*/
	function next(){
	no ++;
	setNumber();
	}

	/*
	* 前の番号を表示
	*/
	function previous(){
	no --;
	setNumber();
	}

	/*
	* 数値を画面に表示する
	*/
	function setNumber(){
	number.innerHTML = no;
	}

	/*
	* 起動時の処理
	*/
	window.addEventListener("load", function(){
	// 数値表示部分のDOM取得
	number = document.getElementById("number");

	// 数値を画面に表示
	no = 0;
	setNumber();

	// スワイプイベント設定
	setSwipe("#contents");
	});
	/* style.css */
	@charset "utf-8";

	*{
	margin: 0;
	padding: 0;
	}
	body{
	-webkit-text-size-adjust: none; /* iPhoneのSafariで左上が拡大されて表示される場合の対処 */
	font-family: 'メイリオ', Helvetica;
	font-size: 16pt;
	width: 100%;
	margin: 0 auto;
	}
	header{
	padding: 1em;
	background-color: teal;
	}
	header h1{
	font-size: 16pt;
	text-align: center;
	color: white;
	}
	#contents{
	background-color: white;
	text-align: center;
	}
	#number{
	padding: 1em 0;
	font-family: Impact, Helvetica;
	font-weight: 900;
	font-size: 64pt;
	}
	p{
	font-size: 12pt;
	}
	footer{
	font-size: 0.8em;
	padding: 1em;
	text-align: center;
	}

	@media screen and (min-width: 768px) and (max-width: 1024px) {

	/* タブレット用のcssを記述 */
	header h1{
	font-size: 20pt;
	}
	#contents{
	background-color: white;
	text-align: center;
	}
	#number{
	padding: 1em 0;
	font-family: Impact, Helvetica;
	font-weight: 900;
	font-size: 128pt;
	}
	p{
	font-size: 18pt;
	}

	}