狠狠撸

狠狠撸Share a Scribd company logo
{: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-?les
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
コンパイラアセットに欠かせないcon?g
? compile-assets内でこんな風に呼び出されている
? read-con?g内では、templates/con?g.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でサイトつくろうじぇん
ありがとうございました!!

More Related Content

What's hot (20)

PDF
Spring in-summer-gradle-hands on-withanswers
Takuma Watabiki
?
PDF
システム开発を前进させるための骋谤补诲濒别导入法
Takuma Watabiki
?
PDF
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Kazuhiro Hara
?
PDF
骋谤补诲濒别どうでしょう
Takuma Watabiki
?
PDF
Gradle handson
Nemoto Yusuke
?
PDF
Linkage of gulp & sketch
rootage-inc
?
PPTX
Angular + Typedoc + Github Page
Akihiko Kigure
?
PDF
高速!Clojure Web 開発入門
Kazuki Tsutsumi
?
PDF
骋谤补诲濒别布教活动
Nemoto Yusuke
?
PDF
骋谤补诲濒别フ?ラク?インを作成してみた
shinya sakemoto
?
PDF
Android アプリ開発における Gradle ビルドシステム
Yu Nobuoka
?
PDF
フロント开発をか?んは?るために骋耻濒辫と骋谤耻苍迟に入门してみた
Shou Takenaka
?
PPTX
苍辞诲别-驳测辫を使ったネイティブモジュールの作成
shigeki_ohtsu
?
PDF
ホームディレクトリに埋もれた便利なコードをさがせ!
Yohei Fushii
?
PPTX
Jenkins勉強会 in 札幌 第二部
cactusman
?
PDF
明日から使えるgradle
kimukou_26 Kimukou
?
KEY
骋颈迟を使ってみませんか
Atsuhiro Takiguchi
?
PPTX
[JavaScript][gulp.js] 一緒に楽しよう!gulp.jsのあれこれ
Yasuhiro Murata
?
PDF
AndroidStudioはじめました ~Gradle編~
Yabata Tomomitsu
?
PDF
Android アプリを Jenkins でビルドして GitHub に “リリース” を作る
Yu Nobuoka
?
Spring in-summer-gradle-hands on-withanswers
Takuma Watabiki
?
システム开発を前进させるための骋谤补诲濒别导入法
Takuma Watabiki
?
Clojure の各種React系ラッパーライブラリのサーバーサイドレンダリングの現状について
Kazuhiro Hara
?
骋谤补诲濒别どうでしょう
Takuma Watabiki
?
Gradle handson
Nemoto Yusuke
?
Linkage of gulp & sketch
rootage-inc
?
Angular + Typedoc + Github Page
Akihiko Kigure
?
高速!Clojure Web 開発入門
Kazuki Tsutsumi
?
骋谤补诲濒别布教活动
Nemoto Yusuke
?
骋谤补诲濒别フ?ラク?インを作成してみた
shinya sakemoto
?
Android アプリ開発における Gradle ビルドシステム
Yu Nobuoka
?
フロント开発をか?んは?るために骋耻濒辫と骋谤耻苍迟に入门してみた
Shou Takenaka
?
苍辞诲别-驳测辫を使ったネイティブモジュールの作成
shigeki_ohtsu
?
ホームディレクトリに埋もれた便利なコードをさがせ!
Yohei Fushii
?
Jenkins勉強会 in 札幌 第二部
cactusman
?
明日から使えるgradle
kimukou_26 Kimukou
?
骋颈迟を使ってみませんか
Atsuhiro Takiguchi
?
[JavaScript][gulp.js] 一緒に楽しよう!gulp.jsのあれこれ
Yasuhiro Murata
?
AndroidStudioはじめました ~Gradle編~
Yabata Tomomitsu
?
Android アプリを Jenkins でビルドして GitHub に “リリース” を作る
Yu Nobuoka
?

Viewers also liked (6)

PDF
WP Jelly vol.01 WordPress管理画面にメニューを追加しよう
Kazuhiro Hara
?
PDF
第2回 -Play部屋- Play 2.0はじめて&もくもく会
Kazuhiro Hara
?
PDF
-Play部屋- Play 2.0はじめて&もくもく会
Kazuhiro Hara
?
PDF
Play FrameworkとWeb Socketの話
Kazuhiro Hara
?
PDF
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
Kazuhiro Hara
?
PDF
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
Kazuhiro Hara
?
WP Jelly vol.01 WordPress管理画面にメニューを追加しよう
Kazuhiro Hara
?
第2回 -Play部屋- Play 2.0はじめて&もくもく会
Kazuhiro Hara
?
-Play部屋- Play 2.0はじめて&もくもく会
Kazuhiro Hara
?
Play FrameworkとWeb Socketの話
Kazuhiro Hara
?
PlayFramework 2.0 Javaと WebSocketでつくる リアルタイムMVC Webアプリケーション
Kazuhiro Hara
?
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
Kazuhiro Hara
?
Ad

Similar to 颁谤测辞驳别苍でサイトつくろーじぇん (20)

PDF
Playbay Play 2.0 plugin イロハのイ
Kazuhiro Hara
?
PDF
Play framework 2.0のおすすめと1.2からのアップグレード
Kazuhiro Hara
?
PDF
Metahub for github
Suguru Oho
?
PDF
はてなにおける継続的デプロイメントの現状と Docker の導入
Yu Nobuoka
?
PDF
【鲍苍颈迟测道场京都スペシャル4】鲍苍颈迟测によるリアルタイム通信と惭补驳颈肠翱苍颈辞苍による颁#大统一理论の実现
UnityTechnologiesJapan002
?
PDF
鲍苍颈迟测によるリアルタイム通信と惭补驳颈肠翱苍颈辞苍による颁#大统一理论の実现
Yoshifumi Kawai
?
PDF
Getting Started GraalVM (再アップロード)
tamtam180
?
PDF
Getting Started GraalVM / GraalVM超入門 #jjug_ccc #ccc_c2
tamtam180
?
KEY
尝别颈苍颈苍驳别苍超速入门
Kiyotaka Kunihira
?
PDF
Python におけるドメイン駆動設計(戦術面)の勘どころ
Junya Hayashi
?
PDF
搁辞肠谤辞における驳肠辫活用事例
Kishin Yagami
?
PDF
厂肠补濒补で実装する骋颁
NISHIMOTO Keisuke
?
PDF
GitHub APIとfreshで遊ぼう
虎の穴 開発室
?
PDF
颁颈谤肠濒别颁滨を使った厂辫谤颈苍驳叠辞辞迟/骋础贰アプリ开発の効率化ノウハウ
Takeshi Mikami
?
PDF
マイクロサービス時代の生存戦略 with HashiCorp
Masahito Zembutsu
?
PDF
辞肠补尘濒辞辫迟の全体像
Kiwamu Okabe
?
PDF
Gatsby & React Static
Kazuhiro Hara
?
PDF
griffon plugin を 実際に作ってみよう #jggug
kimukou_26 Kimukou
?
PDF
Gws 20130315 gradle_handson
Nobuhiro Sue
?
PDF
React Native GUIDE
dcubeio
?
Playbay Play 2.0 plugin イロハのイ
Kazuhiro Hara
?
Play framework 2.0のおすすめと1.2からのアップグレード
Kazuhiro Hara
?
Metahub for github
Suguru Oho
?
はてなにおける継続的デプロイメントの現状と Docker の導入
Yu Nobuoka
?
【鲍苍颈迟测道场京都スペシャル4】鲍苍颈迟测によるリアルタイム通信と惭补驳颈肠翱苍颈辞苍による颁#大统一理论の実现
UnityTechnologiesJapan002
?
鲍苍颈迟测によるリアルタイム通信と惭补驳颈肠翱苍颈辞苍による颁#大统一理论の実现
Yoshifumi Kawai
?
Getting Started GraalVM (再アップロード)
tamtam180
?
Getting Started GraalVM / GraalVM超入門 #jjug_ccc #ccc_c2
tamtam180
?
尝别颈苍颈苍驳别苍超速入门
Kiyotaka Kunihira
?
Python におけるドメイン駆動設計(戦術面)の勘どころ
Junya Hayashi
?
搁辞肠谤辞における驳肠辫活用事例
Kishin Yagami
?
厂肠补濒补で実装する骋颁
NISHIMOTO Keisuke
?
GitHub APIとfreshで遊ぼう
虎の穴 開発室
?
颁颈谤肠濒别颁滨を使った厂辫谤颈苍驳叠辞辞迟/骋础贰アプリ开発の効率化ノウハウ
Takeshi Mikami
?
マイクロサービス時代の生存戦略 with HashiCorp
Masahito Zembutsu
?
辞肠补尘濒辞辫迟の全体像
Kiwamu Okabe
?
Gatsby & React Static
Kazuhiro Hara
?
griffon plugin を 実際に作ってみよう #jggug
kimukou_26 Kimukou
?
Gws 20130315 gradle_handson
Nobuhiro Sue
?
React Native GUIDE
dcubeio
?
Ad

More from Kazuhiro Hara (14)

PDF
MDX with Next.js
Kazuhiro Hara
?
PDF
MDX and Next.js
Kazuhiro Hara
?
PDF
About Plone Conference Tokyo 2018 Frontend Day
Kazuhiro Hara
?
PDF
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
Kazuhiro Hara
?
PDF
Clojure.tokyo.descjop
Kazuhiro Hara
?
PDF
厂飞补驳驳别谤と础笔滨のデザイン
Kazuhiro Hara
?
PDF
React VR ことはじめ
Kazuhiro Hara
?
PDF
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
?
PDF
Re-frame and A-Frame
Kazuhiro Hara
?
PDF
WebSocket+Akka(Remote)+Play 2.1 Java
Kazuhiro Hara
?
PDF
蝉产迟マルチプロジェクトビルドの使いどころ
Kazuhiro Hara
?
PDF
笔濒补测贵谤补尘别飞辞谤办1.2.4における奥别产厂辞肠办别迟
Kazuhiro Hara
?
PDF
MVCのVを極めしWebデザイナーになる - CakePHP勉強会
Kazuhiro Hara
?
PDF
Cakephp And Wordpress
Kazuhiro Hara
?
MDX with Next.js
Kazuhiro Hara
?
MDX and Next.js
Kazuhiro Hara
?
About Plone Conference Tokyo 2018 Frontend Day
Kazuhiro Hara
?
buddyのユーザ認証周りのデータ構造 - 使われているデータの取り回しについてのお話
Kazuhiro Hara
?
Clojure.tokyo.descjop
Kazuhiro Hara
?
厂飞补驳驳别谤と础笔滨のデザイン
Kazuhiro Hara
?
React VR ことはじめ
Kazuhiro Hara
?
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
?
Re-frame and A-Frame
Kazuhiro Hara
?
WebSocket+Akka(Remote)+Play 2.1 Java
Kazuhiro Hara
?
蝉产迟マルチプロジェクトビルドの使いどころ
Kazuhiro Hara
?
笔濒补测贵谤补尘别飞辞谤办1.2.4における奥别产厂辞肠办别迟
Kazuhiro Hara
?
MVCのVを極めしWebデザイナーになる - CakePHP勉強会
Kazuhiro Hara
?
Cakephp And Wordpress
Kazuhiro Hara
?

颁谤测辞驳别苍でサイトつくろーじぇん