ソフトウェアエンジニアの技術ブログ：Software engineer tech blog – Page 233 – 随机应变 ABCD: Always Be Coding and … : хороший

[Photoshop] スウォッチ

Webデザインでは、RGBではなくWEBスウォッチを使うことが多いとの事。
HEXコードで登録する

レイヤーはWebデザインで一番良く使う機能。
シェイプツールの編集にパスを良く使用する。

なるほど、ちょっと色々考えることが多くなってきたな。

PSDファイルからHTMLにする流れ

PSD -> HTMLにする為の具体的な作業内容
ここが超絶重要なポイント、丁寧に深く理解する必要がある。

1. スケッチ(どのようなWebサイトを作っていくか)
2. ワイヤーフレーム(何ピクセルで作るかなど)
3. デザイン(色のパレットを決める、配色・配置)
4. 切り出し・書き出し・引き継ぎ
L ロゴ、メニューなどを切り出す作業をスライスという
L 各要素を適切なファイルサイズで書き出す
L 書き出したファイルを整理整頓する

なるほど、デザインしたものをスライスして書き出してる訳ね。
バナー作成の場合は基本的にデザインだけだが、Webページのデザインの場合はスライス・書き出しの作業があるから全然違うな。
OK、工程をちゃんと理解した。レイヤーをどう使ってるかなどは理解する必要があるな。

ピクセルディメンションと解像度

– ピクセルディメンションとは、縦横のピクセルサイズの事
– 解像度はdpi(dot per inch)で表す
– 一インチの中に幾つのドットを表示できるのかを表している

デバイスのインチ、画像サイズが同じでも、解像度が異なると、表示内容が異なる。

なるほど、デバイスの解像度を考えながら作っていくのね。

[Photoshop] グラデーションのかけ方

まず、新規のドキュメントを作成します。

グラデーションツールを選択する。

ドラッグするだけで、黒から白へのグラデーションが作られる。

円形のグラデーションも作成可

色も変えられる。

文字へのグラデーション

グラデーションオーバーレイ

色をつける

グラデーションかけるだけでプロっぽく見えますね。不思議や。

[CSS] 画像の上に文字を乗せる方法

ボタン画像の上に文字を乗せて表示したい。
-> 画像の上に文字を乗せる方法を理解する。

<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET</p>
		</div>

position: relativeとする。

<style>
    	.sample {
    		position: relative;
    	}
    	.sample p {
    		position: absolute;
    		color: red;
    		top: 5px;
    		left: 5px;
    	}
    </style>

<div class="container">
		<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET</p>
		</div><br>
		<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET2</p>
		</div>
	</div>

画像の上に文字が乗りました。

なるほど、理解した。背景画像とは別に、こういうことができるんやな。

[Photoshop] スライスを理解する

スライスとは、コーディング用に分解して、一つ一つの画像にしていく。
まず、Photoshopで画像を用意する。

続いて、切り抜きツールからスライスツールを選択

ファイル -> 書き出し -> Web用に保存

保存

分割された画像が書き出される。
ほう、こういう事か。。ちょっと視界が拓けてきたかな。

1.ボタン画像の上に文字を乗せる方法を確かめたい。
2.PSDファイルをHTMLにする流れを確認したい。

PSDのレイヤーが異なるものは、レイヤーごとに画像書き出ししてるんかな。

[Amazon Linux2] fluentdインストール

$ curl -L https://toolbelt.treasuredata.com/sh/install-amazon2-td-agent3.sh | sh

// プラグインインストール
$ sudo /opt/td-agent/embedded/bin/fluent-gem install fluent-plugin-zabbix
$ sudo /opt/td-agent/embedded/bin/fluent-gem install fluent-plugin-cloudwatch

// 起動
$ sudo systemctl start td-agent.service
$ sudo systemctl status td-agent.service

### テスト
$ curl -X POST -d ‘json={“json”:”message”}’ http://localhost:8888/debug.test
$ tail /var/log/td-agent/td-agent.log

### 設定ファイル
$ sudo vi /etc/td-agent/td-agent.conf
-> apache log出力

<source>
  type tail
  path /var/log/apache2/access.log
  pos_file /var/tmp/apache2-access.log.pos
  format apache2
  tag log.apache
</source>

<match log.**>
  type stdout
</match>

source
– inputしたいソースに対応するプラグインを指定

match
– イベントをタグ指定してoutputプラグインに渡す。
– 標準的に使用するプラグイン；file,forward

$ sudo systemctl reload td-agent.service

sysctl.conf とは？

/etc/sysctl.conf は、OS起動時に/proc/sysディレクトリのファイルに設定する値を記述するファイル。
カーネルパラメータを設定し、「/proc/sys」以下に反映する
net.ipv4.ip_forward=1　とすると、/proc/sys/net/ipv4/ip_forward　ファイルの中身が1となる。
sysctl -a

$ sysctl -a
abi.vsyscall32 = 1
crypto.fips_enabled = 0
// 省略
vm.watermark_scale_factor = 10
vm.zone_reclaim_mode = 0

メモリの使い方、プロセス管理、ネットワーク関係など、様々な項目を設定できる。

e.g.

net.core.somaxconn = 1024　// TCPソケットが受け付けた接続要求を格納する、キューの最大長
net.core.netdev_max_backlog = 5000 // パケット受信時にキューに繋ぐことができるパケットの最大数
net.core.rmem_max = 16777216 // TCPとUDPの送信バッファのデフォルトサイズ
net.core.wmem_max = 16777216
net.ipv4.tcp_wmem = 4096 12582912 16777216 // TCP ソケットバッファー
net.ipv4.tcp_rmem = 4096 12582912 16777216
net.ipv4.tcp_max_syn_backlog = 8096 // ネットワークのルート・メトリクス
net.ipv4.tcp_slow_start_after_idle = 0 // 一定時間無通信状態が続いたらウィンドウサイズを初期値から開始する設定
net.ipv4.tcp_tw_reuse = 1 // TCPの接続を使いまわすかどうか
net.ipv4.ip_local_port_range = 10240 65535 // TCPソケットが受け付けた接続要求を格納するキューの最大長

何だこれは。。。

[Laravel8.x] ページネーションをカスタマイズしたい

ページ数が増えた場合に、横に広がってしまうため、ページネーションをカスタマイズしたい。

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

/resources/views/vendor/pagination/element.blade.php

@if ($paginator->hasPages())
	<ul class="pagination" role="navigation">
		{{-- First Page Link --}}
		<li class="page-item {{ $paginator->onFirstPage() ? ' disabled' : '' }}">
	        <a class="page-link" href="{{ $paginator->url(1) }}">&laquo;</a>
	    </li>

		{{-- Previous Page Link --}}
		<li class="page-item {{ $paginator->onFirstPage() ? ' disabled' : '' }}">
	        <a class="page-link" href="{{ $paginator->previousPageUrl() }}">&lsaquo;</a>
	    </li>

		{{-- Pagination Elemnts --}}
    		{{-- Array Of Links --}}
		    @if ($paginator->lastPage() > config('const.PAGINATE.LINK_NUM'))


	        @if ($paginator->currentPage() <= floor(config('const.PAGINATE.LINK_NUM') / 2))
	            <?php $start_page = 1; //最初のページ ?> 
	            <?php $end_page = config('const.PAGINATE.LINK_NUM'); ?>

	        @elseif ($paginator->currentPage() > $paginator->lastPage() - floor(config('const.PAGINATE.LINK_NUM') / 2))
	            <?php $start_page = $paginator->lastPage() - (config('const.PAGINATE.LINK_NUM') - 1); ?>
	            <?php $end_page = $paginator->lastPage(); ?>

	        @else
	            <?php $start_page = $paginator->currentPage() - (floor((config('const.PAGINATE.LINK_NUM') % 2 == 0 ? config('const.PAGINATE.LINK_NUM') - 1 : config('const.PAGINATE.LINK_NUM'))  / 2)); ?>
	            <?php $end_page = $paginator->currentPage() + floor(config('const.PAGINATE.LINK_NUM') / 2); ?>
	        @endif

	    @else
	        <?php $start_page = 1; ?>
	        <?php $end_page = $paginator->lastPage(); ?>
	    @endif

	    @for ($i = $start_page; $i <= $end_page; $i++)
	        @if ($i == $paginator->currentPage())
	            <li class="page-item active"><span class="page-link">{{ $i }}</span></li>
	        @else
	            <li class="page-item"><a class="page-link" href="{{ $paginator->url($i) }}">{{ $i }}</a></li>
	        @endif
	    @endfor

		{{-- Next Page Link --}}
		<li class="page-item {{ $paginator->currentPage() == $paginator->lastPage() ? ' disabled' : '' }}">
	        <a class="page-link" href="{{ $paginator->nextPageUrl() }}">&rsaquo;</a>
	    </li>

		{{-- Last Page Link --}}
		<li class="page-item {{ $paginator->currentPage() == $paginator->lastPage() ? ' disabled' : '' }}">
	        <a class="page-link" href="{{ $paginator->url($paginator->lastPage()) }}">&raquo;</a>
	    </li>

	</ul>
@endif

const.php

	'PAGINATE' => [
        'LINK_NUM' => '3', //paginationの一度に表示するリンクの数
    ],

view

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

OK 大分できてきた。後はBI周りを何とかしたい。

[Laravel8.x] 一定の条件の場合はログインできないようにする

バリデーションでできるのかもしれませんが、単にAuth::logout()として、ログイン画面に飛ばせば良いですね。

$user = Auth::user();
        if($user->name == "hpscript"){
            Auth::logout();
            return redirect('/login')->withErrors(array('name' => 'ログインできません。'));
        }

なかなか奥が深い。