まず画像を用意します。

続いて、Photoshopで画像を開きます。

次にツールボックスから「楕円形選択ツール」を選択

画面上部のオプションバーで設定
ぼかし : 20px
アンチエイリアス : 有効
スタイル : 標準
編集 -> コピー

貼り付け

あれ、ぼかしが上手くいってない。。。
あれ、もう一回やったら出来た。

画像のサイズはよく考えないといけません。
ぼかしの値を20pxから大きくすると、綺麗にフェードアウト出来ます。
随机应变 ABCD: Always Be Coding and … : хороший
まず画像を用意します。

続いて、Photoshopで画像を開きます。

次にツールボックスから「楕円形選択ツール」を選択

画面上部のオプションバーで設定
ぼかし : 20px
アンチエイリアス : 有効
スタイル : 標準
編集 -> コピー

貼り付け

あれ、ぼかしが上手くいってない。。。
あれ、もう一回やったら出来た。

画像のサイズはよく考えないといけません。
ぼかしの値を20pxから大きくすると、綺麗にフェードアウト出来ます。
-Windows 8.1以降
Yu Gothic
Yu Gothic UI
Segoe UI
-Mac OS EI caption以降/ iOS
Hiragino Sans
Sanfrancisco
-Android
Noto Sans CJK JP
Roboto
<style>
body {
font-family: "Arial", "メイリオ";
}
</style>

<style>
body {
font-family: sans-serif, "Helvetica Neue";
}
</style>

Helvetica Neue
-> mac のみ
ゴシック系
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
なんで、font-familyで書体を複数設定しているか全然わからなかったけど、それぞれのOSで書式がないときに厳密に指定するためなのね。
何年Webやってんだ、って感じだが、やっと理解できた。
CSS Gridを推奨されたので、試してみたい。
– コンテナ
display: grid; または display: inline-grid;を使うことでGrid Layoutのコンテナになる。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> -->
<style>
.grid-container {
display:grid;
grid-template-rows: 100px 50px;
grid-template-columns: 150px 1fr; /* frは残りの幅 */
}
#itemA {
grid-row: 1 / 3;
grid-column: 1 / 2;
background: #f88;
}
#itemB {
grid-row: 1 / 3;
grid-column: 2 / 3;
background: #8f8;
}
#itemC {
grid-row: 2 / 3;
grid-column: 2 / 3;
background: #88f;
}
</style>
</head>
<body>
<div class="grid-container">
<div id="itemA">A</div>
<div id="itemB">B</div>
<div id="itemC">C</div>
</div>
<script>
</script>
</body>
</html>

概念はわかった。次行こう。
UserAgentの取得には、jenssegers/agentを使います。
github: https://github.com/jenssegers/agent
$ composer require jenssegers/agent
config/app.php
'providers' => [
// 省略
Jenssegers\Agent\AgentServiceProvider::class,
],
'aliases' => [
//省略
'Agent' => Jenssegers\Agent\Facades\Agent::class,
],
AdminController.php
use Jenssegers\Agent\Agent;
public function useragent(){
if(\Agent::isMobile()){
return view('admin.sp');
}
return view('admin.pc');
}

なるほど、相当簡単に実装できる。
これをunitテストでやりたい。
$ php artisan make:test UserRegisterTest
public function testExample()
{
$response = $this->get('/');
$response->dumpHeaders();
}
$ vendor/bin/phpunit tests/Feature/UserAgentTest.php
public function testExample()
{
$response = $this->get('/admin/useragent');
// $response->assertStatus(200);
$this->assertSame(2, $response);
}
$ vendor/bin/phpunit tests/Feature/UserAgentTest.php
FAILURES!
Tests: 1, Assertions: 1, Failures: 1.
なんでだ? $this->getだとheader情報しか返ってこないのか。
UnitTestはもうちょっとやりこまないとダメやな。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
background-image: url('img/sky.jpg');
background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
background-repeat: no-repeat;
background-position: center 20px;
}
</style>
</head>
<body>
<div class="container col-md-12">
<h1 class="text-center">背景画像テスト</h1>
<p>テキストが入りますテキストが入ります</p>
</div>
<script>
</script>
</body>
</html>

なるほど
mysql> select version();
+———–+
| version() |
+———–+
| 8.0.22 |
+———–+
1 row in set (0.00 sec)
まず適当にテーブルを作ります。
create table news( id int auto_increment PRIMARY KEY, name varchar(20), body text ); mysql> describe news; +-------+-------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------+-------------+------+-----+---------+----------------+ | id | int | NO | PRI | NULL | auto_increment | | name | varchar(20) | YES | | NULL | | | body | text | YES | | NULL | | +-------+-------------+------+-----+---------+----------------+ 3 rows in set (0.01 sec)
insert intoでは\nで改行になる。
INSERT INTO news(name, body) VALUE ('NHK', '公務員に冬のボーナス 国家公務員平均約65万円 3年連続の減少');
INSERT INTO news(name, body) VALUE ('NHK', '公務員に冬のボーナス\n国家公務員平均約65万円 3年連続の減少');

### pdo
pdoで入れる際は、\r\nをつける。
$sql = 'INSERT INTO news (name, body) VALUE (:name, :body)';
$prepare = $pdo->prepare($sql);
$text = "公務員に冬のボーナス\r\n国家公務員平均約65万円 3年連続の減少";
$prepare->bindValue(':name', 'NHK', PDO::PARAM_STR);
$prepare->bindValue(':body', $text, PDO::PARAM_STR);
$prepare->execute();
echo "insert done";
### csv
L insertする前に、str_replace(‘\r\n’,”\r\n”,$csv);でエスケープする必要がある
$fp = fopen("test.csv", "r");
while(! feof($fp)){
$csv = fgets($fp);
$csv = trim($csv,'"');
$csv = mb_convert_encoding($csv, "UTF-8", "utf-8");
$csv = str_replace('"','',$csv);
$csv = str_replace('\r\n',"\r\n",$csv);
$csv_array = explode(",",$csv);
$stmt = $pdo->prepare("INSERT INTO news (name, body) VALUE (:name, :body)");
$stmt->bindValue(":name", $csv_array[0], PDO::PARAM_STR);
$stmt->bindValue(":body", $csv_array[1], PDO::PARAM_STR);
// $stmt->bindValue(":body", str_replace(["\\r","\\n"], ["\r", "\n"], $csv_array[1]), PDO::PARAM_STR);
$stmt->execute();
}
fgetcsv
L fgetcsvだと、わざわざ\r\nを入れなくても、改行データをそのままmysqlに入れてくれる。
$fp = fopen("hoge.csv", "r");
while(($data[]=fgetcsv($fp))!==FALSE){
}
fclose($fp);
var_dump($data);
foreach($data as $result){
$stmt = $pdo->prepare("INSERT INTO news (name, body) VALUE (:name, :body)");
$stmt->bindValue(":name", $result[0], PDO::PARAM_STR);
$stmt->bindValue(":body", $result[1], PDO::PARAM_STR);
$stmt->execute();
}
echo "done";
素晴らしい。
カート処理で、selectで商品の数量を変更したら変更する値をsubmitして変更内容を即時に反映したい。
※更新ボタンを省きたい
まず普通にselect boxをforで回して作ります。
<form method="post" action="#">
<select name="number">
<?php
$check = 20;
for($i = 1; $i <= 50; $i++) {
if($i === $check){
echo "<option value='" .$i. "' selected>".$i."</option>";
} else{
echo "<option value='" .$i. "'>".$i."</option>";
}
}
?>
</select>
<br><br>
<input type="submit" value="送信">
</form>

これに onchange=”submit(this.form)”をつけると
<form method="get" action="app.php">
<select name="number" onchange="submit(this.form)">
<?php
$check = 20;
for($i = 1; $i <= 50; $i++) {
if($i === $check){
echo "<option value='" .$i. "' selected>".$i."</option>";
} else{
echo "<option value='" .$i. "'>".$i."</option>";
}
}
?>
</select>
</form>

なに? こんなに簡単なのか??
– TensorFlowとは、Googleがオープンソースで公開している機械学習ライブラリ
– 大規模な数値計算を行うライブラリ
ubuntu20.04にtensorflowを入れていきます。
$ cat /etc/os-release
NAME=”Ubuntu”
VERSION=”20.04.1 LTS (Focal Fossa)”
$ sudo apt update
$ pip3 install –upgrade tensorflow
Collecting tensorflow
Downloading tensorflow-2.3.1-cp38-cp38-manylinux2010_x86_64.whl (320.5 MB)
|████████████████████████████████| 320.5 MB 18.5 MB/s eta 0:00:01Killed
gpuサポートの問題かな。。。別の方法で試してみる。
$ sudo apt install nvidia-cuda-toolkit
。。。
メモリ不足かな。
swapメモリを増やしてもう一度やってみる。
Web Speech APIを使いたいと思う
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<h1 class="text-center h1">Web Speech API</h1>
<div id="content">
<input type="textarea" id="q" name="q" size=60>
<input type="button" value="Click to Speak" onclick="recognition.start()">
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script>
let recognition = new webkitSpeechRecognition();
recognition.onresult = function(event) {
if (event.results.length > 0){
q.value = event.results[0][0].transcript;
}
}
</script>
</body>
</html>
なんやこれは、、、 ここもコモディティ化されとんのか。。。

### 防犯カメラの種類
– ネットワークカメラ(IPカメラ)
L 無線LANや有線LANなどのネットワークの接続機能を持っており、ネットワークを通じて映像を確認できる。
L 本体にSDカードを入れて録画することができる
– Webカメラ
L 一般的に録画機能を持たず、USB接続してメッセージソフトで利用する。安価。
– 防犯カメラ
L 主な用途は防犯、防災、計測・記録
### カメラの形
– ドーム型、バレット型、ボックス型、パンチルトズーム型
### 録画機
カメラ映像を録画する機械のことをDVRという
ネットワークカメラ、IPカメラは無線LANで接続できる。一方、防犯カメラは同軸ケーブル、ビデオケーブルで接続する。いずれも電源は必要。

なるほど、ラズパイじゃなくても良かったのか。まあいいか。