X-Tag ★ Web Components
Docs Table of Contents Getting Started Registration - Where it All Begins The most important method ...
http://x-tag.github.io/
X-Tag は Web Component を簡単きれいに作れるライブラリで、Microsoft からのサポートを受けている事をウリにしているらしいです。動作に必要なのはカスタムタグがサポートされているブラウザというだけで、polyfills も使う事が出来ます。
簡単なチュートリアルが Docs に書かれているのでパッと見ただけでだいたい API が予想できます。自前のメソッドや属性、イベントを定義する事が出来るのでコンパクトながら強力な Web Component を作る事が出来ます。何が良いかって1ファイルで動くのが良いですね。
xtag.register('x-foo', {
content: '‹input/›',
lifecycle:{
created: function(){},
inserted: function(){},
removed: function(){},
attributeChanged: function(){}
},
methods: {
someMethod: function(){}
},
accessors: {
someAccessor: {
// links to the 'some-accessor' attribute
attribute: {},
set: function(){},
get: function(){}
}
},
events: {
tap: function(){},
focus: function(){}
}
});
簡単な例として、入力値のバリデーションを行うコンポーネントを作って見ました。HTML は以下の様に記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>俳句</title>
<script src="x-tag-core.min.js"></script>
</head>
<body>
<p>例: 古池や蛙飛び込む水の音</p>
<x-haiku value=""></x-haiku>
<input type="button" value="送信" />
<script src="xtag-haiku.js"></script>
<script>
</script>
</body>
</html>
そしてソース
xtag.register("x-haiku", {
content: '<input type="text" placeholder="俳句を入力して下さい"/>',
lifecycle: {
inserted: function() {
xtag.fireEvent(this, "blur");
}
},
methods: {
validateHaiku: function() {
if (this.value.length > 0) {
var s = document.createElement('script');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8888/check?text=' + encodeURIComponent(this.value), false);
xhr.send();
return JSON.parse(xhr.responseText).result;
}
return false;
}
},
events: {
blur: function(){
if (this.validateHaiku())
this.firstElementChild.style.borderColor = '';
else
this.firstElementChild.style.borderColor = 'red';
}
},
accessors: {
value: {
attribute: {},
get: function(){
return this.firstElementChild.value;
},
set: function(value){
this.firstElementChild.value = value;
}
}
}
});
プレースホルダの通り、俳句を入力して貰い俳句でない場合には入力ボックスを赤枠表示する Web Component です。さすがに js だけで俳句かどうかを検証するのは難しいので golang でサーバを書きました。
package main
import (
"encoding/json"
"net/http"
"strings"
"github.com/mattn/go-haiku"
)
func main() {
http.HandleFunc("/check", func(w http.ResponseWriter, r *http.Request) {
params := r.URL.Query()
ts, ok := params["text"]
if !ok || len(ts) != 1 {
http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
return
}
s := strings.TrimSpace(ts[0])
if s == "" {
http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
return
}
w.Header().Set("Access-Control-Allow-Origin", "*")
json.NewEncoder(w).Encode(
struct {
Result bool `json:"result"`
}{
haiku.Match(s, []int{5, 7, 5}),
},
)
})
http.Handle("/", http.FileServer(http.Dir(".")))
http.ListenAndServe(":8888", nil)
}
最初は Google Appengine で動かそうと思ったのですが、1ファイル32MB制限だったり、メモリ不足で動かなかったり色々起きたのでローカルで動かしています。
割と簡単に実装できるし他と干渉しないので仕事でも使って行けそうです。あと Microsoft がサポートしているので暫くは消えて無くならないってのも良いですね。
