[Laravel8.16.0] ページネーションのカスタマイズ

デフォルトだと、ページ数の数だけページネーションが表示される

@foreach($products as $product)
	<p>{{ $product->name}}</p>
	@endforeach
	<div class="d-flex justify-content-center">
            {!! $products->links() !!}
    </div>

$ php artisan vendor:publish –tag=laravel-pagination

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

以下のファイルを読み込んでいる。
vendor/laravel/framework/src/illuminate/Pagination/resources/views

なるほど

[Tableau] sampleデータを視覚化

TableauのリソースからデータをDLします。
https://public.tableau.com/s/resources

今回は、「2018 FIFA World Cup Rosters」にしたい。
world_cup_2018_squads.xlsx

これをTableauで開く。

シートに行きます。
列にCountry Club, 行にGoalを設定する。
どこのチームに所属している選手が多く点を取ってるか一発でわかる。

表示形式はバリエーションが豊富

なるほど、これは凄いね。
BIが何かってもの理解した。まあ料金がネックやな、Kibanaを検討しよう。

[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 PGothic", sans-serif;

なんで、font-familyで書体を複数設定しているか全然わからなかったけど、それぞれのOSで書式がないときに厳密に指定するためなのね。

何年Webやってんだ、って感じだが、やっと理解できた。