ブラウザ用のJSライブラリをnodeで使いたい
- 評価
- クリップ 0
- VIEW 1,093
ブラウザ用に提供されるJavaScriptのライブラリ(jsファイル)を、node.jsで使いたいです。
何か方法はありますでしょうか？
具体的には、enchant.jsのクラスの実装がすごく便利なので、それをnodeで使いたいのです。
イメージとしては、browserifyの逆みたいな。
nodeモジュールだと、browserifyを用いてブラウザ用に変換できますよね、あれの逆です。
または、クラスの実装のみを提供するnodeのモジュールがあれば、教えていただけると幸いです。
どうかよろしくお願いします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+4
Node.jsはCommonJSまたはES module(現在は実験的機能)でライブラリを読み込むようになっていますが、enchant.jsはどちらにも対応していません。HTMLのscriptタグで単純に読み込む場合しか想定していないと言えます。このようなライブラリをNode.js上で直接利用することは本来出来ませんが、その構成によっては工夫次第で可能になる場合があります。
今回の目的はenchant.Classのみであり、一つのJavaScriptにまとまる前のソースコードでは"Class.js"と言うファイルとして分離独立して存在します。こちらの中身を確認したところ、他のファイルには依存しておらず、また、ブラウザ版JavaScript特有のオブジェクト(DOMなど)も使用していませんでした。しかし、CommonJSやES moduleを想定してた構成ではないため、通常の方法では読み込みできません。今回はenchant.Class = function(...) {};という書き方で定義してあったため、この性質を利用して、Node.jsに読み込みたいと思います。
以下、enchant.Classを使うための方法です。Windowsで作業していることが前提ですが、OSには特に依存しません。
- enchant.js v0.8.3 ソースコードをダウンロードします。
- ダウンロードしたZIPファイルから"dev\src\Class.js"のみを取り出して、コピーします。
- グローバル変数
enchantをObjectとして作成した後に、コピーしたソースをrequire()します。
具体的なコードは下記のようにになります。
// enchant.Classのみを読み込んでいる部分
global.enchant = {};
require("./Class.js");
const Class = enchant.Class;
const A = enchant.Class.create({
initialize: function(x) {
this.x = x;
},
f: function() {
console.log(`A.f: ${this.x}`);
}
});
const B = enchant.Class.create(A, {
initialize: function(x, y) {
A.call(this, x);
this.y = y;
},
g: function() {
console.log(`B.g: ${this.x}, ${this.y}`);
}
});
const a = new A("hoge");
const b = new B("fuga", "piyo");
a.f();
b.f();
b.g();実行すれば、正常に継承が動作しているところまで確認できると思います。
なお、この方法はどんなものにも使えるというわけではなく、enhant.Classが偶然こういう事が出来るような構成だったにすぎません。他のライブラリではやり方が全く異なる場合があります。場合によってはライブラリ側のコードを修正する必要があります。また、グローバル変数を使用していることからも、あまり良い方法とは言えません。
ということで、出来ることには出来ますが、推奨は出来ません。かといって、他にお勧めのクラス実装と言われても、私はCoffeeScriptばかり使ってきたのでクラスの作成に不便を感じたことがなく、そういうライブラリがあるかどうかすらよくわかりません。申し訳ないです。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+3
ソースコードの実体がGitHubで公開されています。
https://github.com/wise9/enchant.js
そして件のClassは/dev/srcディレクトリ配下にあることを確認しました。
https://github.com/wise9/enchant.js/blob/master/dev/src/Class.js
しかし第一行目がenchant.Class = function()...で始まっており、enchant変数が定義されておらずJSエラーで落ちるように思えます。
きっと何かしらのタスクランナーでJSファイル同士をconcatでくっつけているのでしょう。
という訳でプロジェクトルートを漁っていくとGruntfile.coffeeを見つけました。
Gruntはオワコンのタスクランナーですが、最終更新が2年前……ならばGrunt愛用者は結構いたと思います。
https://github.com/wise9/enchant.js/blob/master/Gruntfile.coffee
想像通り/dev/src配下の_intro.js→header.js→Class.jsの順番にファイルをくっつけていますね。
従ってこのようなファイルを作成すれば動くんじゃないですかね？
// header.js の抜粋
// Classes.js を丸コピー
module.exports = enchant.Class;header.jsを抜粋とした理由ですが、
軽く確認した所、window.addEventListener("message", function(msg, origin) {という感じでwindowオブジェクトに働きかけていますが、Node.jsはwindowオブジェクトは存在しませんので、
header.jsを丸コピーしてくる場合は冒頭に操作を捨てるだけのダミーwindowオブジェクトを宣言する必要がありますし、
他の箇所もポリフィルばかりですので、enchant関数を抽出するだけで良いでしょう。
調べた所enchant.jsはMITライセンスでしたので、
作者に経緯を払ってリンクでも付けておけばどのように改変しても大丈夫です。
おまけ: 自分でビルドスクリプトみたいなのを作って自動生成する場合
GitHubのソースコードのページは、curlコマンド等でダウンロードするとページを構成する情報のHTMLがかぶさっているので邪魔です。
それの対策として生のファイルにアクセス出来る「Raw」ボタンがページ上部に存在していますので、
これをクリックすれば生のファイルのURLに遷移します。
自作のビルドスクリプトで、
まずこの/dev/src/Class.jsファイルのRawをダウンロードしてtmpディレクトリにでも突っ込んで、
そのファイルに宣言部の文字列をくっつけて自作のファイルにでもすれば良いでしょう。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.10%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
raccy
2018/05/05 15:29
node.js上でenchant.jsをどのように使いたいのでしょうか？DOMやCanvasで描画したアニメーションを録画して動画にするとかですか、それとも、ブラウザ無しでデスクトップ上に表示するとかですか？具体的にどのような物を作りたいのか、どのように使いたいかを書くと、より具体的な方法を示すことが出来るかも知れません。
trinitrotoluene
2018/05/05 17:18
すいません、enchant.jsで描画をするわけではなく、enchant.jsのクラスを実装する機能が欲しいのです。ES6のクラス機能より、そちらの方が使いやすかったので。他にnodeモジュールで、enchantに似たクラスの実装のみのものがあれば、もちろんそれでもいいのですが、、 アドバイス、ありがとうございます。
raccy
2018/05/05 17:29
enchant.jsに含まれるenchant.Class(http://wise9.github.io/enchant.js/doc/core/ja/symbols/enchant.Class.html)だけを使いたいって事ですか。やっとわかりました。具体的なコード例があると回答が出やすくなるかも知れません。