July 2019 – Page 4 – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

MySQLのcomments

CREATE TABLEの際にcommentを追加する
mysql> CREATE TABLE corporate(
-> name varchar(255) comment ‘商号’,
-> address varchar(255) comment ‘所在地’
-> )
-> default charset=utf8
-> comment=’会社テーブル’;
Query OK, 0 rows affected (0.36 sec)

カラムの要件定義でカラムの意味は決めるので、sqlの中にわざわざcommentを追加する必要性は限られるようにも思うが、ケースバイケースということか？

mysqlの権限参照

-ユーザー権限
SHOW GRANTS FOR root@`localhost`

mysql> show grants for root@localhost;
+———————————————————————+
| Grants for root@localhost |
+———————————————————————+
| GRANT ALL PRIVILEGES ON *.* TO ‘root’@’localhost’ WITH GRANT OPTION |
| GRANT PROXY ON ”@” TO ‘root’@’localhost’ WITH GRANT OPTION |
+———————————————————————+
2 rows in set (0.06 sec)

– 管理用ユーザー
GRANT ALL ON *.* TO adminuser@`%` IDENTIFIED BY ‘password’ WITH GRANT OPTION;

– IP制限
GRANT ALL ON *.* TO adminuser@’172.16.0.0/255.255.255.0′ IDENTIFIED BY ‘password’ WITH GRANT OPTION;

– 全てのデータベースにアクセス
GRANT ALL ON *.* TO testuser@’%’ IDENTIFIED By ‘password’;

– 特定のデータベースにアクセス
GRANT ALL ON testdatabase.* TO testuser@’%’ IDENTIFIED BY ‘password’;

ref: create user with GRANT Privileges in Terminal

Linuxのバージョン確認

cat /proc/version
[vagrant@localhost ~]$ cat /proc/version
Linux version 2.6.32-754.14.2.el6.x86_64 (mockbuild@x86-01.bsys.centos.org) (gcc version 4.4.7 20120313 (Red Hat 4.4.7-23) (GCC) ) #1 SMP Tue May 14 19:35:42 UTC 2019

uname -a
[vagrant@localhost ~]$ uname -a
Linux localhost.localdomain 2.6.32-754.14.2.el6.x86_64 #1 SMP Tue May 14 19:35:42 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux

unameだと、usernameが出てきますね。

cat /etc/system-release
[vagrant@localhost ~]$ cat /etc/system-release
CentOS release 6.10 (Final)

これが一般的か。
ちなみに、最新のLinuxはというと、、、

カーネルは4.18.0-80が最新のようですね。

UTF8 BOM(byte order mark)

There are two types of character code, Unicode, which has no BOM and with a BOM. BOM stands for byte order mark, which is a few bytes of data attached to the beginning of Unicode encoded text.

When the program reads text data, it determines from the first few bytes that it is Unicode data and which kind of encoding format is adopted. In the case of UTF-8 with BOM, the first 3 bytes are BOM, and the data is <0xEF 0xBB 0xBF>

Depending on the application such as Microsoft Excel, it may not be possible to determine whether the encoding method is UTF-8, UTF-16, UTF-32, or another different character code unless BOM is added. On the other hand, for HTML files used as web pages, it is better to save / overwrite without BOM. This is because some programs such as PHP that process web pages dynamically can not process text files with BOMs correctly. It can not generally be said that which way is better depending on the situation like this.

The difference between a file with BOM and a file without BOM is the presence or absence of the first 3 bytes, and the contents of other files and the character code (encoding system) are exactly the same. This means that if the encoding method is not correct, it will be displayed normally as a simple text file, so it can be said that it is difficult to notice that the BOM is the cause if the file malfunctions in any program.

ref:

ボタン押下時に挙動を変える

<html>
<head>
	<title>二重送信を防ぐ</title>
	<style>
		.btn-wrap {
			width: 300px;
			margin: 0 auto;
			text-align: center;
		}
		.loading {
			display:none;
		}
	</style>
</head>
<body>
	<div class="btn-wrap">
		<button class="btn">送信</button>
		<div class="loading">
			<img src="loading.gif">
		</div>
	</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
	$('.btn').on('click', function(){
		$('.btn').hide();
		$('.loading').show();
	});
});
</script>
</body>
</html>

多重クリック防止

<html>
<head>
	<title>二重送信を防ぐ</title>
<script>
var flag = false;
function send(){
	if(flag){
		alert("送信済みです");
		return false;
		flag = true;
	}
}
</script>
</head>
<body>
	<a href="javascript:send()">データを送信</a>
</body>
</html>

あれ、上手くいかない。。

書き方を変えます。

<html>
<head>
	<title>二重送信を防ぐ</title>
<script>
var set=0:
function double(){
	if(set==0){
		set=1;
	} else{
		alert("只今処理中です。\nそのままおまちください");
		return false;
	}
}
</script>
</head>
<body>
	<form action="" method="post">
		<input type="submit" name="go" class="test" value="送信" onClick="javascript:double(this)">
	</form>
</body>
</html>

うーんちょっと違うようです。

<body>
	<form action="" method="post">
		<input type="submit" name="go" id="login_submit" class="" value="送信">
	</form>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
$('#login_a').on('click', function(){
	if($(this).hasClass('double_click')){
		return false;
	}
	$(this).text("送信中...");
	$(this).addClass('double_click');
});
</script>
</body>

あれーーーーーーーーー

ボタンを押すとjsでテキストが変わる

innerTextで指定します。

<body>
	<button id="toggleMenuButton">ボタン</button>
	<div id="toggleMenu">
		<ul>
			<li>menu1</li>
			<li>menu2</li>
			<li>menu3</li>
		</ul>
	</div>
</body>
<script>
(function(window,document){
	var _toggleMenuButton = document.getElementById('toggleMenuButton');
	var _toggleMenu = document.getElementById('toggleMenu');
	var _clientH;
	init();
	function init(){
		_toggleMenu.style.height='auto';
		_clientH = _toggleMenu.clientHeight;
		_toggleMenu.style.height = '0px';
		_toggleMenuButton.addEventListener('click', function(){
			change();
			clickToggle();
			
		},false);
	}
	function clickToggle(){
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
	}
	function change(){
		document.getElementById('toggleMenuButton').innerText="閉じる";
	}
})(window,document);
</script>

いいけど、これ、ボタンが一度押されると、ずっと閉じるになるなー

あ、値が「閉じる」だったら、「ボタン」に変更すればよいのか。

function change(){
		document.getElementById('toggleMenuButton').innerText =( document.getElementById('toggleMenuButton').innerText ==　"ボタン") ? "閉じる"　: "ボタン";
	}

これでどーだ^^

あ、まとめられますね。

function clickToggle(){
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
		_toggleMenuButton.innerText =( _toggleMenuButton.innerText ==　"ボタン") ? "閉じる"　: "ボタン";
	}

OKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK

JSでアコーディオン

<!DOCTYPE html>
<html lang="ja">
<head>
	<style>
		#toggleMenu{
			overflow:hidden;
			transition:all 0.5s;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<button id="toggleMenuButton">ボタン</button>
	<div id="toggleMenu">
		<ul>
			<li>menu1</li>
			<li>menu2</li>
			<li>menu3</li>
		</ul>
	</div>
</body>
<script>
(function(window,document){
	var _toggleMenuButton = document.getElementById('toggleMenuButton');
	var _toggleMenu = document.getElementById('toggleMenu');
	var _clientH;
	init();
	function init(){
		_toggleMenu.style.height='auto';
		_clientH = _toggleMenu.clientHeight;
		_toggleMenu.style.height = '0px';
		_toggleMenuButton.addEventListener('click', function(){clickToggle();},false);
	}
	function clickToggle(){
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
	}
})(window,document);
</script>
</html>

あー、これこれ、やりたかったの♪

mermaid.js シーケンス図のif文

<div class="mermaid">
		sequenceDiagram
			# エイリアス
			participant user as user
			participant screen as 画面

			Note over user,screen: 共通フィルター参照
			screen ->>+ app : 1 : ID
			app ->> app : 存在をチェック

			alt 該当なし
				app ->> screen: Topにリダイレクト
			else　該当者
				app　->> app: 情報セット
			end

	</div>

なるほどー。画面遷移図とは異なり、画面処理を入れられるから、いいかも。

ちなみにaltとはalternativeの意味。
htmlのaltと勘違いしていた。。

シーケンス図を書いていく

<!Doctype html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div class="mermaid">
		sequenceDiagram
			# エイリアス
			participant screen as 画面

			screen ->>+ app : 1:ID

	</div>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
	<script>
		mermaid.initialize({
			startOnLoad:true
		});
	</script>
</body>
</html>

表現が足らんぞ。
ドキュメントを見ます
https://mermaidjs.github.io/sequenceDiagram.html

<div class="mermaid">
		sequenceDiagram
			# エイリアス
			participant user as user
			participant screen as 画面

			Note over user,screen: 共通フィルター参照
			screen ->>+ app : 1:ID

	</div>

おおおおおおおおお、ええやんけ。これ、実践で使いたい。