MacでScreenShot(スクショ)＆GIF化メモ

Cmd + Shift + 5 で画面収録

$ ffmpeg -i input.mov -r 10 output.gif

FN＋Ctrol　で入力モードが切り替わる

矢印キーの無効は、Fn＋Enter で有効化できる
(https://drive.google.com/drive/folders/11_IkTfy9uLe9-DNFtWLBiKS6m5tFVMZq)

いくつか要約すると

Fn　＋　P 長押しでペアリングモードに入りBluetoothで接続できるようになります。Fn+Q, W, Eであらかじめ機器のキーを割り当てておく

USBとBluetoothの切り替えは、FnキーとTABキーを押し、ペアリングは FnキーとPキーを押す。
Bluetoothホスト機器の切り替えは、Fnキーを押しながら、Q, W, E のいずれかを押す。

Fn　＋　=+キー　でバックライトの点灯、光量のup　光量は０～４の５段階あります。

LEDイルミネーションの明るさは、Fnキーを押しながら、 「[{」キーか「]}」キーを押す。
LEDイルミネーションの種類を選ぶには、Fnキーを押しながら、「|」キー。
LEDイルミネーションの速度を変えるには、Fnキーを押しながら、「;:」キーか「'”」キーを押す。

Fn　＋　-ーキー　で光量のdown
Fn　＋　winキー　でwinキーのロック
Fn　＋　左のCtrl　でファンクションキーの有効化　１を押したらF１、２を押したらF２のように３～０まで同様 他にもEscの無効化など
Fn　＋　←　で　デリートキー
Fn　＋　左のAltを５秒押しで工場出荷状態にリセット

というようにFnキーとの組み合わせが多いですが、慣れれば打鍵感の良いキーボードです。

Amazonからの引用では以下のようなややこしい仕様になっています。

数字キーとファンクションキーのデフォルトを入れ替えるには、Fnキーを押しながら左Ctrlキーを押すことで
数字キーとファンクションキー（正確にはFnキーを押してでてくるキー）が入れ替わる。
もう一度、Fnキーと左Ctrlキーを押すと、アルファベットキーに割り当てられたFnキーのキーが解除になり
数字キーとファンクションキーだけが入れ替わった状態になる。つまり３モードトグルになっている。

https://guitarsk.com/pc/archives/1516\

Fn + Enterで、カーソールキーをFn有無を切り替え

フォーム送信の2重を一括で防止するJavaScrpt

これを書いておけばおけなはず。
(※formのsubmitイベントの衝突/前後は考慮していまっせん。)

document.querySelectorAll('form').forEach(function(form){
    form.addEventListener('submit',function(e){
        if(form.dataset.isSubmit){
            e.preventDefault();
            return;
        }
        form.dataset.isSubmit = '1';
        e.currentTarget.querySelectorAll('button,input[type="submit"],input[type="image"]').forEach(function(el){
            el.style.pointerEvents = 'none';
            el.style.opacity = '0.7';
        });
    });
});

• 基本ブロック、送信ボタン類のCSS pointer-events: none にして押せなくする。(ついでに透明度さげて押せない感をアピール
• 入力フィールドでエンターを連打するツワモノがいるので、送信時にデータセット data-is-submit を追加してフラグが立っていれば、送信しない。

PhpStormでソースコード(エディタ)からプロジェクトバーのツリーにジャンプする方法。

1. Alt + F1
2. Select In のダイアログ表示
3. 1のProject Viewを選択

Macのキーリピートスピード調整

ターミナルで以下に設定

defaults write -g KeyRepeat -float 1.8
defaults write -g InitialKeyRepeat -int 10

現在の設定値の確認はreadで

$ defaults read -g KeyRepeat
$ defaults read -g InitialKeyRepeat

ローカル開発環境のLaravel(sail)から、ステージングのLaravel経由でAPIを叩く。

決済APIが特定のIP(ステージング環境)からしか受け付けない状況で、スムーズに開発をしたいため簡易プロキシを作ってみました。

リクエストの流れ

• 送って (ローカル開発環境) → (プロキシ:ステージング環境) → (APIサーバー)
• 帰ってくる (ローカル開発環境) ← (プロキシ:ステージング環境) ← (APIサーバー)

利用パッケージ(guzzle)

$ composer require guzzlehttp/guzzle

API用のルーティング

APIのディレクトリをプロキシようのコントローラーに送る。

Route::match(['POST','GET'],'/api/{any}',[\App\Http\Controllers\Dev\ProxyController::class,'index']);

プロキシ部分

• ProxyController.php

<?php

namespace App\Http\Controllers\Dev;

use GuzzleHttp\Client;
use GuzzleHttp\Psr7;
use App\Http\Controllers\Controller;

class ProxyController extends Controller
{
    public function index()
    {
        $request = Psr7\ServerRequest::fromGlobals();
        $proxyUri = $request->getUri()
            ->withHost('api.example.com')
            ->withPort(433)
            ->withScheme('https');
        $client = new Client;
        dd($proxyUri,$client);
        $response = $client->send($request->withUri($proxyUri), ['http_errors' => false]);
        echo $response->getBody();
    }
}

Docker(sail)利用時にMacでLaravelのデバッグ画面からPhpStormのソースコードにジャンプできない。

Laravelのデバッグ画面のソースコード表示からPhpStormへのリンクができるがエラーとなる。

j
– ※デバッグ画面(ingnition)が/var/www/html/appを参照している
– .envにパスを記載してあげればOK

IGNITION_LOCAL_SITES_PATH='/Users/path/to/your/project'

Laravelの配列(Array)のValidationの項目名に行を表示する。

配列のバリデーションでメッセージを表示する場合に以下のように名前を割り当てていただけど。

    public function attributes()
    {
        return [
            'stock.*.jan' => 'JANコード',
            'stock.*.grade_id' => '商品グレード',
            'stock.*.location_id' => '場所',
            'stock.*.note' => 'メモ',
        ];
    }

複数行でえらーだと以下のようにバグっぽくなってしまう＆どこかよくわかんなくなるので、行数をどうにかいれられないかあと

・このJANコードの値は既に存在しています
・このJANコードの値は既に存在しています
・このJANコードの値は既に存在しています
・このJANコードの値は既に存在しています

MessageBag($erros)を配列にtoArray()してKeyを見て強引に行数をいれる

もう少しスマートにできないかどうか。

<div class="alert alert-danger">
    <ul>
        @foreach( $errors->toArray() as $key => $errors)
            @foreach( $errors as $error)
                @if(preg_match('/(\.)([\d]+)(\.)/',$key,$matches))
                    <li>{{ sprintf('%s(%s行目)',$error,intval($matches[2])+1) }}</li>
                @else
                    <li>{{ $error }}</li>
                @endif
            @endforeach
        @endforeach
    </ul>
</div>

Laravel9 langフォルダのメッセージをPHP/JavaScriptで共有したい。

/lang/ja/messages.phpを添付のように書いていたところ.
nodejsでコンパイル前のソースから同じ文言を共有したくなりました。

return [
    'login' => [
        'success' => 'ログインしました。',
        'fail' => 'ログインに失敗しました。'
    ],
];

そこで、/lang/ja/以下のPHPをJSONに変換してJavaScriptの定数のように使えるようにするコマンドを作成しました。

• /lang/ja/以下のPHP
• const ファイル名 という変数名になります。
• とりあえず多言語化はしておらず、メッセージの定数管理のみ＆JS側でIDEのコードヒントが出てほしいだけ

<?php
namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\File;

class YamaLabLangMesJsonCommand extends Command
{
    protected $signature = 'yamalab:lang_mes_json';
    protected $description = 'langファイル(PHP)をJSONに変換し保存';
    
    /**
     * Execute the console command.
     *
     * @return int
     */
    public function handle()
    {
        
        $langdir = base_path('lang/ja');
        if (is_dir($langdir)) {
            $files = scandir($langdir);
            if (!empty($files)) {
                $langjs = [];
                $files = array_filter($files, function ($f) {
                    return strpos($f, '.php') !== false;
                });
                foreach ($files as $f) {
                    $phpArr = include base_path("lang/ja/$f");
                    $json = json_encode($phpArr, JSON_UNESCAPED_UNICODE);
                    $name = str_replace('.php','.json',$f);
                    $varName = '__'.str($name)->replace('.json','')->upper().'__';
                    $row = sprintf('var %s = %s;',$varName,$json);
                    $langjs[] = $row; 
                }
                $langjs = implode("\n",$langjs);
                File::put(resource_path('js/lang.js'), $langjs);
            }
        }
        return Command::SUCCESS;
        
    }
    
}

2022年9月時点WebP画像対応のOSブラウザのメモ

基本殆どのブラウザが対応してきているので、どんどん進めたい所。

モバイルは

ほとんど大丈夫と思われます。

• Androidは太古のバージョンのみなので無視できる。
• iOSのSafariは14以上はOK 13以下もちょこちょこあるが 0.5%にも満たない感じなので無視できる範囲と思われる。

デスクトップは

• IE11が2022年6月にサポート終了は朗報
• 基本的に要件が最新ブラウザとなっていれば問題ないと思われる。
• MacOS11(BigSur)以降でサポートされているが、その前のCatalinaユーザーがまだ多いので実際には対応しないと行けない感じ

ベターなバランス型の対応は以下のような感じになりそうです。

PCはSafariのためにJPGなども対応、SPはWebPのみで微細なアクセスは無視する。

    <picture>
        <source srcset="{PC用WebP}" type=”image/webp”>
        <source srcset="{PC用JPG}" type=”image/jpg”>
        <img src="{SP用WebP}" alt="">
    </picture>