Category: JavaScript

国ごとの電話コードのJavaScriptライブラリ「International Telephone Input」を使う

国際電話の電話コードの入力の助けになる様なJSライブラリがないか探した
例えば、日本の場合は国際電話の場合　「+81 -*」となる
どうやら、jQueryでInternational Telephoneというのがあるらしい
https://github.com/jackocnr/intl-tel-input

GithubからzipファイルをDLして、build側のフォルダからintlTelInput.css と　intlTelInput.jsを使います。
src側のフォルダからintlTelInput.jsを使うと、「window.intlTelInput is not a function」とエラーになるので注意が必要

<link rel="stylesheet" href="css/intlTelInput.css">
// 省略
                <div class="form-group">
                  <label for="tel">電話番号</label>
                  <input type="tel" name="tel" id="mobile-number" class="form-control col-md-6">
                </div>
// 省略
  <script src="js/jquery.min.js"></script>
  <script src="js/intlTelInput.js"></script>
  <script>
  var $input = document.querySelector("#mobile-number");
  window.intlTelInput($input, {
      defaultCountry: "us",
    });
  </script>

OK、顧客登録側はほぼほぼ出来たかな^^

海外のzipcode からAPI で住所を取得する

zipcodebaseというサイトを使ってみます。
こちらのサイトでregisterしてapi keyを取得します。
https://zipcodebase.com/

– ブラウザで試す
https://app.zipcodebase.com/api/v1/search?apikey=${api_key}&codes=1000001

-> response
{“query”:{“codes”:[“1000001″],”country”:null},”results”:{“1000001”:[{“postal_code”:”100-0001″,”country_code”:”JP”,”latitude”:”35.67490000″,”longitude”:”139.76190000″,”city”:”Chiyoda”,”state”:”Tokyo To”,”city_en”:”Chiyoda”,”state_en”:”Tokyo To”,”state_code”:”40″,”province”:”Chiyoda Ku”,”province_code”:”1864529″},{“postal_code”:”1000-001″,”country_code”:”PT”,”latitude”:”38.71670000″,”longitude”:”-9.13330000″,”city”:”Lisboa”,”state”:”Lisboa”,”city_en”:”Lisboa”,”state_en”:”Lisboa”,”state_code”:”14″,”province”:”Lisboa”,”province_code”:”1106″}]}}

– formでやってみる

	<form action="https://app.zipcodebase.com/api/v1/search" method="post">
	  <input type="text" name="codes">
	  <input type="hidden" name="apikey" value="${api-key}">
       <input type="submit" value="送信">
</form>

-> エラーになります。

– PHPで書きます。

$ch = curl_init();

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, false);

$data = [
	"codes" => "1000001",
];

curl_setopt($ch, CURLOPT_URL, "https://app.zipcodebase.com/api/v1/search?". http_build_query($data));
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
		"Content-Type: application/json",
    	"apikey: ${api_key}",  
));

$response = curl_exec($ch);
curl_close($ch);

$json = json_decode($response);

print("<pre>");
var_dump($json);
print("</pre>");

### フォームでzip codeを送信して結果を表示する様に書きたい
– get methodで値があればcurlする様に書く

$postcode = $_GET['postcode'];
if($postcode != null) {
	echo $postcode;
}

– htmlのformと合わせて書きます。

$postcode = $_GET['postcode'];
if($postcode != null) {
	$postcode = str_replace('#', '', $postcode);
	$ch = curl_init();

	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_HEADER, false);

	$data = [
		"codes" => $postcode,
	];

	curl_setopt($ch, CURLOPT_URL, "https://app.zipcodebase.com/api/v1/search?". http_build_query($data));
	curl_setopt($ch, CURLOPT_HTTPHEADER, array(
			"Content-Type: application/json",
	    	"apikey: ${api-key}",  
	));

	$response = curl_exec($ch);
	curl_close($ch);

	$json = json_decode($response);

	// echo $json['result'][$postcode][0]['city'];
	$city = $json->results->$postcode[0]->city;
	$state = $json->results->$postcode[0]->state;
	$country_code = $json->results->$postcode[0]->country_code;

}


?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>Worldwide PostCode Search</h1>
	<form action="/" method="GET">
	  <input type="text" name="postcode" placeholder="ハイフン抜きで入力してください">
       <input type="submit" value="送信">
</form>
<br><br>
<?php
	if($city != null){
		echo "<h3>「" . $postcode . "」のZipcode情報です！". "</h3>";
		echo "Country:" .$country_code . "<br>";
		echo "State:" .$state . "<br>";
		echo "City:" .$city . "<br>";
	}
?>

Coountry, state, cityを取れます。
$responseをvar_dumpすることで、jsonでどの項目が取得できるか確認できます。

$json = json_decode($response);
var_dump($json);

ライブラリやツールも否応なしに海外の物を使うから勉強になります。
リンクを追加

[JS] Real Time User：現在●人が見ていますを表示

ページで、現在●人が見ていますを表示したい

<p>現在: <div class="realtimeuserscounter"></div>人が見ています。</p>
<script src="https://realtimeusers.bycontrast.co/realtimeusers.js"></script>

デフォルトだとPowered なんちゃらが表示されて、改行されるので、display inlineとdisplay noneで少し修正します。

	<p style="display:inline;">現在: <div class="realtimeuserscounter" style="display:inline!important;"></div>人が見ています。</p>
<script src="https://realtimeusers.bycontrast.co/realtimeusers.js"></script>
<script>
var num = document.getElementsByClassName('realtimeuserscounter__num');
for(var i = 0; i < num.length; i++) {
num[i].style.display = "inline";
}
var kesu = document.getElementsByClassName('realtimeuserscounter__attr');
for(var i = 0; i < kesu.length; i++) {
kesu[i].style.display = "none";
}
</script>

これ、変えていいのかな？
サイト見たけどようわからん。。。

[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からひっぱてきて表示してるのね。
仕組みがわかった。完全に理解した。なるほどねー。
もっと凄い技術使ってるのかと思ったら、普通の仕組みだ。

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