Month: December 2020

[Amazon Linux2] ELK(Elastic Search7.10.1-1)の環境を構築したい

Logstash: ログの収集と記録のための機能を備えており、プラグイン形式で機能を拡張できる
Elastic Search: オープンソースで開発されている分散型データベース、 リアルタイムでのデータ分析や検索機能に優れている
Kibana: Elasticsearch内に格納されているデータを可視化できる

ELKには、Java Runtime Environment（JRE）が必要で、openjdkで提供されている。
ログ収集のパフォーマンスはLogstashよりfluentdの方が優れている？

$ cat /etc/system-release
Amazon Linux release 2 (Karoo)
$ sudo yum update -y

### Java Install
$ sudo yum search java
$ sudo yum install java-1.8.0-openjdk-devel.x86_64
$ java -version
openjdk version “1.8.0_265”
OpenJDK Runtime Environment (build 1.8.0_265-b01)
OpenJDK 64-Bit Server VM (build 25.265-b01, mixed mode)
$ javac -version
javac 1.8.0_265

## ELKインストール
ElasticSearch -> Kibana -> logstash の順にインストールしていく

### Elastic Search
こちらのサイトを参考にする
https://www.elastic.co/guide/en/elasticsearch/reference/current/rpm.html

$　sudo rpm –import https://artifacts.elastic.co/GPG-KEY-elasticsearch
$ cd /etc/yum.repos.d/
$ sudo touch elasticsearch.repo
$ sudo vi elasticsearch.repo

[elasticsearch]
name=Elasticsearch repository for 7.x packages
baseurl=https://artifacts.elastic.co/packages/7.x/yum
gpgcheck=1
gpgkey=https://artifacts.elastic.co/GPG-KEY-elasticsearch
enabled=0
autorefresh=1
type=rpm-md

$ sudo yum install –enablerepo=elasticsearch elasticsearch
$ sudo cat /etc/elasticsearch/jvm.options
-> Xms1g, Xmx1gを　-Xms256m、-Xmx256m　に変更する

# Xms represents the initial size of total heap space
# Xmx represents the maximum size of total heap space

-Xms1g
-Xmx1g

$ sudo service elasticsearch start
ん？　failed

$ sudo systemctl status elasticsearch -l
12月 15 19:05:52 localhost systemd-entrypoint[22869]: OpenJDK 64-Bit Server VM warning: INFO: os::commit_memory(0x0000000801511000, 131072, 0) failed; error=’Not enough space’ (errno=12)

何だと??
$ sudo /bin/dd if=/dev/zero of=/var/swap.1 bs=1M count=1024
$ sudo /sbin/mkswap /var/swap.1
$ sudo /sbin/swapon /var/swap.1
$ free
$ sudo service elasticsearch start
Starting elasticsearch (via systemctl): [ OK ]

きゃああああああああああああああああああああああああああああああ

$ curl localhost:9200/

うおおおおおおおお、酒飲みてえええええええええええ

[Vue.js] select boxのv-model

v-modelはselect boxでも基本はinput textと同じ。
初期値をセットする。

<?php

$value = "4m,6m,9m,12m";

$data = explode(",",$value);

?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
	<?php
		echo "<select v-model=\"size\" name=\"hoge\">";
		foreach($data as $value){
			echo "<option value=\"" .$value. "\">" .$value. "</>";
		}
		echo "</select>";
	?>
	<br><br>
	<form action="#" method="POST">
  		<input type="text" name="size" v-model="size">
	  	<button type="submit" class="btn btn-default btn-order">送信</button>
  	</form>
  	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
	<script>
		new Vue({
		  el: '#app',
		  data: {
		    size: '<?php echo $data[0]; ?>',
		  }
		})
	</script>
</body>
</html>

OKでしょう。
Vueもいいが、Reactでちゃんとアプリを作りたいな。

[Laravel8.16.0] Getメソッドのページネーション実装

View
-> pagingは $products->appends(request()->input())->links(”)とする

	<h1>Get Method Test</h1>
	<form action="/admin/show" method="get">
		<div class="form-group">
		  <label for="text1">Product:</label>
		  <div class="row">
			  <input type="text" id="text1" name="search" class="form-control col-md-2" style="margin-left:15px">
			  <input type="submit" class="btn btn-primary">
		  </div>
		</div>
	</form>
	<p>{{ $query ? '「' .$query. '」'  : '' }}<p>
	@foreach($products as $product)
	<p>{{ $product->name}}</p>
	@endforeach

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

controller
-> 部分一致は’%’.$query.’%’と書く。 %$query%と書かない様に注意

public function show(Request $request){
        $query = $request->get('search');
        if($query !== Null){
            $products = DB::table('products')->where('name', 'like', '%'.$query.'%')->Paginate(4);
        } else {
            $products = DB::table('products')->Paginate(4);
        }
        
        return view('admin.show', compact('products','query'));
    }

取り敢えずページングはOKっぽい。
続いてメール周りを整理する。Let’s Gooooooooooo

[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、これでカスタムバリデーションを作っていく