[progressStep.js] プログレスバーを綺麗に表示したい

progressStep.jsというのがあるので、これを使って実装したい

Github: progressStep.js

$ npm install progressbar.js

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.hoge {
			width: 400px;
  			text-align: center;
  			margin: auto;
		}
		#progressBar {
			
		}
	</style>
</head>
<body>
	<div class="hoge">
		<div id="progressBar"></div>
	</div>
	<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
	<script src="https://cdn.tutorialjinni.com/progressStep/1.0.3/progressStep.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"> </script>
	<script>
		var $progressDiv = $("#progressBar");  
		var $progressBar = $progressDiv.progressStep({activeColor:"blue"});
		$progressBar.addStep("入力");  
		$progressBar.addStep("確認");  
		$progressBar.addStep("完了");  
		$progressBar.refreshLayout();  
		$progressBar.setCurrentStep(1);  
	</script>
</body>
</html>

お、ええやん、これはガチで使えそう^^

[pickr] color pickerを実装したい

RGBを入力するのは、RGBを調べるという手間が入るので、color pickerを実装したい。
pickrというライブラリがある様なので、それを使う。

$ npm install @simonwep/pickr

githubそのままですが、

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="/node_modules/@simonwep/pickr/dist/themes/classic.min.css" rel="stylesheet">
	<link href="/node_modules/@simonwep/pickr/dist/themes/monolith.min.css" rel="stylesheet">
	<link href="/node_modules/@simonwep/pickr/dist/themes/nano.min.css" rel="stylesheet">

	<script src="/node_modules/@simonwep/pickr/dist/pickr.min.js"></script>
	<script src="/node_modules/@simonwep/pickr/dist/pickr.es5.min.js"></script>
</head>
<body>
	<div class="color-picker"></div>
	<script>
		const pickr = Pickr.create({
		    el: '.color-picker',
		    theme: 'classic', 

		    swatches: [
		        'rgba(244, 67, 54, 1)',
		        'rgba(233, 30, 99, 0.95)',
		        'rgba(156, 39, 176, 0.9)',
		        'rgba(103, 58, 183, 0.85)',
		        'rgba(63, 81, 181, 0.8)',
		        'rgba(33, 150, 243, 0.75)',
		        'rgba(3, 169, 244, 0.7)',
		        'rgba(0, 188, 212, 0.7)',
		        'rgba(0, 150, 136, 0.75)',
		        'rgba(76, 175, 80, 0.8)',
		        'rgba(139, 195, 74, 0.85)',
		        'rgba(205, 220, 57, 0.9)',
		        'rgba(255, 235, 59, 0.95)',
		        'rgba(255, 193, 7, 1)'
		    ],

		    components: {

		        // Main components
		        preview: true,
		        opacity: true,
		        hue: true,

		        // Input / output Options
		        interaction: {
		            hex: true,
		            rgba: true,
		            hsla: true,
		            hsva: true,
		            cmyk: true,
		            input: true,
		            clear: true,
		            save: true
		        }
		    }
		});
	</script>
</body>
</html>

これは凄い。使いたいな。

[three-dots] spinnerを実装してみる

Github: https://github.com/nzbin/three-dots

$ npm install three-dots –save

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="/node_modules/three-dots/dist/three-dots.css" rel="stylesheet">
	<style>
		.spinner {
			margin: 50px;
		}
	</style>
</head>
<body>
	<div class="spinner">
		<div class="dot-elastic"></div>
	</div>
</body>
</html>

なるほど、CSSで表現できるのね。処理に時間がかかる時に使えそうですな。

[Design Guideline] Componentのvariationを増やしたい

とりあえずComponentにどんなものがあるか、ざっと一つ一つ見ていきます。

・Accordion
・Activity Timeline
・Alert
・App Launcher
・Avatar, Avatar Group
・Badges
・Brand Band
・Breadcrumbs
・(builder Header)
・Button Groups
・Button Icons
・Buttons
・Cards
・Carousel
・Chat
・Checkbox, Checkbox Button, Checkbox Button Group
・Checkbox Toggle
・Color Picker
・Combobox
・Counter
・Data Tables
・Datepickers, Datetime Picker
・Docked Composer
・Docked Form Footer
・Docked Utility Bar
・Drop Zone
・Dueling Picklist
・Dynamic Icons
・Dynamic Menu
・Expandable Section
・Expression
・Feeds
・File Selector, Files
・Form Element
・Global Header
・Global Navigation
・Icons
・Illustration
・Input
・List Builder
・Lookups
・Map
・Menu
・Modals
・Notifications
・Page Headers
・Panels
・Path
・Picklist
・Pills
・Popovers
・Progress bar
・Progress Indicator
・Progress Ring
・Prompt
・Publishers
・Radio Button Group, Radio Group
・Rich Text Editor
・Scoped Notifications
・Scoped Tabs
・Select
・Setup Assistant
・Slider
・Spinners
・Split View
・Summary Detail
・Tabs
・Textarea
・Tiles
・Timepicker
・Toast
・Tooltips
・Tree Grid
・Trees
・Trial Bar
・Vertical Navigation
・Vertical Tabs
・Visual Picker

ざっと見ていき、興味があったのは、loading spinner, toggle, search instance result, color picker, progressStep.jsあたり。触っておくか。
それと、デザインだからフォントもカバーしておかないと。
なんか自分でもよく分からないテンションになってきました。

[Design Guideline] 項目を考える

デザインガイドラインの項目を考えます。

・Overall
— Clarity, Efficiency, Consistency, Beauty

・Basic
— Component, Layout
— Header
— Bar, Styles, Colors, Back Button, Menu, Settings, Help Menu, Save, Status, In process Action, Alert, Utility, Search, Toggle
— Layout
— Columns, Style, Panels, Body, Horizontal tabs, Accordions, Navigation, Color Picker
— Modals
— Validation
— warning, alert, Confirmation modal, Error Icon, Error Alert

・Charts
— Bar chats, Dot Plot, Line Chart, Scatter Plot, Pie Chart, Tree map, Heat map, Matrix Chart, Metric, Flat Gauge, Polar Gauge, Rating Chart, Map, Funnel Chart, Color

・Data Entry
— text input, sizing, input help, date picker, lookup, Checkbox, radio, checkbox toggle, Label

・Displaying Data
— table, tree grid, title, interactive guide, Feed

・Empty State
— 404 message

・Iconography
— Design Principle, Accessibility, Informational Icons, Decorative Icons, Grid System, Key Line Shape, Object Icon

所感
– Localizationしたサービスを作りたい
– デフォルトでUser Feedbackを考えないと行けない
– Loading, toggle, SearchのInstance Resultなどは実装できる様になっておきたい。
– Error, Alertなどは最初にしっかり考えておかないといけないのね

なんだかんだで、ローカリゼーションしたサービスを作りたい。在日外国人向けとかからスタートしたいね。

Design Guidelineを作りたい

ざっくりとでもいいので、デザインガイドラインとコーディングガイドラインを作りたい
デザインガイドラインの目的は、デザインの品質向上と一貫性の担保
各社のデザインページをざっと見てみる。

Apple: Human Interface Guideline
https://developer.apple.com/design/resources/
L Sketch, PSD, XDで作成している

Microsoft: Fluent Design System, Inclusive Design
https://www.microsoft.com/design/fluent
https://www.microsoft.com/design/inclusive

Airbnb: design
https://airbnb.design

Ubuntu: design
https://design.ubuntu.com

wework: office design
https://www.wework.com/ideas/category/office-design-space

salesforce: design
https://www.lightningdesignsystem.com/guidelines/overview/

やるべきことはこの辺りか
– ターゲットユーザの整理
– デザインガイドラインに書いていく項目の洗い出し

パッと見たところだと、salesforceが一番参考になりそうな印象
とりあえずあまりノウハウがないので、作りながら修正していくパターンにしよう

[Xd] Adobe Xdを始めよう

とりあえずmacにインストールしました。

とりあえずGetting Started のVideoに沿ってやるか。

とりあえず新規作成画面

なるほど、Cacooみたいなこともできるのね。
1920 x 1080だとちょっとWFとしては描きにくいから、カスタムサイズか。
チュートリアルだけだとモチベーションのフォーカスが難しいから、次実際にワイヤー描く時になったらXdでやってみるか。

OK、悪くない。

[PHP] 拡張子不明の画像名を変数として持ち、imgフォルダ内にあれば表示

imgフォルダ内に画像が複数(数千枚)置いてあり、拡張子は不明だが、ファイル名だけ変数として持っており、該当のファイル名があればその画像を表示、無ければplaceholderの画像を表示したい。

まず画像を用意します。

拡張子分foreachで探してみたが、

$name = "cat";
$cfg = array('jpg', 'jpeg', 'png', 'gif');

foreach($cfg as $key){
	if(file_exists("img/" .$name . "." . $key)){
		echo "<img src='img/" . $name . "." .$key."' width='150px' height='100px'>";
	}
}

これだと、拡張子の配列分回さないといけないのと、画像が無ければ、placeholderの表示ができない。

globとワイルドカードを使う

$name = "cat";
$result = glob("img/" . $name . ".*");

if(in_array($result)) {
	echo '<img src="'.$result[0].'" width="150px" height="100px">';
} else {
	echo '<img src="/img/150x150.png">';
}

OK!上等！
続いて、少々細かいことを調査していきます。

[JavaScript] 複数住所を登録する為、住所を追加するボタン

amazonの様に、住所を複数追加できる様にしたい。

	<h1>住所追加</h1>
	<div >
		<form>
		<button id="btn1" type="button" onclick="clickBtn1()">住所を追加する</button>
		<div id="address1">
			<input type="text" name="zipcode_1" value="" placeholder="郵便番号"><br>
			<input type="text" name="address1_1" value="" placeholder="住所1"><br>
			<input type="text" name="address2_1" value="" placeholder="住所2"><br>
		</div>
		</form>
	</div>
	<script>
		document.getElementById("address1").style.display = "none";

		function clickBtn1(){
			const address1 = document.getElementById("address1");
			if(address1.style.display=="block"){
				document.getElementById("btn1").textContent = "住所を追加する";
				document.getElementsByName("zipcode_1").value = "";
				document.getElementsByName("address1_1").value = "";
				document.getElementsByName("address2_1").value = "";
				address1.style.display ="none";
			} else{
				document.getElementById("btn1").textContent = "追加しない";
				address1.style.display ="block";
			}
		}
	</script>

ここに更に住所を追加するボタンを加える。
– buttonではなく、spanタグにして少しスタイリングする
– 住所1を閉じる時は、住所2を初期化する必要がある

	<h1>住所追加</h1>
	<div >
		<form>
		<span id="btn1" onclick="clickBtn1()">住所を追加する</span>
		<div id="address1">
			<input type="text" name="zipcode_1" value="" placeholder="郵便番号"><br>
			<input type="text" name="address1_1" value="" placeholder="住所1"><br>
			<input type="text" name="address2_1" value="" placeholder="住所2"><br><br>

			<span id="btn2" onclick="clickBtn2()">住所を追加する</span>
		</div>

		<div id="address2">
			<input type="text" name="zipcode_2" value="" placeholder="郵便番号"><br>
			<input type="text" name="address1_2" value="" placeholder="住所1"><br>
			<input type="text" name="address2_2" value="" placeholder="住所2"><br><br>
		</div>
		</form>
	</div>
	<script>
document.getElementById("address1").style.display = "none";
		document.getElementById("address2").style.display = "none";

		function clickBtn1(){
			const address1 = document.getElementById("address1");
			if(address1.style.display=="block"){
				// 住所1
				document.getElementById("btn1").textContent = "住所を追加する";
				document.getElementsByName("zipcode_1").value = "";
				document.getElementsByName("address1_1").value = "";
				document.getElementsByName("address2_1").value = "";
				address1.style.display ="none";

				// 住所2
				document.getElementsByName("zipcode_2").value = "";
				document.getElementsByName("address1_2").value = "";
				document.getElementsByName("address2_2").value = "";
				document.getElementById("address2").style.display = "none";
				document.getElementById("btn2").textContent = "住所を追加する";
			} else{
				document.getElementById("btn1").textContent = "追加をやめる";
				address1.style.display ="block";
			}
		}

		function clickBtn2(){
			const address2 = document.getElementById("address2");
			if(address2.style.display=="block"){
				document.getElementById("btn2").textContent = "住所を追加する";
				document.getElementsByName("zipcode_2").value = "";
				document.getElementsByName("address1_2").value = "";
				document.getElementsByName("address2_2").value = "";
				address2.style.display ="none";
			} else{
				document.getElementById("btn2").textContent = "追加をやめる";
				address2.style.display ="block";
			}
		}
	</script>

OK！　これを実装する

[mysql8.0.22] 2000件レコードでテーブルのカラム数28、48、116のselect文の実行時間の差

### レコード数: 2001件
mysql> select count(id) from orders2;
+———–+
| count(id) |
+———–+
| 2001 |
+———–+
1 row in set (0.04 sec)

### sql文
mysql.sql

select * from orders2 where supplier_num = 1;

### カラム数28
$ time (cat mysql.sql | mysql -u root -p test > /dev/null)
Enter password:

real 0m3.099s　// プログラムの呼び出しから終了までにかかった実時間
user 0m0.009s　// プログラム自体の処理時間（秒）（ユーザCPU時間）
sys 0m0.012s　// プログラムを処理するために、OSが処理をした時間

### カラム数48
$ time (cat mysql.sql | mysql -u root -p test > /dev/null)
Enter password:

real 0m3.162s
user 0m0.013s
sys 0m0.009s

### カラム数116
$ time (cat mysql.sql | mysql -u root -p test > /dev/null)
Enter password:

real 0m3.504s
user 0m0.011s
sys 0m0.011s

確かにちょっと遅くなってるけど、カラム数50ぐらいだと、本当に誤差だな
商用環境ではテーブル結合により絞り込み検索を行うので検索スピードは変わってくるのが、レコード数が数千件程度では、カラム数が100を超えていてもそこまで影響はなさそうだな。