LoginSignup
2

More than 5 years have passed since last update.

冒険に出てみた(RubyでHTML、CSS、JSを 統一してみた)

Last updated at Posted at 2018-02-20

旅立ち(なぜ旅立たなければいけないのか?)

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

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

冒険の目的

はたして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
 <p>jabverwock come!</p>

エンディング(結論と言うより反省)

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

Monster(課題・意見)募集

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2