luminusでomを使う #Clojure

omをウェブアプリに組み込む際の備忘録です。
omを使いたいだけなら、専用のテンプレが簡単ですが、luminusと組み合わせて楽にWebアプリ化したかったので、

１，Luminus+ClojureScriptでプロジェクト作成
２，omライブラリの追加
３，ルーティングの設定
４，テンプレート作成
５，ClojureScriptを書く

という流れになります。

Luminus+ClojureScriptのテンプレプロジェクトを作成

$ lein new luminus omtest +cljs
$ cd omtest/

omライブラリを追加する

現在のluminusでプラグインにデフォルトで入ってくる"lein-ancient"のバージョンが古いせいでエラーになることがあるので、最新バージョンに変更しておく

(defproject
  :dependencies
    [org.omcljs/om "0.8.8"] ;<-追加
  :plugins
    [lein-ancient "0.6.2"] ;<-修正

ルーティングの設定

新しいページ用のtemplateとルーティングパスをhome.cljに追加（ここに追加すべきじゃないけど面倒なのでとりあえずここに書いた）

routes/home.clj

(defn hello-page []
      (layout/render
        "hello.html"))

(defroutes home-routes
  ~
  (GET "/hello" [] (hello-page))
  ~

cljs->jsの自動コンパイルを走らせて、アプリを立ち上げる

$ lein cljsbuild auto
$ lein ring server

テンプレートを作成

デフォルトで作成されている、"home.html"を流用し、修正点は以下だけです。

①jsが書き込む空のdivタグ
②で、対象のclojurescript(src-cljs/helloom/core.cljs)の名前空間を指定

resources/templates/hello.html

<html>
  <head>
      <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>om demo</title>
  </head>
  <body>
    <div id="app"></div>　①
    <!-- scripts and styles -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    {% style "/css/screen.css" %}

    <script src="//code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var context = "{{servlet-context}}";
    </script>
    {% if dev %}
      <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react.js"></script>
      {% script "/js/out/goog/base.js" %}
      {% script "/js/app.js" %}
      <script type="text/javascript">goog.require("helloom.core");</script> ②
    {% else %}
      <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react.min.js"></script>
      {% script "/js/app.js" %}
    {% endif %}
  </body>
</html>

ClojureScriptを書く

公式チュートリアルの通りにhelloworldしてるだけです。

src-cljs/helloom/core.cljs

(ns helloom.core
  (:require [reagent.core :as reagent :refer [atom]]
            [secretary.core :as secretary]
            [reagent-forms.core :refer [bind-fields]]
            [ajax.core :refer [POST]]
            [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true])
  (:require-macros [secretary.core :refer [defroute]]))

(def app-state (atom {:text "Hello OM!!"}))

(om/root
 (fn [app owner]
   (reify om/IRender
     (render [_]
       (dom/h1 nil (:text app)))))
 app-state
 {:target (. js/document (getElementById "app"))})

htmlとcljsを編集すると、それぞれ自動で読み込まれるので、ブラウザで、"アドレス/hello"にアクセスすると、app-stateに定義した"Hello OM!!"が動的に表示されるはずです。
あとは好きなだけClojurescriptを書けばよろし。
以上です。