Month: January 2021

[video] modalで動画を表示したい

modal-video.jsを使う場合

	<link rel="stylesheet" type="text/css" href="/css/modal-video.min.css">
	
</head>
<body>
	<div class="container">
		<div class="video-container">
			<button class="js-modal-btn" data-video-id="${youtube ID}">Videoを開く</button>
			<div class="video-sidebar">
				<h1>Video Test</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
			</div>
		</div>
		<h1>H1</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
		<img src="img/img1.jpg" class="object-fit" width="400px" height="200px"><br><br>
	</div>
	<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script src="/js/jquery-modal-video.min.js"></script>
	<script>
  		$(".js-modal-btn").modalVideo();
	</script>

jqueryを使っている場合、modal-video.min.jsでは反応しない。jquery-modal-video.min.jsにする必要がある。

### fancyboxのモーダルを使う場合

	<link rel="stylesheet" href="/css/jquery.fancybox.css" type="text/css" media="screen" />
	<style>
		#video {
			display: none;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="video-container">
			<button class="modal" href="#video">Videoを開く</button>
			<div id="video">
				<video id="player" controls width="640" height="360">
					<source src="/video/hoge.mp4">
				</video>
			</div>
			<div class="video-sidebar">
				<h1>Video Test</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
			</div>
		</div>
		<h1>H1</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
		<img src="img/img1.jpg" class="object-fit" width="400px" height="200px"><br><br>
	</div>
	<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.fancybox.js"></script>
	<script>
  		$(function(){
  			$(".modal").fancybox({
  				'onComplete':function(){
  					vidplay();
  				}
  			});
  			function vidplay(){
  				var video = document.getElementById("player");
  				if(video.paused){
  					video.play();
  				} else {
  					video.paused();
  				}
  			}
  		});
	</script>

display noneとして、ボタン押下時にmodalで表示する。
modal-videoでもfancyboxでも、どっちも使えそう。

[video] Webページ背景に動画を表示する方法

代表的な属性
– width
– height
– src
– autoplay
– controls
– muted
– poster(埋め込む動画の変わりに表示する画像ファイルのURLを指定)
– playsinline(全画面のビデオプレイヤーを起動させずにページ内で動画を再生)

### 普通の動画再生

<video src="video/flower.mp4" controls width="320" height="240"></video>

### 背景

<style>
.video-container {
  position: relative;
}

.video-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); 
}

video {
  width: 100%;
}
</style>

<div class="video-container">
  <video src="video/test.mp4" autoplay playsinline muted loop></video>
  <div class="video-sidebar">
    <h1>Title</h1>
    <p>text</p>
  </div>
</div>

モーダルで表示させたいね。

[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>

ほう

[img] 画像をbase64にエンコードして書く方法

http://192.168.33.10:8000/img/img1.jpg

“copy image as data URL”でbase64のパスを取得できる。
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJ…

なるほど、こういう方法があるのか。。

[JavaScript] Lazy Loadで画像読み込みを高速化させる

	<div class="container">
		<img data-src="img/img1.jpg" class="lazyload"><br><br>
		<img data-src="img/img2.jpg" class="lazyload"><br><br>
		<img data-src="img/img3.jpg" class="lazyload"><br><br>

	</div>
	<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
	<script>
    lazyload();
</script>

画像のソースをsrcではなく、data-srcと書く。

なるほど、勉強になります。

[HTML] OGPとapple-touch-icon

ogpタグの設定

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:title" content="">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<meta property="og:description" content="" />
<meta property="og:url" content="[url]">
<meta property="og:phone_number" content="[telnum]" />
<meta property="og:locality" content="" />

TOPページの場合は「website」、WEBサイト上の記事ページなど、TOPページ以外には「article」を指定
og:imageはシェアされたい写真

apple-touch-iconは、iphone, ipadに追加されたときに表示されるアイコン

[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文字とかで、検索文字を太字で表示したい。

チャットボットの仕組み

### チャットボットの種類
ルールベース
L ルールに沿った反応をする

機械学習型
L あらかじめ学習させた膨大なデータの中から、人工知能が最も適したと判断した回答

### チャットボットの仕組み
キーワード分析
L キーワードに対する回答をデータベースから探す

回答
L 自分で言葉を組み立てる能力がないため、設定したデータベースから回答を選び返答される
L データベースを充実させるほど、たくさんの質問を答えることができる

形態素分析して、単語の配列の中にキーワードが含まれていれば、決められた回答を行う　でOK?

array_intersectで配列の中にキーワードが含まれているかで回答する。

$query = ["商品","の","見積もり","金額","教えて","欲しい"];
// $wo = ["昨日","買った","商品","を","返金","したい"];
$estimate = ["見積","見積もり","予算"];
$company = ["会社","社長","地図"];
$refund = ["返金","お金","返せ","ふざけるな"];

if(count(array_intersect($estimate, $query)) != 0) {
	echo "営業担当よりご案内いたします。";
} elseif (count(array_intersect($company, $query)) != 0) {
	echo "会社情報をご覧ください";
} elseif (count(array_intersect($estimate, $query)) != 0) {
	echo "コンタクトセンターにお繋ぎいたします。";
} else {
	echo "本日の営業は終了しました。";
}

これ、チャットボットの意味あんのか？？　
問い合わせの数を減らしても顧客満足度が上がっているかは謎だな。

再配達依頼とか、決まった要望に対して一定のルールで入力を促すのはわかるが。。。
& 機械学習型のチャットボットは気になるな。

[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>

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