常連

注目の的

拍手喝采

自己紹介

PHP は IEEE 754 倍精度フォーマットを使っているので丸め誤差が発生することは承知しています。

ですので、`100 * 1.08` などの計算では誤差が生じる、または表示されない少数があるということは存じ上げております。

消費税の計算方法として下記のように `untaxed * 108 / 100` という方法があります。

> いちばん確実なのは、untaxed * 108 / 100のように計算することです。2^53（≒83兆）以下の整数では誤差が出ませんので、掛け算までは正確に行われます。割り算も、結果が正確に浮動小数点数になるなら、正確な値を返します。
> 
> 引用：[JavaScriptで消費税を計算する - Qiita](https://qiita.com/jkr_2255/items/0ca7bc536d930f83a901#%E6%AD%A3%E7%A2%BA%E3%81%AB%E8%A8%88%E7%AE%97%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB)

この記事では JavaScript について言及していますが、PHP でも `untaxed * 108 / 100` という計算式で税込価格が求められるかと存じます。

いくつか質問がございます。

#### 質問1

引用した説明の中で不明な点がございます。

> 2^53（≒83兆）以下の整数では誤差が出ません

この1行ですが、`2^53` がなぜ 83 兆なのでしょうか。
`2^53` は 九千七兆一千九百九十三億 ではないのでしょうか？
どのような計算で 83 兆となるのでしょうか。

#### 質問2

[引用元](https://qiita.com/jkr_2255/items/0ca7bc536d930f83a901#%E6%AD%A3%E7%A2%BA%E3%81%AB%E8%A8%88%E7%AE%97%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB)のコメント欄には下記のような指摘があります。

> JavaScriptでは掛け算は浮動小数点演算で行われ結果によっては誤差も出るのでは?
> 
> [https://ideone.com/uYc6AV](https://ideone.com/uYc6AV)

```
var untaxed = 1000000000000001
print(untaxed * 108)
```

実行結果が 108000000000000110 になっているため、確かに誤差が生じています。
同じ計算を PHP で試しました。

```
<?php

$untaxed = 1000000000000001;
echo $untaxed * 108;
```

実行結果：[3v4l](https://3v4l.org/Jdkbi)

108000000000000108 と表示されるため、誤差は生じていないかと存じます。
これは、PHP の掛け算は浮動小数点演算で行われていないため、誤差が生じないということでしょうか？

#### 質問3

`untaxed * 108 / 100` という計算式だと PHP でも誤差が生じる場合があるのでしょうか？
誤差が生じる場合、誤差が生じるケースを教えてください。

#### 質問4

`untaxed * 108 / 100` という計算式において `108` を変数に代入するときに変数名は何にしますか？

```
<?php

$price = 100;
$taxRate = 108;
echo $price * $taxRate / 100;
```

最初は `taxRate` かなと考えましたが、`taxRate` だと消費税率という意味で `108` という値が入るのは直感的にわかりにくいのかなとも思いました。
もう少し適切な命名はありますか？
先述したコードは単純なので `taxRate` でも問題は生じませんが、関数化を想定した場合に、もう少し適切な命名があるのかなと考えています。

いくつも質問しましたが、わかる質問だけでも結構ですので、教えてください。

消費税の計算について

### やりたいこと
nginxでcloudflare向き先のオリジンサーバのIPを直叩きを拒否したい

ドメイン: example.com
オリジンサーバIP: XX.XX.XX.XX

|クライアント||cloudflare||オリジンサーバ|
|:--|:--:|:--|:--|
|ブラウザ|←→|example.com|←→|XX.XX.XX.XX|

http://XX.XX.XX.XX → 444(nginx)
https://XX.XX.XX.XX → 444(nginx)

### 試したこと
[こちら](https://blog.luispc.com/entry/2019/08/24/025404)を参考に下記のように設定
```nginx
eo $realip_remote_addr $cf {
        default 0;
        # IPv4
        173.245.48.0/20 1;
        103.21.244.0/22 1;
        103.22.200.0/22 1;
        103.31.4.0/22 1;
        141.101.64.0/18 1;
        108.162.192.0/18 1;
        190.93.240.0/20 1;
        188.114.96.0/20 1;
        197.234.240.0/22 1;
        198.41.128.0/17 1;
        162.158.0.0/15 1;
        104.16.0.0/12 1;
        172.64.0.0/13 1;
        131.0.72.0/22 1;
        # IPv6
        2400:cb00::/32 1;
        2606:4700::/32 1;
        2803:f800::/32 1;
        2405:b500::/32 1;
        2405:8100::/32 1;
        2a06:98c0::/29 1;
        2c0f:f248::/32 1;
}
server {
    if ($cf = 0){
        return 444;
    }
}
```

### 結果
443で接続すると下記のようにオリジンサーバであることがバレてしまいます。

http://XX.XX.XX.XX → 444(nginx)
https://XX.XX.XX.XX → ブラウザエラー
```Chrome
この接続ではプライバシーが保護されません
XX.XX.XX.XX では、悪意のあるユーザーによって、パスワード、メッセージ、クレジット カードなどの情報が盗まれる可能性があります。詳細
NET::ERR_CERT_COMMON_NAME_INVALID
このサーバーが example.com であることを確認できませんでした。このサーバーのセキュリティ証明書は example.com から発行されています。原因としては、不適切な設定や、悪意のあるユーザーによる接続妨害が考えられます。
```

サーバ設定以前の問題な気がしますが、
オリジンのIPを直叩きした場合にオリジンサーバとわからなくする方法はないのでしょうか？
（そもそもなぜIPから証明書が逆引き？できてしまうのかよくわかっておらず。。）

cloudflare オリジンサーバIPの隠蔽について

### 前提・実現したいこと

API Gateway で CORS を実現したいです。
ローカル環境の Vue で作成したページから、API Gateway でファイルを POST したいです。

### 発生している問題・エラーメッセージ
API Gateway で CORS は有効化しています。

Preflight リクエストが送信されて、そのレスポンスで access-control-allow-origin としてローカルのアドレスが許可されているのは確認しました。
しかし、実際の POST リクエストが発生しないです。
この原因がわかりません。

以下、Chrome(Version 79.0.3945.79) のコンソールに表示されていたエラーメッセージです
```
Error: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.
```

ネットワークタブを見ると、OPTIONS メソッドで Preflight リクエストが送信され、レスポンスを200で受け取っていることは確認できました。
また、レスポンスで Origin として許可されていることも確認しました。

### ヘッダ
* リクエストヘッダ
```
:authority: xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com
:method: OPTIONS
:path: /dev/upload
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,ja;q=0.8
access-control-request-headers: access-control-allow-origin,content-type
access-control-request-method: POST
origin: http://192.168.0.20:8080
referer: http://192.168.0.20:8080/
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36
```

* レスポンスヘッダ

```
access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
access-control-allow-methods: DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT
access-control-allow-origin: *
content-length: 0
content-type: application/json
date: Fri, 13 Dec 2019 04:02:02 GMT
status: 200
via: 1.1 7408587aefcdfb48b378f51605d1bdd3.cloudfront.net (CloudFront)
x-amz-apigw-id: En8BNGXcNjMFtWg=
x-amz-cf-id: VOC8WZn8sPnsN5H1FJCyI4gqpFRgwgbr9QGQkny9KZtV0Xxujyjdxg==
x-amz-cf-pop: NRT51
x-amzn-requestid: 3a1a7d61-6d46-4011-8b73-42bed4eb6ebf
x-cache: Miss from cloudfront
```
### 試したこと

CURL コマンドで OPTIONS を叩くと、以下が返ってきます。
ちゃんと設定できているように思います。
```
curl -i -X OPTIONS https://XXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/dev/upload
HTTP/2 200
content-type: application/json
content-length: 0
date: Fri, 13 Dec 2019 03:59:36 GMT
x-amzn-requestid: eeaa4573-ab92-4c03-aef4-dd3252233c75
access-control-allow-origin: *
access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
x-amz-apigw-id: XXXXXXXXXXX
access-control-allow-methods: DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT
x-cache: Miss from cloudfront
via: 1.1 xxxxxxxxxxxxxxxxxxxxxxxxxx.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT51-C2
x-amz-cf-id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

access-control-allow-origin で許可されているが、実際の POST リクエストが発生しない

Mysqlに絵文字をINSERTしようとすると?に変換されます
INSERT文を打ち込む時点で既に?となっています
例えば、
INSERT INTO test (text) VALUES('✨');
というSQLはコンソール上では
INSERT INTO test (text) VALUES('?');
のように表示され、レコードにも?で登録されます

データベースとテーブルについて文字コードを調べたところ、以下のようになりました
データベースを選択した状態でコマンドshow variables like '%char%';に対し、
character_set_client : utf8mb4
character_set_connection : utf8mb4
character_set_database : utf8mb4
character_set_filesystem : binary
character_set_results : utf8mb4
character_set_server : latin1
character_set_system : utf8
character_sets_dir : [charsetsへのパス]

show create table test; に対し、
| test | CREATE TABLE `test` (
  `id` int(20) NOT NULL AUTO_INCREMENT,
  `text` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8mb4
となっています
なお、charcter_set_serverがlatin1になっているのが気になったので調べたところ、
[こちらの記事](https://qiita.com/yoshi-taka/items/ceb5d14684b93715f1a6)にデータベース作成時に作用するものであるとあった為、今は関係ないものと判断しています

原因、或いは解決法をご存じの方はご教示お願いします

### 環境
Mysql 5.7.22
接続にEC2のlinux2を使用しています

Mysqlに絵文字をINSERTできない

###実現したいこと

以下の流れでAJAXを使ってHTMLを挿入するのですが、この速度を向上させたいと考えています。
###HTML挿入の流れ
HTML挿入の流れはこうです。

記事一覧にはタイトルとサムネイルが表示されており、それをクリックします。

そのとき通信はせず、まず先にタイトルとサムネイルを表示します。さらにそれ以外の部分の外郭HTMLも表示し、「読み込み中」とします。

そしてAJAXでその他のデータを取得し、できたらその中身を挿入する。という流れです。
![イメージ説明](46ea3a11a8689e79b5ad739696a17a3d.png)

###速度の問題
AJAXの前にすでにあるデータを表示したり、外郭のHTMLを表示したりするというのは体感速度を上げる狙いです。

しかしHTMLの挿入速度に問題があります。

上図のように「外郭を先に表示し、データは後で挿入」でなく、「AJAXでの取得が終わったそのときに、データが挿入されたHTMLを表示」とした方が、処理が早いようなのです。

その計測が次のソースコードになります。

###該当のソースコード
ご覧のように「keisoku_1();」と「keisoku_2();」で計測しました。

「keisoku_1();」の方は上図のように「外郭を先に表示し、データは後で挿入」という方法です。

「keisoku_2();」の方は「AJAXでの取得が終わったそのときに、データが挿入されたHTMLを表示」という方法です。

それぞれ実行すると分かるとおり、「keisoku_2();」の方が圧倒的に速いのです。


```js

/*
keisoku_1();
外郭のHTMLを取得し、後からデータを入れる方法を計測
----------------------------------------------*/
// 計測を実行
keisoku_1();
function keisoku_1(){

	var time_before = new Date().getTime();

	var lis = '';
	for ( var i = 0;  i < 1000;  i++ ) {
		var data = { num:i, ttl:'hello_'+i };
		var html = get_outline_html( i );
		var html = update_outline_html( html, data );
		lis += html;
	}
	$( 'body' ).html( lis );

	var time_after = new Date().getTime();
	console.log( 'keisoku_1() = ' + parseInt(time_after - time_before) );
}

// 外郭のHTMLを取得
function get_outline_html( i ){
	return `
	<div class="box num${i}">
	<p class="ttl"></p>
	<p class="num"></p>
	</div>`;
}

// 後からデータを入れる
function update_outline_html( html, data ){
	var $html = $( html )
	.find( '.ttl' ).text( data.ttl )
	.find( '.num' ).text( data.num ); 
	return $html[0];
}


/*
keisoku_2();
データを入れたHTMLを取得する方法を計測
----------------------------------------------*/
// 計測を実行
keisoku_2();
function keisoku_2(){

	var time_before = new Date().getTime();

	var lis = '';
	for ( var i = 0;  i < 1000;  i++ ) {
		var data = { num:i, ttl:'hello_'+i };
		var html = get_all_html( i, data );
		lis += html;
	}
	$( 'body' ).html( lis );

	var time_after = new Date().getTime();
	console.log( 'keisoku_2() = ' + parseInt(time_after - time_before) );
}

// データを入れたHTMLを取得
function get_all_html( i, data ){
	return `
	<div class="box num${i}">
	<p class="ttl">${data.ttl}</p>
	<p class="num">${data.num}</p>
	</div>`;
}

```
###質問
そこで質問ですが、上述した「HTML挿入の流れ」はそのままで、もう一歩速度を向上させられるようなソースコードの工夫などございましたらご教授頂けますでしょうか。

当方JavaScript初心者のため上のソースコードにおかしな点などあるやもしれませんので、もし意図が伝わりにくい等の不備がございましたらどうぞご指摘ください。

以上です。何卒、宜しくお願い申し上げます。

###改善の追記
maisumakun様のアドバイスを受けまして、以下「keisoku_3();」です。
【改善1】として「.clone()」を使い、【改善2】としてクラス付与を変更致しました。

ですが「$html」が取得できないようで、要素の挿入がされない状況になってしまいました。
困ったことにエラーも出ておらず、悪いところがわかりません。

お気づきの点ございましたらご指摘いただければと思い、ここに追記させて頂きました。
```js

/*
keisoku_3();
maisumakun様のアドバイスを受けて
----------------------------------------------*/
// 計測を実行
keisoku_3();
function keisoku_3(){

	var time_before = new Date().getTime();

	var $html;
	for ( var i = 0;  i < 3;  i++ ) {
		var data = { num:i, ttl:'hello_'+i };

		if ( i == 0 ){
			// 【改善1】1回目だけjQeury化する
			var html = get_outline_html( '' ); // 【改善2】iを渡してクラス付与しない
			var $html = $( html )
			.find( '.ttl' ).text( data.ttl )
			.find( '.num' ).text( data.num )   
			.find( '.box' ).addClass( 'num'+i ); // 【改善2】ここでクラス付与する
		}else{
			// 【改善1】2回目以降は.clone()する
			var $html = $html.clone();
			$html
			.find( '.ttl' ).text( data.ttl )
			.find( '.num' ).text( data.num )
			.find( '.box' ).addClass( 'num'+i );
		}
		$( 'body' ).html( $html[0] ); // $html が取得できていない様子
	}

	var time_after = new Date().getTime();
	console.log( 'keisoku_3() = ' + parseInt(time_after - time_before) );
}


```

JavaScriptで処理速度を向上させるコードの工夫

serverless frameworkで複数のlambda関数(nodejs)を作成しています。
特定のlambdaをAPI gatewayから呼び出した際に、動作はしているのですが、console.logがClouudWatchにログ出力されません。

イベントの開始終了はログストリームに記録されています。
lambdaのモニタリングタブでのRecent invocationsにも記載されておりません。
同じロールを用いている別関数は出力されています。

原因等わかりますでしょうか？

AWS lambdaのログが出力されない

### 前提・実現したいこと
特定の文字列があった場合にそれ以外の文字を見て、なおかつ特定の文字列があったらマッチさせないという正規表現を書きたいです。

例えば「**ABCDCD**」という文字列を正規表現する場合に「**AB**」があるか確認し、あった場合「**CDCD**」を取り出して$1として使いたい。
そこに「**EF**」が含まれていたらマッチして欲しくないというものです。（「ABCDCDEF」だった場合にはマッチングさせない）
そもそも実現できるのか気になってしまったので質問させていただきました。

### 試した正規表現
- ^(?!.*EF)(?=/AB/).* 　結果→　**EFが含まれている時はマッチしなかったが全ての文字列が選択されてしまった。**
- (?<=/AB/).*[^EF] 　結果→　**AB以外の文字を取得できたがEFがある時にもマッチしてしまった**

宜しくお願い致します。

複雑な正規表現をしたいのですがうまくいきません。

お世話になっております。

window.openで開いた先の一覧画面でクリックすると、その内容を親画面に返す処理を実装します。
親画面に渡す際にwindow.openerを使用しています。
ここで、親画面と子画面ではサイトのURLが以下例のように異なります。

親画面：https://client1.test.com/
子画面：https://common.test.com/


Internet Explorerではこの処理で正常に親画面に値が返されます。
Chromeの場合、エラーになってしまいます。
いわゆるCORS(Cross-Origin Requests)が原因だと考えており、ヘッダーに下記を埋め込んでみたのですが正常動作しません。
ブラウザ側の設定は変更していません。(ユーザーがいるものなので変更できないです)
ChromeのCORS対策を超えるための設定をご教示いただけないでしょうか。

---

親画面のJavaScript：

```JavaScript
// 子画面を開く
var ShowSearch = function () {
	window.open("https://common.test.com/", "_blank");
};
// 子画面から値を受け取る
var OnSelectedItem = function (value) {
	alert(value["test"]);
};
```

子画面のJavaScript：
```JavaScript
<script>
var OnSelect = function () {
	if (window.opener && window.opener.OnSelectedItem) {
		var result = {};
		result["test"] = "test";
		// 子画面に値を渡す
		window.opener.OnSelectedItem(result);
	}
};
</script>
<button type="button" onclick="OnSelect();">選択</button>
```

エラーメッセージ：
Uncaught DOMException: Blocked a frame with origin "https://common.test.com/" from accessing a cross-origin frame.
(window.opener.OnSelectedItemで発生します)


親画面、子画面両方のサーバーサイドでHttpのレスポンスヘッダーに以下を追加しています。
```
Access-Control-Allow-Origin:*
Access-Control-Allow-Headers:*
Access-Control-Allow-Methods:GET,POST,HEAD,OPTIONS
Cross-Origin-Opener-Policy:Allow
Cross-Origin-Window-Policy:Allow
X-Frame-Options: sameorigin
```

ChromeのCORSを超えて、子画面から値を返したい

体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践を購入したのですがセキュリティ対策系はこの本の内容だけで果たして十分なのでしょうか？

会員制サイトのセキュリティについて

### 前提・実現したいこと
アンドロイドアプリでボタンを押したらMAMPで起動してるPC上のphpにパラメータを送れるように
したいです。

### 発生している問題・エラーメッセージ
googleには繋がるがローカルにおいてあるphpファイルにデータの送信が
できません。エラーが出るので通信がうまくいってないみたいです

ローカルネットワークの通信には対応していないなどの制限はありますか？


### 該当のソースコード

```java
try{
 String siteURL = "http://192.168.11.20:8001/~";
 String sitePrm = "data=〇〇〇";
 
 URL url = new URL(spec: siteURL + "?" + sitePrm);
 HttpURLConnection con = (HttpURLConnection) url.openConnection();

 con.setDoInput(true);
 con.setDoOutput(false);
 con.setRequestMethod("GET");
 con.connect();
} catch(Exception) {
　textView.setText("エラー");
}
```



### 試したこと
参考にしたサイト
・https://araramistudio.jimdo.com/2018/03/15/androidでhttpを使ったネットワーク接続/


### 補足情報（FW/ツールのバージョンなど）
Android studio 3.4.2
PHP 7.3.8