Ruby
Opal
Electron
OpalDay 15

OpalでElectronのアプリをつくる(その2)

More than 1 year has passed since last update.

この記事はOpal Advent Calendar 2016の15日目の投稿として書いています。

今日も遅刻ですが、昨日のつづきです。

ここでお詫びがあります。昨日の記事は大分間違いがありました。http://qiita.com/youchan@github/items/d5fda4c6c9b6be4bc2e9#here から後はOpalの本体がコンパイルされたjsファイルに含まれていなくて、いろいろとソースを弄っていますが、これは不要でした。単に

require 'opal'

とすればよかったというだけでした。
そういうわけで、electron_opalのソースの変更は必要なく、app/main.rbrequire 'opal'という行を追加するだけでよかったということでした。

それを踏まえての今日はウィンドウを表示するようにしましょう。

Qiitaからこのあたりの記事を参考にウィンドウを表示するようにしてみましょう。

app/main.rb
require 'opal'
require 'native'

electron = Native(`require('electron')`)
app = electron.app

app.on('window-all-closed') {  app.quit unless $$.process.platform == 'darwin' }
app.on('ready') do
  main_window = Native(`new electron.native.BrowserWindow({width: 800, height: 600})`)
  main_window.loadURL("file://#{`__dirname`}/main_window.html")
  main_window.on('closed') { main_window = nil }
end

余談ですが、JavaScriptのコードに比べてRubyのコードのほうが気持ちよく書けると思うのは私だけでしょうか?JavaScriptと同等のコードを書くとOpalの書きやすさが体現できるように思います。

electron_opalは*_window.rbというファイルはコンパイルして.htmlファイルを用意してくれるようです。

app/main_window.rb
require 'opal'
require 'native'

$$.alert("Hello world")

とりあえずアラートを表示するプログラムを作ります。

$ bundle exec rake build
$ bundle exec rake

スクリーンショット 2016-12-16 1.10.36.png

どうでしょうか?ウィンドウが表示されましたか?

OKボタンを押して、ウィンドウを閉じてみます。
わたしのマシンはMacなので、$$.process.platform == 'darwin'trueになります。
app.quitが呼ばれないので、コンソールはブロックされたままの状態です。
この判定のロジックはコンソールからの実行を考慮していないためなのか、そもそもdarwinapp.quitを呼んでいけないのかが良くわかりません。この手のサンプルには大体このように書かれているのですが、もとネタがどこなのかもよくわかりませんでした。
今回はここはElectronに関することなので無視しておきましょう。単純にapp.quitすることにします。

今回はここまでです。次回はelectron_opalをOpalの最新のバージョンで動かせるようにしましょう。

追記

Electronのquick startを見つけました。もとネタはこのへんのようです。
こちらも更新されているようなので、次回は公式のものに合わせて書こうと思います。