前提・実現したいこと
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
以上、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。