とあるLaravel 6.xプロジェクトでBootstrapを使用しているのですが、普通にCDNで読み込んでます。
Laravelではフロントエンドのパッケージ「laravel/ui」が用意されているので、せっかくなので切り替えてみたいと思います。
Laravel 5.8では標準搭載されていたlaravel/uiとBootstrapですが、Laravel 6.xからは含まれていないので、自身でインストールする必要があります。

laravel/uiをインストール

まず、laravel/uiをインストールします。

> composer require laravel/ui
Using version ^3.2 for laravel/ui
./composer.json has been updated
Running composer update laravel/ui
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - laravel/ui[v3.2.0, ..., 3.x-dev] require illuminate/console ^8.0 -> found illuminate/console[v8.0.0, ..., 8.x-dev] but these were not loaded, likely because it conflicts with another require.
    - Root composer.json requires laravel/ui ^3.2 -> satisfiable by laravel/ui[v3.2.0, 3.x-dev].


Installation failed, reverting ./composer.json and ./composer.lock to their original content.

エラーになってしまいました。

LinuxコマンドでjpegoptimでJPG画像を圧縮します。
個人的に、ローカルでの画像圧縮処理でjpegoptimはとても優秀で、画質劣化を最小限にして、大幅に画像容量を圧縮することができます。

実行する環境はUbuntu 20.04、jpegoptim 1.4.6です。

基本的に、以下のようにオプションと画像名を指定してコマンドを実行します。
オプション「–strip-all」を付けることで、画像が持ってる位置情報やコメントを削除します。この場合、画質はそのままです。
ちなみに処理後に容量が大きくなる場合は、圧縮処理はスキップされます。

$ jpegoptim --strip-all sample.jpg

オプションに品質「–max=1～99」を指定することで、画像劣化を伴った画像圧縮を実行できます。
個人的な感想ですが、品質80ぐらいでも十分容量を抑えることができます。品質40ぐらいから画像劣化が目立ちはじめます。

$ jpegoptim --max=80 sample.jpg

画像にもよりますが、ご参考までに、上のコマンドで品質80で容量を75%削減、品質40で容量を85%削減することができました。

逆に容量を指定して圧縮することもできます。オプション「–size=400」で400KBに圧縮、また、オプション「–size=50%」で容量を半分に圧縮することができます。

$ jpegoptim --size=400 sample.jpg
$ jpegoptim --size=50% sample.jpg

初めて覚えたOSがLinuxだったので、Windowsをメインで使用している今、
Linuxだったらあのコマンドで一発の作業なのになぁ、MacOSみたいにUnixベースならなぁ、と思う場面があります。

そこで以前から気になっていた、WindowsでLinuxコマンドを使用するとができる「Windows Subsystem for Linux（WSL）」を試してみたいと思います。

WSLはWindows 10のバージョン1709から正式版が利用できますが、今回、検証した環境はバージョン2004です。

WSLをインストール

スタートメニューから「アプリと機能」を起動し、右メニューから「プログラムと機能」をクリックします。

左のメニューから「Windowsの機能を有効化または無効化」をクリックします。

リストの中から「Linux用Windowsサブシステム」にチェックを入れ、OKボタンをクリックします。

するとインストールが開始されます。
インストール後は、Windowsを再起動する必要があります。

Google検索を使わずに、自サイトだけで全文検索を実装できないかという事がたまにあります。
Laravelでは全文検索パッケージ「Laravel Scout」が用意されているとの事なので、早速、試してみます。

ここで、Scoutが推奨するのは外部ドライバ「Algolia」なのですが、こちらは有償なので、今回は無償の「TNTSearch」を使用してトライします。
GitHub – teamtnt/tntsearch: A fully featured full text search engine written in PHP
GitHub – teamtnt/laravel-scout-tntsearch-driver: Driver for Laravel Scout search package based on https://github.com/teamtnt/tntsearch

ここで、今回実装した環境は以下の通りです。
Windows 10
PHP 7.4.16
Laravel 6.x

npm scriptsを使用したプロジェクトをLaravelに移行しました。
Laravelの構成に合わせて、npm scriptsの設定を見直して、そのまま使い続けていたのですが、「Laravel MIX」がより便利？のようなお話を耳にしたので、早速環境を構築してみました。

Laravel MIXはwebpackをベースとしたフロントエンドアセットのビルドツールです。
GitHub – JeffreyWay/laravel-mix: The power of webpack, distilled for the rest of us.

実は、デフォルトのLaravelプロジェクトには、既にLaravel MIXを使う用意があり、それがルートにあるファイル「package.json」と「webpack.mix.js」です。
これらのファイルを使用して、Laravel MIXを利用します。

環境として、Laravel 6.xで運用中のプロジェクトで検証します。また、Windows 10でNode.jsがインストール済みを前提とします。

Laravel MIXのインストール

package.jsonを使用して、Laravel MIXをインストールします。
package.jsonには、Laravel MIX本体や、それに必要なパッケージの情報、そしてwebpackのスクリプトが記述されいます。
コマンドプロンプトで、対象のディレクトリへ移動し、以下のコマンドを実行します。

> npm install

package.jsonの情報を読み込んで、同ディレクトリのフォルダ「node_modules」にモジュールがインストールされるはずです。
インストールは以上です。

Laravelで共通メソッドをファサードで実装してみます。

Laravelで共通処理をどのように実装するのが最適なのか悩んでいました。
少し調べてみてたら、シンプルに任意のフォルダにクラスを配置して、それを読み込んでいる方もいらっしゃるようです。
それでも特に問題ないのですが、せっかくLaravelを使ってるので、Laravelの機能を使って、それっぽく実装してみたい。。

そこで、今回はファサードを利用して、共通メソッドを用意してみました。

共通クラスを作成

まず、共通化したい処理をまとめてた任意のクラス「…/app/MyClasses/Util.php」を用意します。
処理はシンプルに「Hello Facade!」を出力するメソッドのみです。

<?php
namespace App\MyClasses;
class Util
{
	public function hello()
	{
		return 'Hello Facade!';
	}
}

ファサードを作成

次に、共通クラスを利用するためのファサードを作成します。
フォルダ「…/app/Facades/」を新規で作成して、そこに新規ファイル「Util.php」を作成し、以下を記述します。

<?php
namespace App\Facades;
use Illuminate\Support\Facades\Facade;
class Util extends Facade
{
	protected static function getFacadeAccessor()
	{
		return 'util';
	}
}

Laravel 6.xの認証機能は、これまでの5.xとは少し異なるようです。

5.xでは、make:authコマンドを実行後、メールアドレス認証のためコードを調整したり、ルートを調整したりという作業が必要でした。
6.xでは、基本的にはデフォルトで認証機能が組み込まれており、その導入手順が異なります。

認証機能を準備

まず、以下のコマンドでLaravelのベースで必要となるテーブルを生成します。そこに認証に必要なテーブルもデフォルトで含まれているので、実施済みの場合は、こちらはスキップしても問題ありません。

> php artisan migrate

次に、以下のコマンドを実行すると、必要なルート定義と、ログイン画面、新規登録画面、パスワード再設定画面など、認証に必要なビューソースを一通り展開してくれます。

> composer require laravel/ui "^1.0" --dev
> php artisan ui vue --auth

準備は以上です。

LaravelのDBのバックアップを取得するのに、パッケージ「Laravel Backup」が便利みたいなので、試してみました。
Introduction | laravel-backup | Spatie

ちなみに今回は、Windows 10、PHP 7.3、Laravel 5.8、MySQLの環境下で試しました。

Laravel Backupをインストール

早速ですが、composerを使用してパッケージをインストールします。
ちなみに「Laravel Backup」の現時点での最新バージョン6をインストールするためには、PHP 7.2以上、Laravel 5.8以上が必要となります。

> composer require spatie/laravel-backup

インストールが成功したら、次に以下のコマンドで設定ファイルを生成します。

> php artisan vendor:publish --provider="Spatie\Backup\BackupServiceProvider"

設定ファイル「…/config/backup.php」が作成されました。
設定ファイルを開き、通知メールの送信先を設定します。

'mail' => [
	'to' => （通知メールの送信先）,

また、APP_NAMEが日本語の場合、バックアップ出力先のフォルダ名が日本語になってしまうので、設定ファイルを調整します。

'backup' => [
//	'name' => env('APP_NAME', 'laravel-backup'),
	'name' => 'laravel-backup',

Laravelをバージョン5.8から6.xへアップグレードします。

Laravel 5.8はPHP 7.1.3以上が必要ですが、昨今、PHP 7.1も非奨励となっています。
そこで、セキュリティ面も考慮して、PHP 7.2以上が動作条件となっているLSTのLaravel 6.xへアップグレードしようと思います。

今回は、基本的に公式マニュアルに沿って作業します。
アップグレードガイド 6.x Laravel

まず、composer.jsonをテキストで開きます。

	"require": {
		"php": "^7.1.3",
		"laravel/framework": "5.8.*",

こちらを、以下のように書き換えます。

	"require": {
		"php": "^7.2",
		"laravel/framework": "^6.0",

コマンドラインからcomposerでアップデートを実行します。

> composer update

しばらく待てば、アップグレード完了です。
あっさりですね。。あっさり過ぎる。。本当に大丈夫？w

いろいろなパッケージを追加で組み込んでいるケースでは、アップグレードが途中で停止して、composer.jsonを見直すといったことを繰り返すこともあるようですが、私の場合は一切なかったです。
とりあえずは問題なさそうですが、時間をかけてじっくり細かいところをチェックしたいと思います。

フォームタグ「<input type=”file”>」で画像を選択したタイミングで、JavaScriptで画像のプレビュを表示する方法です。

これまで、フォームで選択した画像ファイルは、一度サーバにアップした後でないと、ブラウザ上でプレビュできないものだと考えておりました。
実際に任意のシステムでも、一度アップした画像を一時画像扱いでサーバに保存し、確認画面でプレビュして、戻るイベントで画像を削除、決定イベントでDBに本登録するといったような、めんどくさいロジックを組み立てていました。

それがJavaScriptだけで可能なことを最近知りました。。
セキュリティ的にどうとかの評価はひとまず置いておいて、その方法についてのメモです。

まず、ファイルタイプのフォームと画像プレビュ用のimgタグを用意します。

<input id="image" type="file" accept="image/*">
<img id="preview">