Category: JavaScript

ESLint + gulp

$ npm i -D gulp-eslint

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var webserver = require('gulp-webserver');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var eslint = require('gulp-eslint');
var plumber = require('gulp-plumber');

gulp.task('html', function(done){
	gulp.src('./src/*.html')
		.pipe(gulp.dest('./dest'))
	done();
});

gulp.task('js', function(done){
	gulp.src(['./src/*.js','!node_modules/**'])
		.pipe(eslint({ useEslintrc: true }))
		.pipe(eslint.format())
		.pipe(eslint.failAfterError())
		.pipe(gulp.dest('./dest/js'))
	done();
});

gulp.task('img', function(done){
	gulp.src('./src/img/*.png')
		.pipe(imagemin())
		.pipe(gulp.dest('./dest/img'))
	done();
});

gulp.task('sass', function(done){
	gulp.src('./src/sass/*.scss')
		.pipe(plumber())
		.pipe(sassLint())
		.pipe(sassLint.format())
		.pipe(sassLint.failOnError())
		.pipe(sass({outputStyle: 'expand'}))
		.pipe(gulp.dest('./dest/css'))
	done();
});

gulp.task('watch', function(done){
	gulp.watch('./src/*.html', gulp.task('html'))
	gulp.watch('./src/js/*.html', gulp.task('js'))
	gulp.watch('./src/sass/*.scss', gulp.task('sass'))
	done();
});

gulp.task('webserver', function(done){
	gulp.src('./dest')
		.pipe(webserver({
			host:'192.168.34.10',
			port: 8000,
			livereload: true,
		}));
	done();
});

gulp.task('default', gulp.series('html','js','img','sass','watch','webserver'));

gulpにsass-lintを導入する

stylelintとは？
-lint工程を追加することで、コードを綺麗にし、保守性を高める
-styleの重複を減らす

csslintとは?
$ npm install -g csslint
$ csslint main.css

sasslintを導入
$ npm install gulp-sass-lint –save-dev
$ gulp

var sassLint = require('gulp-sass-lint');

gulp.task('sass', function(done){
	gulp.src('./src/sass/*.scss')
		.pipe(plumber())
		.pipe(sassLint())
		.pipe(sassLint.format())
		.pipe(sassLint.failOnError())
		.pipe(sass({outputStyle: 'expand'}))
		.pipe(gulp.dest('./dest/css'))
	done();
});

src/sass/main.scss
2:2 warning Mixed tabs and spaces indentation
2:20 warning Color ‘red’ should be written in its hexadecimal form #ff0000 no-color-keywords
2:20 warning Color literals such as ‘red’ should only be used in variable declarations no-color-literals
3:2 warning Mixed tabs and spaces indentation
4:2 warning Mixed tabs and spaces indentation
5:1 warning Files must end with a new line final-newline

✖ 6 problems (0 errors, 6 warnings)

ああああああ、これスゲー

ボタン押下時に挙動を変える

<html>
<head>
	<title>二重送信を防ぐ</title>
	<style>
		.btn-wrap {
			width: 300px;
			margin: 0 auto;
			text-align: center;
		}
		.loading {
			display:none;
		}
	</style>
</head>
<body>
	<div class="btn-wrap">
		<button class="btn">送信</button>
		<div class="loading">
			<img src="loading.gif">
		</div>
	</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
	$('.btn').on('click', function(){
		$('.btn').hide();
		$('.loading').show();
	});
});
</script>
</body>
</html>

多重クリック防止

<html>
<head>
	<title>二重送信を防ぐ</title>
<script>
var flag = false;
function send(){
	if(flag){
		alert("送信済みです");
		return false;
		flag = true;
	}
}
</script>
</head>
<body>
	<a href="javascript:send()">データを送信</a>
</body>
</html>

あれ、上手くいかない。。

書き方を変えます。

<html>
<head>
	<title>二重送信を防ぐ</title>
<script>
var set=0:
function double(){
	if(set==0){
		set=1;
	} else{
		alert("只今処理中です。\nそのままおまちください");
		return false;
	}
}
</script>
</head>
<body>
	<form action="" method="post">
		<input type="submit" name="go" class="test" value="送信" onClick="javascript:double(this)">
	</form>
</body>
</html>

うーんちょっと違うようです。

<body>
	<form action="" method="post">
		<input type="submit" name="go" id="login_submit" class="" value="送信">
	</form>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
$('#login_a').on('click', function(){
	if($(this).hasClass('double_click')){
		return false;
	}
	$(this).text("送信中...");
	$(this).addClass('double_click');
});
</script>
</body>

あれーーーーーーーーー

ボタンを押すとjsでテキストが変わる

innerTextで指定します。

<body>
	<button id="toggleMenuButton">ボタン</button>
	<div id="toggleMenu">
		<ul>
			<li>menu1</li>
			<li>menu2</li>
			<li>menu3</li>
		</ul>
	</div>
</body>
<script>
(function(window,document){
	var _toggleMenuButton = document.getElementById('toggleMenuButton');
	var _toggleMenu = document.getElementById('toggleMenu');
	var _clientH;
	init();
	function init(){
		_toggleMenu.style.height='auto';
		_clientH = _toggleMenu.clientHeight;
		_toggleMenu.style.height = '0px';
		_toggleMenuButton.addEventListener('click', function(){
			change();
			clickToggle();
			
		},false);
	}
	function clickToggle(){
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
	}
	function change(){
		document.getElementById('toggleMenuButton').innerText="閉じる";
	}
})(window,document);
</script>

いいけど、これ、ボタンが一度押されると、ずっと閉じるになるなー

あ、値が「閉じる」だったら、「ボタン」に変更すればよいのか。

function change(){
		document.getElementById('toggleMenuButton').innerText =( document.getElementById('toggleMenuButton').innerText ==　"ボタン") ? "閉じる"　: "ボタン";
	}

これでどーだ^^

あ、まとめられますね。

function clickToggle(){
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
		_toggleMenuButton.innerText =( _toggleMenuButton.innerText ==　"ボタン") ? "閉じる"　: "ボタン";
	}

OKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK

JSでアコーディオン

<!DOCTYPE html>
<html lang="ja">
<head>
	<style>
		#toggleMenu{
			overflow:hidden;
			transition:all 0.5s;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<button id="toggleMenuButton">ボタン</button>
	<div id="toggleMenu">
		<ul>
			<li>menu1</li>
			<li>menu2</li>
			<li>menu3</li>
		</ul>
	</div>
</body>
<script>
(function(window,document){
	var _toggleMenuButton = document.getElementById('toggleMenuButton');
	var _toggleMenu = document.getElementById('toggleMenu');
	var _clientH;
	init();
	function init(){
		_toggleMenu.style.height='auto';
		_clientH = _toggleMenu.clientHeight;
		_toggleMenu.style.height = '0px';
		_toggleMenuButton.addEventListener('click', function(){clickToggle();},false);
	}
	function clickToggle(){
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
	}
})(window,document);
</script>
</html>

あー、これこれ、やりたかったの♪

Validate email address with JavaScript

Function to check if valid e-mail address format in input form etc.

function checkEmailAddress(str){
	if(str.match(/.+@.+\..+/)==null){
		return false;
	} else {
		return true;
	}
}

正規表現ですね。
input type=”email”でも良いような気がしますが。。

jsからCanvas

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>JavaScriptでスクリーンショット</title>
</head>

<body>
	<hr>
	<div style="background-color : #AAEEDD"><h1>JavaScriptで撮るスクリーンショット</h1></div>
	<div id="target">
	<h2>導入方法と処理概要</h2>
	<table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333" style="table-layout: fixed;">
	<tr>
		<th bgcolor="#7b9ad0" width="40"><font color="#FFFFFF">No</font></th>
		<th bgcolor="#7b9ad0" width="230"><font color="#FFFFFF">概要</font></th>
		<th bgcolor="#7b9ad0" width="230"><font color="#FFFFFF">補足</font></th>
	</tr>
	<tr>
		<td bgcolor="#b1d7e4" width="40" align="right">1</td>
		<td bgcolor="#7b9ad0" width="230">任意のタイミングでhtml2canvas関数を呼ぶ</td>
		<td bgcolor="#7b9ad0" width="230">※今回はオンロード処理</td>
	</tr>
	<tr>
		<td bgcolor="#b1d7e4" width="40" align="right">２</td>
		<td bgcolor="#7b9ad0" width="230">任意のタイミングでhtml2canvas関数を呼ぶ</td>
		<td bgcolor="#7b9ad0" width="230">※今回はオンロード処理</td>
	</tr>
	<tr>
		<td bgcolor="#b1d7e4" width="40" align="right">３</td>
		<td bgcolor="#7b9ad0" width="230">onrendered処理にて指定のElementに画像を追記</td>
		<td bgcolor="#7b9ad0" width="230">※[img]タグの[src]や、[a]タグの[href]など</td>
	</tr>
</table>
</div>
<br>
<hr>
<h3>↓↓ここから画像↓↓ (上の対象のDIVを画像化)</h3>
<img src="" id="result">
<h3>↑↑ここまで画像↑↑</h3>

<hr>

<a href="" id="ss" download="html_ss.png">スクリーンショット(document.body全体)をダウンロード</a>
<hr>
<h3>注意</h3>
<ul>
	<li>実際にはスクリーンショットを撮っているわけではない</li>
	<li>html2canvasは、HTML内のDOMやCCSを解釈してCanvas上に描画するライブラリ</li>
	<li>つまり、レンダリングエンジンに近い動作をする</li>
	<li>そのため、ブラウザと異なる表示がされる場合がある</li>
	<li>flashやapplet, iframe(別URL)はうまくキャプチャできない</li>
</ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
	window.onload = function(){

		html2canvas(document.getElementById("target"),{
			onrendered: function(canvas){
				var imgData = canvas.toDataURL();
				document.getElementById("result").src = imgData;
			}
		});

		html2canvas(document.body, {
			onrendered: function(canvas){
				var imgData = canvas.toDataURL();
				document.getElementById("ss").href = imgData;
			}
		});
	}
</script>
</body>
</html>

svgをcanvasで表示する

<!doctype html>
<html>
<head>
	<title>title</title>
</head>
<body>
	<canvas id="c" width="200" height="200"></canvas>
</body>
<script>
	var img = new Image();
	img.src = 'http://www.w3.org/Icons/SVG/svg-logo-v.svg';
	img.onload = function(){
		var c = document.getElementById('c');
		var ctx = c.getContext('2d');
		ctx.drawImage(img, 0, 0, 200, 200);
	}
</script>
</html>

これはsvgなんだが、HTMLタグで行きたいね。。

HTMLタグ→SVG画像作成→Canvasで画像化？
んーん、苦戦。。

foreignObject

SVG elements make it possible to include external XML namespaces with graphic content rendered by different user agents. External graphic content included is subject to SVG conversion and composition.

<svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
	<desc>The svg tag can write code and draw an image. Compared with bitmap data such as JPEG and PNG, even if it is enlarged, it can be displayed in a beautiful state without blurring.</desc>
	<switch>
		<foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml">
		<body xmlns="http://www.w3.org/1999/xhtml">
			<p>Here is a paragraph that requires word wrap</p>
		</body>
	</foreignObject>

	<text font-size="10" font-family="Verdana">
		<tspan x="10" y="10">Here is a paragraph that</tspan>
		<tspan x="10" y="20">requires word wrap.</tspan>
	</text>
</switch>
</svg>


<svg width="960px" height="1280px" viewBox="0 0 960 1280" xmlns="http://www.w3.org/2000/svg">
	<style>
	h1 {
		color:red;
	}
	</style>
	<g>
		<foreignObject x="0" y="0" width="100%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml">
		<body xmlns="http://www.w3.org/1999/xhtml">
			<p>Hello, world!</p>
		</body>
	</foreignObject>
</g>
</svg>

ん？　どういこと？