指定したフォルダ内の画像ファイルの画像サイズを一覧表示するプログラム

作者:

指定したフォルダ内の画像ファイルの画像サイズを一覧表示するプログラムです。

Requirement

  • image-size

インストール

image-sizeをインストールする

npm install image-size

使い方

カレントディレクトリの画像ファイルのサイズを表示する

node imagesize.js

指定したディレクトリ内の画像ファイルのサイズを表示する

node imagesize.js image-dir

例：imagesフォルダーの画像ファイルのサイズを表示する

node imagesize.js images

出力形式

カンマ区切りで、ファイル名・画像の幅・画像の高さ表示します。

ファイル名,画像の幅,画像の高さ
ファイル名,画像の幅,画像の高さ
ファイル名,画像の幅,画像の高さ
…

ソースコード

const fs = require('fs');
const path = require('path');
const sizeOf = require('image-size');

const dir = (process.argv.length < 3) ? './' : process.argv[2];

fs.readdir(dir, (err, files) => {
    if (err) throw err;
    files.forEach(file => {
        try {
            const abspath = path.resolve(path.join(dir, file));
            const dimensions = sizeOf(abspath);
            console.log(`${file},${dimensions.width},${dimensions.height}`);
        } catch (err) {
            console.log(err);
        }
    });
});

Laravel MixでAutoprefixerを無効にする

作者:

Laravel Mixには最初からAutoprefixerが入っていて、
必要なプレフィックスを自動的に適用します。

プレフィックスを調整したいときは、optionsで設定できます。

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        autoprefixer: {
            options: {
                browsers: {
                    'last 6 versions',
                }
            }
        }
    });

完全に無効にする場合は次のようにします。

mix.sass('resources/sass/app.scss', 'public/css')
    .options({ autoprefixer: false });

Laravelで”Error: Cannot find module ‘webpack/lib/RuleSet'”エラー

作者:

LaravelのプロジェクトでLaravel Elixirが使われていたので、Laravel Mixを使うように修正した。

‘npm run dev’を実行すると次のエラーメッセージが表示された。

Error: Cannot find module 'webpack/lib/RuleSet'

WebPackが古いことが原因だったらしく、更新したら解決した。

npm install --save-dev webpack

2つのセレクトボックスが連動するVue.jsのサンプル

作者:

2つのセレクトボックスが連動するVue.jsのサンプル。

左のセレクトボックスから地方を選択すると、右の都道府県の選択肢が更新されます。

選択したセレクトボックスの値は下に表示されます。