WEB／システム／IT技術ブログ

「Laravel Mix」Stand-Aloneを使ってみる

「Laravel Mix」といえば、Laravelに付属しているタスクランナーです。

昨今、タスクランナーといえばnpm-scriptやgulpをよく聞きますが、どうもしっくりこないんですよね。
そこで、今回はLaravel本体は使用せずにタスクランナー機能のみを利用できる「Larave Mix Stand-Alone」を試してみます。
Laravel Mix
実はLaravel Mixの中身はwebpackで、それをより便利に使いやすく設計されたツールだそうです。そうだったんですね。

以下、Windows 10で、Node.jsがインストール済みであることが前提です。

Laravel Mixをインストール

Laravel Mixをインストールします。プロジェクトフォルダに移動して、以下のコマンドを実行します。

> npm init -y
> npm install laravel-mix --save-dev

インストールが完了したら、同一ディレクトリにファイル「webpack.mix.js」を新規作成し、以下のコードを記述します。

let mix = require('laravel-mix');

処理は空っぽの状態ですが、以下で実行します。

> npx mix
「「Laravel Mix」Stand-Aloneを使ってみる」のつづきを読む

大規模リモートリポジトリのGit clone時に途中でエラーになりcloneできない

Githubからgit clone時に途中でエラーとなり、cloneできない事象に遭遇しました。
環境はWindows 10、git 2.18です。

エラーの内容は以下のとおり

fatal: early EOF
fatal: The remote end hung up unexpectedly
fatal: index-pack failed

原因ははっきりとしませんでしたが、どうやらリポジトリの容量が大きいことで発生してるようです。

そこで、まずはオプション「depth」を使って最新の履歴のみをcloneします。

>git clone --depth 1 git@github.com:helog/helog.git

無事cloneできました。

次に、cloneしたディレクトリに移動して、オプション「unshallow」を指定して残りの履歴を取得します。

>cd helog
>git fetch --unshallow

コマンドが無事完了すればclone完了です。

「大規模リモートリポジトリのGit clone時に途中でエラーになりcloneできない」のつづきを読む

Gitリポジトリを別のリモートリポジトリへ移行（引っ越し）する

Githubが無料になったみたいですね。
当時、無料で制限なく使えるGitリモートリポジトリサービスがなかったので、独自でリモートリポジトリを構築していました。Gitを学習したり、遊んだりするのに、サービスに月額でお金を払うというのはちょっともったいないですよね。
現在、Githubは個人が趣味や学習で使う分には制限もなく、無料で利用できるようになったということなので、リモートリポジトリをお引越しすることにしました。

作業環境は
Windows 10
git 2.18
です。

移行元リポジトリをローカルにクローンする

まず、移行元リポジトリをローカルにミラークローンします。今回は秘密鍵を使用しているので、鍵を指定します。

>set GIT_SSH_COMMAND=ssh -i C:/Users/helog/openssh.key & git clone --mirror ssh://helog@helog.xxxx.jp:22/home/helog/repos.git

クローンにはしばらく時間がかかります。コミット量やデータ量にもよると思いますが、今回は10分程度でした。
終了したらクローンしたフォルダに移動します。

>cd repos.git
「Gitリポジトリを別のリモートリポジトリへ移行（引っ越し）する」のつづきを読む

Laravel 6.xでlaravel/uiを利用してBootstrapなどフロントエンドパッケージを組み込む

とある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.

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

「Laravel 6.xでlaravel/uiを利用してBootstrapなどフロントエンドパッケージを組み込む」のつづきを読む

LinuxコマンドjpegoptimでJPG画像圧縮

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
「LinuxコマンドjpegoptimでJPG画像圧縮」のつづきを読む

Windows Subsystem for Linux（WSL）をインストールしてみる

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

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

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

WSLをインストール

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

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

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

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

「Windows Subsystem for Linux（WSL）をインストールしてみる」のつづきを読む

Laravel ScoutとTNTSearchを使用してサイト全文検索を実装してみる

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

「Laravel ScoutとTNTSearchを使用してサイト全文検索を実装してみる」のつづきを読む

LaravelのCSS、JavaScript等ビルドツール「Laravel MIX」を使ってみる

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のCSS、JavaScript等ビルドツール「Laravel MIX」を使ってみる」のつづきを読む

Laravelで共通メソッドをファサード（Facade）で実装してみる

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で共通メソッドをファサード（Facade）で実装してみる」のつづきを読む

Laravel 6.xの認証機能を利用する

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 6.xの認証機能を利用する」のつづきを読む

Monthly Archives