為替レートをOpenExchangeRateのAPIで取得したい

外為オンラインでjsonで提供している
https://www.gaitameonline.com/rateaj/getrate
JPYで提供している通貨ペアは以下の通り
CADJPY, AUDJPY, NZDJPY, ZARJPY, CHFJPY, EURJPY, USDJPY, GBPJPY

$url = "https://www.gaitameonline.com/rateaj/getrate";
$content = file_get_contents($url);
$data = json_decode($content, true);

echo "<pre>";
var_dump($data);
echo "</pre>"; 

って、CNYないやんけ。。。🤮🤮🤮
ということで、open exchange rateのapiを使ってみたいと思う。

### open exchange rates
https://openexchangerates.org/
freeプランで登録して、APP IDを取得します。

$appId = '*';
$baseURL = 'https://openexchangerates.org/api/latest.json?app_id=' . $appId ;

$curlHandle = curl_init();

$options = [
	CURLOPT_URL => $baseURL,
	CURLOPT_HEADER => false,
	CURLOPT_RETURNTRANSFER => true
];

curl_setopt_array($curlHandle, $options);

$results = curl_exec($curlHandle);
$resultsData = json_decode($results);

$usdcny = $resultsData->rates->CNY;
$usdjpy = $resultsData->rates->JPY;

echo $usdcny . "<br>";
echo $usdjpy;

なるほど〜

radioボタンの選択状況によってHTMLの表示を変えたい

### radioボタンの選択状況の取得

<form method="" action="">
		<label for="en"><input type="radio" id="en" name="lang" value="1" checked>英語</label>
		<label for="cn"><input type="radio" id="cn" name="lang" value="2">中国語(簡体字)</label>
	</form>
	<script>
		window.addEventListener('DOMContentLoaded', function(){
			var inputs = document.querySelectorAll("input[name=lang]");
			for(var element of inputs){
				element.addEventListener('change', function(){
					if(this.checked){
						console.log(this.value);
					}
				});
			}
		})
	</script>

値を取得できているのがわかります。

表示自体を変えるには display noneとdisplay blockを切り分けます。

	<label>
	  <input class="js-check" type="radio" name="lang" value="1" onclick="formSwitch()" checked>英語
	</label>
	<label>
	  <input class="js-check" type="radio" name="lang" value="2" onclick="formSwitch()">中国語(簡体字)
	</label>
	<br><br>
	<span id="en">Name</span>
	<span id="cn">产品名称</span>


	<script>
		var en = document.getElementById('en');
		var cn = document.getElementById('cn');
		cn.style.display = "none";

	    function formSwitch() {
	        check = document.getElementsByClassName('js-check')
	        if (check[0].checked) {
	            cn.style.display = "none";
	            en.style.display = "block";
	        } else if (check[1].checked) {
	            en.style.display = "none";
	            cn.style.display = "block";
	        } 
	    }
	    window.addEventListener('load', formSwitch());
	</script>

うん、これでOKかな。

国ごとの電話コードのJavaScriptライブラリ「International Telephone Input」を使う

国際電話の電話コードの入力の助けになる様なJSライブラリがないか探した
例えば、日本の場合は国際電話の場合 「+81 -*」となる
どうやら、jQueryでInternational Telephoneというのがあるらしい
https://github.com/jackocnr/intl-tel-input

GithubからzipファイルをDLして、build側のフォルダからintlTelInput.css と intlTelInput.jsを使います。
src側のフォルダからintlTelInput.jsを使うと、「window.intlTelInput is not a function」とエラーになるので注意が必要

<link rel="stylesheet" href="css/intlTelInput.css">
// 省略
                <div class="form-group">
                  <label for="tel">電話番号</label>
                  <input type="tel" name="tel" id="mobile-number" class="form-control col-md-6">
                </div>
// 省略
  <script src="js/jquery.min.js"></script>
  <script src="js/intlTelInput.js"></script>
  <script>
  var $input = document.querySelector("#mobile-number");
  window.intlTelInput($input, {
      defaultCountry: "us",
    });
  </script>

OK、顧客登録側はほぼほぼ出来たかな^^

海外のzipcode からAPI で住所を取得する

zipcodebaseというサイトを使ってみます。
こちらのサイトでregisterしてapi keyを取得します。
https://zipcodebase.com/

– ブラウザで試す
https://app.zipcodebase.com/api/v1/search?apikey=${api_key}&codes=1000001

-> response
{“query”:{“codes”:[“1000001″],”country”:null},”results”:{“1000001”:[{“postal_code”:”100-0001″,”country_code”:”JP”,”latitude”:”35.67490000″,”longitude”:”139.76190000″,”city”:”Chiyoda”,”state”:”Tokyo To”,”city_en”:”Chiyoda”,”state_en”:”Tokyo To”,”state_code”:”40″,”province”:”Chiyoda Ku”,”province_code”:”1864529″},{“postal_code”:”1000-001″,”country_code”:”PT”,”latitude”:”38.71670000″,”longitude”:”-9.13330000″,”city”:”Lisboa”,”state”:”Lisboa”,”city_en”:”Lisboa”,”state_en”:”Lisboa”,”state_code”:”14″,”province”:”Lisboa”,”province_code”:”1106″}]}}

– formでやってみる

	<form action="https://app.zipcodebase.com/api/v1/search" method="post">
	  <input type="text" name="codes">
	  <input type="hidden" name="apikey" value="${api-key}">
       <input type="submit" value="送信">
</form>

-> エラーになります。

– PHPで書きます。

$ch = curl_init();

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, false);

$data = [
	"codes" => "1000001",
];

curl_setopt($ch, CURLOPT_URL, "https://app.zipcodebase.com/api/v1/search?". http_build_query($data));
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
		"Content-Type: application/json",
    	"apikey: ${api_key}",  
));

$response = curl_exec($ch);
curl_close($ch);

$json = json_decode($response);

print("<pre>");
var_dump($json);
print("</pre>");

### フォームでzip codeを送信して結果を表示する様に書きたい
– get methodで値があればcurlする様に書く

$postcode = $_GET['postcode'];
if($postcode != null) {
	echo $postcode;
}

– htmlのformと合わせて書きます。

$postcode = $_GET['postcode'];
if($postcode != null) {
	$postcode = str_replace('#', '', $postcode);
	$ch = curl_init();

	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_HEADER, false);

	$data = [
		"codes" => $postcode,
	];

	curl_setopt($ch, CURLOPT_URL, "https://app.zipcodebase.com/api/v1/search?". http_build_query($data));
	curl_setopt($ch, CURLOPT_HTTPHEADER, array(
			"Content-Type: application/json",
	    	"apikey: ${api-key}",  
	));

	$response = curl_exec($ch);
	curl_close($ch);

	$json = json_decode($response);

	// echo $json['result'][$postcode][0]['city'];
	$city = $json->results->$postcode[0]->city;
	$state = $json->results->$postcode[0]->state;
	$country_code = $json->results->$postcode[0]->country_code;

}


?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>Worldwide PostCode Search</h1>
	<form action="/" method="GET">
	  <input type="text" name="postcode" placeholder="ハイフン抜きで入力してください">
       <input type="submit" value="送信">
</form>
<br><br>
<?php
	if($city != null){
		echo "<h3>「" . $postcode . "」のZipcode情報です!". "</h3>";
		echo "Country:" .$country_code . "<br>";
		echo "State:" .$state . "<br>";
		echo "City:" .$city . "<br>";
	}
?>

Coountry, state, cityを取れます。
$responseをvar_dumpすることで、jsonでどの項目が取得できるか確認できます。

$json = json_decode($response);
var_dump($json);

ライブラリやツールも否応なしに海外の物を使うから勉強になります。
リンクを追加

海外住所入力フォームのHTMLレイアウトデザイン

通常は、
「郵便番号」「住所1」「住所2」と書いている

これがebayだと「Contry」「Address」「Additional Information」「City」「State/Province」「Region」「Postal Code」の順になる

同じ様に作りたい。

World postal code というサイトで調べられるのね。
https://worldpostalcode.com/

postal code入れたらcityを自動入力できるjavascriptのライブラリとかないのかね
と思ったら、幾つかありそう

国を選択するselect boxを作る

国のselect boxを作りたい。

値については、ebayの登録画面を参考にする。
https://reg.ebay.com/reg/Upgrade?ru=https%3A%2F%2Fwww.ebay.com%2Fmys%2Fhome%3Fsource%3DGBH

ebayのselect boxのhtmlを見てみると、select boxのoption valueのところは数字で管理しているので、真似たい。

<select name="countryId" id="countryId"
				class="wide wide fld"
				aria-label="Country / Region "
				a="1" v="1" placeholder="Country / Region ">
<option value="1"
						>United States</option><option value="225"
						>APO/FPO/DPO</option><option value="2"
						>Canada</option><option value="3"
						>United Kingdom</option>
// 省略

mediacollegeというサイトで、select menuのsampleがあります。

<select class="form-control col-md-4" id="client_country" name="client_country">
                        <option value="">Country...</option>
                        <option value="AF">Afghanistan</option>
                        <option value="AL">Albania</option>
                        <option value="DZ">Algeria</option>
                        <option value="AS">American Samoa</option>
                        <option value="AD">Andorra</option>
                        <option value="AG">Angola</option>
                        <option value="AI">Anguilla</option>
                        <option value="AG">Antigua &amp; Barbuda</option>
                        //省略
                      </select>

ほう、思ってたより良い感じです^^

voltでsassを編集したい

まずvoltのドキュメントを確認します。
https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/file-structure/

html内に書かれている @@include などはgulpの記法とのこと。
file-structureを読む限り、sassの編集はsrcフォルダのファイルを変更するように見える。

_head.html で読み込んでいるCSS

<!-- Fontawesome -->
<link type="text/css" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">

<!-- Sweet Alert -->
<link type="text/css" href="@@path/vendor/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">

<!-- Notyf -->
<link type="text/css" href="@@path/vendor/notyf/notyf.min.css" rel="stylesheet">

<!-- Volt CSS -->
<link type="text/css" href="@@path/css/volt.css" rel="stylesheet">

src/scss/volt/components/_body.scss

.search {
	.btn {
		width: 200px;
	}
}

一応効いてますね。
「src/scss/volt/」フォルダのscssファイルを編集すれば良いようです。

というか、日本語のドキュメントが殆ど無いんだが。。 日本人で使ってる人は殆どいないのかな。

Bootstrapでspの時のみmargin-topをつけたい

pcの時はrow(横並び)にして、改行してspの時はmargin-topをつける
.mt-3 と .mt-md-0 をつければ、mtを切り分けられる。

<div class="row mt-3">
			<form class="d-flex col-md-4">
		        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
		        <button class="btn btn-outline-success" type="submit">Search</button>
		    </form>
		    <div class="col-md-3 mt-md-0 mt-3">
		    <select class="form-select" aria-label="Default">
		    	<option selected>Recomend</option>
		    	<option value="1">Low Price</option>
		    	<option value="2">High Price</option>
		    </select>
			</div>
		</div>

pc

sp

よっしゃーーー〜ーーー

Bootstrap5でfooterを作成する

<footer class="footer mt-4 py-3 bg-light">
    <div class="container text-center">
      <span class="text-muted">Demo Company &copy; All Right Reserved.</span>
    </div>
 </footer>

2行にしたい。

<footer class="footer mt-4 py-3 bg-light">
	<div class="text-end">
      <a href="">Privacy Policy</a>	<a href="">Terms</a>
    </div>
    <div class="text-center">
      <span class="text-muted">Demo co., &copy; All Right Reserved.</span>
    </div>
 </footer>