変態なWebで入力してみる

なんか、アドベントカレンダーが途切れそうなので、やっつけですが投稿します。

前々回に作った変態Webにフォームを付けてみました。
これで、POSTやGETの入力を取得して、動的にページに反映させることが出来ます。

ということで、さっそくindexのテンプレートはこんな感じ

index.html.fleet

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Input your name</title>
</head>
<body>
<form action="./hentai" method="POST">
名前を入力してください。<input type="text" name="user" /><br />
<input type="submit" />
</form>
</body>
</html>

ユーザに入力を促して、入力されるとページが遷移するとてもシンプルなページです。
一応fleetのテンプレートとして作りましたが、動的な処理は行っていないので、テンプレートの意味はありません。

で、これを受けて表示されるのが次のテンプレート

hentai.html.fleet

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>This is Hentai web</title>
</head>
<body>
<h1><(data :user-name)>さん。あなたは変態です</h1>
<img src="<(data :link)>" />
</body>
</html>

前回のとおり、fleetでは<( )>の中にclojureのコードを埋め込めるので、入力されたuser-nameと前回同様のリンクを取得して、htmlを生成します。

で、肝になるcompojureの処理はこちら

hentai/core.clj

(ns hentai.core
  (:use compojure.core compojure.response fleet
        [ring.util.response :only (response content-type)])
  (:require [compojure.route :as route]
            [compojure.handler :as handler]))

(fleet-ns templates "templates" [:fleet :bypass])

(extend-protocol Renderable fleet.util.CljString 
    (render [this _] (-> (response (.toString this))
                       (content-type "text-html; charset=UTF-8"))))

(def hentai-link ["http://fs.plaync.jp/UF/image/6344/01/23/13/842/seigetsu_32446/854674_photo0.jpg" "http://yipev.com/data/img2/20110408084405/thumb_e1r73nh7fv301cd1uweinzjw.jpg" "http://fs.plaync.jp/UF/image/6344/01/23/13/842/seigetsu_32446/854662_photo0.jpg"])
(defn get-img []  (rand-nth hentai-link))

(defroutes main-routes
  (GET "/" _ (templates/index))
  (POST "/hentai" {params :params} (templates/hentai {:link (get-img) :user-name (params :user)}))
  (GET "/ikemen" _ "You are ikemen")
  (route/resources "/")
  (route/not-found "Page not found"))

(def app
  (handler/site main-routes))

肝になるのは、この部分↓
(POST "/hentai" {params :params} (templates/hentai {:link (get-img) :user-name (params :user)}))

{params :params}のところで、POSTされた値を受け取ってます。
受け取ってしまえば、後は前回の画像をテンプレートに渡すのと一緒で、
{:link (get-img) :user-name (params :user)}
を、テンプレートに渡してやればOKです。

このMapを渡すあたりが、clojureっぽいですね。
と、これだけでちょっとインタラクティブな感じになりました。

Webページにあなたの名前が乗るだけで、罵られ度が増しました。

デモはこちら↓
http://kuchitama.ddo.jp

Kuchitama Tech Note

はてな記法がいつまでたっても覚えられないので、はてなダイアリーからマークダウンが使えるこっちに引っ越してきました。

変態なWebで入力してみる

index.html.fleet

hentai.html.fleet

hentai/core.clj