Opal로 Electron 앱 만들기 (5)
아무래도 늦지 않지만 신경 쓰지 않고 싶습니다.
오늘은 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를 작성하기로 합니다.
Reference
이 문제에 관하여(Opal로 Electron 앱 만들기 (5)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/youchan@github/items/809fa71a2e6df81eeb6a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)