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

動画をレスポンシブ対応で上下左右中央に余白なしで設置する方法です。

動画と言っても、mp4ファイルなどをvideoタグで設置したり、Youtubeをiframeで埋め込んだり、さまざまです。
設置した動画の左右や上下が欠けたり、レスポンシブに対応してなかったり、上付きで不自然に下部が欠けてたり、印象が悪いですよね。
そこで画面全体、メインビジュアル、モーダルなどに、良い感じで設置する方法を考えます。

videoタグを余白なしで上下左右中央に設置する方法

例えば、videoタグを画面全体やメインビジュアルの背景として設置します。
レスポンシブ対応で、余白なしで、上下左右中央配置が理想だと思います。
まず、HTMLです。

<div class="bg">
	<div class="video">
		<video src="video.mp4" autoplay muted loop></video>
	</div>
</div>

メインビジュアルに動画を設置すると仮定し、横100%、高さ300pxのエリアに描画する場合、以下のようにCSSを指定します。

JavaScriptやjQueryでクリックイベントを設置した際に、そのイベントを子要素、孫要素へ伝播させないための処理を紹介します。

よくあるケースとして、ライトボックスのようなしくみを構築したときを考えます。
ブラウザの画面全体をグレーアウトして、その上のレイヤに画像、動画やフォームなどのコンテンツを配置します。

<div class="lightbox">
	<div class="grayout">
		<div class="contents">
画像、動画やフォームなどのコンテンツ
		</div>
	</div>
</div>

コンテンツエリアを除く、グレーアウトエリアをクリックすると、ライトボックスをクローズするような処理を考えます。

stopPropagationを使う方法

例えばjQueryでグレーアウトしたエリアをクリックすると、ライトボックスをクローズするような処理を追加します。

$('.grayout').click(function(){
	$('.lightbox').fadeOut();
});

しかし、そのままでは子要素である「class=”contents”」のコンテンツエリアまでイベントが伝播してしまい、コンテンツエリアをクリックしてもクローズしてしまいます。
そこで、コンテンツエリアをクリックしてもイベントが発生しないように以下の処理を追加します。

$('.contents').click(function(event){
	event.stopPropagation();
});

これで今回の伝播の問題は達成できるのですが、コンテンツエリアに他のイベントを設定している場合、その処理に悪影響を与える場合があります。

コンテンツエリア以外でイベント発火

stopPropagationの問題を避けるため、以下の方法があります。

$(document).on('click', function(event) {
	if (!$(event.target).closest('.contents').length) {
		$('.lightbox').fadeOut();
	}
});

画面全エリアにクリックイベントをセットして、その中でクリックエリアを判定して、処理を実行する方法です。

後者のほうがシンプルで良さそうですね。
忘れてしまいがちなので、メモまで。

「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

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完了です。

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

とある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」にモジュールがインストールされるはずです。
インストールは以上です。

Monthly Archives