この投稿はDart Advent Calendar 2014の18日目の記事です。

Dartで利用可能な信頼できるUIライブラリとして、PolymerDartとPaperElementsがあります。 未だdeveloper previewという段階ですが、UI構築の効率が劇的に上がるため、個人的に今から積極的に動作検証をしています。 自分の経験の範囲では、PolmerJSとPaperElementsはmobile safariでもある程度安定して動く感触です。 PolymerDartのPaperElementsはJS版をproxyを通じて動作させているため、同様の動作となることが期待できます。

アプリで使えるUIライブラリが整いつつあるので、これを用いてハイブリッドアプリ化を試みています。 今回はCordovaに乗せてみました。

前提

  • Cordovaの開発環境がセットアップ済み

Dart projectの作成

今回もstagehandで作成します。

$ mkdir hello_cordova_dart && cd hello_cordova_dart && stagehand polymerapp


ブラウザで動作確認

Dartium、またはChromeやSafariなどのmodern browser(Dart2JSが自動的に実行される)で動作することを確認。

$ pub serve


Cordova projectの作成

$ cordova create cordovadart com.example.cordovadart Cordovadart
$ cd cordovadart
$ cordova platform add ios


csp optionの追加

pubspec.yamlのtransformer sectionにcsp optionを追加します。

transformers:
- polymer:
    entry_points: web/index.html
- $dart2js:
    csp: true


pub buildしてJSにコンパイル

$ pub build


iOS向けにbuildしてみる

cordova project直下のwww directoryにpub buildで生成したweb/以下をすべてコピーして、ios向けbuildを実行。

$ cordova build ios


iOS simulatorで確認したところ、無事動きました。 polymer_dart


これに加えてdeviceready eventの処理やcordova.jsの追加をする必要がありますが、最小限のコードでDart+Polymer+PaperElementsが動きました。