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

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

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

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

4071閲覧

Electronプロジェクトで、Slickgrid-6pacが利用したい

TakamiChie

総合スコア59

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/02/15 03:12

編集2018/02/20 03:27

前提・実現したいこと

Electronでスプレッドシートを作成するにあたり、SlickGrid-6pacを使用したいと思っています。

そのほかの方針

  • OSSであり、フリーで全機能が利用できるライブラリを使用する(Handsontableなどのライブラリは利用しない)
  • 利用できるものはなるべくnpm経由でライブラリの管理を行う
  • 将来的にHTMLベースの別環境(Cordovaなど)への移植も視野に入れ、requireなどのElectron依存の記述は必要最低限にする
  • Electron向けフレームワークなどの理解が出来ていないため、なるべくWebのHTMLと同様に、HTMLにscriptタグを書き込んで、そこからスクリプトを実行する(あまりHTML5 Webサイト制作の手法から逸脱した記述を行わない)
  • 18:53追記しました:package.jsonなどのファイルと他のソースファイルが混ざらないように、ソースファイルは原則srcフォルダに格納する

該当のソースコード

SlickGrid-6pacはnpmにも存在するため、以下のライブラリをnpm installで追加しました。

  • jquery
  • jquery-ui
  • slickgrid-6pac

また、jQueryをElectronで使うと、jQueryがundefinedになるという記事を参考に、jqueryをロードするだけのJavaScriptを記載し、HTMLファイルで読み込むようにしました。

js

1/// loadjquery.js 2window.jQuery = window.$ = require('jquery');

html

1 <body> 2 ・・・ 3 <script src="loadjquery.js"></script> 4 <script src="../node_modules/slickgrid-6pac/slick.core.js"></script> 5 <script src="../node_modules/slickgrid-6pac/slick.grid.js"></script> 6 <script src="../node_modules/slickgrid-6pac/slick.editors.js"></script> 7 <script src="index.js"></script> <!-- ここにアプリケーション処理を記述 --> 8 </body> 9</html>

上記記述でjqueryおよび$()が使えること自体は確認済みです。

なお、package.jsonのdevDependenciesは以下の通りです

json

1 "devDependencies": { 2 "bootstrap-honoka": "^3.3.7-a", 3 "electron": "^1.8.1", 4 "electron-json-storage": "^4.0.2", 5 "jquery": "^3.3.1", 6 "jquery-ui": "^1.12.1", 7 "js-yaml": "^3.10.0", 8 "less": "^2.7.3", 9 "slickgrid-6pac": "^2.2.13" 10 },

発生している問題・エラーメッセージ

実行すると、コードを実行する前に、以下のエラーがコンソールに出力されます。このためスクリプトでnew Grid()が使えず、Slickgrid自体が利用できません。

発生場所:slick.grid.js Uncaught Error: Cannot find module './lib/jquery.event.drag-2.2' at Module._resolveFilename (module.js:485:15) at Function.Module._resolveFilename (・・・\node_modules\electron\dist\resources\electron.asar\common\reset-search-paths.js:35:12) at Function.Module._load (module.js:437:25) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at file:///・・・/node_modules/slickgrid-6pac/slick.grid.js:25:1

該当行にはたしかにrequire('./lib/jquery.event.drag-2.2');という記述があり、node_modules/slickgrid-6pac/lib/jquery.event.drag-2.2が読み込まれていないことが確認できました。
※ lib/jquery.event.drag-2.2は自分で追加したものではなく、slickgrid-6pacをnpm installしたときに同梱されていたものです。

試したこと

global.module.pathsにslickgrid-6pacを追加する

js

1global.module.paths.push(global.module.paths[1] + "\slickgrid-6pac");

global.module.paths自体の追加は確認できたものの、処理の変化はなし

HTMLのscriptによるSlickgrid読み込みをやめて、index.jsの冒頭でrequire("slickgrid-6pac")とする

エラーメッセージ自体は出なくなるものの、今度はslick.editors.jsに定義されているSlick.Editors.Textなどの定数が読み込まれず、SlickGridが利用できない。

補足情報(FW/ツールのバージョンなど)

package-lock.jsonの情報より

  • electron: 1.8.2
  • jquery: 3.3.1
  • slickgrid-6pac: 2.2.13

以上、よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

自己解決

先日GithubのSlickgrid-6pacのページを見たところ、最新バージョンであれば問題が解消されていると言うことがわかりました。

ただし、npmのパッケージは古いままだったため、npm install --save-dev 6pac/SlickGridとしてインストールする必要がありました。

投稿2018/03/16 14:00

TakamiChie

総合スコア59

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問