2016/06/08

Recent entries from same category

  1. xtag と angular1 を足して2で割った感じに使える薄い JavaScript ライブラリ「sj.js」
  2. twitter.bat
  3. jQueryプラグインとして動作するGithub Badge作ってみた。
  4. XSLとjQuery/HTMLだけで作る、amazon最速検索
  5. Google+でとりあえず全部+1押しちゃうブックマークレット書いた。

某 slack で x-tag を教えて貰ったのでちょっと遊んでみた。
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:{
    createdfunction(){},
    insertedfunction(){},
    removedfunction(){},
    attributeChangedfunction(){}
  },
  methods{
    someMethodfunction(){}
  },
  accessors{
    someAccessor{
      // links to the 'some-accessor' attribute
      attribute{},
      setfunction(){},
      getfunction(){}
    }
  },
  events{
    tapfunction(){},
    focusfunction(){}
  }
});

簡単な例として、入力値のバリデーションを行うコンポーネントを作って見ました。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{
    insertedfunction() {
      xtag.fireEvent(this"blur");
    }
  },
  methods{
    validateHaikufunction() {
      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{
    blurfunction(){
      if (this.validateHaiku())
        this.firstElementChild.style.borderColor = '';
      else
        this.firstElementChild.style.borderColor = 'red';
    }
  },
  accessors{
    value{
      attribute{},
      getfunction(){
        return this.firstElementChild.value;
      },
      setfunction(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{575}),
            },
        )
    })

    http.Handle("/", http.FileServer(http.Dir(".")))

    http.ListenAndServe(":8888"nil)
}

最初は Google Appengine で動かそうと思ったのですが、1ファイル32MB制限だったり、メモリ不足で動かなかったり色々起きたのでローカルで動かしています。

俳句

割と簡単に実装できるし他と干渉しないので仕事でも使って行けそうです。あと Microsoft がサポートしているので暫くは消えて無くならないってのも良いですね。

Posted at by