フォーム送信の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>

ディレクトリ以下の画像を一括でwebpに変換したい人のためのワンライナー(jpgとpngのみ)

$ find -E . -iregex '^.+\.(jpe?g|png)$' | sed -r 'p;s/\.(jpg|jpeg|png)$/\.webp/gi' | xargs -n2 bash -c 'cwebp $0 -o $1'

1. findで拡張子のファイルを探して(JPG,jpg,JPEG,jpeg,PNG,png)
2. sedで元ファイル名/置換後ファイル名を出力
3. xargsでbashを実行 -cオプションで文字列からcwebpを実行 ※1

※1.xargsで複数の引数の場合渡す位置が細かく設定できなかったんでbashに渡して実行

cwebpコマンドがない人はGoogleより先にDownLoadしていてください。

Downloading and Installing WebP

元ファイルを削除するバージョン

$ find -E . -iregex '^.+\.(jpe?g|png)$' | sed -r 'p;s/\.(jpg|jpeg|png)$/\.webp/gi' | xargs -n2 bash -c 'cwebp $0 -o $1; rm $0'

Vue2のテンプレート内部で、momentが使えなかった、dataに渡してあげると解決。

import moment from 'moment';
moment.locale('ja');

new Vue({
    el: '#myApp',
    data: {
        moment: moment
    },
.
.
.

出ていたmomentが参照できないよとエラー

app.js:43920 [Vue warn]: Property or method "moment" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

参考 :
https://stackoverflow.com/questions/58342090/typeerror-vm-moment-is-not-a-function-in-vuejs