Material Design の Rally を作りたい。

5355 ワード
MDC-Web MaterialDesign 自分用メモ 自分用メモ テキストリンク

はじめに

自作の家計簿アプリを刷新したいと思っていた。流行りのマテリアルデザインにしたいなーとか思って、いいデザイン無いかなーと検索していてであったのが Rally。

こいつ何者だー！と思って、Material Components for the web 使えばほんとにできるのかー！と思って、挑戦してみる。

そんなメモ。

前提条件

ちょっとは、フロントエンド開発ができる。
ちょっとは、英語ができる。でも英語のドキュメントを読みたくない。
Bootstrap くらいはフレームワークつかったことがある。

その程度の技術力。

本当に Rally みたいなものできるのかな。

懸念事項

自分のやる気がどこまで続くか。
記事の量がどのくらいになるのか。全然見えません。

やってみよう - 1

Web なんて 1 からだよ！って初心者になった気持ちで取り組んでみよう。

はじめてみる

まずは、Getting Started を読んで環境を作る。

https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css
https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js

これ読み込めばいいみたい。

・・・。

もう詰んだ。

こういうこと？

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" />
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    Hello World
  </body>
</html>

ボタンでも置いてみようかな。

<button class="foo-button mdc-button">Button</button>

おぉ、ボタン配置できた。

JS も使ってみようかな。

<script>
  mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));
</script>

おぉ、アニメーションする！

なんか、Web 界隈では JS 最後に読み込んでること多いな……。

[JS] JavaScriptの読み込み位置をページ最後にしたほうがよい理由

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" />
  </head>
  <body>
    Hello World
    <button class="foo-button mdc-button">Button</button>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>
      mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));
    </script>
  </body>
</html>

Rally までの道のりは遠い…。