{:company “Greative GK”
:name “Kazuhiro Hara”
:twitter “kara_d”
:github “https://github.com/karad”}
Tokyo.clj #24
Cryogenで
サイトつくろうじぇん
#tokyocljdescjop.org
自己紹介
2
原 一浩
ハラ カズヒロ
ClojureScript + Electronの
プロジェクトテンプレdescjopの作者
http://greative.jp/
( @kara_d )
http://descjop.org/
#tokyocljdescjop.org
Electron用のLeiningenプロジェクト
➡ http://descjop.org
now version 0.1.4 available
本日0.1.4リリースしました
Electron 0.26.0に対応
3
#tokyocljdescjop.org
ちょっと前の著書
➡ Play Framework 2徹底入門
- JavaではじめるアジャイルWeb開発
4
実践編(4章∼7章)を担当
✦ サンプルアプリの企画から設計、構築、テ
スト、管理画面作成までを一通り
マニュアルにはない詰まりポイントとかも
ちりばめられてます。
#tokyocljdescjop.org
アジェンダ
➡ Cryogenとはなんぞや
➡ できること
➡ Cryogenの構造
➡ はじめてのCryogen
➡ 処理の流れ
➡ コンパイラアセットを作ろう
➡ 今後の課題
5
#tokyocljdescjop.org 6
Cryogenとはなんぞや
#tokyocljdescjop.org
Cryogenとは?
➡ 読み方はクリョージェン?
ドイツ語サイトもあることからドイツ製か?
➡ Static Site Generatorの一種
jekyllとか系
➡ 静的なHTMLを生成する
markdownからコンテンツを生成
7
#tokyocljdescjop.org 8
できること
#tokyocljdescjop.org
できること
➡ MarkdownもしくはAsciiDocからHTMLを生成
➡ postおよびpageベース
➡ TOCを自動生成
➡ タグをコンテンツにふれる
➡ Bootstrap組み込み済み
➡ HTMLテンプレートによるデザインカスタマイズ
➡ シンタックスハイライト組み込み済み
➡ sitemap自動生成
➡ RSS自動生成
➡ Sass/SCSSサポート
9
#tokyocljdescjop.org
Clojure的な特徴
➡ コンフィギュレーションは、edn
➡ Markdownに書くメタデータもClojureライク
➡ HTMLテンプレートは、Selmer
➡ leiningenテンプレート用意
➡ 開発モードは、Ring/Compojureでサーバ起動
10
{:title	
  "First	
  Post!"
	
  :layout	
  :post
	
  :tags	
  	
  ["tag1"	
  "tag3"]}
#tokyocljdescjop.org
作ったもの
➡ 自社サイトをリニューアル http://greative.jp
postベースではなく、pageベース
11
#tokyocljdescjop.org 12
はじめてのCryogen
#tokyocljdescjop.org
はじめてのCryogen
➡ leiningenのテンプレートを使おう
➡ サーバとして起動するとファイル監視も開始
13
$	
  lein	
  new	
  cryogen	
  PROJECT_NAME
$	
  lein	
  ring	
  server
#tokyocljdescjop.org 14
Cryogenの構造
#tokyocljdescjop.org
Cryogenの構造
15
.
├──	
  project.clj
├──	
  resources
│	
  	
  	
  └──	
  templates
│	
  	
  	
  	
  	
  	
  	
  ├──	
  404.html
│	
  	
  	
  	
  	
  	
  	
  ├──	
  config.edn
│	
  	
  	
  	
  	
  	
  	
  ├──	
  css
│	
  	
  	
  	
  	
  	
  	
  │	
  	
  	
  └──	
  screen.css
│	
  	
  	
  	
  	
  	
  	
  ├──	
  html
│	
  	
  	
  	
  	
  	
  	
  │	
  	
  	
  └──	
  layouts
│	
  	
  	
  	
  	
  	
  	
  ├──	
  js
│	
  	
  	
  	
  	
  	
  	
  │	
  	
  	
  └──	
  highlight.pack.js
│	
  	
  	
  	
  	
  	
  	
  └──	
  md
│	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  ├──	
  pages
│	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  └──	
  posts
└──	
  src
	
  	
  	
  	
  └──	
  cryogen
	
  	
  	
  	
  	
  	
  	
  	
  ├──	
  core.clj
	
  	
  	
  	
  	
  	
  	
  	
  └──	
  server.clj
#tokyocljdescjop.org 16
処理の流れ
#tokyocljdescjop.org
処理の流れ
➡ サーバ起動
➡ (cryogen-core.watcher/start-watcher!
"resources/templates"
ignored-files
compile-assets-timed)
ここで、起動しっぱなしで、ファイル監視
➡ (compile-assets-timed)では、
cryogen-core.compiler/compile-assets
を利用している
コンパイラアセットがCryogenのキモ
17
#tokyocljdescjop.org
コンパイラアセットでやっていること
➡ resources/public内をクリーン
➡ 静的リソースファイルをコピー
➡ md内のフォルダをまとめてimgへコピー
➡ mdページからHTMLの生成
➡ mdポストからHTMLの生成
➡ タグ関係ページの生成
➡ トップページの生成
➡ アーカイブページの生成
➡ sitemap、rss、sassコンパイル
18
#tokyocljdescjop.org
コンパイラアセットに欠かせないconfig
➡ compile-assets内でこんな風に呼び出されている
➡ read-config内では、templates/config.edn
を読んでいる
19
{:keys	
  [site-­‐url	
  blog-­‐prefix	
  rss-­‐name	
  recent-­‐posts	
  
sass-­‐src	
  sass-­‐dest	
  keep-­‐files	
  ignored-­‐files]	
  :as	
  
config}	
  (read-­‐config)
#tokyocljdescjop.org
投稿ごとの画像をまとめる仕組み
➡ 通常のポスト
md/posts/2014-12-12-hoge.md
img/hoge.png
➡ 画像含めてフォルダ化
md/posts/myPost/2014-12-12-hoge.md
md/posts/myPost/hoge.png
20
#tokyocljdescjop.org 21
コンパイラアセットを作ろう
#tokyocljdescjop.org
コンパイラアセットを作ろう
➡ コンパイラはcryogen.core内で定義されており、
内容、順番の変更ができない
➡ ファイル監視時に実行されるコンパイラアセットは、
server.cljに書かれている
➡ 独自のコンパイルアセットを渡して実行することが
できる
➡ デフォルトのコンパイラアセットを利用しないことも
できる
22
#tokyocljdescjop.org
独自のコンパイラアセットは作成できる
➡ これを、
➡ こう使う
23
(defn	
  compile-­‐htaccess
	
  	
  "put	
  htaccess	
  file"
	
  	
  []
	
  	
  (println	
  (blue	
  "compiling	
  htaccess"))
	
  	
  (spit	
  (str	
  public	
  "/.htaccess")
	
  	
  	
  	
  (render-­‐file	
  "templates/.htaccess"	
  {})))
(cryogen-­‐core.watcher/start-­‐watcher!
	
  	
  "resources/templates"
	
  	
  ignored-­‐files
	
  	
  #(do	
  (compile-­‐assets-­‐timed)	
  (compile-­‐htaccess))
#tokyocljdescjop.org 24
今後の課題
#tokyocljdescjop.org
今後の課題
➡ pagesの階層化
➡ あまりカスタマイズが過ぎる場合、自作のがいいかも
25
{:company “Greative GK”
:name “Kazuhiro Hara”
:twitter “kara_d”
:github “https://github.com/karad”}
Tokyo.clj #24
Cryogenでサイトつくろうじぇん
ありがとうございました!!

Cryogenでサイトつくろーじぇん