[AWS AIM & S3] Get Onlyのポリシー&ユーザを作成する

特定のBucketで全ての操作ができるポリシーを作っています。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "s3:*",
      "Resource": [
          "arn:aws:s3:::${BucketName}",
          "arn:aws:s3:::${BucketName}/*"
      ]
    }
  ]
}

上記とは別に、get onlyのポリシー&ユーザを作りたい。こうかな。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:Get*",
        "s3:List*"
     ],
      "Resource": [
          "arn:aws:s3:::${BucketName}",
          "arn:aws:s3:::${BucketName}/*"
      ]
    }
  ]
}

うん、これで、指定したbucketのget(bucketの表示、ダウンロード)のみができるようになります。
OK, Let’s Go

[Photoshop] 境界線をぼかして画像を丸く切り抜く方法

まず画像を用意します。

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

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

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

編集 -> コピー

貼り付け

あれ、ぼかしが上手くいってない。。。

あれ、もう一回やったら出来た。

画像のサイズはよく考えないといけません。
ぼかしの値を20pxから大きくすると、綺麗にフェードアウト出来ます。

[font-family]OSのシステムフォントとfont-familyの設定

-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] グリッドレイアウトを使ってみる

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>

なんやこれは、、、 ここもコモディティ化されとんのか。。。