[CSS Grid] グリッドレイアウトを使ってみる

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>

概念はわかった。次行こう。

[Laravel8.16.0] UserAgentを取得してPC/SPのviewを分けて表示する

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はもうちょっとやりこまないとダメやな。

[background-image] 背景画像を表示する

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>

なるほど

[MySQL8.0.22]改行テキストをCSV・PDOでinsertしたい

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を変更したらform submitしたい

カート処理で、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とは

– 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で接続できる。一方、防犯カメラは同軸ケーブル、ビデオケーブルで接続する。いずれも電源は必要。

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

[Laravel8.16.0] bootstrapでpaginationが崩れて表示される時

controller

public function show(){
        $products = DB::table('products')->Paginate(4);
        return view('admin.show', compact('products'));
    }

views

@foreach($products as $product)
	<p>{{ $product->name}}</p>
	@endforeach

	{{-- Pagination --}}
	<div class="d-flex justify-content-center">
            {!! $products->links() !!}
    </div>

は? 何これ?

app/Providers/AppServiceProvider.php

use Illuminate\Pagination\Paginator;
    public function boot()
    {
        //
        Paginator::useBootstrap();
    }

Ok, I think we got keep going men!

Mailgunで送信ドメインをカスタマイズしたい

Sending -> Domains -> Add new domain

テスト用として試したいだけなので、ドメインは「お名前.com」で取得してもうすぐ期限が切れそうな「free-engineer.work」を使いたいと思う。

「mg.free-engineer.work」で入力する。

すると、
「1. Go to your DNS provider」と表示される。
続いて、
TXT, MX, CNAMEを入力していきます。

Once you make the above DNS changes it can take 24-48hrs for those changes to propagate. We will email you to let you know once your domain is verified.

反映までに結構時間がかかりそうなので、それまで別のことをしたいと思う。