cryogenでサイトつくろーじぇん
TRANSCRIPT
{: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.orgnow 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.jppostベースではなく、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.mdmd/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でサイトつくろうじぇん
ありがとうございました!!