随机应变 ABCD: Always Be Coding and … : хороший
<!doctype html>
<html>
<head>
<title>title</title>
</head>
<body>
<canvas id="c" width="200" height="200"></canvas>
</body>
<script>
var img = new Image();
img.src = 'http://www.w3.org/Icons/SVG/svg-logo-v.svg';
img.onload = function(){
var c = document.getElementById('c');
var ctx = c.getContext('2d');
ctx.drawImage(img, 0, 0, 200, 200);
}
</script>
</html>
これはsvgなんだが、HTMLタグで行きたいね。。
HTMLタグ→SVG画像作成→Canvasで画像化？
んーん、苦戦。。
SVG elements make it possible to include external XML namespaces with graphic content rendered by different user agents. External graphic content included is subject to SVG conversion and composition.
<svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> <desc>The svg tag can write code and draw an image. Compared with bitmap data such as JPEG and PNG, even if it is enlarged, it can be displayed in a beautiful state without blurring.</desc> <switch> <foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml"> <body xmlns="http://www.w3.org/1999/xhtml"> <p>Here is a paragraph that requires word wrap</p> </body> </foreignObject> <text font-size="10" font-family="Verdana"> <tspan x="10" y="10">Here is a paragraph that</tspan> <tspan x="10" y="20">requires word wrap.</tspan> </text> </switch> </svg>
<svg width="960px" height="1280px" viewBox="0 0 960 1280" xmlns="http://www.w3.org/2000/svg">
<style>
h1 {
color:red;
}
</style>
<g>
<foreignObject x="0" y="0" width="100%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Hello, world!</p>
</body>
</foreignObject>
</g>
</svg>
ん？ どういこと？
参考サイト：http://www.jp-ia.com/_web/face.html
AR Pペン行楷書体L, AR Pペン楷書体L, AR P勘亭流H, AR P古印体B, AR P行楷書体H… Wingdings 2, Wingdings 3
大量にあるので、中心的な書体をピックアップしたいと思う
あれ、メイリオない？
-ゴシック体
-明朝体
-sanserif
さて、これをtinyMCEに実装したい
stack overflowに書いてありそう。。
https://stackoverflow.com/questions/15499198/how-to-add-a-new-font-in-tinymce-editor
あ、ここにサンプルがある
https://codepen.io/anon/pen/przvoq
tinymce.init({
selector: 'textarea',
height: 500,
plugins: 'code',
toolbar: 'undo redo | fontsizeselect fontselect',
content_css: ['//fonts.googleapis.com/css?family=Indie+Flower'],
font_formats: 'Arial Black=arial black,avant garde;Indie Flower=indie flower, cursive;Times New Roman=times new roman,times;'
});
そうですね、やりたいのはこういうことです。
とりあえず、明朝、ゴシックで比較
<p>通常フォント</p> <p><font face="ＭＳ Ｐ明朝">通常フォント</font></p> <p><font face="ＭＳ Ｐゴシック">通常フォント</font></p> <p><font face="Impact">font test</font></p>
全然違いますね～
しかし、これデザイナーの領域だな。。。
＞重要なのは、可読性、視認性、判読性を意識しながらの「TPOに合わせたフォント選び」
なるほど、テイストによって分けるのは理解できる。。
まず、どんな文字があるのか知らないといけない。。
TinyMCEに絵文字を追加したい
公式ドキュメント：TinyMCE Emoticons plugin
https://www.tiny.cloud/docs/plugins/emoticons/
これ↓を追加すればよい？？
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "emoticons",
toolbar: "emoticons"
});
早速行きます。
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.js"
integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
crossorigin="anonymous"></script>
<script src="tinymce/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
mode : "specific_textareas",
editor_selector : "mceEditor",
plugins: "emoticons",
toolbar: "emoticons",
init_instance_callback: function (editor) {
editor.on('change', function (e) {
$('#preview_area').html(editor.getContent());
});
}
});
</script>
</head>
<body>
<h1>テキストを入力してください</h1>
<textarea id="myTextArea" class="mceEditor">TinyMCE Editor</textarea>
<div style="border:1px solid; width:200px; height:200px;" id="preview_area"></div>
</body>
</html>
すくな！？デフォルトだと16種類しかない！？ うーむ、困ったぞー これ、tinyMCEのバージョンが最新なら、絵文字の種類も増えるとかある？？
ああああああああああ、なるほど、emoticonsのimgフォルダに入っている画像を使ってるのね。
utf-8の絵文字、👿👹👺などをパレットで選べるようにしたいですねー
Database backup includes fullbackup, differential backup and incremental backup. This name is given in terms of “what data to back up”.
full backup
The easiest and the basis of all backups is a full backup. It literally backs up all the data held by the system at one point in time. Therefore, with this backup file, it is possible to recover all the data at that time.
This is a story, but if it is always possible to take a full backup during an active backup, the backup operation will be extreamly simple. Because, as mentioned above, data recovery will end easily if it is this.
Disadvantages of full backup
Cost1: It takes a long time to backup
The backup takes a long time to back up all the data in the system. Although some reductions can be made by excluding data that does not change, such as read-only files, it is necessary to include them in the backup target, since the core business data is usually change daily.
Cost: The load on resources is large
The fact that the data to be backed up is large means that a large number of read operations occur on the disk where the data is stored during the backup. Therefore, backup processing consumes a large amount of resources, including disk and server CPUs, and, if backup is performed via a network, network connections. Threfore, parallel execution of other processes during backup is not a pratical operation. A full backup consumes the most resources of the backup.
Cost: need to stop service
In general, shut down the software such as DBMS and stop the service before acquiring a full backup. This is because you must obtain backups while maintaining data integrity. However, there are not many systems that can stop service frequently.
Differential backup
Differential backup, as the name suggests, is a method of backup only the changes from the previous full backup.
Using differential backup increases the recovery procedure by one, but instead reduces the time required for backup because the data requried for daily backup is smaller. The impact on resources is also reduced accordingly.
Incremental backup
The thrd backup method is incremental backup. This is a smart version of the differential backup without any waste. Earlier, with differential backup files, there were many files that were unnecessary for recovery. That is because the information contained in these files is the same. If this redundancy is eliminated, the data to be backuped up will be less and the backup time will be shorter.
Time::Pieceを使う方法
#!/usr/bin/perl -- use Time::Piece; my $t = localtime; print $t->ymd;
上手くいかない。。
unixのdateコマンドを使用
#!/usr/bin/perl -- print qx(date "+%Y/%m/%d %H:%M:%S");
ちゃんと表示はされます。
2019/04/02 09:00:25
#!/usr/bin/perl --
my ($sec, $min, $hour, $mday, $mon, $year) = (localtime(time))[0..5];
print "Content-type:text/html\n\n";
printf("%d/%02d/%02d %02d:%02d:%02d\n", $year + 1900, $mon + 1, $mday, $hour, $min, $sec);
こちらも行けますねー
mysql> create table name(
-> name varchar(255),
-> password varchar(255)
-> );
Query OK, 0 rows affected (0.07 sec)
#!/usr/bin/perl --
use strict;
use utf8;
use warnings;
use CGI;
use DBI;
my $q = new CGI;
my $param1 = $q->param('name');
my $param2 = $q->param('password');
print "Content-type:text/html\n\n";
print "<html>\n";
print "<head></head>\n";
print "<form action=\"/cgi-bin/test2.cgi\">";
print "<label for=\"name\">お名前:</label>";
print "$param1<br>";
print "<label for=\"password\">パスワード:</label>";
print "$param2<br>";
print "<input type=\"submit\" value=\"送信\">";
print "</form>";
print "</html>";
my $user = 'root';
my $passwd = '';
my $db = DBI->connect('DBI:mysql:test:localhost', $user, $passwd);
my $sth = $db->prepare("INSERT INTO name(name, password) VALUES (?, ?)");
# $db->do("set names utf8");
$sth->execute($param1, $param2);
$sth->finish;
$db->disconnect;
print("finish\n");
mysql> select * from name;
Empty set (0.00 sec)
mysql> select * from name;
+——+———-+
| name | password |
+——+———-+
| hoge | hogehoge |
+——+———-+
1 row in set (0.00 sec)
/var/www/html/test.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#errorMessage {
color: red;
}
</style>
<form action="/cgi-bin/test.cgi">
<div id="errorMessage"></div>
<label for="name">お名前:</label>
<input name="name" id="name" required><br>
<label for="password">パスワード:</label>
<input type="password" name="password" id="password" required><br>
<label for="passwordConfirm">パスワード(確認):</label>
<input type="password" name="confirm" id="confirm" oninput="CheckPassword(this)"><br>
<input type="submit" value="送信">
</form>
<script>
function CheckPassword(confirm){
var input1 = password.value;
var input2 = confirm.value;
if (input1 != input2){
confirm.setCustomValidity("入力値が一致しません");
} else{
confirm.setCustomValidity('');
}
}
</script>
/var/www/cgi-bin/test.cgi
#!/usr/bin/perl --
use strict;
use utf8;
use warnings;
use CGI;
my $q = new CGI;
my $param1 = $q->param('name');
my $param2 = $q->param('password');
print "Content-type:text/html\n\n";
print "<html>\n";
print "<head></head>\n";
print "<form action=\"/cgi-bin/test2.cgi\">";
print "<input type=\"hidden\" value=\"$param1\" name=\"name\"></input>";
print "<input type=\"hidden\" value=\"$param2\" name=\"password\"></input>";
print "<label for=\"name\">お名前:</label>";
print "$param1<br>";
print "<label for=\"password\">パスワード:</label>";
print "$param2<br>";
print "<input type=\"submit\" value=\"送信\">";
print "</form>";
print "</html>";
/var/www/cgi-bin/test2.cgi
#!/usr/bin/perl --
use strict;
use utf8;
use warnings;
use CGI;
my $q = new CGI;
my $param1 = $q->param('name');
my $param2 = $q->param('password');
print "Content-type:text/html\n\n";
print "<html>\n";
print "<head></head>\n";
print "<form action=\"/cgi-bin/test2.cgi\">";
print "<label for=\"name\">お名前:</label>";
print "$param1<br>";
print "<label for=\"password\">パスワード:</label>";
print "$param2<br>";
print "<input type=\"submit\" value=\"送信\">";
print "</form>";
print "</html>";
hiddenで送ります。
./test.sh
#!/bin/sh echo "Hello, World!"
[vagrant@localhost test]$ sed ‘s/\r//’ test.sh
#!/bin/sh
echo “Hello, World!”[vagrant@localhost test]$ ./test.sh
-bash: ./test.sh: 許可がありません
[vagrant@localhost test]$ ls -l
合計 8
-rw-rw-r– 1 vagrant vagrant 219 3月 31 16:33 2019 index.php
-rw-rw-r– 1 vagrant vagrant 31 4月 1 20:34 2019 test.sh
パーミッションは664。644に変えてみる。
[vagrant@localhost test]$ chmod 644 test.sh
[vagrant@localhost test]$ ./test.sh
-bash: ./test.sh: 許可がありません
やっぱり755でないと駄目なのか。。
モード(数字)｜モード(アルファベット)｜権限
4｜r｜読み取り
2｜w｜書き込み
1｜x｜実行
chmod +x というのは、実行権限を与える、ということね。
[vagrant@localhost test]$ chmod u+x test.sh
[vagrant@localhost test]$ ./test.sh
Hello, World!
[vagrant@localhost test]$ chmod u-x test.sh
[vagrant@localhost test]$ ./test.sh
-bash: ./test.sh: 許可がありません
なるほど、実行権限か～