3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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:4567
 <p>jabverwock come!</p>

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

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

Monster(課題・意見)募集

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

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

3
2
0

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
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?