2013年12月7日土曜日

Skeleton Project for Google App Engine/Go + Dart

2016/4/30更新

この記事の内容はすでに古く、またGithub上にリポジトリにおいてあるコードも最新のDartに合わせて変わっているため参考にならない点に注意。

Dartも1.0になったことだしそろそろ試す人が増えてきてもいいはず。ということで、Google App Engine上でDartなウェブアプリを作りたい人のためにスケルトンのプロジェクトを作った。バックエンドの言語はGoでフロントエンドはDart。動作確認はDartiumでしかしてないので、他のブラウザで動かしたい人はどっかでdart2js通せばいける…はず? 正直dart2jsほとんど試したことないからよくわからない。

スケルトンプロジェクトについて

Github上にリポジトリを作ったのでそれをCloneするなりForkするなり好きにやってもらえればいいはず。

ちなみに今回は実際にApp Engine上にデプロイしてあるので、そっちでどんなもんか確認することもできる。URLはgae-go-dart-skeleton.appspot.comで、Dartiumでアクセスすればちゃんと見れるはず。なおローカルからDartium上で動かすとこんな感じ(Windows 8.1 + GAE/Go 1.8.8 + Dart SDK 1.0.0.3_r30188)。

スケルトン

スケルトンプロジェクトの動かし方

gae-go-dart-skeletonを動かすには以下の手順を踏む必要がある。

  1. GAE/GoのSDKとDartのSDKをダウンロードしてきてパスを通す
  2. git clone git@github.com:rillomas/gae-go-dart-skeleton.gitする。あるいは自分のとこにForkしてそっちをcloneする
  3. pub getして必要なパッケージを落としてくる
  4. dev_appserver.pyを使ってローカルで動かす
  5. (デプロイする場合は)appcfg.pyでアプリをアップする

pub get

pubはDartに標準でついてくるパッケージマネージャで、pubspec.yamlファイルに必要なものを書くと落としてきてくれる。今回のpubspec.yamlはこんな感じ。

dependencies:
  logging: any
  polymer: any

Polymerとログ用のパッケージしか書いてないけど、それ以外に必要なパッケージはpub側で判断してもってきてくれるからこれで十分。でpubspec.yamlが置いてあるディレクトリでpub getするとこんな感じに実行される。

$ pub get
Resolving dependencies............................
Downloading polymer 0.9.1+1 from hosted...
Downloading polymer_expressions 0.9.1 from hosted...
Downloading shadow_dom 0.9.1 from hosted...
Downloading observe 0.9.1+1 from hosted...
Downloading html5lib 0.9.1 from hosted...
Got dependencies!

ルートディレクトリにpackagesってディレクトリが作られて、そこにパッケージがすべてダウンロードされてくるはず。あとは必要なところにpackagesへのリンクが自動的に張られる。それ以外にもpubspec.lockていうファイルが作られるけど、それはpubがバージョンの管理用に自動生成するファイルなのであまり気にしなくて大丈夫。

App Engine関係

App Engine関係は公式ドキュメントがあるからそっちでよろしく。dev_appserver.pyまわりはここ、appcfg.pyはこことか。

コードについて

今回のはPolymerを使った極めて単純なウェブアプリなんだけど、クライアントサイドで完結するようなアプリだと面白くないのでサーバー側のREST APIを叩いてdatastoreからデータを持ってきてそれを表示している。

サーバーサイド

サーバー側は来訪者の情報を提供するためのvisitorInfo APIを用意している。パスはapi/1/visitorInfoで、そこにGETをかければjsonが返ってくるし、POSTすればサーバー側の数値を書き換えることができる。実際アップしてあるアプリのAPIにアクセスすると現在の来訪者数累計が取得できるはず。やっている処理の内容はserver/main.goの以下のあたり。

func init() {
    http.HandleFunc("/api/1/visitorInfo", handleVisitorInfoRequest)
}

func handleVisitorInfoRequest(w http.ResponseWriter, r *http.Request) {
    c := appengine.NewContext(r)
    c.Debugf("Method: %s Url:%s ContentLength: %d\n", r.Method, r.URL, r.ContentLength)
    if (r.Method == "GET") {
        getVisitorInfo(c,w,r)
    } else if (r.Method == "POST") {
        setVisitorInfo(c,w,r)
    }
}

getVisitorInfo()の中でdatastoreからデータの取得とGETへの応答、setVisitorInfo()のなかでPOSTで送られてきたデータのdatastoreへの格納をやっている。datastoreへのget/setは固定の文字列キーでやってるので基本的に間違いはないはずなんだけど、初回にまだ何もsetされる前にgetが走る可能性があるのでNoSuchEntityエラーだけは現状握りつぶしてる。

const (
    visitorInfoKind string = "visitorInfo"
    visitorInfoKey string = "theVisitorInfoKey"
)

type VisitorInfo struct {
    Count int // total number of visitors
}

func getVisitorInfo(c appengine.Context, w http.ResponseWriter, r *http.Request) {
    k := datastore.NewKey(c,visitorInfoKind, visitorInfoKey, 0, nil)
    info := new(VisitorInfo)
    err := datastore.Get(c,k, info)
    // ignore the NoSuchEntityError and return the default value if we don't have the entity stored yet
    if err != nil && err != datastore.ErrNoSuchEntity {
        c.Errorf("%s", err.Error())
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    outBuf, err := json.Marshal(info)
    if err != nil {
        c.Errorf("%s", err.Error())
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    size, err := w.Write(outBuf)
    if err != nil {
        c.Errorf("%s", err.Error())
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }
    c.Debugf("Wrote %d bytes as response\n", size)

}

func setVisitorInfo(c appengine.Context, w http.ResponseWriter, r *http.Request) {
    buf, err := ioutil.ReadAll(r.Body)
    if err != nil {
        c.Errorf("%s", err.Error())
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    var info VisitorInfo
    json.Unmarshal(buf, &info)
    k := datastore.NewKey(c,visitorInfoKind, visitorInfoKey, 0, nil)

    _,err = datastore.Put(c,k,&info)
    if err != nil {
        c.Errorf("%s", err.Error())
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }
}

クライアントサイド

クライアント側ではMainApp(index.htmlから参照されてるWeb Component)が表示された段階でサーバーに対してGETを発行して、結果をもとに自身の内容を更新している。コード的にはclient/lib/components/main_app.dartの以下のあたり。

    @override
    void enteredView() {
        super.enteredView();

        var domain = ServerChannel.generateRootDomain(window.location);
        ServerChannel.getVisitorInfo(domain).then((info) {
            info.count++;
            visitorInfo = info;

            // update the visitor info on the server side
            ServerChannel.sendVisitorInfo(info, domain);
        });
    }

enteredView()はWeb Component側がdocumentに挿入されたときに呼ばれてくる関数で、今回はそこでvisitorInfo APIへGETを投げている。サーバーから今までの来訪者数を取得して、自分の分を加算して表示、更にサーバー側の来訪者数をPOSTで更新するところまで通してやっている。

ちなみにこのやり方だと来訪者数が一瞬だけゼロ表示されてしまうので、情報がもらえるまでは表示そのものを隠すとかした方が美しいのかも。めんどうだからやってない。

実際にHttpリクエストを投げる部分はすべてServerChannelというクラスで隠蔽している。コード的にはclient/lib/services/server_channel.dart

class ServerChannel {

    static Future<VisitorInfo> getVisitorInfo(String domain) {
        var url = "${domain}${visitorInfoApiPath}";
        Logger.root.info("getting from ${url}");
        var task = new AsyncGet<int>();
        var f = task.request(url, (res) {
            Logger.root.info("response: $res");
            int count = -1;
            if (res.isEmpty) {
                Logger.root.warning("received empty string");
                return count;
            }
            Map map = JSON.decode(res);
            var info = new VisitorInfo.fromJson(map);
            return info;
        });
        return f;
    }

    static void sendVisitorInfo(VisitorInfo info, String domain) {
        var request = new HttpRequest();
        var url = "${domain}${visitorInfoApiPath}";
        Logger.root.info("Sending info to ${url}");
        request.open("POST", url);
        var str = JSON.encode(info);
        request.send(str);
    }

    // Generate the root domain from location information
    static String generateRootDomain(Location location) {
        return "${location.protocol}//${location.host}/";
    }

    static const string visitorInfoApiPath = "api/1/visitorInfo";
}

内部で使っているAsynGetていう独自クラスがFutureやらCompleterやらを駆使して非同期なコードをDartっぽくなるようにラップしてる。

class AsyncGet<Output> {
    Future<Output> request(String url, Output process(String response)) {
        HttpRequest.request(url).then((r) {
            if (r.readyState == HttpRequest.DONE &&
                (r.status == 200)) {
                Output out = process(r.responseText); // convert the raw response text
                _completer.complete(out);
            }
        });
        return _completer.future;
    }

    Completer<Output> _completer = new Completer<Output>();
}

ServerChannelを経由してサーバーから取得できた来訪者情報は、visitorInfo変数に代入された段階で自動的にバインド先に反映される。これはPolymerのおかげ。その辺のバインドが書いてあるのはMainAppのビューに相当するclient/lib/components/main_app.html。

<polymer-element name="main-app">
    <template>
        <h2>Welcome to my Dart Skeleton</h2>
        <p>You are the #{{visitorInfo.count}} visitor!</p>
    </template>
    <script type="application/dart" src="main-app.dart"></script>
</polymer-element>

自分でDOMいじる必要がないから楽。

雑感

App Engine + Dartでもわりと普通に動いてる印象。ただこっちで試したところ、Channel APIをjs-interopでラップするとデプロイしたときに"Uncaught Closure call with mismatched arguments: function 'call'"とかいう謎のエラーでうまく動かないことがわかってる。でもなぜかローカルの環境だとちゃんと動く。

DartにPolymerが無くてWeb UIだった頃から追ってるけど、Polymerは素直に書けてちゃんと動くしいいと思う。Web UIの頃はところどころ未完成でいまいちだった。個人的には@observableとかのアノテーションを書くのはちょっと違和感があるんだけど、たぶん慣れの問題。あとは早めにWeb AnimationsとPolymer UI Elementsを移植してもらえると助かるかな。

そんな感じ。Dart VMはいずれChrome stableにマージされる予定らしいし、dart2jsの性能もメリメリ向上してるのでみんなどんどんDart書くといいよ。

Dart Advent Calendar 2013 12月7日担当

2013年10月20日日曜日

Creating a custom class with an event stream

Dartでウェブアプリを作る際、ある自作のクラスから何らかのイベントを飛ばしたいときがある。そのクラスが自作のWeb Componentの場合、Polymer.dartの@observableやら**Changedイベント関数を定義すればだいたいそれでどうにかなる。というか実際いまのところそれでなんとかなってる。

問題になってくるのはUIの直接絡まないクラスでイベントを定義したい場合で、そのような場合はどうすればいいのかいまいちよくわからなかった。C#で言うところのeventを定義してそのリスナーを複数登録したいだけなんだけどどうすりゃいいの、ていう状態。

その辺を改めて調べて、だいたいのやり方が把握できた気がするのでここに記しておく。なお、試したバージョンはDart SDKの0.8.1.2_r28355とGoogle App Engine(Go) の1.8.6.1。

Channel APIをラップする

今回実際に必要になったので作ったのがGoogle App Engine Channel APIのクライアントサイドJavascriptをラップするクラス。Google App EngineのChannel APIは今のところJavascript用のクライアントサイドスクリプトしか用意してないため、Dartから使おうとするとjs-interopあたりを駆使して自分でラップする必要がある。たしか非公式なパッケージもどっかにあったけど、どうせそんなアップデートされないだろうし公式にDartがサポートされるまでは自分でラップした方が確実だろう、ということで自分でやった。

Server Channel

下のServerChannelがChannel API経由のメッセージ受信、及びサーバーへのリクエスト送信を担当するクラス。Web Socketと違ってChannel APIは片方向なので、サーバーへのリクエストは都度HTTPで送る必要がある。サーバーへのインタフェースは一箇所に集めたかったからそのリクエストを出す部分もこいつに担当させてる。クラス内で使われてるClientとUserは単なるjsonをクラスにマッピングしたものと考えてもらえればOK(つまりそのクラス自体には現状何も機能が無い)。

import 'dart:async';
import 'dart:html';
import 'dart:json' as json;
import 'package:js/js.dart' as js;

/**
 * Interface class to the server
 */
class ServerChannel {

    ServerChannel(this.socket, this.client, this.user);

    Client client;
    Object socket;
    User user;

    static Future<ServerChannel> connect(String domain) {
        var request = new HttpRequest();
        var url = "${domain}${clientApiPath}";
        print("sending to ${url}");
        request.open("POST", url);
        var str = json.stringify(new Client(-1,"",""));
        print(str);

        ServerChannel chan = new ServerChannel(null, null, null);
        chan._controller = new StreamController<Object>.broadcast();
        // handler for the server response
        request.onReadyStateChange.listen((_) {
            if (request.readyState == HttpRequest.DONE &&
                (request.status == 200 || request.status == 0)) {
                print(request.responseText);
                Map map = json.parse(request.responseText);
                var client = new Client.fromJson(map["Client"]);
                var user = new User.fromJson(map["User"]);

                // connect to the server via channel api
                var appengine = js.context.goog.appengine;
                var channel = new js.Proxy(appengine.Channel, client.channelToken);
                var socket = channel.open();

                // setup handlers for the channel
                socket.onopen = new js.Callback.once(() {
                    print("channel opened");
                });

                socket.onmessage = new js.Callback.many(chan._onMessage);

                socket.onerror = new js.Callback.many(chan._onError);

                socket.onclose = new js.Callback.once(() {
                    print("channel closed");

                    // disopose Callback.many explicitly
                    socket.onmessage.dispose();
                    socket.onerror.dispose();
                });

                chan.socket = socket;
                chan.client = client;
                chan.user = user;
                chan._completer.complete(chan);
            }
        });
        request.send(str);
        return chan._completer.future;
    }

    void listen(Function onMessage) {
        _controller.stream.listen(onMessage);
    }

    void _onMessage(Object message) {
        print(message);
        // send a meesage to all the listeners
        // We need to pass the actual data in order to avoid
        // "Proxy has been invalidated" error
        _controller.add(message.data);

    }

    void _onError(Object message) {
        print(message);
        // send a message to all the listeners
        // _controller.addError(message);
    }

    void sendRemark(Remark remark, String domain) {
        var request = new HttpRequest();
        var url = "${domain}${remarkApiPath}";
        print("sending to ${url}");
        request.open("POST", url);
        var str = json.stringify(remark);
        print(str);
        request.send(str);
    }


    static const string remarkApiPath = "api/1/remark";
    static const string clientApiPath = "api/1/client";
    Completer<ServerChannel> _completer = new Completer<ServerChannel>();
    StreamController<Object> _controller;
}

ServerChannelだけだとわかりづらいので、それを実際に使ってる部分のコードも載せる。 中でやってることは以下の通り。

  1. 指定されたドメインに対してChannel APIの接続リクエストを送る
  2. 接続が成功したらServerChannelのインスタンスに対してメッセージ受信時のハンドラ(_onMessage)を登録する
class SampleClient {
    void init() {
        // connect to server
        print("Sending connect request");
        var domain = window.location.href;
        ServerChannel.connect(domain).then((chan) {
            _channel = chan;
            _channel.listen(_onMessage);
        });
    }

    void _onMessage(Object message) {
        print("onmessage at channel: ${message}");
    }

    ServerChannel _channel;
}

Stream Controller

先ほどのServerChannelでイベントを扱っているキモの部分はStreamControllerで、それ以外はあまり関係無い。StreamControllerの詳細はドキュメントの方を読んでもらうとして、簡単に言うとStreamControllerはDartのイベントまわりのインフラであるStreamを叩くための補助クラス。イベントの下回りはStream側で担当してくれるので、Streamを簡単に任意のものと組み合わせられるようにしてくれるのがStreamController。

ServerChannel.connect関数

実際にStreamController経由でイベントを飛ばすにはまずサーバーからChannel API経由でメッセージを受け取れる必要があって、その辺の準備をやっているのがconnect関数。connect関数はだいたい以下の流れになってる。

  1. ServerChannelクラスを初期化する。中のStreamControllerは複数のリスナーを想定してるのでbroadcast関数で複数リスナー用のモードにする。
  2. 指定されたドメインに対してクライアント情報を送る。上のコードではCompleterを使ってFutureを返しているので、connect関数はすぐに抜けて実際にリクエストを送って返答を待つ部分は非同期に実行される。
  3. サーバーのレスポンスを待って、レスポンスからChannel接続用のクライアントIDとその他ユーザー情報を取得する
  4. js-interopを使ってChannel APIのJavascriptコードを呼び出す。ここではChannel APIのソケットを初期化して内部のハンドラを登録してる。
  5. 完成したServerChannelインスタンスをFutureの先で待ってるコードに渡す

js-interopの落とし穴

上の手順を踏むとメッセージが来るたびにServerChannel内部の_onMessageが呼ばれるようになって、あとはそれを外部のリスナーへ通知してやればおしまい。それをやってるのがStreamControllerのadd関数なんだけどここで一点注意が必要。

どうもjs-interopから戻ってきたオブジェクトそのものへの参照は保持してはダメらしく、保持しようとすると"Exception: Proxy js-ref-8 has been invalidated. "みたいなエラーが飛ぶ。そこで上のコードではオブジェクト本体ではなく、オブジェクトが持つデータをリスナーに渡すことでエラーを回避してる。

まとめというか感想

  • UIの絡まない汎用的なイベントはStreamController経由で飛ばしましょう。UIが絡む場合は素直にPolymerの機構を使いましょう。
  • js-interop使うときはオブジェクトの参照に注意。それさえ気をつければJavascriptのライブラリもDartから割と普通に使えるかも。

2013年6月14日金曜日

Playing with Dart Web UI again

最後にWeb UIを触ってからしばらく経って、Dart自体のライブラリやらも色々と大きな変更があったようなのでまた久しぶりにWeb UIまわりを触ってみた。作ったものは前回とおなじというか、それを修正・拡張したもの。使ったのはDart Editor version 0.5.16_r23799とWeb UI version 0.4.11+1で、できあがったサンプルはここ

できたもの

動物の名前と色をリストで表示するだけのもの。


表示した直後

スライダー動かすと色も変わる

前と比べてどう変わったか

前やったときにはできなかった(もしくはめんどくさそうでやらなかった)ことがいくつかできるようになってた。具体的には以下の2つ。

  • 子のコンポーネントと親のコンポーネントをイベントでつなげられるようになった

    前試したときはちょうどStreams APIまわりができたばっかりくらいのタイミングで、それをどうカスタムなイベントに転用すればいいかよくわからなかった。その後情報がいくらか整備されてEventStreamProviderとCustomEvent使えばできるようになることがわかった、ていう感じ。個人的にこれは結構大きい。

  • input type="range"とのバインドができるようになった

    前ためしたときは確かinput type="range"とのバインドはうまく動かなかったけど、今回試したら普通に動いてた。

大きな変更があったのはanimal-summaryとcolor-editorの中だけなので、そこだけ解説する。

animal-summary

<!doctype html>
<html>
    <head>
        <link rel="import" href="color-editor.html">
    </head>
    <body>
        <element name="animal-summary" constructor="AnimalSummaryViewModel" extends="div">
            <template>
                <div>{{header}}</div>
                <color-editor id="pallet" model="{{model.color}}"></color-editor>
                <canvas id="summary" width="300" height="200"></canvas>
            </template>
            <script type="application/dart">
            import 'dart:json' as json;
            import 'package:web_ui/web_ui.dart';
            import 'package:dart_web_ui_sample/src/AnimalSummary.dart';
            import 'package:dart_web_ui_sample/src/Color.dart';

            class AnimalSummaryViewModel extends WebComponent {

                AnimalSummaryViewModel() {
                }

                String get header => "${model.name}:${model.count}";

                void increment(e) {
                    model.count++;
                }

                void created() {
                }

                void inserted() {
                    _initializeCanvas(model.color);

                    var p = query("#pallet");
                    p.xtag.onColorChanged.listen((event) {
                        // sync canvas color with the editor color
                        String str = event.detail;
                        var obj = json.parse(str);
                        Color c = new Color(obj["r"], obj["g"], obj["b"]);
                        _initializeCanvas(c);
                    });
                }

                void _initializeCanvas(Color color) {
                    var c = query("#summary");
                    var ctx = c.getContext('2d');
                    ctx.fillStyle = color.cssString;
                    ctx.fillRect(0,0,300,200);
                }

                AnimalSummary model;
            }
            </script>
        </element>
    </body>
</html>

前と変わったところで重要なのはinserted()の中。inserted()はanimal-summaryがDOMに追加された段階で呼ばれてくるんだけど、上のコードではその段階でcolor-editorが独自に定義したonColorChangedイベントにリスナーを登録してる。これの意図はcolor-editorの中で色に変更が加わったら、それをanimal-summary側で察知して表示されてる色を更新したい、というもの。

途中であらわれる謎のxtagというプロパティはこの辺に記述がある。queryから返ってきたElementはただのdivなので、自分で独自に定義したonColorChangedにアクセスするにはxtagを経由して実際のWeb Componentインスタンスにアクセスしないといけない、らしい。

ちなみに、そのうちinsertedとかはなくなるかも

color-editor

<!doctype html>
<html>
    <body>
        <element name="color-editor" constructor="ColorViewModel" extends="div">
            <template>
                <ul>
                    <li>R:<input type="range" bind-value="red" min="0" max="255" ><input type="text" readonly bind-value="red"></li>
                    <li>G:<input type="range" bind-value="green" min="0" max="255" ><input type="text" readonly bind-value="green"></li>
                    <li>B:<input type="range" bind-value="blue" min="0" max="255" ><input type="text" readonly bind-value="blue"></li>
                </ul>
            </template>
            <script type="application/dart">
            import 'dart:html';
            import 'dart:async';
            import 'dart:json' as json;
            import 'package:web_ui/web_ui.dart';
            import 'package:dart_web_ui_sample/src/Color.dart';

            class ColorViewModel extends WebComponent {
                ColorViewModel() {
                }

                static const EventStreamProvider<CustomEvent> colorChangedEvent = 
                    const EventStreamProvider<CustomEvent>('colorChanged');

                Stream<CustomEvent> get onColorChanged => colorChangedEvent.forTarget(this);

                String get red => "${model.red}";
                set red(String r) {
                    int nr = int.parse(r);
                    if (model.red == nr) {
                        return;
                    }
                    model.red = nr;
                    _notifyColorChange(model);
                }

                String get green => "${model.green}";
                set green(String g) {
                    int ng = int.parse(g);
                    if (model.green == ng) {
                        return;
                    }
                    model.green = ng; 
                    _notifyColorChange(model);
                }

                String get blue => "${model.blue}";
                set blue(String b) {
                    int nb = int.parse(b);
                    if (model.blue == nb) {
                        return;
                    }
                    model.blue = nb;
                    _notifyColorChange(model);
                }

                void created() {
                }

                void inserted() {
                }

                void _notifyColorChange(Color newColor) {
                    var str = json.stringify(newColor);
                    CustomEvent ev = new CustomEvent('colorChanged', canBubble: true, cancelable: true, detail: str);
                    dispatchEvent(ev);
                }

                Color model;
            }
            </script>
        </element>
    </body>
</html>

こっちで重要なのはEventStreamProviderとCustomEventでカスタムなイベントを定義してるところと、notifyColorChangeで実際にイベントを発行してるところ。

定義するところはもう作法が決まってるので、作法にのっとって書けば大丈夫。個人的にこの辺はWPFでDependencyPropertyを定義するときと少し似てるなーと思った。イベントを発行するところも大体作法通りなんだけど、1つ注意が必要なのはdetailの引数を渡すところ。これはドキュメントを見るとObject型を受け付けてるんだけど、実際は勝手に文字列に変換されるっぽい。最初インスタンスをそのまま渡したらリスナー側で例外が飛んで困った。そのため、今は先にこちらでjson文字列に変えてから渡してる。もちろんリスナー側でもjson文字列が来ることを前提でparseしてる。

なお、Colorをjson化するためColor側ではtoJson()ていう専用の関数を定義している。stringifyの中でそのtoJsonが呼ばれてるっぽい。

感想

しばらく放置してた間に色々変化があったようで、当初やりたかったことができるようになってきた印象。もう少し遊んでみるかも。