Atsumaru Engineer's Blog

集客プラットフォーム事業を手がける株式会社あつまるのエンジニアブログです

入社7ヵ月中国から上京したエンジニア、Material Design初挑戦!

自己紹介

初めまして、現在、株式会社あつまるでPythonエンジニアをしている、
「朱」と申します。
私自身、エンジニアブログ初投稿になりますので、簡単に自己紹介をします。
私は中国の大連理工大学を卒業して、日本のあつまるで新卒入社しました。
現在、入社7ヶ月目になります。
私は日本の文化と旅行をすることが大好きです。
特に観光地や日本の歴史的な場所を巡ることが好きなので、日本の色々なところに行きたいと思っています。
あつまるに入社した経緯は、中国の大連で株式会社あつまるの説明会に行き、
あつまるの企業理念に共感して、あつまるへの入社を決意しました。

f:id:kanekok13:20190424162958j:plain

Material Designを使う背景

以前、弊社内で使っているシステムにおいて、私がAdminLTEを使って構築しました。
システムの画面がこちらです。
スクリーンショット 2019-04-17 12.24.02.png

機能は実行できますが、ちょっとデザインが単調な気がしませんか…
ただ使えるだけではなく、もっと使いたくなるデザインにしたいと思いました。
以前、社外の勉強会に参加した時、Material Designという技術を知り、
このシステムをMaterial Designで改善できるのでは、と思いました。
ということで、システムの改善を兼ねて、
「AdminLTE」と「Material Design」を比較して、まとめたいと思います。

Material Designとは

Material Designは、デバイスごとのディスプレイサイズに合わせて、
デザインを最適化しやすいように装飾を減らし、シンプルなデザインを基本としています。

Material Designの実装

開発環境

  • Node.js v11.14.0
  • npm 6.7.0
  • MacOS High Sierra

STEP0 「HELLO WORLD」の出力

まず、package.jsonを作ります。

{
  "scripts": {
    "start": "webpack-dev-server"
  }
}

そして、必要なNodeパッケージをインストールします。

npm install --save-dev webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader

こうすれば、package-lock.jsonファイルやnode-modulesのフォルダが入ります。

スクリーンショット 2019-04-24 12.10.16.png

HELLO WORLD を実行するため、index.htmlやapp.scssを簡単に作ります。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="bundle.css">
  </head>
  <body>Hello World</body>
</html>
body {
  color: blue;
}

リンクのところがbundle.cssなので、webpack.config.jsを作って連携します。

module.exports = [{
  entry: './app.scss',
  output: {
    // This is necessary for webpack to compile
    // But we never use style-bundle.js
    filename: 'style-bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          { loader: 'extract-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' },
        ]
      }
    ]
  },
}];

では、実行していきます!

npm start

http://localhost:8080 を実行して、「青文字のHello World」が出力されました! スクリーンショット 2019-04-24 12.14.10.png

STEP1 サイドバーの実装

次に、実際にサイトを作ってみます。

公式サイトが基本的なテンプレートを用意してくれました。

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-102/starter

そして、同じように、まずnpmをインストールします。

npm install

HPの必要なサイドバーを作るため、Nodeパッケージをインストールします。

npm install @material/drawer@1.0.1 @material/list@1.0.1

パッケージをインストールしたら、HTMLのクラスを使えます。(念のため、リンクを全部#で表示します)

  <aside class="mdc-drawer shrine-drawer">

    <div class="logo">
      <img src="assets/icon.png" alt="" class="icon">
    </div>
    <h1 class="shrine-title">ATSUMARU</h1>

    <div class="mdc-drawer__content">
      <nav class="mdc-list">
        <a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
          <span class="mdc-list-item__text">項目1</span>
        </a>
        <div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>
        <!-- 項目2〜8を省略 -->
      </nav>
    </div>
  </aside>

home.scssファイルにスタイルを追加して更新します。

@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";

.shrine-logo-drawer {
  display: block;
  width: 48px;
  padding: 40px 0 0;
  margin: 0 auto;
  fill: currentColor;
}

.shrine-title {
  text-align: center;
  margin: 5px auto;
}

home.jsファイルの中に以下のコードを追加します。

import {MDCList} from '@material/list';

new MDCList(document.querySelector('.mdc-list'));

npm startを実行すれば、左側にサイドバーを作りました! スクリーンショット 2019-04-24 12.17.58.png

STEP2 画像リストの実装

画像リストを構築するため、新たにパッケージをインストールします。

npm install @material/image-list@1.0.0

次に、HTMLに画像リストを作ります。(一つの例)

<ul class="mdc-image-list product-list">
  <li class="mdc-image-list__item">
    <img class="mdc-image-list__image" src="assets/system.jpg">
    <div class="mdc-image-list__supporting">
      <span class="mdc-image-list__label">システム1</span>
    </div>
  </li>
</ul>

<li>のタグをコピペして、画像を変えて、複数の画像を追加できます。

<ul>の中の新しいクラス”product-list”について、home.scssファイルを更新します。

@import "@material/image-list/mdc-image-list";
.product-list {
  @include mdc-image-list-standard-columns(4);

  overflow: auto;
}

@include mdc-image-list-standard-columns(4)の中の(4)はMaterial Design独特なクラスです。
数字の部分に列数を記述すると、
画像の幅が均等に設定されて、
空間や余白が全部自動的に並べられます。
いい機能です!

f:id:shu_muso:20190424160645p:plain 16枚の画像を追加して、このように自動的並べられました!

まとめ

AdminLTE と Material Designどちらも使いやすい技術ですが、 それぞれに特徴があります。

AdminLTEの特徴として、
グルーピングやメッセージボックスの機能が多くあり、
メッセージや文字の多いサイトを作るときには最適です。

一方、Material Designは、
画像や文字を1ユニットに組み合わせて構築するため、
ユーザーにとって、直観的理解がしやすい気がします。

私個人的に、直感的に伝わるようなサイトも好きなので、
引き続き、この技術を深く勉強して、今後、活用していきたいと思います。