ダダ漏れ日記

Dartが1.12になるのに伴い、Polymerが1.0に切り替わったらしく、サンプルを見てみた。 どんだけ変えるのかと。 今までの全く無駄じゃん！ Polymer Dart 1.0 Developer Guide https://github.com/dart-lang/polymer-dart/wiki#10-developer-guide @observableが@propertyに変更 さらに、2way-bindingするには、 @Property(notify: true) と宣言しなくてはいけない。（"P"が大文字なのに注意） プロパティへの値のセットに専用メソッドを使用する @observable String hoge; ... void updateHoge() => hoge = "gg"; これが下のように変わります。 @property String hoge; ... void updateHoge() => set("hoge","gg"); じゃないと、HTML側が更新されないです。 イベントの取り方が変わった イベントの取り方はいくつかあるようです。 方法１：@Listenアノテーション HTML側はidだけ設定します。Dart側でどのIDのどのイベントを受けるかをメソッド単位で設定します。 <button id="hoge">発射</button> @Listen("hoge.click") void fire(e,[_]) => print("hoge"); 方法２：onにListenする案外ベタな方法 attached() {   $["hoge"].on["click"].listen( (e)=>print("hoge") ); } プロパティの変更イベントで受ける 以前はプロパティ名に"Changed"を付けた名前のメソッドが自動的に呼ばれたものが、@Listenアノテーショ...

そうですか。 Dart Editorは今後サポートしないのですか。 About Dart Editorを開いてもバージョンアップのチェックが表示されないからおかしいと思ってたんですよね。 まあDart Edtior、超中途半端でしたね。 今後はWebStorm推奨ですか〜。 有料じゃないですか〜。 プロジェクト移行しなきゃなぁー。 面倒くさいなー。

Polymer 1.0なんてニュースもありますね。 Dart + Polymerも、ようやく実用レベルに達したような気もしてきたこの頃。 というわけで豆知識。 Polymerのレイアウト支援機能 horizontalとかflexとかのキーワードを属性に書くだけでレイアウトしてくれちゃうぞ。 <div horizontal layout>  <div>hoge</div>  <div flex>fuga</div> </div> これで横に並べてくれちゃう。"hoge"はサイズ固定。 https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html でも、Polymer1.0にこの機能ないんだね…。Styleシートで行うようになっているようだ。なるほど。 プロパティにChangeリスナーを張る プロパティ名の後に"Changed"と書いたメソッドを作成すると、そのプロパティが変更された後に呼ばれる！ @observable String hoge; void hogeChanged() => print("hoge") ---- <input type="text" value="{{hoge}}"> これでinputの入力文字を変更する度にhogehoge出力されるぞ。 そんな便利なこと許されますかね！ idでHtmlElement検索 <div id="hoge"></div> --- var d = $['hoge'] as DivElement; これイケるッス。 でも、途中にtemplateが入ると検索が届かなくなります。要注意！ ある条件でElementを隠したい あるElementを表示したりしなかったりすることは<template if="">でも可能ですが、そうじゃない方法もあります。 <div hidden?=...

Ver. 1.9.0にて「Asynchrony Support: Phase 2」となり、非同期処理が劇的に書きやすくなった。 もう、thenとか要らない。 そう、then free。 それはオレたちのフリーダム！ そして中カッコ地獄からの卒業 そんな時代に捧げるSleepの実現方法。          await new Future.delayed( const Duration(milliseconds: 500 ), (){} ); …長いな。

バージョンが1.0.0になったし、 Angular.Dartを試してみた。 まずは、 Angular.Dartサイトのチュートリアル からサンプルをダウンロード。 なるほどなるほど。 っていうか、{{name}}って見えてますけど。 ng-cloakを設定しなければイカン？ してもダメですけど。 Dart版では、自力でdisplay:noneを設定しなければいけないと...

HTMLのselectって基本的にワナが多いよね。 Polymerでのselectも正直言って不便。 valueでは初期値が渡せないのでselectedIndexでやるしかないのだが、indexって扱いづらい。 <select value="{{src}}"> というわけで、いい加減イヤになって、独自のカスタムselectを作ってみた。 （Paper Elementsを使うとちゃんとしているのかなー？） こんな感じ。 でも、IEとFirefoxでは動かないんだよね！ $['select']が正しく効かないのよ。 Polymerって一体いつ使い物になるのか？って感じだよね…。 Angularにするかな…。

PolymerでWebアプリを作っている時、 値段を表示したい時とかあるじゃないですか。 <div>スマイル{{ price }}円</div> ってやるじゃないですか。 でも、値段って大抵3桁毎にカンマ付けないと怒られるじゃないですか。 というわけで、Dart側で、 var nf = new NumberFormat("#,##0","ja_JP"); price = nf.format(rowPrice); とかやるのちょっとバカバカしいじゃないですか。 っていうか、こういうのって表示の問題だと思うんですよね！ であれば、MDVでいうとViewであるHTML側でなんとかならんのかと。 って思ってたのですが、 そういうとき、Polymerのカスタムフィルタ機能でなんとかなりそう。 [HTML側] <div>スマイル{{ price | priceformat }}円</div> [Dart側] NumberFormat nf = new NumberFormat("#,##0","ja_JP"); String priceformat( String str ) => nf.format(str); 以上。 本家のPolymerでは、 HTML側でfilterに引数を設定することも可能 なのだが、内部のソース(polymer_expressions/eval.dart)を見た感じ、無理じゃね？という感じ。

Futureがまだ直感的に使えない。 パッと出てこない。 下記は、Futureを連鎖させるサンプル。 FutureAの次にFutureBをやりたい時に使う。 HttpRequest.getString("http://hoge.com/") .then( (str) {   var  result = str+"hoge";   return new Future.value(result); }) .then( (r) {   print(r);  // http://hoge.com/から取得した文字列にhogeを追加したもの })

Shadow Element（ほんまもんのHtmlElement）を取得するには、 PolymerElementの$を使う。 jQueryっぽいが、ここにはidしか指定できない。 （だって、Map<String,Element>だ） しかも、制限があって、template if等で消される可能性のあるものは検索できないようだ。 （polymer[0.12.2+1]で確認） <polymer-element> <template>   <div id="hoge">  // ←これは取得可能    <template if="{{ visible }}">      <div id="fuga">   // ←これは取得できない      </div>    </template>   </div> <template> </polymer-element> polymerの各種ケースのサンプル https://github.com/dart-lang/polymer-dart-patterns

inputでのon-changeイベントは、focusをlostした時の意味。 編集内容の変更をリアルタイムでウォッチするイベントはon-inputだ。 ただそれだけ。

ある日、Dart Editorで謎の赤バッテンがでるようになった。 packageのimportで「そんなpackageねぇ！」みたなエラーが出ていた。 そんなはずない、と思いつつpackageのツリーを見てみると、確かに一部のpackageが空になっている。 その時は、gitでbranchの切り替えを頻繁にやっていた。そのせいかもしれないなぁ、と思いつつ、Pub Getをやってみるも、 Unhandled exception: Uncaught Error: FileSystemException: Cannot open file, path =... とエラーが出て進まず。 万事休す…と思って、ネットの情報を漁っていたら…ありました。 https://groups.google.com/a/dartlang.org/forum/m/#!msg/editor/Sel-OJd-vfw/1Z2z0wYvY08J PubのCacheを削除するといいよ！ということらしいです。 というわけでこの情報通り、 AppData/Roaming/Pub/Cache/hosted の pub.dartlang.org を削除したらPub Getが通るようになって無事解決です！ このネットの情報では、「Windowsのsymlinkはhellだよ！」みたいなセリフがありました。 いつもはMacでやっているのですが、たまたまWindowsでやらざるを得なくて、いざやったらコレだよ。 Windowsなんとかしてください。 っていうか、Dart Editorのバージョン上げて今までのソースが動かなくなるのが怖くて、サブ機のWindowsで試したんだよね。Dartもそろそろ落ち着いて頂きたい！

DartのDateTime.parseでは、 "2014-04-01T01:02:03+09:00" の文字列をなぜか解析してくれない。 これってRFC3339でもISO8601でも定義されていると思うんだがー。 ホントにトホホだよ！ というわけでDateFormatを使用した回避方法。 まず、intlパッケージをインストール pubspec.yamlのdependenciesに「intl:any」を追記する。 dependencies :     intl : any 続いてソース。 import 'package:intl/intl.dart' ; … var df = new DateFormat("y-M-dTH:m:sZ"); var t = df.parse("2010-10-12T13:20:30+09:00"); print(t) print(t.toUtc()) これで出力内容は、 2010-10-12 13:20:30.000 2010-10-12 04:20:30.000Z となる。 面倒すなぁ。

サーバーサイドもしくはコマンドラインアプリのためのDartのサンプルが用意された。 Dartはブラウザアプリだけではないよ、ってことを本気で言いに来たようだ。 Dart By Example https://www.dartlang.org/dart-by-example/#dart-io-and-command-line-apps 載っている情報は下記の通り。 ファイル関連 ファイル操作、ディレクトリ操作、シンボリックリンクの作成 文字列の読み込み、書き込み バイト配列の読み込み、書き込み テンポラリファイル、ディレクトリの作成 'package:http/http.dart'を使ったHTTPリクエスト GET＆POST ※同じサーバーに連続してリクエストするときClientを再利用する技が目からウロコ レスポンスの読み込み。文字列もしくはバイナリで。 'package:http_server/http_server.dart'を使ったWebサーバー バインド…HttpServer（これはdart:io） ファイルを返すだけのディレクトリ専用クラス…VirtualDirectory 特定のURLパターンで処理を振り分ける…Router, UrlPattern その他 Socket通信…ServerSocket, Socket WebSocket…WebSocketTransformer, WebSocket OS情報取得…Platform.environment, Platform.operationgSystem スクリプト自身のパスを取得…Platform.script 外部コマンドの実行…Process URLやファイルパスの連結、分解、相対パス化、解析…'package:path/path.dart'

observableのプロパティに、setterを使いたいときってあるよね。 こんな感じ。 String _title = ""; @observable String get title => _title; set title( String t ) => _title = "hoge $t"; で、html側で{{title}}ってやるわけですが。 でも、これ動きません！ titleの実体がfunctionだからだと思いますが、変更イベントが飛ばないのです。 というわけで、自分で変更イベントを飛ばせばOKとのこと。 具体的には、setterを下記のように変更します。 set title( String t ) {   _title = notifyPropertyChange( #title, _title, t ); } notifyPropertyChangeの仕様は下記の通り。 dynamic notifyPropertyChange(Symbol field, Object oldValue, Object newValue) 戻り値はnewValueとなっています。 そして、これをするとgetterの@observableが不要になります。つまり、observableに頼らず、自前で変更イベントを出せるってことですね。 …っていうか、#titleって何ヨ？ 本来、const Symbol("title")としなければいけないっぽいが、表記を省略できるってことかね？ 参考資料： 同様の質問 https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/hxCqmwjnLIA まさにこれのサンプル https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web/setter_with_observable_property_change

PolymerElementを状況に応じて動的に作成すること、したいよね〜。 Seth Laddのサンプルによると、ore-tagというカスタムタグがあるとして、 querySelector("#place").childlen.add( new Element.tag("ore-tag") ); とすればいけるとのこと。 確かにこれで問題なく動くのだが、ワナがひとつ。 Pub Buildすると正しく動かんのだ、これが。 具体的には、enteredViewが呼ばれない。グハッ！ バグじゃね？

Dartでゲーム作ってみたよ。 http://www.niku-mansei.com/contents/05club/club04game00.html Canvasバリバリ系。 フレームはいわゆるsetTimerで取っている。 スマホでも動作するけど古い端末だとちょっと重いかも。 描画をキレイにするために、実は倍の解像度で描画してるんだが（いわゆるRetina対応）それが原因っぽい。 しかし、Dartは楽ちんですな〜。 もう、JavaとかObjective-Cとかやる気しないな〜。

DartでWebアプリを作るならPolymerってヤツを使わずにはいれないよね。 ということで、下記、勉強のための資料。 Seth Laddによるサンプル https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web Polymerのサイト http://www.polymer-project.org/ templateのリファレンス http://www.polymer-project.org/platform/template.html 豆知識 on-clickのコールバックメソッドの引数は決まっている。 void handle(Event e, var detail, Element target ) on-clickのコールバックに独自の引数を渡したい時は独自attributeを使う。 HTML <td on-click="{{handle}}" data-key="{{data.key}}"> Dart void handle(Event e, var detail, Element target ) { var hoge = target.attributes['data-key']; ... } PolymerElementにて表示開始を取る時は、enteredView()をオーバーライドする。 void enteredView() {   print("表示されたなう"); } PolymerElement内でquerySelectorするときはshadowRootを使う。 void enteredView() {   var e = this.shadowRoot.querySelector("#mes");   e.text = "表示されたなう"; } PolymerプロジェクトをJavaScriptアプリとしてエクスポート 通常のDartプロジェクトはdart2jsを使うんだが、Polymerプロジェクトの場合は、「Pub Build」...

DartのStreamのリスナ管理の話 Stream.listenを使ってリスナを貼るのだが、やればやるほどリスナが貼られていくよね。 new ButtonElement() ..onClick.listen( ()=> print("hoge") ) ..onClick.listen( ()=> print("hoge") ); 結果 >hoge >hoge これは、onClick呼び出し内でStream<T>がnewされるためだ。（EventStreamProvider.forTargetを内部で呼んでいる） そして、listen()でさらにStreamSubscription<T>がnewされている。 実際にリスナを持つのは、このStreamSubscriptionで、こいつはリスナを一つしか持てない。 ということは、リスナは追加ではなく差し替えにしたい場合、こいつのonDataを書き換えてやれば良いわけだ。 ちなみに、StreamSubscription.cancel()を呼び出すことで、それ以降のイベントの配信を停止できる。 下のソースは、クリックされるたびにTextを変更し、2回目のクリックでそれ以降のイベントの受信を停止するサンプルだ。 ButtonElement btn = new ButtonElement(); StreamSubscription<Event>  s = btn. onClick .listen( null ); s.onData( ( e ) {   btn. text = "first click" ;   s.onData( ( e ) { btn. text = "second click" ;s.cancel(); } ); } ); 参考： Getting Your Feet Wet with Streams

例えばElementのonClickなど、Streamを返す関数はDartの標準ライブラリに多数存在する。 というわけで、自分もStreamを返す関数を作りたい。 以下、サンプル。 StreamController<String> cont = new StreamController(); Stream<String> get onReceive => cont.stream; void update() { HttpRequest.request("http://...../data") .then( (HttpRequest req) { cont.add(req.responseText); if( isFinish ) // 終了フラグ cont.close(); }) .catchError( (e) { cont.addError(e); }); } キモはStreamControllerだ。 addメソッドでデータを送り、終了したらcloseメソッドでストリームを閉じる。 エラーはaddErrorメソッドで通知。 ちなみに、このサンプルでデータ取得ハンドラを貼るには下記のようにする。 a.onReceive.listen( (String data) => print(data) ); ※上記サンプルがクラスとして定義されて変数aになっているとする。

Dartで標準で用意されているメソッドはFutureを返すものがある。 これは遅延を伴う処理を、無駄なく行うための重要な機構だ。 というわけで自分のメソッドもFutureを返すようにしたいのだが、 そのやり方は下記の通り。 Future<chartdata> httpAccessTest() { Completer comp = new Completer(); HttpRequest.request("http://..../xxx") .then( (HttpRequest req) { // 成功した時 comp.complete(req.responseText); }) .catchError( (e) => comp.completeError(e) ); // 失敗した時 return comp.future; } これはhttpでデータを取得するサンプルだ。 Completerオブジェクトを使用するのがミソ。 っていうか、それしかないが。 正常終了の結果はcompleteメソッドで通知。 エラーは、completeErrorメソッドを使用して通知。サンプルでは元の処理でThrowされているものをそのまま転送している。 ちなみに、Completerが使えるのは一回こっきりだ。使い回しはできない。 Futureの使い方 http://www.dartlang.org/articles/using-future-based-apis/ Futureのエラーハンドリング方法 http://www.dartlang.org/articles/futures-and-error-handling/