sitateru tech blog

こんにちは！
シタテル株式会社UI/UXデザイナーの堤です。

複数の静的ページを作る際に便利なGulp＋EJSについて紹介します。

今回やりたかったこと

• 静的なページを量産
• 共通パーツはテンプレート化したい

導入方法はNode.jsがインストールされている環境でプラグインをインストールします。

$ npm install gulp gulp-merge-json gulp-ejs gulp-rename fs

ディレクトリ構成

gulpfile.js

// gulpプラグインの読み込み
var gulp = require('gulp');
var merge = require('gulp-merge-json');
var ejs = require('gulp-ejs');
var rename = require('gulp-rename');
var fs = require('fs');

//jsonファイルの結合　※複数のjsonファイルがなければ不要
gulp.task('json', function () {
  gulp.src('./app/data/origin/**/*.json')
    .pipe(merge({
        fileName: 'pages.json'
    }))
    .pipe(gulp.dest('./app/data'));
});

//設定ファイルの読み込み
const jsonData = './app/data/pages.json';
const json = JSON.parse(fs.readFileSync(jsonData));

// ejsをhtmlへ変換
gulp.task("ejs", function() {
    for (var key in json.pages) {
        var data = json.pages[key];
        data.path = key;
        var layout = data.layout;
        gulp.src("./app/ejs/" + layout + ".ejs")
            .pipe(ejs(data))
            .pipe(rename(key + '.html'))
            .pipe(gulp.dest('./public'));
    }
});

pages.json

{
    "pages": {
        "index": { //出力するhtmlファイル名
            "layout": "index", //使用するejsファイル名
            "title": "タイトル1"
        },
        "hoge/index": {
            "layout": "index",
            "title": "タイトル2"
        }
    }
}

index.json

<% include common/_head %> //includeするejs ファイルを指定
<%= title %> //jsonファイル内でしている要素が入る

実行方法

$ gulp json //jsonファイルの結合が必要な場合
$ gulp ejs

まとめ

ejsではjavascriptが使用できるためループ処理なども可能です。

あまり利用する場面は多くないですが、エンジニアさんに 依頼するほどでもないけど、ぱぱっと複数ページを作る必要があるときに便利です！

こんにちは！
シタテル株式会社UI/UXデザイナーの堤です。

webサイトやメルマガで使う画像やバナーなどを作成する際に、サクッと手元で圧縮できる環境を用意しておくと便利だったのでご紹介します。
今回はgulpとパンダでお馴染みのTinyPNGやWebPに関するプラグインを使用して圧縮・生成します。

今回やりたかったこと

• とにかく手軽に圧縮したい
• 圧縮とともにWebPも一緒に生成したい

導入方法はNode.jsがインストールされている環境でプラグインをインストールします。

$ npm install gulp gulp-tinypng-compress gulp-webp

ディレクトリ構成

gulpfile.js
└images
　├ src //圧縮元の画像ファイル置き場
　└ dist //圧縮後の画像ファイル置き場

gulpfile.js

const gulp     = require('gulp');
const tinyping = require('gulp-tinypng-compress');
const webp     = require('gulp-webp');

const paths = {
    srcDir : 'images/src',
    dstDir : 'images/dist'
}

gulp.task('webp', function () {
    gulp.src(paths.srcDir + "/**/*.{svg,gif,png,jpg,jpeg}")
        .pipe(webp())
        .pipe(gulp.dest(paths.dstDir));
});

gulp.task('tinypng', function () {
    gulp.src(paths.srcDir + "/**/*.{png,jpg,jpeg}")
        .pipe(tinyping({
            key: 'xxxxxxxxxx' // TinyPNGのAPI Key
        }))
        .pipe(gulp.dest(paths.dstDir));
});

gulp.task('default', ['tinypng', 'webp']);

• TinyPNGのAPI Keyは、Tiny PNGもサイトから取得します
• 無料で月500枚まで圧縮可能です

実行方法

$ gulp

// tinypngのみなら
$ gulp tinypng

// webpのみなら
$ gulp webp

WebPについて

Googleが開発している画像フォーマットです。
少し前まではWebKitを用いたウェブブラウザだけだったのですが、最新のEdgeや私が愛用するFirefoxはver65から対応するようで今後普及していきそうな気がしています。
https://caniuse.com/#search=webp

導入方法

まだ対応していないブラウザもあるため、cssで指定している背景画像の分岐はmodernizr.jsを使用して判別します。
modernizr.jsを参照すると対応ブラウザはclass="webp"、非対応ブラウザはclass="no-webp"というclassを自動的に付与してくれます。
あとはhtmlとcssを下記のように記載しておけばそれぞれ対応している画像を読み込んでくれます。

.webp .image {
    background-image: url("/images/background-hoge.webp");
}

.no-webp .image {
    background-image: url("/images/background-hoge.jpg");
}

<picture>
    <source srcset="/images/hoge.webp" type="image/webp">
    <img src="/images/hoge.jpg" alt="">
</picture>

まとめ

圧縮方法や使うプラグインはさまざまあり、外部サービスでも簡単に圧縮できるサービスはあるので、自分に合うものをいくつか試すのが良いかなと思っています。

最近LPで使用している画像を圧縮したのですがこれぐらい圧縮できました！

• 元の画像 3.3MB　※そもそもがデカすぎやしないかいというのはありますが、、
• TinyPNG 909KB
• WebP 446KB

通信環境はどんどん良くなっているものの、初回の描画までに時間がかかると離脱に繋がるため、これからも面倒くさがらずに（もっと楽な圧縮方法を追求しつつ）圧縮していきたいと思います！