Material Designを簡単にWebサイトに適用できるMaterializeを使ってみた

2015年9月17日 CSS, javascript

Follow @mojyamojya

Webサイトの制作で、Material Designを採用する機会がありました。
スマホ向けサイトのお問い合わせフォームでMaterializeというCSS、JavaScriptのフレームワークを使用しましたので、導入から実装までの手順を簡単にまとめておきたいと思います。
Documentation – Materialize

bowerコマンドを利用してインストールしました。
※ 参考サイトはこちら↓
Bower入門(基礎編) – from scratch

Materializeをインストールするためのbowerコマンドをインストールするのに幾つかツールのインストールが必要になりました。

大まかな手順は以下のようになります。

Homebrewのインストール
node.jsのインストール
bowerのインストール
bowerの初期化
bowerコマンドを実行してMaterializeをダウンロード
フォームの実装

Materializeをインストールするのに、bowerコマンドを使う。
↓
bowerをインストールするのにnpmコマンドを使う。
↓
npmコマンドを使うのにnode.jsをインストールする。
↓
node.jsをインストールするのにHomebrewを使う。

という感じで回りくどいやり方をしてますが、bowerを使ったライブラリーの依存関係を管理するやり方が増えてきているようなので試してみることにしました。

それではまずHomebrewをインストールしたいと思います。

ちなみに実施した端末の環境は以下の通りです。

MacBook Pro
OS X Yosemite 10.10.5

Homebrewのインストール

Homebrewをインストールするのにrubyが必要です。

MacBook-Pro:~ mojyamojya$ ruby -v
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin14]

MacBookにはrubyがプリインストールされていますが、本来は最新版にしたほうが良いようです。
今回はとりあえず進みます。

以下のコマンドを実行します。

MacBook-Pro:~ mojyamojya$ ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
==> This script will install:
/usr/local/bin/brew
/usr/local/Library/…
/usr/local/share/man/man1/brew.1

Press RETURN to continue or any other key to abort
==> /usr/bin/sudo /bin/mkdir /usr/local
Password:
==> /usr/bin/sudo /bin/chmod g+rwx /usr/local
==> /usr/bin/sudo /usr/bin/chgrp admin /usr/local
==> /usr/bin/sudo /bin/mkdir /Library/Caches/Homebrew
==> /usr/bin/sudo /bin/chmod g+rwx /Library/Caches/Homebrew
==> Downloading and installing Homebrew…
remote: Counting objects: 3661, done.
remote: Compressing objects: 100% (3493/3493), done.
remote: Total 3661 (delta 36), reused 652 (delta 28), pack-reused 0
Receiving objects: 100% (3661/3661), 2.97 MiB | 1.08 MiB/s, done.
Resolving deltas: 100% (36/36), done.
From https://github.com/Homebrew/homebrew
* [new branch] master -> origin/master
HEAD is now at b850630 kawa: use secure mirror
==> Installation successful!
==> Next steps
Run `brew help` to get started
MacBook-Pro:~ mojyamojya$

Homebrewのインストール完了です！

必要に応じてHomebrewをアップデートします。

MacBook-Pro:~ mojyamojya$ brew update
Already up-to-date.

node.jsのインストール

続いてnode.jsをインストールします。

MacBook-Pro:~ mojyamojya$ brew install node.js
==> Downloading https://homebrew.bintray.com/bottles/node-0.12.7.yosemite.bottle
######################################################################## 100.0%
==> Pouring node-0.12.7.yosemite.bottle.tar.gz
==> Caveats

Bash completion has been installed to:
/usr/local/etc/bash_completion.d
==> Summary
{ビールの絵文字} /usr/local/Cellar/node/0.12.7: 2726 files, 31M

コマンド実行完了時に{ビールの絵文字}が出力されます。
たまたま出力されてるのかと思ったら、絵文字を出力するようにしてるんですねー。
homebrewでinstall後にビールアイコンが表示される件 – rochefort’s blog

ちょっとした遊びココロ、素敵です。

インストールが無事完了したか確認してみます。

MacBook-Pro:~ mojyamojya$ node -v
v0.12.7
MacBook-Pro:~ mojyamojya$ npm -v
2.12.1

今回お目当のnpmも無事インストールされております！

bowerのインストール

bowerをインストールします。

MacBook-Pro:~ mojyamojya$ npm install bower -g
/usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower
bower@1.4.1 /usr/local/lib/node_modules/bower
├── is-root@1.0.0
├── junk@1.0.2
├── stringify-object@1.0.1
├── user-home@1.1.1
├── chmodr@0.1.0
├── abbrev@1.0.7
├── archy@1.0.0
├── opn@1.0.2
├── bower-logger@0.2.2
├── bower-endpoint-parser@0.2.2
├── graceful-fs@3.0.8
├── lockfile@1.0.1
├── lru-cache@2.6.5
├── nopt@3.0.3
├── retry@0.6.1
├── tmp@0.0.24
├── q@1.4.1
├── semver@2.3.2
├── p-throttler@0.1.1 (q@0.9.7)
├── mout@0.11.0
├── fstream@1.0.7 (inherits@2.0.1)
├── chalk@1.1.0 (escape-string-regexp@1.0.3, supports-color@2.0.0, ansi-styles@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
├── promptly@0.2.0 (read@1.0.6)
├── request-progress@0.3.1 (throttleit@0.0.2)
├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)
├── mkdirp@0.5.0 (minimist@0.0.8)
├── bower-config@0.6.1 (osenv@0.0.3, graceful-fs@2.0.3, mout@0.9.1, optimist@0.6.1)
├── glob@4.5.3 (inherits@2.0.1, inflight@1.0.4, once@1.3.2, minimatch@2.0.10)
├── fstream-ignore@1.0.2 (inherits@2.0.1, minimatch@2.0.10)
├── tar-fs@1.8.1 (pump@1.0.0, tar-stream@1.2.1)
├── rimraf@2.4.2 (glob@5.0.14)
├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6)
├── which@1.1.1 (is-absolute@0.1.7)
├── decompress-zip@0.1.0 (mkpath@0.1.0, readable-stream@1.1.13, touch@0.0.3, binary@0.3.0)
├── insight@0.5.3 (object-assign@2.1.1, async@0.9.2, lodash.debounce@3.1.1, tough-cookie@0.12.1, os-name@1.0.3)
├── github@0.2.4 (mime@1.3.4)
├── bower-registry-client@0.3.0 (graceful-fs@2.0.3, request-replay@0.2.0, rimraf@2.2.8, lru-cache@2.3.1, async@0.2.10, mkdirp@0.3.5, request@2.51.0)
├── request@2.53.0 (caseless@0.9.0, aws-sign2@0.5.0, forever-agent@0.5.2, stringstream@0.0.4, oauth-sign@0.6.0, tunnel-agent@0.4.1, isstream@0.1.2, json-stringify-safe@5.0.1, node-uuid@1.4.3, qs@2.3.3, form-data@0.2.0, combined-stream@0.0.7, bl@0.9.4, mime-types@2.0.14, http-signature@0.10.1, tough-cookie@2.0.0, hawk@2.3.1)
├── shell-quote@1.4.3 (array-reduce@0.0.0, array-filter@0.0.1, array-map@0.0.0, jsonify@0.0.0)
├── cardinal@0.4.4 (ansicolors@0.2.1, redeyed@0.4.4)
├── configstore@0.3.2 (object-assign@2.1.1, xdg-basedir@1.0.1, uuid@2.0.1, osenv@0.1.3, js-yaml@3.3.1)
├── inquirer@0.8.0 (figures@1.3.5, ansi-regex@1.1.1, mute-stream@0.0.4, through@2.3.8, readline2@0.1.1, chalk@0.5.1, lodash@2.4.2, rx@2.5.3, cli-color@0.3.3)
└── update-notifier@0.3.2 (is-npm@1.0.0, string-length@1.0.1, semver-diff@2.0.0, latest-version@1.0.1)

無事インストールされたか確認してみます。

MacBook-Pro:~ mojyamojya$ bower -v
1.4.1

無事インストールされています。

bowerの初期化

次にbowerの初期設定をします。

MacBook-Pro:materialize mojyamojya$ bower init
? name: materialize
? version: 0.0.1
? description: first materialize
? main file: index.html
? what types of modules does this package expose? (Press to select)
❯◯ amd
◯ es6
◯ globals
◯ node
◯ yui
? keywords:
? authors: mojyamojya
? license: MIT
? homepage:
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? YesN) y

{
name: ‘materialize’,
version: ‘0.0.1’,
authors: [
‘mojyamojya ‘
],
description: ‘first materialize’,
main: ‘index.html’,
license: ‘MIT’,
ignore: [
‘**/.*’,
‘node_modules’,
‘bower_components’,
‘test’,
‘tests’
]
}

? Looks good? Yes

bowerの初期化が完了しました！

Materializeのダウンロード

それではいよいよMaterializeをダウンロードします。

MacBook-Pro:materialize mojyamojya$ bower install materialize
bower not-cached git://github.com/Dogfalo/materialize.git#*
bower resolve git://github.com/Dogfalo/materialize.git#*
bower download https://github.com/Dogfalo/materialize/archive/v0.97.0.tar.gz
bower progress materialize#* received 2.6MB of 21.4MB downloaded, 12%
bower progress materialize#* received 3.1MB of 21.4MB downloaded, 15%
bower progress materialize#* received 3.8MB of 21.4MB downloaded, 18%
bower progress materialize#* received 4.4MB of 21.4MB downloaded, 21%
bower progress materialize#* received 5.0MB of 21.4MB downloaded, 24%
bower progress materialize#* received 5.6MB of 21.4MB downloaded, 26%
bower progress materialize#* received 6.3MB of 21.4MB downloaded, 29%
bower progress materialize#* received 6.9MB of 21.4MB downloaded, 32%
bower progress materialize#* received 7.7MB of 21.4MB downloaded, 36%
bower progress materialize#* received 8.6MB of 21.4MB downloaded, 40%
bower progress materialize#* received 9.7MB of 21.4MB downloaded, 45%
bower progress materialize#* received 10.8MB of 21.4MB downloaded, 50%
bower progress materialize#* received 12.3MB of 21.4MB downloaded, 58%
bower progress materialize#* received 13.7MB of 21.4MB downloaded, 64%
bower progress materialize#* received 15.1MB of 21.4MB downloaded, 71%
bower progress materialize#* received 16.5MB of 21.4MB downloaded, 77%
bower progress materialize#* received 18.0MB of 21.4MB downloaded, 84%
bower progress materialize#* received 19.2MB of 21.4MB downloaded, 90%
bower progress materialize#* received 20.4MB of 21.4MB downloaded, 95%
bower extract materialize#* archive.tar.gz
bower resolved git://github.com/Dogfalo/materialize.git#0.97.0
bower not-cached git://github.com/jquery/jquery.git#>=2.1.1
bower resolve git://github.com/jquery/jquery.git#>=2.1.1
bower download https://github.com/jquery/jquery/archive/2.1.4.tar.gz
bower extract jquery#>=2.1.1 archive.tar.gz
bower resolved git://github.com/jquery/jquery.git#2.1.4
bower install materialize#0.97.0
bower install jquery#2.1.4

materialize#0.97.0 bower_components/materialize
└── jquery#2.1.4

jquery#2.1.4 bower_components/jquery

Materializeの実装

それでは最後にCSSとjsを読み込んで（5、13、14行目）、お問い合わせフォームを実装します。

<!DOCTYPE html>
  <html>
    <head>
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="bower_components/materialize/dist/css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
      <script type="text/javascript" src="bower_components/materialize/dist/js/materialize.min.js"></script>
      <p style="color: #26a69a;">Hello Materialize World!</p> 
        <div class="row">
          <form class="col s12">
            <div class="row">
              <div class="input-field col s6">
                <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                <label for="first_name">First Name</label>
              </div>
              <div class="input-field col s6">
                <input id="last_name" type="text" class="validate">
                <label for="last_name">Last Name</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input disabled value="I am not editable" id="disabled" type="text" class="validate">
                <label for="disabled">Disabled</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input id="password" type="password" class="validate">
                <label for="password">Password</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input id="email" type="email" class="validate">
                <label for="email">Email</label>
              </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                  <textarea id="message" row="10" class="materialize-textarea" placeholder="お問い合わせ内容をご記入ください"></textarea>
                  <label for="message">お問い合わせ内容</label>
                </div>
            </div>
          </form>
        </div>
      </body>
  </html>

以下のような画面になります。

実装は本当に簡単で、いままでにあまりみたことがないようなかっこいいお問い合わせフォームができたと思います。
ただ、この入力フォームの使い勝手が良いかどうかはわかりません。
あまり詳しくない方だったら、どこに何を入力すればいいのかパッと見わからないかもしれませんね。

サンプルプログラムはこちらで確認できます。
Materializeサンプル

興味ある方は、是非、見てみてください！

株式会社ライブキャスト