mrgarita/index.html

## index.html
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,user-scalable=yes">
	<title>スワイプで数値カウントしローカルストレージに保存</title>
	<link rel="stylesheet" href="style.css">
	<script src="main.js" type="text/javascript"></script>
</head>
<body>
	<header>
		<h1>スワイプで数値カウントしローカルストレージに保存</h1>
	</header>

	<div id="contents">
		<p id="number"></p>
	</div>

	<footer><small>&copy; 2019 <a href="https://dianxnao.com/" target="_blank">dianxnao.com</a></small></footer>
</body>
</html>

## main.js
/*
 * main.js
 *		左右スワイプでカウンター増減
 *		スワイプ時にローカルストレージに数値を保存
 *
 */

/*
 * グローバル変数
 */
var n;													// 数値格納用
var number;											// 数値表示部分のDOM取得用
const STORAGE_KEY = "COUNTER";		// ローカルストレージキー

/*
 * スワイプイベント設定
 */
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) {		// 右から左にスワイプ
			sub();	// 数値を－１する
		}
		else if (startX < moveX && startX + dist < moveX) {	// 左から右にスワイプ
			add();			// 数値を＋１する
		}
	});
}

/*
 * ローカルストレージチェックし、前回最後に表示していた数値データを取得
 */
function checkStorageKey(){
	// ローカルストレージチェック
	let ret = localStorage.getItem(STORAGE_KEY);
	console.log("保存状態: " + ret);

	// キーが存在するかのチェック
	if(ret !== null){		// 戻り値がnull：保存データあり
		n = Number(ret);	// 数値化して変数に代入（ローカルストレージデータは文字列のため計算できるようにする）
	}
	else{						// 戻り値が存在：保存データなし
		n = 0;					// 0を代入
	}
	console.log("n = " + n);
}

/*
 * ローカルストレージに現在表示中の番号を保存
 */
function setStorageKey(){
	localStorage.setItem(STORAGE_KEY, n);
}

/*
 * 数値を＋１する
 */
function add(){
	n ++;
	setNumber();	// 表示とローカルストレージ保存
}

/*
 * 数値を－１する
 */
function sub(){
	n --;
	setNumber();	// 表示とローカルストレージ保存
}

/*
 * 数値を画面に表示後、ローカルストレージに保存
 */
function setNumber(){
	// 数値を表示
	number.innerHTML = n;
	// ストレージに表示中の数値を保存
	setStorageKey();
}

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

	// ローカルストレージをチェック
	checkStorageKey();

	// 数値を画面に表示
	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;
}
a{
	text-decoration: none;
}
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>スワイプで数値カウントしローカルストレージに保存</title>
	<link rel="stylesheet" href="style.css">
	<script src="main.js" type="text/javascript"></script>
	</head>
	<body>
	<header>
	<h1>スワイプで数値カウントしローカルストレージに保存</h1>
	</header>

	<div id="contents">
	<p id="number"></p>
	</div>

	<footer><small>© 2019 <a href="https://dianxnao.com/" target="_blank">dianxnao.com</a></small></footer>
	</body>
	</html>
	/*
	* main.js
	* 左右スワイプでカウンター増減
	* スワイプ時にローカルストレージに数値を保存
	*
	*/

	/*
	* グローバル変数
	*/
	var n; // 数値格納用
	var number; // 数値表示部分のDOM取得用
	const STORAGE_KEY = "COUNTER"; // ローカルストレージキー

	/*
	* スワイプイベント設定
	*/
	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) { // 右から左にスワイプ
	sub(); // 数値を－１する
	}
	else if (startX < moveX && startX + dist < moveX) { // 左から右にスワイプ
	add(); // 数値を＋１する
	}
	});
	}

	/*
	* ローカルストレージチェックし、前回最後に表示していた数値データを取得
	*/
	function checkStorageKey(){
	// ローカルストレージチェック
	let ret = localStorage.getItem(STORAGE_KEY);
	console.log("保存状態: " + ret);

	// キーが存在するかのチェック
	if(ret !== null){ // 戻り値がnull：保存データあり
	n = Number(ret); // 数値化して変数に代入（ローカルストレージデータは文字列のため計算できるようにする）
	}
	else{ // 戻り値が存在：保存データなし
	n = 0; // 0を代入
	}
	console.log("n = " + n);
	}

	/*
	* ローカルストレージに現在表示中の番号を保存
	*/
	function setStorageKey(){
	localStorage.setItem(STORAGE_KEY, n);
	}

	/*
	* 数値を＋１する
	*/
	function add(){
	n ++;
	setNumber(); // 表示とローカルストレージ保存
	}

	/*
	* 数値を－１する
	*/
	function sub(){
	n --;
	setNumber(); // 表示とローカルストレージ保存
	}

	/*
	* 数値を画面に表示後、ローカルストレージに保存
	*/
	function setNumber(){
	// 数値を表示
	number.innerHTML = n;
	// ストレージに表示中の数値を保存
	setStorageKey();
	}

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

	// ローカルストレージをチェック
	checkStorageKey();

	// 数値を画面に表示
	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;
	}
	a{
	text-decoration: none;
	}
	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;
	}

	}