質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Opal

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

Ruby

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

Middleman

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

Q&A

0回答

1990閲覧

MiddlemanにてOpalをsprocketsで一つにまとめたJavaScriptがそのままでは実行されない

raccy

総合スコア21733

Opal

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

Ruby

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

Middleman

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

1グッド

2クリップ

投稿2016/03/26 00:23

編集2022/01/12 10:55

###前提・実現したいこと
Middleman (Slim + SASS + Opal) + Electronという組み合わせでデスクトップアプリを作れないか試行錯誤しています。

現在の成果物: https://github.com/raccy/electricman
※ MITライセンスですので、ご自由のお取り下さい。ただし、まだ未完成です。

###発生している問題・エラーメッセージ
JavaScriptもJSONも一行も書きたくないのでOpalを使っているのですが、middleman-sprocketsと組み合わせると、JavaScriptのコードがOpalでのモジュールの中になり、scriptタグ等で指定してもそのまま実行されません。そのため、Opalでのモジュール読み込みをCoffeeScriptで書かないといけない状態です。JavaScript部分をOpalのみで完結できるようにしたいのですが、何かいい方法はありませんでしょうか?

###ソースコード
index.htmlで読み込むテスト用のJavaScriptは下記のように書いています。

all.js.opal

Ruby

1require 'opal' 2require 'console' 3$console.log("test")

all.js (変換後)

JavaScript

1// 前半はOpal関係のコードが書いてあり省略します。 2/* Generated by Opal 0.9.2 */ 3Opal.modules["all"] = function(Opal) { 4 Opal.dynamic_require_severity = "error"; 5 var OPAL_CONFIG = { method_missing: true, arity_check: false, freezing: true, tainting: true }; 6 var self = Opal.top, $scope = Opal, nil = Opal.nil, $breaker = Opal.breaker, $slice = Opal.slice, $gvars = Opal.gvars; 7 if ($gvars.console == null) $gvars.console = nil; 8 9 Opal.add_stubs(['$require', '$log']); 10 self.$require("opal"); 11 self.$require("console"); 12 return $gvars.console.$log("test"); 13};

そのため、index.html.slim内で下記のようにOpal.requireで読み込まないと動いてくれません。(下はSlimのコードです。実際はjavascript_include_tagはlayoutの方で書いています。)

Slim

1= javascript_include_tag :all 2coffee: 3 Opal.require 'all'

Electronのmainであるmain.jsも同じようにする必要があります。(javascripts/main.js.opalに本来のコードが書いているのですが、requireしただけでは中身が実行されません。)

main.js.coffee

CoffeeScript

1require('./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になるようにしています。

ikuwow👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問