質問編集履歴

1 Opalタグを追加

raccy

raccy score 21024

2016/03/28 18:53  投稿

MiddlemanにてOpalをsprocketsで一つにまとめたJavaScriptがそのままでは実行されない
###前提・実現したいこと
Middleman (Slim + SASS + Opal) + Electronという組み合わせでデスクトップアプリを作れないか試行錯誤しています。
現在の成果物: [https://github.com/raccy/electricman](https://github.com/raccy/electricman)
※ MITライセンスですので、ご自由のお取り下さい。ただし、まだ未完成です。
###発生している問題・エラーメッセージ
JavaScriptもJSONも**一行も書きたくない**のでOpalを使っているのですが、[middleman-sprockets](https://github.com/middleman/middleman-sprockets)と組み合わせると、JavaScriptのコードがOpalでのモジュールの中になり、scriptタグ等で指定してもそのまま実行されません。そのため、Opalでのモジュール読み込みをCoffeeScriptで書かないといけない状態です。JavaScript部分をOpalのみで完結できるようにしたいのですが、何かいい方法はありませんでしょうか?
###ソースコード
index.htmlで読み込むテスト用のJavaScriptは下記のように書いています。
all.js.opal
```Ruby
require 'opal'
require 'console'
$console.log("test")
```
all.js (変換後)
```JavaScript
// 前半はOpal関係のコードが書いてあり省略します。
/* Generated by Opal 0.9.2 */
Opal.modules["all"] = function(Opal) {
Opal.dynamic_require_severity = "error";
var OPAL_CONFIG = { method_missing: true, arity_check: false, freezing: true, tainting: true };
var self = Opal.top, $scope = Opal, nil = Opal.nil, $breaker = Opal.breaker, $slice = Opal.slice, $gvars = Opal.gvars;
if ($gvars.console == null) $gvars.console = nil;
Opal.add_stubs(['$require', '$log']);
self.$require("opal");
self.$require("console");
return $gvars.console.$log("test");
};
```
そのため、index.html.slim内で下記のように`Opal.require`で読み込まないと動いてくれません。(下はSlimのコードです。実際は`javascript_include_tag`はlayoutの方で書いています。)
```Slim
= javascript_include_tag :all
coffee:
Opal.require 'all'
```
Electronのmainであるmain.jsも同じようにする必要があります。(javascripts/main.js.opalに本来のコードが書いているのですが、requireしただけでは中身が実行されません。)
main.js.coffee
```CoffeeScript
require('./javascripts/main').Opal.require 'main'
```
コード全体は上の現在の成果物を参考にしてください。
###補足情報(言語/FW/ツール等のバージョンなど)
Ruby: ruby 2.3.0p0 (2015-12-25 revision 53290) [x86_64-darwin15]
主なGem:
middleman (4.1.3)
middleman-sprockets (4.0.0.rc.1)
opal (0.9.2)
Elelctron: v0.37.2
middleman-sprocketsとopal組み込みのopal-sprocketsにより、一つのJavaScriptになるようにしています。
  • Ruby

    17666 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Middleman

    15 questions

    MiddlemanはモダンなWeb開発のショートカットやツールを採用した静的サイトジェネレータです。

  • Opal

    7 questions

    Opalとは、RubyをJavaScriptに変換できるaltJSの一つです。PureRubyであれば、ほとんどそのまま使えるRubyとの高い互換性があり、Rubyの書きやすさでJavaScriptを実現できます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る