みけです。
html…面倒くさい
ドラクエ廃人ゆえ、htmlを組むのが凄まじく
面倒くさく感じています。
そういうときこそ、
Groovyと言いたいのですが…
GroovyのMarkupBuilderも、
いいにはいいのですが、
なんだかんだいって面倒くさい。
もう少し簡単に
というわけで、面倒だな~と感じつつ作業していたのですが、
WebStormのプラグインをいじっていたら、
ふとJadeを発見しました。
Jadeとは?
JadeはHamlに影響を受けて作られた
テンプレートエンジンです(詳しくはこちら)。
実装されている言語は下記のとおりです。
早速使ってみました。
Javaしかできないので、必然的にjade4jを使うことになりました。
必要なGradleの設定は以下のとおりです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
apply plugin : 'groovy' | |
apply plugin : 'idea' | |
sourceCompatibility = 1.7 | |
targetCompatibility = 1.7 | |
group = 'org.mikeneck.jade4g' | |
repositories { | |
mavenCentral () | |
maven { | |
url 'https://github.com/neuland/jade4j/raw/master/releases' | |
} | |
} | |
dependencies { | |
groovy 'org.codehaus.groovy:groovy:1.8.8' | |
groovy 'de.neuland:jade4j:0.2.15' | |
testCompile ('junit:junit-dep:4.10') { | |
exclude module : 'hamcrest' | |
} | |
} |
サンプルまでに、学生の一覧を表示してみるという
アプリケーションを作ってみました。
学生クラスはこれ。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
package org.mikeneck.jade4g.model | |
class Student { | |
long id | |
String firstName | |
String lastName | |
int grade | |
} |
Jadeのテンプレートはこんな感じ。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!!! 5 | |
html | |
head | |
title= pageName | |
body | |
ul#students | |
for student in students | |
li #{student.firstName} #{student.lastName} grade #{student.grade} | |
p= studentsSize |
Jade4Jを使ってみるクラスはこれ。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
package org.mikeneck.jade4g | |
import org.junit.Test | |
import org.mikeneck.jade4g.model.Student | |
import de.neuland.jade4j.Jade4J | |
class StudentPrint { | |
@Test | |
void print() { | |
def id = 0L | |
def students = [ | |
['Kiriani', 'James'], | |
['Yohan', 'Brake'], | |
['Justine', 'Gatlin'], | |
['Felix', 'Sanchez'], | |
['Richard', 'Thompson'] | |
].collect { item -> | |
return new Student(id : id++, | |
firstName: item[0], | |
lastName: item[1], | |
grade: (id + 1) * 7 % 3 + 1) | |
} | |
def map = [pageName : 'Students List', | |
students : students, | |
studentsSize : students.size()] | |
def url = this.class | |
.classLoader | |
.getResource('web/model.jade') | |
def html = Jade4J.render(url, map) | |
println html | |
} | |
} |
出力されたhtmlはこんな感じ。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Students List</title> | |
</head> | |
<body> | |
<ul id="students"> | |
<li>Kiriani James grade 3</li> | |
<li>Yohan Brake grade 1</li> | |
<li>Justine Gatlin grade 2</li> | |
<li>Felix Sanchez grade 3</li> | |
<li>Richard Thompson grade 1</li> | |
</ul> | |
<p>5</p> | |
</body> | |
</html> |
全般的に
すごい簡単でいいですね。
html/xml形式の堅っ苦しさがなくて、
非常に書きやすいですね。
これは今後ヒットしそうな気がします。