<IE11対応>実務で使うGridレイアウト【環境構築編(gulp)】

By | 2019年5月15日


皆さん、Gridレイアウト使ってますか?
こう質問すると割と「使ってるよー」と答える方も多いかもしれません。
では「受託制作の実務現場でGridレイアウト使ってますか?」と質問したらどうでしょう?
おそらく「バリバリ使ってるよー」という人の割合はグッと減るのではないかと思います。
私も、勉強はしていますがまだ実務での実戦投入は見送っています。

理由はいわずもがな「IE11」の呪いが解けていないからです。
事業会社のように自分のwebサービスを展開している現場であれば自己判断でIE11を切るのも自由ですが、これが受託制作の現場になると、話は別です。
IE11を切るにはクライアントの説得が必要になります。
うまく説得できれば良いですが、

  1. MicrosoftのIE11サポートが2025年まで続く
  2. 日本におけるIE11のシェアがまだ10%近くある
  3. 中国、インドなどの途上国でもまだ古いWindowsが多く使われている
  4. ChroniumベースのEdgeにIE modeが搭載される(※これは無視しても良いと思いますが)

といった状況から、なかなかOKが出ないことも多いかと思います。
少なくともここ1年くらいですぐに状況が劇的に変わるとも思えません。

では受託の現場ではGridレイアウトの導入は諦めるしか無いのでしょうか?
いいえ、我々には「Autoprefixer」という救世主があるではないですか!

というわけで、今回はIE11に対応しながら実務でGridレイアウトを導入するために必要なノウハウを、【環境構築編(gulp)】と【機能編】に分けてまとめてみたいと思います。


【環境構築編(gulp)】目次

  1. なぜautoprefixerを使うのか
  2. autoprefixerの最新版を導入する
  3. gulp-postcssとautoprefixerを使う
  4. うまく動かすための環境構築
  5. gulpfile.jsのautoprefixerの設定を grid: true にする
  6. 自動配置機能を使いたい場合

なぜautoprefixerを使うのか

まずCan I useでCSS Gridの対応状況を確認してみましょう。

IE10-11は-ms-プレフィクス付きの部分対応であることが分かります。
やっかいなのはこれが単純に-ms-をつければいいだけのものではなく、
古い仕様に基づく実装である点です。

詳細は省きますが、flexboxの時と同様、この古い仕様は他のモダンブラウザで採用されている最新の仕様と比較して「何もかもが違う」レベルだと思ったほうが良いです。
プロパティ名も、値も、行列の指定方法も違います。最新仕様で書かれたGridをIEに手動で対応させるのは不可能ではありませんが特に実務においては現実的ではありません。

autoprefixerの最新版を導入する

そこで我らがAutoprefixerの登場となるわけですが、GridレイアウトのIE11対応の恩恵を最大限に受けるためには、最新版のAutoprefixerを導入する必要があります。

Autoprefixerの最新版は現時点(2019年5月)でv9.5.1です。AutoprefixerでのIE11 Grid機能対応自体、ここ数年で様々な機能実装が追加されて段階的に進化してきているものなので、昔導入した古いAutoprefixerをそのまま使っている場合はGrid対応の機能自体が利用できない場合もあります。
特に実務での使い勝手に大きく影響する
・gap(旧grid-gap)の自動変換
・アイテムの自動配置への対応
などの最新機能を全て利用したい場合は少なくともv9.4.0以上のAutoprefixerを使った方がいいので、今回は最新版のAutoprefixerを利用する前提で話を進めたいと思います。

gulp-postcssとautoprefixerを使う

ここでひとつ注意!!
gulpでautoprefixerを利用している場合、使っているプラグインが「gulp-autoprefixer」になっている場合があります。私もそうでした。2〜3年前くらいにNode.jsやgulp、sassと言った環境を見よう見まねで構築した場合、このプラグインを使っている人も多いと思うのですが、GridレイアウトのIE対応をしたい場合はこのプラグインではダメです!
gulp-autoprefixerはしばらくメンテがされておらず、v6.1.0で止まっているからです。
v6.1.0でもgapの自動変換は使うことはできますが、「アイテムの自動配置へ対応」には非対応ですし、その他細々とした新しい機能追加もされていないので、お勧めしません。
これからAutoprefixerでGridのIE11対応しようという方は、postcss/autoprefixerを使いましょう。

うまく動かすための環境構築

今回はすでにgulpを利用した環境構築が出来ている前提でお話しますが、黒い画面の扱いが苦手な人は、最新版のAutoprefixerにしようとした時に関連する各種プログラムのバージョン依存関係等でエラーが出まくって困惑する場合があると思います。(※私がそうです)
なので、私の環境でうまく動いているツールの組み合わせを提示しておきます。

– Node.js: v6.11.2
– gulp: v3.9.1
– gulp-sass: 4.0.2
– gulp-postcss: 8.0.0
– autoprefixer: 9.5.1

また、今回テスト用に用意したpackage.jsonがこちらです。sassのコンパイルとかブラウザの自動リロードといった、autoprefixerの利用だけであれば不要なプラグインも入れていますがその辺は自分の目的に合わせて適宜編集してください。

{
  "name": "grid-ie11",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-postcss": "^8.0.0",
    "autoprefixer": "^9.5.1",
     "postcss-gap-properties": "^1.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-plumber": "^1.1.0",
    "browser-sync": "^2.11.1"
  }
}

gulpfile.jsのautoprefixerの設定を grid: true にする

めでたくgulpでautoprefixerを動作させるところまで到達したら、Autoprefixerの設定でgrid機能を有効にしましょう。gulpの場合はgulpfile.jsの中で 「grid: ture」と設定します。
以下は一般的なautoprefixerを使ったCSS出力のためのgulpfile.jsの記述です。

const gulp = require("gulp");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
 
gulp.task("default", function () {
  return gulp.src("src/style.css")
    .pipe(postcss([
      autoprefixer({
        grid: true //←★ここが重要
      })
    ]))
    .pipe(gulp.dest("dist"));
});

なお、以下は実際に私がテスト用に用意したgulpfile.jsです。

– /src/以下に開発用ファイル、/dist/に納品用ファイルを格納する
– html以外のcss,js,img,sassなど関連ファイルは全て/assets/内に格納する
– /src/assets/sass/以下の.scssファイルに変更がかかったら、autoprefixerを適用した上でsassをコンパイルして/src/と/dist/に出力し、ブラウザを自動リロードする
– エラーでタスクを止めない、gapプロパティを古いgrid-gapプロパティに変換、といった機能も追加

という前提で作ってあるものです。
(今回はテスト用なので納品用ファイル出力についてはcss以外省略してます。)

const gulp = require("gulp");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const postcssGapProperties = require("postcss-gap-properties");
const sass = require("gulp-sass");
const plumber = require("gulp-plumber");
const browser = require("browser-sync");

//ディレクトリ設定
const src = "./src/";
const dist = "./dist/";

//サーバー
gulp.task("server", function() {
    browser({
        server: {
            baseDir: "./src/"
        }
    });
});

//gulp-sass
gulp.task("sass", function() {
     gulp.src(src + "/assets/sass/**/*scss")
         .pipe(plumber({
            errorHandler: function(err) {
            console.log(err.messageFormatted);
            this.emit('end');
           }
          }))
         .pipe(sass({outputStyle: 'expanded'}))
         .pipe(postcss([
            postcssGapProperties(),
            autoprefixer({
            grid: true,
            cascade: false,
            browsers: ["last 4 versions", "ie 9", "ie 10", "android >= 4", "ios_saf >= 8"]
          })
       ]))
         .pipe(gulp.dest(src + "/assets/css/"))
         .pipe(gulp.dest(dist + "/assets/css/"))
         .pipe(browser.reload({stream:true}))
});

//タスクの監視
gulp.task("default", ["server"], function() {
    gulp.watch(src + "/assets/sass/**/*.scss",["sass"]);
});

自動配置機能を使いたい場合

gulpfile.jsでgrid: trueに設定した上で、IE11でもGridアイテムの自動配置機能を有効にしたい場合は、css(scss)の方に

/* autoprefixer grid: autoplace */

というコメントを追記するようにしてください。
参考:https://github.com/postcss/autoprefixer/releases/tag/9.4.0

これはAutoprefixer v9.4.0から追加された機能で、この記述を加えることにより
本来使うことのできないGridアイテムの自動配置をIE11でも擬似的に再現するようにコードを書き換えてくれます。(こちらの機能の詳細は後日【機能編】の方で解説します)

まとめ

いかがでしたでしょうか?
この記事はあくまで「すでにgulpを使ったautoprefixerの利用を行っている」人が、バージョンを上げてgrid機能を使えるようにするために必要な情報だけをまとめたものになりますので、そもそもgulpを始めとするタスクランナーを使った開発環境自体に馴染みがないという方は、頑張ってNode.jsのインストールから始めてみてください。
ちなみにちょっと古いですが、以前私がNode.jsのインストールに苦戦した時の記録がありますので参考までにどうぞ(苦笑)
・「Node.jsインストール攻略法【非エンジニア向け】

おまけ

「黒い画面使いたくない!でもGridのIE対応したい!!」というワガママさんには、
Autoprefixer online」というWeb上のツールがありますので、
普通にCSSを書いてこのツールに放り込んでみるといいと思います。
これなら環境構築しなくても最新版のAutoprefixerが使えます。(いちいちコピペしないといけないので面倒くさいですけどねー)

おまけ2

BracketsやSublime Text向けに、エディタプラグイン版のAutoprefixerも存在していますが、こちらはバージョンが古くてGrid機能自体が使えませんのでおすすめしません。

* * * * * * * * * * * * * * * * * * * * *

【PR】書籍が発売されます♪

2013年の初版、2015年の改訂版に続き、2回目の改訂第2版となる『HTML5&CSS3標準デザイン講座』が2019年5月24日に発売されます♪ヨロシクー!

HTML5&CSS3標準デザイン講座【第2版】
  • タイトル:「HTML5&CSS3標準デザイン講座 【第2版】」
  • ISBN:978-4798158136
  • 出版社:翔泳社
  • 版型・ページ数:B5変・400P・フルカラー
  • 定価:本体2,580円+税
  • 刊行:2019年5月24日(金)

★Amazonでポチる★


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA