Cryogen ∩ Klipseでブログ記事をコードプレイグラウンドにしてみる
WordPressにグッバイしてCryogenにブログ機能を置き換えて数日、すごい機能があるのを見つけた。Lisp-Clojure系の記事書くには必須ではないだろうか。実におもしろい！
基本、ブログは静的なもの。読み物として文字をおうものでCryogenの基本もそう。 しかし、バニラの機能で、読者が記載されたコードをいじって遊べるようにできたらるらしい。 ？しかも少ない手間で！
今回はCryogen内で Klipse ってやつを有効にして、ブラウザ上で動くLispのコードブロックを埋め込んでみる！！
1. Klipseってなに？
Klipseは、ブラウザ上でClojureやClojureScriptのコードをリアルタイムに評価・実行してくれるるJavaScriptプラグイン。 サーバーサイドでの実行環境を用意する必要がなく、読者のブラウザ上でそのまま動くのがいい。 こちらもあちらも攻撃リスクがない。
では本記事で早速動かしてみたい。
2. 定番のコードスニペットを動かしてみる
以下のコードブロックは、Klipseによってそのまま実行可能なREPLになっている。10 の部分を書き換えたりして遊べる！
(defn factorial [n]
(reduce * (range 1 (inc n))))
(factorial 10)
ブラウザの内でClojureが動くのもすごいが、Clojure Script -> javascript になっているんだろう。書き換えて、関係ないコード書いてもちゃんと動くのが熱い♪((o(´Д｀o*)♪(*o´Д｀)o))♪……！
3. Reagent (React) コンポーネントも動く！
Klipseの真骨頂は、単なる式評価だけじゃなくて Reagent（ClojureScript用のReactラッパー）を使ったインタラクティブなUIまでブラウザ上で動くところ。
下のコードを書き換えて、コンポーネントの動きを変えてみることもできる。
(ns sample.core
(:require [reagent.core :as r]))
(defn counter-component []
(let [count (r/atom 0)]
(fn []
[:div {:style {:padding "15px" :border "1px solid #d19a66" :border-radius "8px"}}
[:p "現在のカウント: " [:strong @count]]
[:button {:class "btn btn-primary"
:on-click #(swap! count inc)}
"カウントアップ！"]])))
[counter-component]
4. Tips：結局、コイツはどう役に立つんだい？
「ブラウザでコードが動いておもしろい！」で終わらせるにはもったいない。Cryogen ∩ Klipseのコンビネーションが、個人開発や技術ブログの運営でどう使えるのか、新米Lisperの視点で活用案を考えたい。
① 技術ドキュメントやAPI解説の「生きたサンプル」にする
文章や静止画のコード片を載せるだけだと、「本当に動くのか？」「コピペして環境構築するのがめんどくさい」と読者が離脱しがち。 Klipseなら、記事を読んだその場で挙動を試せるため、**「REPL駆動ドキュメント」**のようなリッチな技術解説が書ける。Clojureのデータ構造（マップやベクタの操作など）の解説には最強の相棒になる。
② ちょっとしたインタラクティブ・デモの埋め込み
わざわざ別でWebアプリやCodePenを作らなくても、ブログ記事の一節に小さなReagent（React）コンポーネントを埋め込める。 「ClojureScriptでこんなUIがサクッと作れるぜ」という動的な挙動や、ちょっとしたアルゴリズムの視覚化ツールを記事の文脈にシームレスに同居させられるのは、表現の幅がグッと広がる。
③ 読者とのインタラクションのハードルをゼロにする
「手元にJVM環境やLein / Clojure CLIを入れていないスマホ勢やビギナー」であっても、ブラウザだけでLispのシンタックスやコードの動きを体感してもらえる。 「Clojureって難しそう……」という心理的ハードルを、壁越えしてもらう助けになればいい。
まとめ
Cryogenで記事を書くときに :klipse true をメタデータに仕込んで、クラスを指定するだけで、こんなにリッチでインタラクティブなブログが作れちまうんだからLispの生態系は奥が深い。
Lisp学習まとめみたいな活用からはじめたい。