#旅立ち(なぜ旅立たなければいけないのか?)
かつて人間は、"一つ"の言葉を使っていたという。
しかし、その傲慢さ故に”バベルの塔”を建築し...。
時はながれ現在、Webページを作成するのにHTML、CSS、JSと異なる3つの言語を使うことになった。
旅にでる必要なんてなかった。(時間があった、暇だなー)
若ハゲのいたり、そうだ!旅に出てみよう!
冒険の目的
はたしてHTML、CSS、JSをRubyで統一的に記述することが可能であるか?
Jabverwockとは
Webページを構成するためのRubyのコードです。
HTML、CSS、JSをそれぞれClassとして表現してみました。
GitHub: Jabverwockにまとめています(まとめ中)。
Jabverwockを使ったもっとも簡単なコードは以下のようになります。
require 'jabverwock'
class Test
include Jabverwock
doc = DOCTYPE.new
doc.pressConfig(name: n, dist: ~/path/)
doc.press
end
Test.new
$ ruby test.rb
<!DOCTYPE html>
CSSはウォーミングアップ
CSSはクラスとして実装しています。
heading = HEADING.new(1).contentIs "Home page"
heading.css.color("green")
または
heading = HEADING.new(1).contentIs "Home page"
c = CSS.new.font_size(10)
heading.addCss = c
JSは難攻不落の化物だ
JSもクラスとして実装。
ゴニョゴニョ感がすごく、開発した本人もわからん orz.
「JSとは何か?」まで遡ってスクラッチで書き直す覺悟が必要かと。
#sample.rb
...
html = HTML.new
header = HEAD.new
title = TITLE.new.contentIs "hello world"
header.addChild title
header.js.doc.write("hello!")
body = BODY.new
body.js.doc.write("new world")
html.addChild header
html.addChild body
...
<- ~/path/result.html ->
<html>
<head>
<title>hello world</title>
</head>
<body>
<script>
document.write('hello!');
document.write('new world');
</script>
</body>
</html>
真珠(Opal)の装備を手にしたが。。。
JabverwockのコードからOpalを読み込むことができます。
oo = JW_CSS_OPAL_JS.new
oo.readOpalFile testPath
oo.pressTo(name: 'read_OPal_file_indexPressed2.html', dist: myPATH)
しかし、”豚(Jabverwock)に真珠”感が否めません。
Sinatra with Jabverwock
生成したHTMLは以下のように表示させます。
require 'sinatra'
require 'sinatra/reloader'
require 'jabverwock'
get '/' do
pp = P.new.contentIs "jabverwock come!"
title = "indexPressed"
pp.pressTo(name: "#{title}.erb", dist: "./views/")
erb :indexPressed
end
<p>jabverwock come!</p>
#エンディング(結論と言うより反省)
- そこそこ統一はできそうだ。・・・が、Never Ending Story
- Sinatraから使用した場合、遅いことを確認。
- HTML,CSS,Jsの知識は必要だ。
- Jsの表現方法は改善したい。
- そもそもいちいちnewとか書きたくない
Monster(課題・意見)募集
- 最低限こういうHTML、CSS、JSが表現できないと使えない
- JSの実装はこうあるべき
- こういうコードでないとメリットがない
- これができればメリットがある
などなど募集しております。