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を動かすには以下の手順を踏む必要がある。
- GAE/GoのSDKとDartのSDKをダウンロードしてきてパスを通す
- git clone git@github.com:rillomas/gae-go-dart-skeleton.gitする。あるいは自分のとこにForkしてそっちをcloneする
- pub getして必要なパッケージを落としてくる
- dev_appserver.pyを使ってローカルで動かす
- （デプロイする場合は）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日担当
