萌えキャラとは何だったのか

plantuml にはいつもお世話になっております。mix3です。

リアルタイムプレビュー

plantuml のサイトにリアルタイムプレビューはあってレスポンンスが早いので重宝するのですが

• 広告がチラチラして邪魔
• 普通のフォームなのでインデント効かない
  • タブ使えない
• 狭い

と不満がなくもないので自前のプレビュー環境を作りたいな、とは過去に思ってやろうとしたもあるのですが、

plantumlのコマンドを使うとどうもフォーカスが移ってしまうらしくコンソールが前面に来るという問題があって諦めた経緯があります。

が、最近になってこんな記事を見つけました

Mac + emacs + PlantUML でさくさく UML 職人

JAVA_TOOL_OPTIONS="-Djava.awt.headless=true" watcher --dir ./uml/ -- 'java -jar /foo/bar/plantuml.jar ./uml/*.uml && open -g -a Preview ./img/*.png'

どうやら JAVA_TOOL_OPTIONS="-Djava.awt.headless=true" で awt の設定を変更することでフォーカスの問題を回避出来るようです

ということで全然サクっとはいかなかったっけど作りました。

plantumlor

go-bindata-assetfs なるものがある

goで静的ファイル配信をするときは net/http/#FileServer を使うと思うのですが go-bindata でまとめたときにどうしたらいいか、という問題があって、

@fujiwara さんが記事にしていた Consul KVSをバックエンドにしたリアルタイムダッシュボード #monitoringcasual では、http.Dir のところを自作していているようだったので、それを拝借しようかなと思ったのですが、

よくよく探してみると go-bindata-assetfs という bindata の生成から対応しているものがあったのでそっちを使うようにしてみました。

go-server-starter と manners

別にいらないんだけど manners を使って graceful shutdown に対応させて go-server-startar を使って graceful restart も出来るようにしています。

func serve(mux http.Handler) {
    l, _ := ss.NewListener()
    if l == nil {
        var err error
        l, err = net.Listen("tcp", fmt.Sprintf("%s:%d", host, port))
        if err != nil {
            log.Fatalf("Failed to listen to port %d", port)
        }
    }
    s := manners.NewServer()
    s.Serve(manners.NewListener(l, s), mux)
}

ちゃんと確認してないけど多分これでいけるはず

WAF無し

Build You Own Web Framework In Go を参考にWAF無しで作ってみました。

middleware のところで func を返すようにして Alice でメソッドチェインにするところとかなんかスマートな感じがして好き。

func hogeHandler(next http.Handler) http.Handler {
    fn := func(w http.ResponseWriter, r *http.Request) {
        // before
        next.ServeHTTP(w, r)
        // after
    }
    return http.HandlerFunc(fn)
}

func hogeHandler(w http.ResponseWriter, r *http.Request) {
    // ...
}

func main() {
    commonHandlers := alice.New(hogeMiddleware)
    http.Handle("/about", commonHandlers.ThenFunc(hogeHandler))
    http.ListenAndServe(":8080", nil)
}

contextとか、サードパーティの routing ライブラリの組み込みとか色々参考になる。まあWAF使わない場合の話だけども。

js-base64

リアルタイムプビューを作る上で一番詰まったのが js-base64

• $.base64.encode(RawDeflate.deflate(Base64.utob("hoge"))
  • y8hPTwUA
• Base64.encode(RawDeflate.deflate(Base64.utob("hoge")))
  • w4vDiE9PBQA=

こんな感じで js-base64 を使うと encode の結果が違って「サーバで上手く解答出来ないむきーっ！！！」て半日潰してしまった。

結局 Base64.btoa(RawDeflate.deflate(Base64.utob("hoge"))) とすると大丈夫だった。encode と btoa って違うのん？と未だに良くわかっていません。

react.js

せっかくだから色々試さないと、ということで最初はjqueryでごりごりやるかなと思ったけど consul-kv-dashboard で react.js を使っているのを見て試してみました

Content
â”— Editor
â”— Image

こんな感じで Component を用意

• Editor は onChange で textarea の入力内容を Content に通知
• Content は1秒毎に変更をチェックして変更があったら Image ã‚’æ›´æ–°
• Image は更新毎に渡された入力内容を元に rawdeflate と base64 (と / が混じるので _ にreplace) して url を生成して img タグを描画

こんな感じで 一人React.js Advent Calendar 2014 の10日目あたりまでを参考にしてみた

コンポーネントはモデルを持っていて、どう描画したら良いかを知っているという点で wicket の View に近いなぁと感じた。もっとプレーンな html で構築出来たら最高だなぁって思った。

テンプレートエンジン的な考え方や、vue.js angular.js のような MVVM の感覚に慣れていると大分混乱するなぁってぐらい考え方が違ってて面白い。

どちらかというと angular.js よりも好みなのでもっとメジャーになるといいなぁ。

ということで

まとめて書き出してみるとなんか色々触った感があって楽しかった。react.js が今後どうなるか注目ですね。