masato's web site

Reactアプリは親子関係があるcomponentで構成された木構造になります。前回は静的なcomponentを作成しましたが実際のcomponentはstateとpropsを持ちます。Reagentではatomを使いReactのstateを抽象化します。stateとpropsの厳密な区別が不要で、Reactよりも複雑なモデルをcomponentで作成することができます。

ReactをClojureScriptで書くため、Reagentの勉強をまずはratomを使わない簡単なコンポーネントを作るところからはじめようと思います。ClojureScriptとFigwheelのシンプルなテンプレートの[reagent-figwheel](https://github.com/gadfly361/reagent-figwheel)を使ったサンプルを探していると、[Static Mock Using Reagent](http://www.okaythree.com/articles/2015/04/21/static-mock-using-reagent/)のよい例が見つかりました。参考になるプログラムを読みながら実際に手を動かしながら勉強していくのが一番よいです。

Raspberry Pi Model Bが壊れてしまったので新しくRaspberry Pi 2を購入しました。T-Cobblerを間違えて配線してしまったら電源が入らなくなりました。最近不安定だったのでそろそろ買い換え時期だったかも知れません。Model Bで作業していた環境を最初から設定していきます。

ReactとReagentの勉強のためClojureScriptのWebフレームワークを調べています。開発がとても盛んでいろいろなライブラリで構成されコードの書き方も違うので迷います。Bootstrapのフォームを作るのが目的だったのですが。Luminusやre-frameあたりがよさそうです。ReactではないですがHoplonも気になります。

ReagentはFacebook ReactのClojureScriptで書かれたインタフェースです。OmよりもよりClojureらしく書けるので使いやすいです。Reagentを使うとClojureScriptのREPLが使えるのですが、devモードではブラウザはlocalhostとWebSocketで通信するようになっています。開発はクラウド上で行っているのでdevモードでもリモートから操作できる必要があるので動作する環境を作ってみました。

Nginxを拡張してLuaが便利なOpenRestyを使って簡単なAPIのサンプルを書いてみます。バックエンドのRedisに問い合わせてJSON形式でレスポンスを返します。LuaのRedisクライアントはlua-resty-redisを使っているようです。Luaで組み込みのプログラムが書けるので、リバースプロキシにも使うOpenRestyのところで、バックエンドのアプリのちょっとしたAPIの差異を吸収することができます。

前回Docker Composureを使って作成したCompojureプロジェクトに、curlからPOSTするとInvalid anti-forgery tokenが発生してしまいました。デフォルトでCSRF対策用トークンを追加しないとPOSTはできない仕様になっています。開発中はanti-forgeryを無効にした方が簡単です。いろいろ調べるとStackOverflowにあった方法でうまくいきました。

前回Docker ComposeでSailsの開発環境を用意しました。Clojureの勉強用環境もDocker Composeで作ってみます。開発用のJavaはDockerコンテナを使いながら、ホストマシンのEmacsを使ってコードを編集できるようにします。

開発中のRESTクライアントはcurlコマンドを使っていましたが、他の人に使ってもらうためにコマンドラインツールが必要になります。サーバーと同じ開発言語のNode.jsで実装します。サーバーやデータベースのコンテナとセットにしてDocker Composeで配布する予定ですが、動作確認のためとりあえず単体で動くサンプルを作成しました。

温度や湿度のセンサーの他に手軽に扱えるセンサーに照度センサーがあります。単位はルクスで計測できます。今回はAdafruit TSL2561デジタル照度センサーを用意しました。光センサーには赤外線を使う人感センサーもあります。組み合わせて使うとIoTっぽいことができそうです。