LoginSignup
11

More than 5 years have passed since last update.

Pure Dart の Material Design Lite For Dart を利用して、サラっとWebページを作ろう

Last updated at Posted at 2015-12-23

Dartで、Material Design の考え方に則ったWebページを作ってみましょう。Dart製 Material Design Lite を使えば、それっぽいページを1-2時間で作ることができます。

http://www.material-design-lite.pub/
https://github.com/MikeMitterer/dart-material-design-lite

Matrial Design Lite 以前

  • Pure Dart の UI Library がないなぁ
  • Polymer は、JavaScript製
  • Angular は TypeScriptで書かれてる。slows down development
  • Polymer.Dart も Angular.Dart はでかくてデバックが大変。そして、slower

Material Design Lite x Dart は、これらを CHANGE

Pure Dartで書かれている。slowerでない。デバックが簡単。そして、軽量

http://styleguide.material-design-lite.pub/
https://github.com/MikeMitterer/dart-material-design-lite

始めよう

StageDive を使っています。
https://pub.dartlang.org/packages/stagedive

(1) http://www.material-design-lite.pub/ にアクセス

(2) QUICK START をクリック

(3) テンプレートをインストール

$ pub cache add mdl
$ pub global activate stagedive
$ pub global activate sitegen
$ stagedive -l
'MDL Android Template'         Package: mdl            Template name: android        Version: 1.13.1
'MDL Article Template'         Package: mdl            Template name: article        Version: 1.13.1
'MDL Blog Template'            Package: mdl            Template name: blog           Version: 1.13.1
'MDL Admin Template'           Package: mdl            Template name: dashboard      Version: 1.13.1
'MDL Fixed-Header Template'    Package: mdl            Template name: fixed-header   Version: 1.13.1
'MDL Sticky-Footer Template'   Package: mdl            Template name: sticky-footer  Version: 1.13.1
'MDL Text-Only Template'       Package: mdl            Template name: text-only      Version: 1.13.1
'Simple Console'               Package: stagedive      Template name: console        Version: 0.4.2
'Simple Lib'                   Package: stagedive      Template name: lib            Version: 0.4.2

$ stagedive -n blog -p mdl -t blog
$ cd blog
$ pub update
$ pub serve

できあがり!!
スクリーンショット 2015-12-24 3.45.47.png

補足

あとは、テンプレートを文言や配置をいじれば、それっぽいページを作成できます。
"pub serve" すれば、Dartiumから即座に変更を確認できるので、楽チンです。
※ JavaScriptに変換する時間とか気にせず開発に専念できます。

私も以下のページを作成するのに使ってみました。
1-2時間くらいでできました。
http://kyorohiro.github.io/umiuni2d/web/index.html



Kyorohiro Work
http://kyorohiro.strikingly.com/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11