Opal로 Electron 앱 만들기 (5)

이 문서는 Opal Advent Calendar 2016의 20 일째 게시물로 작성되었습니다.

아무래도 늦지 않지만 신경 쓰지 않고 싶습니다.

오늘은 html 파일을 haml에서 변환하여 생성합니다.
전회의 기사에서 깨달았습니다만, 타이틀의 「Opal로 Electron의 앱을 만든다」라고 하는 것이 벌써 「Opal로 Electron의 어플리를 만들기 위한 gem을 만든다」에 내용이 바뀌어 버리고 있습니다.
뭐, 신경쓰지 않고 계속해 가고 싶습니다.

이번 수정의 코드는 v0.0.2 라고 태그 붙이고 있습니다.
$ git show 8f2c1ab

시도해 봅시다.
다이제스트로 변경점을 소개합시다.

lib/electron_opal/default.haml이라는 파일이 추가되었습니다. 기존 처리와 마찬가지로 haml 파일이 없으면 기본 html 파일을 생성합니다.

haml에서 html로 변환하기 위해 Haml::Engine를 생성합니다.
def haml(pathname)
  haml = pathname.parent + "#{pathname.basename('.rb')}.haml"
  haml = Pathname.new(File.expand_path('../default.haml', __FILE__)) unless haml.exist?
  Haml::Engine.new(haml.read)
end
javascript_include_tag 메소드는 그대로 사용하고 싶으므로, Haml#render 에 건네주는 문맥으로서 Index 의 인스턴스를 건네주도록(듯이) 합니다.
html = haml(pathname).render(Index.new(asset_name, server.sprockets, true, "http://localhost:8080/"))
write_to("#{asset_name}.html", html)

이제 haml 파일에서 html 파일을 생성할 수 있습니다.

app/main_window.haml 파일을 넣으면 html 파일로 변환되어 그 쪽이 사용되게 됩니다.
!!!
%html
  %head
    %title Hello world
  %body
    %h1 Hello world
    = javascript_include_tag

기본 html 파일과 달리 'Hello world'라는 문자가 표시됩니다.



그런데, haml 파일을 쓰면 자유롭게 표시되는 html을 변경할 수 있게 되었습니다.
debug 태스크는 DebugServer를 사용하여 .rb 파일을 다시 쓸 때 다시 로드하면 바로 화면에 반영되게 되어 있습니다.
모처럼이므로, haml 파일의 변경에 대해서도 추종할 수 있도록 변경하고 싶습니다.
$ git show d1f2ef7

그러면 변경점을 확인할 수 있습니다.

Gemfile을 보면 알 수 있듯이 fssm이라는 gem을 사용하고 있습니다. fssm은 파일 시스템을 모니터링하는 gem입니다.

사용 방법은 이런 느낌입니다.
def haml(pathname, &block)
  haml = pathname.parent + "#{pathname.basename('.rb')}.haml"

  if haml.exist? && block
    EM.defer do
      FSSM.monitor(haml.parent, haml.basename) do
        update { block.call(Haml::Engine.new(haml.read)) }
      end
    end
  end

  haml = Pathname.new(File.expand_path('../default.haml', __FILE__)) unless haml.exist?
  engine = Haml::Engine.new(haml.read)
  block.call(engine) if block
  engine
end
haml 메서드를 변경하여 block가 전달되면 파일을 모니터링합니다.
파일에 업데이트가 있으면 block를 호출합니다.

이제 haml 파일을 변경할 때도 다시 로드하면 변경 사항이 반영됩니다.

이번에는 Opal이라기 보다, Haml로 변환하는 이야기나 fssm으로 파일을 모니터링하는 이야기가 되어 버렸습니다.
다음번에는 Electron의 최종회로서 Electron의 API를 사용할 수 있도록 Wrapper를 작성하기로 합니다.

좋은 웹페이지 즐겨찾기