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

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

[jQuery3.5.1] 文字の大・中・小を制御する

<body>
	<div class="container">
		<div class="row">
			<button class="btn-s">小</button>
			<button class="btn-m">中</button>
			<button class="btn-l">大</button>
		</div>
		<div class="row">
			<div class="col">
				<p>ボタンクリックで文字の大きさが変わります</p>
			</div>
		</div>
	</div>
	<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
	<script>
		$(function(){
			$('.btn-s').click(function(){
				$("p").css('font-size','0.5em');
			});
			$('.btn-m').click(function(){
				$("p").css('font-size','1em');
			});
			$('.btn-l').click(function(){
				$("p").css('font-size','1.5em');
			});
		})
	</script>
</body>

なんか難しいことやってるのかと思ったら、割と単純でワロタw

[reCAPTCHA] 問い合わせフォームをセキュアにする

よくある「ボットではありません」というフォーム。
これを実装したい。

https://www.google.com/recaptcha/admin/create

すると、サイトキーとシークレットキーが生成される。

### HTML側の表示
– g-recaptcha タグ（g-recaptcha クラスを指定した要素）を使って自動的に表示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>reCAPTCHA widget</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script>
    	var myAlert = function(response){
    		alert("checkbox is checked");
    	};
    </script>
</head>
<body>
	<div class="container">
		<form method="post" action="#">
			<div class="g-recaptcha" data-sitekey="***" data-callback="myAlert"></div>
		</form>
		<script src="https://www.google.com/recaptcha/api.js" async defer></script>
	</div>
	<script>
	</script>
</body>
</html>

dev環境ではなく、ドメイン上で実装します。

ほう、割とすぐ実装できる。

[Stripe] PHP APIの定額課金の書き方

stripのdashboardで商品を追加して、api idをメモします。

続いて、登録画面
-> これは普通の購入画面とほぼ一緒の書き方。
-> emailをpostする

<body>
	<img src="img/boat.jpg" width="300px" height="200px"><br>
	<p>サロン会員: ¥<?php echo $price; ?>(月額課金)</p>
	<form action="/subscription.php" method="post">
		<input hidden name="name" value="<?php echo $name; ?>">
		<input hidden name="email" value="<?php echo $email; ?>">
		<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
			data-key="pk_test_*"
			data-image=""
			data-amount="<?php echo $price; ?>"
			data-name="<?php echo $name; ?>"
			data-description=""
			data-email="<?php echo $email; ?>"
			data-locale="auto"
			data-allow-remember-me="false"
			data-label="クレジットカードで登録する"
			data-currency="jpy"
			>
		</script>
	</form><br>
<!-- 	<form action="/banck.php" method="post">
		<button class="bank-btn">銀行振込で支払う</button>
	</form> -->
</body>

### サーバーサイド側
-customerを作るときは、emailとsourceのみ。payment_methodを設定するとエラーになる。
-echo $e;でエラー内容を表示しながら作業する
-\Stripe\Subscription::createのpriceのところで、先ほど取得したAPI IDを設定する

require_once('vendor/autoload.php');

\Stripe\Stripe::setApiKey('sk_*');

$sub_id = null;

try {
	$token = $_POST['stripeToken'];
	$name = $_POST['name'];
	$email = $_POST['email'];

	$customer = \Stripe\Customer::create([
	  'email' => $email,
      'source'  => $token,
	]);
	
	$subscription = \Stripe\Subscription::create([
        'customer' => $customer->id,
        'items' => [
            [
              'price' => 'price_*',
            ],
        ]
    ]);
	var_dump($subscription);

	$sub_id = $subscription->id;

	// // アプリケーション側のDB更新


	header("Location: /complete.php");
	exit;
}  catch(Exception $e){
	echo $e;
	// if($sub_id !== null){
	// 	// 例外が発生すればオーソリを取り消す
	// 	\Stripe\Refund::create(array(
	// 		'charge' => $sub_id,
	// 	));
	// }

	// header("Location: /error.html");
	// exit;
}

これでOK。
定額もショッピングも両方いけます。
続いて、定額の解約を実装したい。