[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。
定額もショッピングも両方いけます。
続いて、定額の解約を実装したい。

[Stripe] 変数を使ってクレジットカード処理のフォームを書く

商品名、商品詳細、商品価格、購入者のemailアドレスを変数と持ちます。

フォーム画面

$name = "チョコレートset";
$description = "甘さが絶妙なカカオチョコレートセット";
$price = "100";
$email = "test@gmail.com";
?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.stripe-button-el {
			width: 350px;
			max-width: 100%;
		}
		.stripe-button-el span {
			font-size: 18px;
			padding: 15px;
		}
		.bank-btn {
			    padding: 0 12px;
			    height: 30px;
			    line-height: 30px;
			    background: #1275ff;
			    background-image: linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);
			    font-size: 14px;
			    color: #fff;
			    font-weight: bold;
			    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
			    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
			    border-radius: 4px;
			    width: 350px;
				max-width: 100%;
				padding-bottom:20px;
		}

	</style>
</head>
<body>
	<img src="img/choco.jpg" width="300px" height="200px"><br>
	<p>商品: ¥<?php echo $price; ?></p>
	<form action="/charged.php" method="post">
		<input hidden name="name" value="<?php echo $name; ?>">
		<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="<?php echo $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>

商品画面

クレジット入力画面

入金管理画面

何やこれ、完全に行けるやんけ。
ヨシっ、資料作ろうwww

[Stripe] クレジットカード決済処理

### フォーム画面
index.php

	<form action="/charge.php" method="post">
		<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
			data-key="pk_test_*"
			data-amount="100"
			data-name="この商品の料金は100円です"
			data-locale="auto"
			data-allow-remember-me="false"
			data-label="購入する"
			data-currency="jpy"
			>
		</script>
	</form>

購入ボタン押下

stripeクレジットカードのテスト情報
https://stripe.com/docs/testing

stripeタグ属性
https://stripe.com/docs/legacy-checkout#integration-simple-options

### stripe-php
Github: stripe-php

$ composer require stripe/stripe-php
$ ls
composer.json composer.lock index.php vendor

### charged.php

require_once('vendor/autoload.php');

// シークレットキー
\Stripe\Stripe::setApiKey('pk_test_*');

$chargeId = null;

try {
	$token = $_POST['stripeToken'];
	$charge = \Stripe\Charge::create(array(
		'amount' => 100,
		'currency' => 'jpy',
		'description' => 'test',
		'source' => $token,
		'capture' => false,
	));
	$chargeId = $charge['id'];

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

	// 売上確定
	$charge->capture();

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

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

complete.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Complete</title>
</head>
<body>
	
</body>
</html>

あーこれ、上手くいきそうやな。
ちょっと実運用に近いフォームにカスタマイズしたい。