カテゴリー
コンピューター

Material Design Lite のアイコンを自分のサーバにダウンロードして使う方法！

Material Design Lite でパッとウェブページを作ったときに学んだことメモ | oki2a24 で MDL を使ったウェブページの作り方を初めてやってみました。

初めてですので GETTING STARTED ページにまずは取り組みました。フレームワークに関するファイル等を自分のサーバに置くやり方を実践いたしました。

JavaScript ファイル、CSS ファイルは自分のサーバに置くことができました。けれども、アイコンだけは CDN にホストされたファイルを使用しておりました。

前回の実践では強引にリンク先をたどってファイル等を入手いたしました。ですけれども次のページにアイコンも自分のサーバにホストする方法がございました。

今回は自分のサーバで MDL のアイコンをホストする方法を記録しますわ♪

０．作るディレクトリ・ファイル構成

  • ドキュメントルートディレクトリ名: mdl1
  • mdl1 ディレクトリ内に index.html の他の、CSS や JavaScript などのすべてのファイルを置く

１．まずは Material Design Lite 本体のダウンロードと導入

  1. GETTING STARTED ページの「Download」
    MDL をダウンロード
  2. 「DOWNLOAD MDL V1.0.2」（2015年8月11日現在）
  3. ダウンロードした zip ファイル mdl.zip を解凍する。
  4. mdl1 ディレクトリに、material.min.css と material.min.js を置く。
  5. index.html を作る。emmet を使い「!」を展開するのが楽。
  6. material.min.css と material.min.js を読み込む。 
    <link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
  7. CDN にホストされているアイコンも一旦読み込む。 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  8. チュートリアルのボタンを書き、表示を確認する。 
    <!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Button
</button>
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>

ここまでで、mdl1 ディレクトリには次のファイルがございます。

  • index.html
  • material.min.css
  • material.min.js

HTML ソース次のようになりましたの。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./material.min.css">
  <script src="./material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>MDLサンプル</title>
</head>
<body>
  <!-- Accent-colored raised button with ripple -->
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
    Button
  </button>
  <!-- Colored FAB button -->
  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
    <i class="material-icons">add</i>
  </button>
</body>
</html>

そしてブラウザには次のように表示されますわ♪

MDL の導入がひとまず完了し、アイコンボタンなどが表示された

MDL の導入がこれで完了しました！

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

それでは上記の 1 行を CDN から自サーバに変えていきましょう♪

２．Material Design Lite のアイコンを表示するのに必要な物を揃える

やり方と言いましても、次のページの「Setup Method 2. Self hosting」をよく読んで必要な部分を読み替えて進めるだけですの♪

具体的には次のようになりました。

  1. material-design-icons/iconfont at master · google/material-design-icons · GitHub の MaterialIcons-Regular.eot、MaterialIcons-Regular.woff2、MaterialIcons-Regular.woff、MaterialIcons-Regular.ttf が欲しい。しかしこのページからはダウンロードできない。
  2. リポジトリのトップページ google/material-design-icons · GitHub へ移動し、右メニューの「Download ZIP」
  3. zip ファイルを解凍し、iconfont/ にある 4 つのファイルを mdl1 に置く。
  4. icon.css ファイルを作成し、次のように書く。 
    @font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(./MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(./MaterialIcons-Regular.woff2) format('woff2'),
       url(./MaterialIcons-Regular.woff) format('woff'),
       url(./MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

これで、mdl1 ディレクトリのファイルは全部で次の 8 つとなりました！

  • index.html
  • material.min.css
  • material.min.js
  • MaterialIcons-Regular.eot
  • MaterialIcons-Regular.ttf
  • MaterialIcons-Regular.woff
  • MaterialIcons-Regular.woff2
  • icon.css

３．index.html の アイコン読み込み部分を CDN からセルフホスティングに切り替える

index.html の次の行を修正いたします。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

↓

<link rel="stylesheet" href="./icon.css">

そうしましたら、ブラウザを再読み込みいたします！

今までどおりボタンのアイコンが表示されましたら成功ですの！

Chrome のデベロッパーツールで確認しましても、新たに用意したファイルを読み込んでいることがわかります。

自分のサーバに MDL を置いたことを確認できた！

 

４．アイコンの表現を更に豊かにする CSS を追加する。

再びこのページの、今度は「Styling icons in material design」の部分を取り込みますの。CSS の内容としては次のようになります。

  • おすすめのアイコンサイズ 18, 24, 36 or 48px
  • アクティブなアイコンの場合、黒なら opacity を 54% に、白なら opacity を 100% にするのがおすすめ
  • アクティブではないアイコンの場合、黒なら opacity を 26% に、白なら opacity を 30% にするのがおすすめ

これを icon.css に反映いたしました。全体像は最後に掲載いたします。

５．アイコンの探し方

の冒頭、「What are material icons」の material icons library からアイコンを見つけることができます。

日本語ではヒットしませんけれども、英語で検索ワードを記入して絞り込むと楽ですわ♪

使いたいアイコンをクリックして、下から表示された部分の ICON FONT をクリックしたときに書いてある HTML を使えばいいだけですの♪

material icons library からアイコンを探す

たとえば、次のようになります。

<i class="material-icons">build</i>

先ほどのクラスで装飾するとたとえば次のようになりますわ♪

<i class="material-icons md-48 md-dark md-inactive">cloud_download</i>

６．index.html と icon.css

icon.css にいくつかのクラスを追加いたしました。作るページによって、このようなクラスは CSS ファイルに入れるかどうかは考えてもよいですわね♪

まずは index.html ですの。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./material.min.css">
  <script src="./material.min.js"></script>
  <link rel="stylesheet" href="./icon.css">
  <title>MDLサンプル</title>
</head>
<body>
  <!-- Accent-colored raised button with ripple -->
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
    Button
  </button>
  <!-- Colored FAB button -->
  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
    <i class="material-icons">add</i>
  </button>

  <i class="material-icons">face</i>

  <i class="material-icons">build</i>

  <i class="material-icons md-48 md-dark md-inactive">cloud_download</i>

</body>
</html>

続いて、icon.css ですわ。

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(./MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(./MaterialIcons-Regular.woff2) format('woff2'),
       url(./MaterialIcons-Regular.woff) format('woff'),
       url(./MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

// Rules for sizing the icon.
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

// Rules for using icons as black on a light background.
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

// Rules for using icons as white on a dark background.
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

最終的にはブラウザには次のように表示されました♪

自分のサーバか MDL のアイコンを読み出せるようになり、クラスも適用できた！

おわりに

結構手間でしたわ！難しくは無かったですけれども、日本語のページではございませんでしたから、少し慎重に記録に残してみました♪

以上です。

コメントを残す