Category: Research & Development

[PHP8.0.3] Fine-Diffによる差分解析

PHP Fine-Diffを使います。
GitHub:PHP-FineDiff

$ git clone https://github.com/gorhill/PHP-FineDiff.git

include 'finediff.php';

$filename1 = 'sample_from.txt';
$from_text = file_get_contents($filename1);

$filename2 = 'sample_to.txt';
$to_text = file_get_contents($filename2);

$opcodes = FineDiff::getDiffOpcodes($from_text, $to_text);

var_dump($opcodes);

$ php index.php
string(534) “c64di:9cd2i2:58c3di:9cdi4:Febrcd4i3:aryc4di:1c17di:uc185i:,c6dc84di:uc120d2i: c122di:uc238di:uc113di:uc528di:bc325di:uc106di:uc36di:uc185di:uc371di:uc267di:uc92di:uc124dc8dc5di:
c335di:uc78di:uc11di3:immcdi4:nselc39di:.ci31:The region visible from Earth (c15d4i4:univc2i3:se)c4d12c4d2i3:herc2i5:with ci15: radius of abouc2d5i2:46cd3c19d8i:,c5i83:based on where the expansion of space has taken the most distant objects observed. c763i:1cdc10d31c36di2:30c14d4i2:3?c3di:3ci:.c4dc474di:uc172di:uc191di:uc166di:uc435di:uc66d34c29di:uc1039”

🤔、ちょっとよくわからんな。

[WordPress][vagrant] オリジナルテーマ作成手順5

固定ページ(page.php)をコピーしてsingle.phpを作ります。

single.php

<?php get_header(); ?>
<!-- 上記が追記するコード -->
	<?php if(have_posts()):
		while(have_posts()): the_post();?>
 <section id="content">
	<div class="main">
	<h1><?php the_title(); ?></h1>
	<?php the_content(); ?>
	</div>
 </section>
<?php endwhile;
	endif;?>
 <!-- 下記が追記するコード -->
<?php get_footer(); ?>

### 日付別表示
date.php -> archive.php -> index.php

archive.php

<?php get_header(); ?>
<!-- 上記が追記するコード -->
 <section id="content">
	<div class="main">
      <?php 
      if ( have_posts() ) :
          while ( have_posts() ) : the_post();
      ?>
          <h2>
            <a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a>
          </h2>
          <section>
            <p>作成日時：<?php the_time('Y年n月j日'); ?></p>
            <a href="<?php echo get_permalink(); ?>"><?php the_excerpt(); ?></a>
          </section>
          <hr>
      <?php 
          endwhile;
      endif;
      ?>
	</div>
 </section>
 <!-- 下記が追記するコード -->
<?php get_footer(); ?>

固定ページやニュースの更新の作り方がなんとなくわかった。
ちょっとノウハウ入りそうだけど、自由にメンテナンスできるのは良いね。

[WordPress][vagrant] オリジナルテーマ作成手順4

作成手順3の続きです。
テンプレートには「優先順位」があり、優先度の高いテンプレートが優先的に使われる。
front-page.php->home.php->index.php

固定ページ
カスタムテンプレート -> page-{スラッグ名}.php -> page-{ID}.php -> page.php -> index.php

投稿ページ
single-{post-type}.php -> single.php -> index.php

### 固定ページの作り方
page.phpを作ります。

<?php get_header(); ?>
<!-- 上記が追記するコード -->
 <section id="content">
	<div class="main">
	<h1></h1>
	</div>
 </section>
 <!-- 下記が追記するコード -->
<?php get_footer(); ?>

classic editorをinstallして昔のエディタに直します。

管理画面の内容が反映されるように、page.phpを回収

<?php get_header(); ?>
<!-- 上記が追記するコード -->
 <section id="content">
	<div class="main">
	<h1><?php the_title(); ?></h1>
	<?php the_content(); ?>
	</div>
 </section>
 <!-- 下記が追記するコード -->
<?php get_footer(); ?>

管理画面で設定した内容が簡単に反映されるようになる。

続いて、投稿ページを作成していきたい。

[WordPress][vagrant] オリジナルテーマ作成手順3

作成手順2からの続きです。
css, imgが読み取れてないので、パスにget_template_directory_uri();を追加します。

index.php

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
// 省略
<img src="<?php echo get_template_directory_uri(); ?>/butterfly.jpg">

wp_headとwp_footerの追加

<?php wp_head(); ?>
<?php wp_footer(); ?>

ヘッダ上部に管理バーが表示されるようになる。

テンプレートは、header, footer, sidebar, indexなどに分割して、get_header();、get_footer();、get_sidebar();で呼び出すことができる。

header.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Document</title>
</head>
<body>
<div class="wrapper">
	<header>
		<h1 class="headline">
			<a href="">Sample</a>
		</h1>
		<ul class="nav-list">
			<li class="nav-list-item"><a href="">Home</a></li>
			<li class="nav-list-item"><a href="">About</a></li>
			<li class="nav-list-item"><a href="">Topic</a></li>
		</ul>
	</header>

footer.php

	<footer>
		<ul class="footer-menu">
			<li>home |</li>
			<li>about |</li>
			<li>service |</li>
			<li>Contact Us</li>
		</ul>
		<p>&copy; All rights reserved by Sample</p>
	</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>

index.php

<?php get_header(); ?>
<!-- 上記が追記するコード -->
 
 <section id="content">
	<div class="main">
	<img src="<?php echo get_template_directory_uri(); ?>/butterfly.jpg">
	<h1>Butterfly</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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	</div>
 </section>
 <!-- 下記が追記するコード -->
<?php get_footer(); ?>

テーマを作って、共通化するところまではきました。ここまでは特にそんなにWordPressの恩恵はありません。
固定ページ、投稿ページを作っていきたい。

[WordPress][vagrant] オリジナルテーマ作成手順2

作成手順1からの続きです。
続いて、テーマに使用するHTMLファイルを用意します。
ここでは単純にHTML1枚と、CSS、jpgにします。

wp-content/themesのフォルダ配下にテーマのフォルダを作ります。
ここではhpscriptにしておきましょう。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Document</title>
</head>
<body>
<div class="wrapper">
	<header>
		<h1 class="headline">
			<a href="">Sample</a>
		</h1>
		<ul class="nav-list">
			<li class="nav-list-item"><a href="">Home</a></li>
			<li class="nav-list-item"><a href="">About</a></li>
			<li class="nav-list-item"><a href="">Topic</a></li>
		</ul>
	</header>
	<div class="main">
	<img src="butterfly.jpg">
	<h1>Butterfly</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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	</div>
	<footer>
		<ul class="footer-menu">
			<li>home |</li>
			<li>about |</li>
			<li>service |</li>
			<li>Contact Us</li>
		</ul>
		<p>&copy; All rights reserved by Sample</p>
	</footer>
</div>
</body>
</html>

style.css ※layout.cssだと都合が悪そうなので、style.cssに変更します。
L テーマの名前の入力が必須のため、hpscriptと書いておく。Theme Name(必須)の他、Theme URL、Description、Versionなどがある。

/*
Theme Name : Hpscript
*/
* {
	margin:0; padding:0;
}
.wrapper {
	min-height: 100vh;
	position:relative;
	padding-bottom: 120px;
	box-sizing: border-box;
}
header {
	height: 100px;
	width: 100%;
	padding: 15px 0;
	background-color: #337079;
	color: white;
	margin-top: 0px;
	position: fixed;
}
header .headline {
	line-height: 100px;
	float: left;
	font-size: 30px;
	margin-left: 100px;
}
.nav-list {
	line-height: 100px;
	float: left;
	margin-left: 30px;
	list-style:none;
}
.nav-list-item {
	list-style: none;
	display: inline-block;
	margin: 0 20px;
}
.main {
	width: 80vw;
	padding-top: 170px;
	margin: 0px auto;
}
footer {
	width: 100%;
	height: 100px;
	background-color: #cab64a;
	color: #fff;
	text-align: center;
	position: absolute;
	bottom:0;
}
ul.footer-menu li {
	display: inline;
}

index.htmlをindex.phpに変更する

screenshot.pngという画像をテーマのフォルダ内におくと、サムネイルで表示できる。

準備ができました。
adminのテーマの画面を表示します。
http://192.168.33.10:8000/wp-admin/themes.php

おおおおおおおお、こんな簡単だったけ？
前にやった時はもっと面倒だった印象があるが。。

テーマを有効化して、トップページを表示します。
あれ？　CSSやimgのパスが繋がってないですね。

続けてやっていきます。

[WordPress][vagrant] オリジナルテーマ作成手順1

ワードプレスのオリジナルテーマを作る方法を学習したい。
さくらなど、レンタルサーバーですぐにWordPressを作成できるが、開発環境としてはレンタルサーバーだとやりにくいので、vagrant(amazon linux2)で開発する。

### 1.公式サイトよりダウンロード
まず、公式サイトのWORDPRESS.ORGよりダウンロードします。
https://ja.wordpress.org/download/
ダウンロードしたファイルを配置します。

### フォルダ構成
wp-content: テーマ、プラグイン、画像データなど
wp-admin: 管理画面用フォルダ
wp-includes: システム全般
wp-config.php: WPの設定ファイル
wp-login.php: ログイン画面
wp-load.php: 動作に必要なファイル
index.php: 最初に読み込まれるファイル

テーマの格納場所
wp-content/temes/

### 2.WPのインストール
事前準備として、Wordpress用のデータベースを作成します。mysql8.0.21を使います。
mysql> create database wordpress;

ダウンロードしたフォルダのディレクトリでサーバを起動します。
$ php -S 192.168.33.10:8000

初期ページが表示されます。

DBの設定画面が表示されるので、作成したDBを設定します。

続いて、インストール画面が表示されます。

各種入力すると、ローカル環境でインストールができました。

続いて、wp-contentフォルダの配下にテーマを作っていきます。

チャットボットの仕組み

### チャットボットの種類
ルールベース
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 "本日の営業は終了しました。";
}

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

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

「この商品を買った人はこんな商品も買っています」を実装したい

この商品を買った人はこんな商品も買っています　をやりたい。割とマジで。
テンション・リダクション効果があるらしい。Amazonの商品レコメンドやYoutubeの動画

yahoo shopping: この商品を見た人は、こんな商品にも興味を持っています
楽天: この商品を見ている人はこちらもチェック
amazon: この商品に関連する商品, よく一緒に購入されている商品

アルゴリズム
L 協調フィルタリング -> 好みが近い人が好きな商品をオススメする

{ “Aさん”:[ “商品A”, “商品B”}, “Bさん”: [“商品C”, “商品G”, “商品H”], … }
レコメンド対象との共起数をとり、共起数が高い順にオススメとして表示する
お客さんごとに、「Aさんの買った商品の集合」と「そのお客さんの買った商品の集合」の積集合の長さを取る

### ロジックのイメージ
自分の買った商品 a b c
Aさんの買った商品　b c d
Bさんの買った商品　d
Cさんの買った商品　f g
Dさんの買った商品　a e

自分の買った商品と近いのはAさん　-> dをレコメンド
次に自分の買った商品と近いのはDさん -> 次にeをレコメンド
まだ購入してない時は売れ筋商品をレコメンド

こんな感じ？

### 配列の持ち方
一緒に買われている商品を配列に持って、カウントしていく

こういうデータがあるとする。
山田　a
山田　b
山田　c
田中　b
田中　f
佐藤　a
佐藤　g
後藤 e
後藤　f

一緒に買われている商品なので、同じ人をforループで回して、商品ごとに一緒に買われている商品をkey(商品)とvalue(一緒に買われている類似度)で追加していく
a => [b =>1, c=>1]
b=>[a=>1, c=>1]
c=>[a=>1, b=>1]
b=>[a=>1, c=>1, f=>1]
f=>[b=>1]
a=>[b=>1, c=>1, g=>1]
e=>[f=>1]
f=>[b=>1, e=>1]

つまり、outputを見ると、まず商品ごとの変数が必要

初期データ
$data => [ $山田[a, b, c], $田中[b, f], $佐藤[a, g], $後藤[e, f]]

↓
$山田の中でforeach, $田中の中でforeach, $佐藤の中でforeach
↓
商品一覧の配列から各商品ごとの一緒に買われている商品の連想配列をkey順にソートして出力

これ、別にpythonじゃなくても何の言語でもできそうやな
まず、注文データから初期データを作って、それからforeachをして、次に出力
とりあえず作ってみよう　頭使うからチョコレート食べながらコーディングしたい

決済系APIを実装したい

### PayPal
月間のペイパルによる売上高
30万円以下：3.6 % + 40 円 / 件
30万円超　100万円以下：3.4 % + 40 円 / 件
100万円超　1,000万円以下：3.2 % + 40 円 / 件
1,000万円超：2.9 % + 40 円 / 件

paypalの実装方法:
https://qiita.com/PPJP/items/db5c57991c2c3fe80ac7

### Stripe
手数料：3.6%
-> smartHR, Booking.com, slack, shopify, freee, cookpad
-> Ruby, Java, Scala and Javascript

### PAY.JP
ベーシックプラン
月額費用：0¥
visa / master：3.0%
jcb / american express / dinersclub /discover：3.6%

プロプラン
月額費用：10,000¥
visa / master：2.59%
cb / american express / dinersclub /discover：3.3%

-> クレジットカード決済を導入できる
-> bizreach, baseなど

### Square
https://squareup.com/jp/ja
3.6%（Visa/MasterCard/American Expressのみ）
-> 決済種類豊富
-> HPを見る限り、店舗中心か

とりあえず、上から順番に試していきますかー

yahoo shoppingの買い物カゴの挙動とID

ヤフーショッピングの買い物カゴの挙動を調査する

### 商品詳細ページ


yahooも商品ID:523085をURLにしています。

https://store.shopping.yahoo.co.jp/insair-y/523085.html
https://store.shopping.yahoo.co.jp/${shopID}/${itemID}.html

vwitem:523085, vwcatalog:insair-y, vwquantity
addcartでカートに商品を入れている。

<form name="addCart" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form" method="post" accept-charset="EUC-JP" onsubmit="return false;">
                            
                            
<input name="vwitem" type="hidden" value="523085">
<input name="vwcatalog" type="hidden" value="insair-y">
<input name=".autodone" type="hidden" value="https://store.shopping.yahoo.co.jp/insair-y/523085.html">

// 省略
<input name="vwquantity" type="text" value="1" class="elTextBox" maxlength="3" onclick="this.select(0, this.value.length);" data-updown-quantity-box="">

js

$(function() {
    YAHOO.JP.shp.common.getSeleptah.init({
        domain     : 'https://store.shopping.yahoo.co.jp',
        deviceType : 'pc',
        position   : 1,
        moduleNum  : 5,
        itemId     : 'insair-y_523085',
        pcatId     : '22664',
        genre      : '49495',
        brand      : '113',
        price      : 12000,
        service    : 'shp',
        targetId   : 'seleptahItems',
        apicrumb    : 'hogehoge',
        ruleBucketId : '',
    });
});

商品をカートに入れる

<p class="elWrpButton" id="cartbtn">
        <a href="javascript:void(0);" class="elCartButton elButton" data-ylk="sec:cartbtn;slk:addcart;pos:0;">
            <span>商品をカートに入れる</span>
        </a>
    </p>

Commerce21iframeJsの記載があり、Commerce21をベンダーに使っている様に見える。

### ショッピングカート

数量変更

<a href="javascript:void(0);" style="display:none;" id="afterBuy-insair-y-0" data-ylk="slk:buyltr;pos:1"></a>                                     <script>
                                        document.write('<ul class="elFunction"><li class="elLater"><label><input type="checkbox" name="chk-insair-y-0" value="サウンドバー スピーカー サウンドスピーカー テレビスピーカー スピーカー Bluetooth 壁掛け 高音質 HT-SB-115  ホームシアター アイリスオーヤマ"><span class="elLabel">後で注文する</span></label></li></ul>');
                                    </script>

削除

<script>
                        document.write('<input type="text" name="item_num-0" id="dcNum03hogehoge" maxlength="3" class="dcNum dcMeiryo" value="1" >\
                        <input type="submit"name="delete-293201139" value="削除" class="dcOrderDelete" id="dhogehoge" data-ylk="slk:delete;pos:1">');
                        </script>

js

 item: [{name: "サウンドバー スピーカー サウンドスピーカー テレビスピーカー スピーカー Bluetooth 壁掛け 高音質 HT-SB-115  ホームシアター アイリスオーヤマ", id: "insair-y_523085", store_id: "insair-y", product_category: "22664", price: 12000, num: 1, sum_price: 12000, point: 120, rate_point: 1}]

商品詳細とカートの挙動は大枠は掴めたので次はテストコードと行きたい。