[Laravel8.16.0] カラム追加・削除のmigrationファイルの書き方

usersテーブルで、first_name、last_nameを削除して、client_nameのカラムを作りたい
※「姓」・「名」を「名前」のカラム一つに統一したい

$ php artisan -V
Laravel Framework 8.16.0

migrationファイルの作成
$ php artisan make:migration change_name_columns_to_users_table –table=users

2020_12_04_040045_change_name_columns_to_users_table.php

    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            //
            $table->string('client_name')->nullable();
            $table->dropColumn('first_name');
            $table->dropColumn('last_name');
        });
    }

$ php artisan migrate

// migration確認
mysql> describe users;
mysql> select * from users

// git push
$ git add .
$ git commit -m “name columns changed”

‘first_name’、’last_name’もnullableで作っていたが、dropColumnの時は特にnullbaleとかはつけなくて良いみたい。
なるほど。

[UI・UX] 背景色とテキストカラーのコントラスト比の確認方法

https://lab.syncer.jp/Tool/Color-Contrast-Checker/というサイトで、背景色とテキストのコントラスト比を確認できる。

例えば、背景色が、#ffffff(white)で、テキストが#9A9A9Aだと、コントラスト比が2.81で、Web Content Accessibility Guidelines (WCAG) 2.0の基準4.5に満たないとのこです。

Web Content Accessibility Guidelines
https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。

なうほど、こういうのがあるんやな。勉強になります。

alt属性とtitle属性

alt属性はよく画像につけるものとしてありますが、title属性とは何でしょうか?

– alt属性はロボットに対して明示してあげるもの
– title属性は要素の補足説明をするためのものいわゆる「ツールチップ」

ロゴで以下の様にtitle属性、alt属性を設定すると良いとのこと。

<a href="/" title="トップページへ">
          <div class="top-logo">
            <img src="img/logo.png" alt="サービス名・会社名">
          </div>
        </a>

なるほどー

[jQuery3.5.1]最新版のバージョン

公式サイトを確認すると、最新版のバージョンは3.5.1となっています。

フロントを構築する場合は、最新のjQueryを使わないと駄目とのこと。
なるほど、勉強になりますね。

[viewport] maximum-scale=1.0, user-scalable=0

viewportの指定で例えば以下の様に設定していたとする。

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />

user-scalable:ズームの操作
-> ユーザーがズームできるかどうかの設定。
-> 初期値はyes。yes=1,no=0。

maximum-scale 最大倍率
-> 最小拡大比率の設定。
-> デフォルトは1.6で指定可能範囲は0より大きく、10までの値。

つまり、「maximum-scale=1.0, user-scalable=0」だと、ユーザのズームを禁止しており、仕様にもよるが、多くの場合、ユーザエクスペリエンス上、望ましくないとのこと。

なるほど、プロの領域やな。

[Laravel8.16.0] Google Analytics APIを使う

まず、analytics-*-*.p12ファイルですが、publicには置けないので、resourcesフォルダの下にstaticフォルダを作成し、そこに置きます。
※storageやpublicに置かない様にする。

続いて、google-api-php-clientをインストールします。
githubで最新を確認する。この記事を書いている時点では^2.7が最新です。
https://github.com/googleapis/google-api-php-client

$ composer require google/apiclient:”^2.7″

AdminController.php (*test)
L resource_path(‘static/analytics-*-*.p12’)で、p12を指定する

    public function index(){

        $client = new Google_Client();
        $client->setApplicationName("Client_Library_Examples");
        $client->setDeveloperKey(resource_path('static/analytics-*-*.p12'));
        dd($client->getAccessToken());

    	$user = Auth::user();
        return view('admin.index',compact('user'));
    }

nullが返ってくるとOKっぽい。

テスト環境と同じ様に書いてみます。

use Google_Client;
use Google_Service_Analytics;

$service_account_email = '*.iam.gserviceaccount.com';
      $key = file_get_contents(resource_path('static/analytics-*-*.p12'));
      $profile = '*';

      $client = new Google_Client();
      $analytics = new Google_Service_Analytics($client);

      $cred = new Google_Auth_AssertionCredentials(
        $service_account_email,
        array(Google_Service_Analytics::ANALYTICS_READONLY),
        $key
      );

      $client->setAssertionCredentials($cred);
      if($client->getAuth()->isAccessTokenExpired()){
        $client->getAuth()->refreshTokenWithAssertion($cred);
      }

Class ‘App\Http\Controllers\Google_Auth_AssertionCredentials’ not foundのエラー

issueに原因が載ってます。
https://github.com/GoogleCloudPlatform/nodejs-docs-samples/issues/158

Oh, I've just found https://github.com/google/google-api-php-client/blob/master/UPGRADING.md

So it's the docs at https://developers.google.com/analytics/devguides/reporting/core/v3/quickstart/service-php that are wrong.

GoogleDevコンソールで、「サービス アカウント キーの作成」からjsonファイルを作成して、以下に書き換えます。

use Google_Client;
use Google_Service_Analytics;

$profile = '*';

        $client = new Google_Client();
        $client->setScopes(array('https://www.googleapis.com/auth/analytics.readonly'));

        $client->setSubject('*.iam.gserviceaccount.com');
        $client->setAuthConfig(array(
            'type' => 'service_account',
            'client_email' => '*.iam.gserviceaccount.com',
            'client_id' => '*',
            'private_key' => "-----BEGIN PRIVATE KEY-----***-----END PRIVATE KEY-----\n"
        ));

        $analytics= new Google_Service_Analytics($client);

         $result = $analytics->data_ga->get(
         'ga:' . $profile,
         'yesterday',
         '0daysAgo',
         'ga:pageviews',
         array(
           // "dimensions" => 'ga:pageTitle',
           "dimensions" => 'ga:pagePath',
           "sort" => '-ga:pageviews',
           "max-results" => '10',
         )
        );

        $data = $result->rows;
        dd($data);

これでいけました。結局p12は使わない。
う〜ん、AnalyticsAPIは使うの緊張する。

[Laravel8.16.0] 一般権限と管理者権限で表示制御

mysql> describe users;
+—————————+—————–+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+—————————+—————–+——+—–+———+—————-+
| id | bigint unsigned | NO | PRI | NULL | auto_increment |
| name | varchar(255) | NO | | NULL | |
| email | varchar(255) | NO | UNI | NULL | |
| email_verified_at | timestamp | YES | | NULL | |
| password | varchar(255) | NO | | NULL | |
| two_factor_secret | text | YES | | NULL | |
| two_factor_recovery_codes | text | YES | | NULL | |
| remember_token | varchar(100) | YES | | NULL | |
| current_team_id | bigint unsigned | YES | | NULL | |
| profile_photo_path | text | YES | | NULL | |
| created_at | timestamp | YES | | NULL | |
| updated_at | timestamp | YES | | NULL | |
| role_id | int | NO | | NULL | |
+—————————+—————–+——+—–+———+—————-+

$ php artisan make:middleware IsAdmin

app/Http/Middleware/Kernel.php

protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
        'IsAdmin'=>\App\Http\Middleware\IsAdmin::class,
    ];

app/Models/Users.php

public function isAdmin(){
        if($this->role_id == 1){
            return true;
        }
        return false;
    }

route

Route::get('/', function () {

	$user = Auth:: user();

	if($user->isAdmin()){
		echo "this user is admin";
	}
    // return view('welcome');
});

挙動確認

isAdmin.php

use Illuminate\Support\Facades\Auth;
public function handle(Request $request, Closure $next)
    {
        $user = Auth::user();
        if(!$user->isAdmin()){
            return redirect()->intended('/');
        }
        return $next($request);
    }

$ php artisan make:controller AdminController

AdminController.php

public function __construct(){
        $this->middleware('IsAdmin');
    }
 
    public function index(){
        return view('admin.index');
    }

route

use App\Http\Controllers\AdminController;
Route::get('/admin', [App\Http\Controllers\AdminController::class, 'index']);

もしくはrouteで制御

Route::group(['middleware' => ['auth','IsAdmin'] ], function(){
 	Route::get('/admin', [App\Http\Controllers\AdminController::class, 'index']);
 });

思い出したーーーーーー

[Design Guideline] 用語 : ポジネガ、DICカラー、アイソレーション

### ポジ表示、ネガ表示
-ネガは陰画、ポジは陽画
-実際の明暗とは逆になっている画像で、明るい所が黒く、暗い所が白い画像

元画像

photoshopで画像を開く

photoshop [command + i]

DICカラー
L DIC社が提供

アイソレーション
– 全体1に対して、余白0.5と言われている

変形(長体・平体・斜体・回転)、間隔の変更、書体の変更、色の変更、装飾(影・縁取り・立体表示)、アイソレーション範囲内での他要素の表示、視認性を低下させる背景の使用、文中での使用

用語知らないと、ビビりまくるな

[Laravel8.16.0] ユーザ登録のテストコードを書く

$ cp .env.example .env.testing
$ php artisan key:generate –env=testing
// test用のDB接続
$ vi .env.testing

$ rm ./tests/Feature/ExampleTest.php
$ rm ./tests/Unit/ExampleTest.php

app/Actions/Fortify/CreateNewUser.php

return User::create([
            'name' => $input['name'],
            'company' => $input['company'],
            'role_id' => 1,
            'email' => $input['email'],
            'password' => Hash::make($input['password']),
        ]);

CreateNewUser.phpと同じようなことを書いていく
$ php artisan make:test UserRegisterTest

tests/Feature/UserRegisterTest.php

public function testUserRegister()
    {
        $email = 'hogehoge@gmail.com';
        $this->post(route('register'), [
            'name' => 'testuser',
            'company' => 'test company',
            'email' => $email,
            'password' => 'password',
            'password_confirmation' => 'password'
        ])
            ->assertStatus(302);
 
        $this->assertDatabaseHas('users', ['email' => $email]);
    }

$ vendor/bin/phpunit –testdox
PHPUnit 9.4.3 by Sebastian Bergmann and contributors.

User Register (Tests\Feature\UserRegister)
✔ User register

Time: 00:00.354, Memory: 26.00 MB

OK (1 test, 2 assertions)

なるほど、わかったようなわかってないようなw

[JavaScript] ES2020のconst, let, var

strict

'use strict'; // 厳密なエラーチェック

定数 // 再代入不可

		const price = 10;
		console.log(price * 3);

変数 // letを使う varは古い書き方

		let price = 10;
		price = 30;
		console.log(price * 3);

無名関数

const sum = function(a, b, c){
			return a + b + c;
		}
		const total = sum(1, 2, 3) + sum(4, 5, 6);
		console.log(total);

arrow function

const sum = (a, b, c) => a + b + c;