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

  • 0
    いいね
  • 0
    コメント

    この記事は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を見つけました。もとネタはこのへんのようです。
    こちらも更新されているようなので、次回は公式のものに合わせて書こうと思います。

    この投稿は Opal Advent Calendar 201615日目の記事です。