ClojureでWebアプリケーションを作り始める #2

memo Clojure

URLの扱い

ルートの定義

;; (http-method route-path bindings & body)
(GET "/" [] "index page")

これは、ローカルで起動した時にはhttp://locahost:8080/にアクセスした際に"index page"をステータス200で返します。

で、ルートのパターンにはパラメータを含むことができます。

(GET "/page/:name" [name] (str "You reached page/" name))

リクエストされたURIが"/page/**"にマッチすると、"**"の値が引数としてnameに格納されます。この場合、http://localhost:8080/page/testにアクセスすれば"You reached page/test"と表示されるようになります。


ルートパスの部分にはワイルドカード、正規表現も使えます。正規表現を使う場合にはclout.coreを:useしておきます(route-compile関数のため)。

(GET (route-compile "/article/:n" {:n #"[0-9]+"})
  [n]
  (str "You reached " n "th article."))

(GET "/other/*" [] "You reached somewhere nice.")

【追記】
ワイルドカードを使った時のパラメータ取得

(GET "/other/*" {params :params} (str "Hello " (params "*")))

HTMLの出力

HTMLを出力する場合、hiccupというライブラリを使えばベクタでHTMLのタグ、マップで属性を表現しながら出力することが出来ます。

hiccupは、Compojureを:dependenciesに書いておけば勝手に入ってくれます。

% tree lib
lib
|-- clj-stacktrace-0.1.0.jar
|-- clojure-1.1.0.jar
|-- clojure-contrib-1.1.0.jar
|-- clout-0.2.0.jar
|-- commons-codec-1.4.jar
|-- commons-fileupload-1.2.1.jar
|-- commons-io-1.4.jar
|-- compojure-0.4.1.jar
|-- hiccup-0.2.6.jar   <-これ
.
.
.

hiccupもringと同様にCompojure-0.4.0から別ライブラリになったみたいなので、"(:use hiccup.core)"しておきます。

(defn layout-index
  [title]
  (html
    (page/doctype :html5)
    [:html {:lang "ja"}
      [:head
        [:title title]]
      [:body
        [:header.body
         [:h1 title]]
        ;; CSSぽくID,Classの指定もできる
        [:div#main
         [:h1.greet "Welcome!"]
         [:nav
          [:ul
            [:li "list1"]
            [:li "list2"]
            [:li "list3"]]]]
        [:footer.body
          [:p "copyright..."]]]]))

(defroutes serve
  (GET "/" [] (layout-index "index")))

各種doctypeがhiccup.page_helpers.clj内でdoctypeというマップで宣言されているので、こいつを(:require [hiccup.page-helpers :as page])して使いたい文書型宣言のキーを指定しています。


page_helpers.clj

(def doctype
  {:html4
   (str "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\" "
        "\"http://www.w3.org/TR/html4/strict.dtd\">\n")
   :xhtml-strict
   (str "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" "
        "\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n")
   :xhtml-transitional
   (str "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" "
        "\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n")
   :html5
   "<!DOCTYPE html>"})


これで、http://localhost:8080/にアクセスすれば、生成したHTMLが返ってきます(HTMLのソースを改行する方法がよくわかりませんでした)

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>index</title>
</head>
<body>
<header class="body">
  <h1>index</h1>
</header>
<div id="main">
<h1 class="greet">Welcome!</h1>
  <nav>
    <ul>
      <li>list1</li>
      <li>list2</li>
      <li>list3</li>
    </ul>
  </nav>
</div>
<footer class="body">
  <p>copyright...</p>
</footer>
</body>
</html>

多分HTML関連は、fleet、Enliveみたいなテンプレートを使った方が良さそう。

まだ静的ファイルの配置がよくわかってないので、ソースを解読中・・・