JavaScript – Page 3 – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

[ScrollReveal] スクロールアニメーションを実装したい

ブラウザをスクロールするとアニメーションが動くやつを実装したい。
ScrollRevealというので実装できるらしいので試してみる。

Github: https://github.com/jlmakes/scrollreveal/tree/master

<body>
	<div class="container">
		
		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<h1 class="headline">Widget Inc.</h1>
	</div>
	<script src="https://unpkg.com/scrollreveal"></script>
	<script>
		var ScrollrevealFade = {
		    origin: 'left',
		    distance: '0px',//移動範囲
		    scale: 1,//拡大表示（１で横スクロールが始まる）
		    rotate: { x: 20, y: 20, z: 20 }, //
		    duration: 1200, //アニメーションの速度
		    delay :200 //要素が表示するまでの待機時間（ディレイ）
		};
		ScrollReveal().reveal('.headline', ScrollrevealFade, 100);
	</script>
</body>
</html>

スクロール(表示位置に入る)と、アニメーションが入ります。
この例だと、上から降ってくる感じ。

なるほど、面白い。

[JavaScript] object-fit-images

githubからDLします。
https://github.com/fregante/object-fit-images

ofi.jsを配置します。

	<style>
	.object-fit{
		  object-fit: contain;
		  font-family: 'object-fit: contain;'
		}
	</style>
</head>
<body>
	<div class="container">
		<img src="img/img1.jpg" class="object-fit" width="400px" height="200px"><br><br>
	</div>
	<script src="js/ofi.js"></script>
	<script>
  		objectFitImages('img.object-fit-img');
	</script>
</body>

ほう

[JavaScript] 検索で正規表現を使いたい

やりたいこと: googleみたいに、検索結果に検索ワードの前後の文字列を表示させたい

		var pattern = /^\d{3}-?\d{4}$/g;
		var postcode = '100-0001';
		var result = postcode.match(pattern);
		console.log(result);

1. matchメソッド
パターンにマッチした文字列を配列で返す
gはグローバルサーチ、iは大文字小文字を区別しない

		var str = "ABCDEFG"
		var result = str.match(/[a-c]/gi);
		console.log(result);

2.execメソッド

		var result = /(.+)cde(f)/.exec("abcdefg");
		console.log(result);

3.testメソッド
true or false

		var result = /[0-9]{3}/.test(999);
		console.log(result);

4. searchメソッド
定された正規表現で最初にマッチした文字位置を返す

		var result = str.search(/DEF/);
		console.log(result);

replace, splitもある。

searchを使う

var str = "私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚はばかる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執とっても心持は同じ事である。よそよそしい頭文字かしらもじなどはとても使う気にならない。"
		var result = str.search(/先生/);

-> 12

		var str = "私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚はばかる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執とっても心持は同じ事である。よそよそしい頭文字かしらもじなどはとても使う気にならない。"
		var result = str.search(/先生/);
		if(result > 10){
			var start = result - 5;
			console.log(str.substr(start,20) + '...');
		} else {
			var start = 0;
			console.log(str.substr(start,20) + '...');
		}

あ、これ、queryをbタグで囲うように置換すればいいだけじゃん。
簡単だなwww ワロタ。

[JavaScript] サイト内検索を実装する1

まず、index.htmlとresult.html、そして検索対象となるtest1.php、test2.phpを作ります。

index.html

	<form action="result.html">
		<input id="search-input" placeholder="1つキーワードを入力" name="search-key">
		<input id="search-buttom" class="fas" type="submit" value="検索">
	</form>

result.html

	<div class="contents">
		<h1>検索結果</h1>
		<ul id="ul">
		</ul>
	</div>
	<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
    <script>
    	
		let v = new URLSearchParams(window.location.search);
		v = v.get('search-key');

		
		const urlLists = [
			"test1.php",
			"test2.php"
		];
		
		$.each(urlLists, function(i){
			$.ajax({
				url : urlLists[i],
				dataType: 'html',
				success: function(data){
					if( $(data).find("p").text().indexOf(v) !== -1){
						$('<li><a href="' + urlLists[i] +'">' +$(data).find("h1").text() +'</a><br>'+ $(data).find("p").text() + '</li>').appendTo('ul');

					}
				},
				error: function(data){
					console.log("error");
				}
			});
		});
    </script>

仕組みはわかったけど。。検索文字の前後20文字とかで、検索文字を太字で表示したい。

[Gio.js] 地球儀を表現したい

国際${○○○}細胞治療研究会のHPで地球儀が実装されていたのを見て、地球儀を実装したいと思った。
Gio.jsで簡単に書けるらしい。ということで、早速作っていきたいと思う。

$ npm install giojs –save

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<div id="globalArea" style="width:800px;height:420px"></div>

<script src="https://threejs.org/build/three.min.js"></script>    
<script src="https://raw.githack.com/syt123450/giojs/master/build/gio.min.js"></script>
<script>
	var container = document.getElementById("globalArea");
	var controller = new GIO.Controller(container);

	controller.init();
</script>
</body>
</html>

デザインが嫌いだな。中国中心なのが嫌だ。

<script src="https://raw.githack.com/syt123450/giojs/master/assets/data/sampleData.js"></script>
<script>
	var container = document.getElementById("globalArea");
	var controller = new GIO.Controller(container);

	controller.init();
	controller.addData( data );
</script>

country dataはここから取る
https://github.com/syt123450/giojs/blob/master/src/countryInfo/CountryData.js

<script>
	var container = document.getElementById("globalArea");
	var config = {
		  control: {
		  	"initCountry": "JP",
		  },
	      //カラーの設定
	      color: {
	      	surface: 1744048,
	        selected: 0xff8888,
	        background: 0xffffff
	      },
	}

	// var data_set = {
	// 	"e": "JP",
	// 	"i": "US",
	// 	"v": Math.floor(Math.random() * (max - min + 1) + min),
	// }

	var controller = new GIO.Controller(container, config);
	// controller.addData(data_set);
	controller.init();
</script>

地球儀、使う前は凄い憧れたけど、実際に使うと、だから何？って感じになるな。

[JavaScript] ES2020のconst, let, var

strict

'use strict'; // 厳密なエラーチェック

定数 // 再代入不可

		const price = 10;
		console.log(price * 3);

変数 // letを使う　varは古い書き方

		let price = 10;
		price = 30;
		console.log(price * 3);

無名関数

const sum = function(a, b, c){
			return a + b + c;
		}
		const total = sum(1, 2, 3) + sum(4, 5, 6);
		console.log(total);

arrow function

const sum = (a, b, c) => a + b + c;

[suggestrap]フォームのサジェスト機能を実装したい

$ npm install suggestrap

まず二次元の連想配列のJsonデータを作成します。
json.php
L getメソッドで”ja”を受け取ったら配列を返します

$array = array(
	array("id"=>1, "age"=>32, "name"=>"Jack"),
	array("id"=>2, "age"=>41, "name"=>"Jackie"),
	array("id"=>3, "age"=>41, "name"=>"James"),
	array("id"=>4, "age"=>20, "name"=>"Jake"),
	array("id"=>5, "age"=>28, "name"=>"Jane"),
);

$json = json_encode($array);

$query = $_GET['query'];
if(strpos($query,'ja') !== false){
	print $json;
}

index.html
L inputの入力値をqueryとしてgetメソッドで渡します。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input id="target" type="text">
	<script src="/node_modules/suggestrap/lib/suggestrap.js"></script>
	<script>
		var req = {
			target: "target",
			url: "http://192.168.33.10:8000/json.php?query=%QUERY",
			key: "name"
		};
		var option = {
			minlength: 2,
			wildcard: "%QUERY",
			delay: 400,
			count: 5,
			id: "suggestrap"
		};
		var suggestrap = new Suggestrap(req, option);
	</script>
</body>
</html>

あああ、なるほど、検索のサジェストは、入力したqueryをajaxで渡して、それをDBからひっぱてきて表示してるのね。
仕組みがわかった。完全に理解した。なるほどねー。
もっと凄い技術使ってるのかと思ったら、普通の仕組みだ。

さて、フォントやるかー。

[progressStep.js] プログレスバーを綺麗に表示したい

progressStep.jsというのがあるので、これを使って実装したい

Github: progressStep.js

$ npm install progressbar.js

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.hoge {
			width: 400px;
  			text-align: center;
  			margin: auto;
		}
		#progressBar {
			
		}
	</style>
</head>
<body>
	<div class="hoge">
		<div id="progressBar"></div>
	</div>
	<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
	<script src="https://cdn.tutorialjinni.com/progressStep/1.0.3/progressStep.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"> </script>
	<script>
		var $progressDiv = $("#progressBar");  
		var $progressBar = $progressDiv.progressStep({activeColor:"blue"});
		$progressBar.addStep("入力");  
		$progressBar.addStep("確認");  
		$progressBar.addStep("完了");  
		$progressBar.refreshLayout();  
		$progressBar.setCurrentStep(1);  
	</script>
</body>
</html>

お、ええやん、これはガチで使えそう^^

[pickr] color pickerを実装したい

RGBを入力するのは、RGBを調べるという手間が入るので、color pickerを実装したい。
pickrというライブラリがある様なので、それを使う。

$ npm install @simonwep/pickr

githubそのままですが、

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="/node_modules/@simonwep/pickr/dist/themes/classic.min.css" rel="stylesheet">
	<link href="/node_modules/@simonwep/pickr/dist/themes/monolith.min.css" rel="stylesheet">
	<link href="/node_modules/@simonwep/pickr/dist/themes/nano.min.css" rel="stylesheet">

	<script src="/node_modules/@simonwep/pickr/dist/pickr.min.js"></script>
	<script src="/node_modules/@simonwep/pickr/dist/pickr.es5.min.js"></script>
</head>
<body>
	<div class="color-picker"></div>
	<script>
		const pickr = Pickr.create({
		    el: '.color-picker',
		    theme: 'classic', 

		    swatches: [
		        'rgba(244, 67, 54, 1)',
		        'rgba(233, 30, 99, 0.95)',
		        'rgba(156, 39, 176, 0.9)',
		        'rgba(103, 58, 183, 0.85)',
		        'rgba(63, 81, 181, 0.8)',
		        'rgba(33, 150, 243, 0.75)',
		        'rgba(3, 169, 244, 0.7)',
		        'rgba(0, 188, 212, 0.7)',
		        'rgba(0, 150, 136, 0.75)',
		        'rgba(76, 175, 80, 0.8)',
		        'rgba(139, 195, 74, 0.85)',
		        'rgba(205, 220, 57, 0.9)',
		        'rgba(255, 235, 59, 0.95)',
		        'rgba(255, 193, 7, 1)'
		    ],

		    components: {

		        // Main components
		        preview: true,
		        opacity: true,
		        hue: true,

		        // Input / output Options
		        interaction: {
		            hex: true,
		            rgba: true,
		            hsla: true,
		            hsva: true,
		            cmyk: true,
		            input: true,
		            clear: true,
		            save: true
		        }
		    }
		});
	</script>
</body>
</html>

これは凄い。使いたいな。

[JavaScript] 複数住所を登録する為、住所を追加するボタン

amazonの様に、住所を複数追加できる様にしたい。

	<h1>住所追加</h1>
	<div >
		<form>
		<button id="btn1" type="button" onclick="clickBtn1()">住所を追加する</button>
		<div id="address1">
			<input type="text" name="zipcode_1" value="" placeholder="郵便番号"><br>
			<input type="text" name="address1_1" value="" placeholder="住所1"><br>
			<input type="text" name="address2_1" value="" placeholder="住所2"><br>
		</div>
		</form>
	</div>
	<script>
		document.getElementById("address1").style.display = "none";

		function clickBtn1(){
			const address1 = document.getElementById("address1");
			if(address1.style.display=="block"){
				document.getElementById("btn1").textContent = "住所を追加する";
				document.getElementsByName("zipcode_1").value = "";
				document.getElementsByName("address1_1").value = "";
				document.getElementsByName("address2_1").value = "";
				address1.style.display ="none";
			} else{
				document.getElementById("btn1").textContent = "追加しない";
				address1.style.display ="block";
			}
		}
	</script>

ここに更に住所を追加するボタンを加える。
– buttonではなく、spanタグにして少しスタイリングする
– 住所1を閉じる時は、住所2を初期化する必要がある

	<h1>住所追加</h1>
	<div >
		<form>
		<span id="btn1" onclick="clickBtn1()">住所を追加する</span>
		<div id="address1">
			<input type="text" name="zipcode_1" value="" placeholder="郵便番号"><br>
			<input type="text" name="address1_1" value="" placeholder="住所1"><br>
			<input type="text" name="address2_1" value="" placeholder="住所2"><br><br>

			<span id="btn2" onclick="clickBtn2()">住所を追加する</span>
		</div>

		<div id="address2">
			<input type="text" name="zipcode_2" value="" placeholder="郵便番号"><br>
			<input type="text" name="address1_2" value="" placeholder="住所1"><br>
			<input type="text" name="address2_2" value="" placeholder="住所2"><br><br>
		</div>
		</form>
	</div>
	<script>
document.getElementById("address1").style.display = "none";
		document.getElementById("address2").style.display = "none";

		function clickBtn1(){
			const address1 = document.getElementById("address1");
			if(address1.style.display=="block"){
				// 住所1
				document.getElementById("btn1").textContent = "住所を追加する";
				document.getElementsByName("zipcode_1").value = "";
				document.getElementsByName("address1_1").value = "";
				document.getElementsByName("address2_1").value = "";
				address1.style.display ="none";

				// 住所2
				document.getElementsByName("zipcode_2").value = "";
				document.getElementsByName("address1_2").value = "";
				document.getElementsByName("address2_2").value = "";
				document.getElementById("address2").style.display = "none";
				document.getElementById("btn2").textContent = "住所を追加する";
			} else{
				document.getElementById("btn1").textContent = "追加をやめる";
				address1.style.display ="block";
			}
		}

		function clickBtn2(){
			const address2 = document.getElementById("address2");
			if(address2.style.display=="block"){
				document.getElementById("btn2").textContent = "住所を追加する";
				document.getElementsByName("zipcode_2").value = "";
				document.getElementsByName("address1_2").value = "";
				document.getElementsByName("address2_2").value = "";
				address2.style.display ="none";
			} else{
				document.getElementById("btn2").textContent = "追加をやめる";
				address2.style.display ="block";
			}
		}
	</script>

OK！　これを実装する