海外の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>

[Photoshop] メインビジュアルの画像を加工する

### jpeg写真を用意する

### 文字を追加する
Photoshopで画像を開いて、sideメニューのテキストから文字を追加する

### 長方形に画像を切り抜く
長方形選択ツールで画像をくり抜いて、「イメージ」->「切り抜く」で画像をくり抜く

### アスペクト比を指定して切り抜く
黄金比などありますが、今回は縦横比を1:2で切り抜きたいと思います。
headerメニュー「スタイル」で「縦横比を固定」を選択し、幅2、高さ1指定にします。
サイズは 1280 x 640 になっています。

web用に保存で jpegで保存します。

ちょっと2:1だとPCで見たときに縦長すぎるので、2:0.75に変更する

うーん、難しい

bootstrap5でPC版ヘッダーメニューを右寄せにする

logoは .navbar-brand、右寄せは .float-end を使用する。
参考: 横の配置ユーティリティ

<nav class="navbar navbar-light bg-light">
	<div class="container-fluid">
		<a class="navbar-brand">Demo EDI Manager</a>
		<div class="float-end">
			hoge
		</div>
	</div>
</nav>

<nav class="navbar navbar-light bg-light">
	<div class="container-fluid">
		<a class="navbar-brand">Demo EDI Manager</a>
		<div class="float-end">
			<ul class="list-group list-group-horizontal">
				<li class="list-group-item">Order</li>
				<li class="list-group-item">Logout</li>
			</ul>
		</div>
	</div>
</nav>

### レスポンシブル対応

<nav class="navbar navbar-light navbar-expand-md bg-light">
  <a class="navbar-brand">Demo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#responsiveMenu" aria-controls="responsiveMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="responsiveMenu">
      <ul class="navbar-nav mr-auto">
          <li class="nav-item">
              <a class="nav-link" href="#">Order</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Logout</a> 
          </li>
      </ul>
  	</div>
</nav>

pc

sp

ん? レスポンシブルでコーディングすると、responsiveMenuのli要素に対して .float-endが効かないように見えるがどうしたら良いんだ?

### justify-content-end
.float-end ではなく .justify-content-end にすると、PC版は右寄せになる。

  <div class="collapse navbar-collapse justify-content-end" id="responsiveMenu">
      <ul class="navbar-nav mr-auto">
          <li class="nav-item">
              <a class="nav-link" href="#">Order</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Logout</a> 
          </li>
      </ul>
  	</div>

なるほどー
fontawesomeを使って、アイコンを装飾します。

ほう、良い感じ。

### Bootstrap5 入門本
Bootstrapを多用されている場合はあった方が良いかも..

Voltでフロントを構築する

Github: https://github.com/themesberg/volt-bootstrap-5-dashboard

Fileをvagrantにダウンロードし、Quick Startに沿って構築していきます。
$ tree
97 directories, 2216 files
// npmでgulpをインストールします
$ npm install gulp-cli -g
$ npm install
// node_modulesがインストールされました
$ ls
LICENSE.md README.md gulpfile.js html&css node_modules package-lock.json package.json src

// サーバ起動
$ gulp
http://192.168.33.10:3000/index.html
// ポートが3000番になっている事に留意

コマンドラインでhtml&cssのフォルダに移動するには、&の前にバックスラッシュをつける
$ cd html\&css

これからdashboard中心に編集していきます。