[BI/DWH] Tableauを使いたい

BI/DWHとは?
-> BIとはBusiness Intelligenceの略称
-> 企業に散在する膨大なデータを整理して蓄積し、分析して経営の意思決定に役立てるために有効とされるのがBIツールとDWH
-> DWHでデータを保管し、BIで可視化する。

データ可視化ツールを使って、以下の様なことをやりたい。
L ログの基礎集計
L ダッシュボード構築
L データインフラ構築

とりあえず、インストールしてみます。

インストールしました。

macからVagrantのMySQLに接続するにはドライバーのダウンロードが必要とのこと。
vagrant完結できんのか、、、なんか環境構築にハードルが高いな。

tutorialのvideoを見ます。

なるほど、よく出来てるソフトウェアだ。
Chart.jsで一々書かなくても、ドラッグ&ドロップで表示が出来てしまうのは良いね。

Kibanaみたいな感じか。。
ただ、有料ソフトウェアをダウンロードして使ってもらうのは無理があるな。

あ、Tableau onlineがあるね。
料金は年間10.2万円。高いな。 Kibanaかな。

取り敢えずTableauのサンプルデータでテストしてみたい。

HTML5のemailのバリデーションとは?

まず普通にemailのバリデーションを考える。

/^[a-zA-Z0-9_.+-]+[@][a-zA-Z0-9.-]+$/

これで試す。

$email = ["test@yahoo.com","あああ@gmail.com","12345"];
foreach($email as $data){
	if(preg_match("/^[a-zA-Z0-9_.+-]+[@][a-zA-Z0-9.-]+$/", $data)){
		echo $data . " is ok<br>";
	} else {
		echo $data . " is not email<br>";
	}
}

HTML5のemail属性はどうなってるのか?
Mozilla.org: Email
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/email

username@domain または username@domain.tld

なるほど、良さそうやな。

[Laravel8.16.0] 電話と郵便番号のカスタムバリデーション作成

公式: https://readouble.com/laravel/8.x/ja/validation.html#custom-validation-rules

$ php artisan make:rule PhoneRule
app/Rules/PhoneRule.php

    public function passes($attribute, $value)
    {
        if($value){
           return preg_match('/^(([0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4})|([0-9]{8,11}))$/', $value);
       } else {
           return true;
       } 
    }
    public function message()
    {
        return trans('validation.phone');
    }

$ php artisan make:rule ZipcodeRule
app/Rules/ZipcodeRule.php

public function passes($attribute, $value)
    {
        if($value){
           return preg_match('/^(([0-9]{3}-[0-9]{4})|([0-9]{7}))$/', $value);
       } else {
           return true;
       } 
    }
    public function message()
    {
        return trans('validation.zipcode');
    }

/resources/lang/ja/validation.php

    'phone' => ':attributeはハイフン有りか無しで半角英数字8~11個の数字で入力してください。',
    'zipcode' => ':attributeはハイフン有りか無しで半角英数字7個の数字で入力してください。',

    'attributes' => [
        'phone'=>'電話番号',
        'zipcode'=>'郵便番号',
    ],

OK、次はEmail。HTML5のE-mailのバリデーションがどうなってるかだな。

### 1冊やっておいても損はない本

[PHP7.4.11] 郵便番号の正規表現(ハイフン有無)

$zipcode = ["100-0001","1000001","abcdefg"];
foreach($zipcode as $data){
	if(preg_match("/^(([0-9]{3}-[0-9]{4})|([0-9]{7}))$/", $data)){
		echo $data . " is ok<br>";
	} else {
		echo $data . " is not zipcode<br>";
	}
}

ハイフン有りのみの場合は

/^[0-9]{3}-[0-9]{4}$/

電話番号

/^(([0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4})|([0-9]{8,11}))$/

OK、これでカスタムバリデーションを作っていく

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