[Middleman 3][Gulp][blog]初めてのMiddleman：Gulpを使ってサムネイル画像を生成する

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

はじめに

前回はMiddleman-Blogの記事毎に画像を管理する方法について紹介しました。今回はこの画像を自由ににリサイズできるようにしたいと思います。Middlemanの拡張機能を色々と探し試しましたが、残念ながら実用に耐えるものはありませんでした。

Middleman Simple Thumbnailer（cropできない、適切な画像が生成されない、ヘルパーをMarkdownで使えない）
Middleman Thumbnailer（cropできない、ヘルパーをMarkdownで使えない）
Middleman::Automatic::Clowncar（シンプルな使い方ができない）

使い方が悪いということもあるかもしれません。他にgemを使ってリサイズする方法も考えましたがめんどくさそうなのでシンプルさはなくなりますがGulpを使うことにしました。

画像をリサイズし易いディレクトリ構造に変える

前回の記事で作ったディレクトリ構造がこれです。

.
└── 2015
    └── 04
        └── 06
            └── middleman-management-article-images
                ├── index.html.md
                └── photo.jpg

これを下記のように変更します。

.
└── 2015
    └── 04
        └── 06
            └── middleman-management-article-images
                ├── index.html.md
                └── images
                   └── origin
                      └── photo.jpg

こうすることでoriginフォルダ内の画像を対象にディレクトリを分けて画像をリサイズできるようにします。

Gulp環境を作る

Gulpについては過去に記事を書いているのでこちらこれからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみるを参照してみてください。私の環境ではnodebrewを使っています。nodebrewについてはnodebrewを使ったnode.jsのバージョン管理をどうぞ。

npmの初期設定

まずは$ npm initで初期設定を行います。
次にGulpをグローバルとローカルにインストールします。

$ npm install --global gulp
$ npm install --save-dev gulp

必要なモジュールをインストールする

今回は3つのモジュールをインストールします。まず、記事毎の画像が入っているパスをglob-allで配列化し、gulp-image-resizeで画像をリサイズ、リサイズしたファイルをログに流すためにgulp-filelogを使います。加えてgulp-changedを使ってすでにリサイズ済みの画像があればリサイズ対象から除外するようにします。

$ npm install --save-dev glob-all gulp-image-resize gulp-filelog gulp-changed

タスクを作る

gulpfile.jsを作って画像をリサイズするタスクを作ります。gulp-image-resizeに関する解説はこれからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作るを参照してください。

var gulp        = require('gulp');
var glob        = require('glob-all');
var filelog     = require('gulp-filelog');
var changed     = require('gulp-changed');
var imageResize = require('gulp-image-resize');


gulp.task( 'image-resize:eyecatch', function(){
  var srcGlobs   = glob.sync('source/articles/**/images/');
  var srcDir     = 'origin';
  var dstDir     = 'eyecatch';
  var targetFile = '/*.+(jpg|jpeg|png|gif)';

  var resizeOptions = {
    width       : 400,
    height      : 400,
    gravity     : 'Center',
    crop        : true,
    upscale     : false,
    imageMagick : true
  };

  var imageminOptions = {
    optimizationLevel: 7
  };

  for(var item in srcGlobs) {
    var srcGlob = srcGlobs[item] + srcDir + targetFile;
    var dstGlob = srcGlobs[item] + dstDir;

    gulp.src( srcGlob )
      .pipe(changed( dstGlob ))
      .pipe(imageResize( resizeOptions ))
      .pipe(gulp.dest( dstGlob ))
      .pipe(filelog());
  }
});

gulp.task( 'image-resize', ['image-resize:eyecatch'] );

このタスクで400px * 400px の中央を基準にしたcrop画像を作ることができます。

タスクを実行する

タスクを実行するとリサイズされた画像のパスが表示されます。

gulp image-resize
[02:14:55] Using gulpfile ~/Projects/whiskers.nukos.kitchen/gulpfile.js
[02:14:55] Starting 'image-resize:eyecatch'...
[02:14:55] Finished 'image-resize:eyecatch' after 10 ms
[02:14:55] Starting 'image-resize'...
[02:14:55] Finished 'image-resize' after 5.44 μs
[02:14:55] [1] [/Users/nukos/Projects/new.whiskers.nukos.kitchen/source/articles/2015/03/03/example-01/images/eyecatch/photo.jpg]
[02:14:55] Found [1] files.

リサイズされた画像は下記のように保存されます。

.
└── 2015
    └── 03
        └── 03
            └── example-01
                ├── images
                │   ├── eyecatch
                │   │   └── photo.jpg
                │   └── origin
                │       └── photo.jpg
                └── index.html.md

これで画像の管理も大分楽になりますね。
OGP用画像やサムネイルの作成も簡単にできるようになります。
今回はここまで。

シリーズ

Wercker step-s3sync でファイル名に日本語を含んでいる場合に Sync できない問題の解決方法（小ネタ）

2016-10-26
Wercker, Amazon S3, Middleman 3

ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap

2015-07-06
AngularJS 1, Bootstrap 3, Middleman 3

初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする

2015-05-27
Middleman 3

ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策

2015-05-19
AngularJS 1, Middleman 3

初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法

2015-04-27
Middleman 3

初めての Middleman シリーズ初めてのMiddleman：Gulpを使ってサムネイル画像を生成する