Dart Web Apps on Android

　先日のGoogle I/OでAndroidやWebの新しいデザインであるMaterial Designが発表され、その実装が可能な[Polymer](http://www.polymer-project.org/)への注目が高まっています。PolymerはもともとJavaScriptですが、Dartにも[Polymer.dart](https://www.dartlang.org/polymer-dart/)としてポーティングされています。  
　さてI/OではDart on AndroidもしくはGo on Androidが来るのではないかと皆さん期待していて裏切られたかもしれませんが、実は26日に[Dart公式ブログ](http://news.dartlang.org/2014/06/dart-15-makes-it-easier-to-develop-for.html)で、Dart1.5のモバイルアプリ開発向けの情報が述べられています。またPolymer.dartはすでにMaterial Designへの対応を終えており、これが意味するところはつまり、 **『Polymer.dartを使ってAndroidでMaterial Designのアプリを作れ！』** ということでしょう！  
　ということでさっそく[公式ドキュメント](https://www.dartlang.org/tools/editor/mobile.html)に沿って、DartのWebアプリをAndroidで動かしてみようと思います。

# DartEditorのセットアップ

　まずは開発環境に[DartEditor](https://www.dartlang.org/tools/download.html)を導入しましょう。DartEditorはEclipseベースのIDEで、Dartの開発に必要なファイルが全て同梱されています。実際のコーディングを別のエディタでやるにしてもまずはDartEditorをダウンロードしましょう。インストーラは無いので、DLしたアーカイブを展開して好きなところに配置してください。DartEditorでしか開発しないのであればPATHの追加なども必要ありません。

# ChromeDevToolsにデバイスを認識させる

ChromeからUSB接続されたAndroid端末にアクセスさせるために、Chromeの設定を変更します。

## Android側

通常のAndroidアプリの実機デバッグと同様に、開発者コンソールからUSBデバッグを有効にしてください。

## 開発環境側

Chromeから`chrome://inspect`を開いて、`Discover USB Devices `にチェックを入れます。
![](https://developer.chrome.com/devtools/docs/remote-debugging/discover-usb-devices.png)

デバイスをUSB接続しなおすと以下のようなダイアログが出るので、許可してデバッグを開始します。Chromeにデバイス名が表示されれば成功です。表示されない場合は接続をやり直してみてください。
![](https://developer.chrome.com/devtools/docs/remote-debugging/usb-debugging-dialog.png)

試しにAndroid側のChromeの情報をPC側で取得してみましょう。Android側でChromeを開き、適当なページを表示します。PC側ではデバイス内で開かれているブラウザ（WebViewを含む）の一覧が表示されます。この中からAndroidで表示しているページの **Inspect** をクリックします。
![](https://developer.chrome.com/devtools/docs/remote-debugging/inspect-open-tab.png)

するとおなじみChromeの開発者コンソールが表示されます。Elementsタブを見るとAndroidのChromeと接続できているのがよくわかると思います。
![](https://qiita-image-store.s3.amazonaws.com/0/20253/ff27098d-3b84-29c7-6c0a-b5af02f42bfd.jpeg)

# DartのアプリをUSB接続経由で動かすための設定

　そもそもどのようにUSB経由でDartのアプリを動作させているのかを説明します。PC側のDartEditorでDartアプリを実行すると、`pub serve`という仕組みで、localhost(デフォルトは8080ポート)に一時的なサーバーが立ちます。ここにAndroid側のChromeでアクセスすることでDartアプリが動作します。両方のChromeを中継することでデバッグが可能になります。
![](https://www.dartlang.org/tools/editor/images/MobileDeployment.png)

　このための準備として、8080ポートにフォワーディングします。 **Port forwarding...** ボタンを押してダイアログを表示します。ダイアログ下部のチェックボックスをオンにすることでポートフォワーディングが有効化されます。
![](https://www.dartlang.org/tools/editor/images/SetupPortForwarding.png)
![](https://www.dartlang.org/tools/editor/images/PortForwardingSettings.png)

接続しているデバイスの右側に緑のランプとポート番号が表示されれば成功です。

# DartEditorでサンプルプロジェクトを実行

　DartEditorを開き、`File > New Project`を選択します。今回はPolymer.dartを使ってみようということで、予め用意されているPolymer.dartのサンプルプロジェクトを使います。親切に`[mobile friendly]`と書いてくれています。
![](https://qiita-image-store.s3.amazonaws.com/0/20253/67b70137-158b-a734-efdd-92058b888500.png)

プロジェクトを作成したら実行プロファイルを作ります。`Run > Manage Launches`でダイアログを開きます。左側のリストの上部にドロイド君アイコンのボタンがあるので、モバイル用実行プロファイルを作ります。実行するhtmlファイルと、サーバーの設定をします。`Server`のドロップダウンリストを **Pub Serve over USB**に変えるのを忘れないで下さい。
![](https://qiita-image-store.s3.amazonaws.com/0/20253/6fa6b7ae-7d1d-dc57-9f12-7b86c4063ea3.png)

設定が終わったら右下の **Run** を押して実行してみましょう。Android側でブラウザが立ち上がって、サンプルアプリが表示されるはずです。うまくいかない場合は、

- USB接続しなおす
- DartEditorの`pubspec.yaml`を右クリックして`Pub Get`してみる

などが有効かもしれません。
![](https://qiita-image-store.s3.amazonaws.com/0/20253/f563129f-6978-0320-f6c7-ca0372347092.jpeg)

ところで、Androidのバージョンが4.4+であれば、このDartEditorから起動された`Content Shell`というブラウザでデバッグできるのですが、そうでない場合はChromeで開き直さないとデバッグできません(Content ShellがInspectできない）。Content Shell側に表示されているURL（下の画像では`127.0.0.1:8080/sample.html`）にChromeでアクセスしてあげてください。
![](https://qiita-image-store.s3.amazonaws.com/0/20253/9e7306d5-fbe0-d122-e817-d77de95765cb.png)

dartのデバッグはChromeの開発者コンソールからJavaScriptと同様に行えます。サンプルアプリのボタンのクリックにブレークポイントを設定したらこのようになります。
![](https://qiita-image-store.s3.amazonaws.com/0/20253/34982c1c-e8e1-80b8-74c4-d70e5bc1df4d.jpeg)

# Material Designについて

　PolymerでMaterial Designをただ使うだけならbowerからインストールしてhtmlをimportするだけです。Developers.IOさんの[Material Design を使った Web ページを作ってみる](http://dev.classmethod.jp/client-side/javascript/material-design-with-polymer/)が参考になると思います。また、独自タグを作って拡張する際はJavaScriptあるいはDartで書くことが出来ます。最初に書いたようにPolymer.dartはすでにMaterial Designに対応しています。[paper_elements](http://pub.dartlang.org/packages/paper_elements)というパッケージでMaterial Designの各html要素についてdartファイルが提供されています。独自タグの作り方はサンプルプロジェクトの`clickcounter.dart`と`clickcounter.html`を見ることで、

- dartでの独自タグの定義
- htmlでのテンプレート化

どちらも参考になると思います。