Polymer.dart でも Material Design
Material design with "Polymer.dart"
先日、弊社の諏訪から投稿のあった「 Material Design 」ですが、Dart でも core_elements, paper_elements として Pub がリリースされていたので試してみました。
Dartium for Android, support for @polymer's core and paper elements, and more in the new #dartlang 1.5 release: http://t.co/Y8r9Ge8EEF
— Google's Dart Team (@dart_lang) 2014, 6月 27
Dart Editor の入手
Dart Editor はコチラからダウンロードします。
エディタだけでなく SDK や専用ブラウザ「 Dartium （ DartVM を内蔵した Chromium ）」が同梱されているので、これひとつで Dart プログラミングが始められます。
Polymer プロジェクトの作成
File メニューから「 New Project... 」を選択、「 Sample content 」は「 Sample web application using the polymer library 」としてプロジェクトを作成します。
Pubspec の設定
Dart には Ruby の Gem のようなパッケージ管理機能「 Pub 」が用意されています。同じく、Gemfile に相当するファイルが「 pubspec.yaml 」であり、このファイルにパッケージ「 core_elements 」および「 paper_elements 」の記述を追加することで自動的にそれらがインストールされる仕組みになっています。
HTML の実装
既存の HTML を下記内容で上書きします。
material_design_example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Design Example</title>
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_icons.html">
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
<link rel="import" href="packages/paper_elements/paper_tabs.html">
<link rel="import" href="packages/paper_elements/paper_tabs.html">
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
<link rel="import" href="packages/paper_elements/paper_checkbox.html">
<link rel="import" href="packages/paper_elements/paper_toggle_button.html">
<link rel="import" href="packages/paper_elements/paper_radio_group.html">
<link rel="import" href="packages/paper_elements/paper_fab.html">
<link rel="import" href="packages/paper_elements/paper_slider.html">
<link rel="import" href="packages/paper_elements/paper_progress.html">
<link rel="import" href="packages/paper_elements/paper_input.html">
<script type="application/dart" src="material_design_example.dart"></script>
<script src="packages/browser/dart.js"></script>
<style type="text/css">
body {
font-family: sans-serif;
}
core-header-panel {
background: white;
height: 100%;
width: 100%;
}
core-toolbar {
background-color: #00BFFF;
color: #FFF;
fill: #FFF;
}
p {
margin: 10px;
padding: 10px 10px;
}
</style>
</head>
<body fullbleed unresolved>
<core-header-panel>
<core-toolbar class="medium-tall">
<paper-icon-button id="navicon" icon="arrow-back"></paper-icon-button>
<span flex>Title</span>
<paper-icon-button id="searchbutton" icon="menu"></paper-icon-button>
<paper-tabs class="bottom fit">
<paper-tab>ONE</paper-tab>
<paper-tab>TWO</paper-tab>
</paper-tabs>
</core-toolbar>
<p><paper-button label="flat button">Button</paper-button></p>
<p><paper-button label="raised button" raisedButton>Button</paper-button></p>
<p><paper-checkbox></paper-checkbox></p>
<p><paper-checkbox checked></paper-checkbox></p>
<p><paper-toggle-button></paper-toggle-button></p>
<p>
<paper-radio-group selected="small">
<paper-radio-button name="small" label="Small"></paper-radio-button>
<paper-radio-button name="medium" label="Medium"></paper-radio-button>
<paper-radio-button name="large" label="Large"></paper-radio-button>
</paper-radio-group>
</p>
<p><paper-fab icon="favorite"></paper-fab></p>
<p><paper-slider min="10" max="200" value="110"></paper-slider></p>
<p><paper-progress id="progress" value="10"></paper-progress></p>
<p><paper-input label="Your Name"></paper-input></p>
</core-header-panel>
</body>
</html>
Dart の実装
下記 Dart ファイルを新規作成します。
material_design_example.dart
export 'package:polymer/init.dart';
import 'dart:async';
import 'dart:html';
void main() {
HtmlElement progress = document.querySelector('#progress');
int value = 0;
new Timer.periodic(new Duration(milliseconds: 10), (Timer timer) {
if (100 < value) {
value = 0;
}
progress.attributes['value'] = value.toString();
value += 1;
});
}
Dart ファイルでは単純にプログレスバーを動かす処理をしているだけですね。
今回使われるファイルは「 material_design_example.html 」と「 material_design_example.dart 」の二点のみです。他のサンプルファイルについては削除して構いません。
アプリケーションの実行
ファイルツリーで「 material_design_example.html 」を選択し、右クリックで開いたコンテキストメニューから「 Run in Dartium 」で実行します。
Dartium が起動し、Material Design のコンポーネントが表示されれば成功です！
まとめ
通常の Web 版との違いは個々のコンポーネントへのパスが異なる点と Web Components を Dart でサポートする為のスクリプトをロードしている程度でしょうか。 Dart Editor だけで気軽に試せるのは良いですね。(^_^)
サンプルについて
今回のサンプルプロジェクトは GitHub にて公開しています。
git clone git@github.com:inage-toru/material_design_example.git
クローン後、Dart Editor の File メニューから「 Open Existing Folder... 」で当該フォルダを開くと自動的に Pub のインストールが始まるので、それが終わり次第すぐ実行できます。
![[レポート]インタラクションはシステムとユーザーの壁を超えるというお話 #Adobe MAX Japan](https://devio2023-media.developers.io/wp-content/uploads/2019/12/53cbf2b654bc7c2eefd4f776e0257ea4.jpg)
