旅立ち（なぜ旅立たなければいけないのか？）

かつて人間は、"一つ"の言葉を使っていたという。
しかし、その傲慢さ故に”バベルの塔”を建築し...。
時はながれ現在、Webページを作成するのにHTML、CSS、JSと異なる３つの言語を使うことになった。

旅にでる必要なんてなかった。~~（時間があった、暇だなー）~~
若ハゲのいたり、そうだ！旅に出てみよう！

冒険の目的

はたしてHTML、CSS、JSをRubyで統一的に記述することが可能であるか？

Jabverwockとは

Webページを構成するためのRubyのコードです。
HTML、CSS、JSをそれぞれClassとして表現してみました。

GitHub: Jabverwockにまとめています（まとめ中）。

Jabverwockを使ったもっとも簡単なコードは以下のようになります。

test.rb


require 'jabverwock'

class Test
 include Jabverwock

 doc = DOCTYPE.new
 doc.pressConfig(name: n, dist: ~/path/)
 doc.press

end

Test.new


$ ruby test.rb

n.html



<!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は以下のように表示させます。

app.rb

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

localhost

　＜ｐ＞jabverwock come!＜／ｐ＞

エンディング（結論と言うより反省）

そこそこ統一はできそうだ。・・・が、Never Ending Story
Sinatraから使用した場合、遅いことを確認。
HTML,CSS,Jsの知識は必要だ。
Jsの表現方法は改善したい。
そもそもいちいちnewとか書きたくない

Monster（課題・意見）募集

最低限こういうHTML、CSS、JSが表現できないと使えない
JSの実装はこうあるべき
こういうコードでないとメリットがない
これができればメリットがある

などなど募集しております。