【Electron】ﾊｲﾌﾞﾘｯﾄﾞｱﾌﾟﾘ開発総合【Cordova】 [無断転載禁止]©2ch.net

2017/07/02(日) 17:53:17.69

HTML5,CSS3,JavaScriptなどWeb標準技術を活用したアプリ開発についてのスレです。

各種フレームワークの他、webviewの利用、PWA(AMP)、ブラウザ拡張機能など板選びに迷ったらこのスレに書き込んで下さい。
副次的な話題としてビルドツールなど開発環境に関する話も可。

主なフレームワーク
Electron
https://electron.atom.io/
NW.js
https://nwjs.io/
Apache Cordova
https://cordova.apache.org/
PhoneGap
https://phonegap.com/
ReactNative
https://facebook.github.io/react-native/
NativeScript
https://www.nativescript.org/

VIPQ2_EXTDAT: checked:vvvvv:1000:512:----: EXT was configured

2018/03/12(月) 17:26:43.22

Electronで、
CSSで作ったセレクトボックスを
トラックパッドでクリックして閉じると、hoverした部分の色が残ってしまう
（マウスでクリックした場合は正常）
という奇妙な現象が出ていたので、
Electronをアップデートしたら直りました
開発中のモジュールアップデートには抵抗がありましたが
Chrome同様こまめにアップデートしていった方がいいのでしょうね
ただ、それでもoutlineのデフォルト色がオレンジ色なのは変わりませんでした

2018/03/15(木) 11:17:06.84

Electronについてですが
トラックパッドで画面をクリックするとCSSのhover状態がキャンセルされると気づきました
hoverで変化するようにしている箇所が、クリックすると非hoverの表示になってしまう
マウスカーソルを動かすとまたhover時表示に戻る
という挙動です
このトラックパッドというのはmacbook proのもので、
bootcampでwindows10を使っています
Chromeではこのような挙動はありません。
>>28の挙動とも関連してそうです

2018/03/15(木) 11:30:06.66

おそらくクリック時にマウスカーソルがそこにないものと判断されてしまうのではないか
と予想しています
ハード的な問題かと考えましたが、それだとChromeで症状が出ないのがおかしい。
ChromeとElecronの間の微妙な差異の中でバグが生まれてしまっている感じです

2018/03/15(木) 11:52:17.96

ためしにmousemoveをconsoleに出力してみましたが、
クリックしてもmousemoveイベントは発生しませんでした
おそらく原因はCSS処理の層にあるのでしょう

2018/03/15(木) 16:11:50.04

ビルドしたら現象消えるんじゃね？
と思ったのですが、逆に>>28で消えたと思っていた症状が
ビルドしたらまた出るようになりました・・

2018/03/16(金) 19:35:23.73

>>28の件ですが
マウスアウトが表示に反映されるまで待てばいいのでは？と考えて
setTimeoutを使ってセレクトボックスを閉じるのを後回しにしたところ、解決しました

2018/03/18(日) 17:19:23.99

・CSSはどの定義が優先されてるのか
・各イベントは発火しているのか
・Electronじゃないと起こらないのか

浅い連投する前にデベロッパーツールともっと向き合って

2018/03/25(日) 09:19:11.15

electronで
BrowserWindowを上や下や左や右に揃えて表示するにはどうしたらいいのでしょうか？
中央揃えのためにはcenterというオプションがありますが

2018/03/26(月) 13:44:22.91

>>35の件ですが
https://github.com/electron/electron/blob/master/docs/api/screen.md
このscreenモジュールを使えばディスプレイのサイズを取得できると分かりましたが
electronの座標系はディスプレイの座標系よりも少し小さいようです
ウインドウを左揃えにするために
ウインドウのxを0にすると、左側に8ピクセルくらいの隙間が空きます
ウインドウを右揃えにするために
ウインドウのxを、画面幅 - ウインドウ幅にすると、同様に右側に8ピクセルくらいの隙間が空きます
またディスプレイの実際のピクセル数は1280×800ですが、
screen.getPrimaryDisplay()で取得できるディスプレイサイズは、1024×640です
この数字の差異は、electron内部で独自の座標系を持っているからのようで、
そのこと自体は別にいいですが、余計なマージンが入るのは困ります
たとえばxを0ではなく-8とかにすれば、左揃えには出来るのですが、
マージンが何に由来するのか分からないので、ハードコーディングするのは抵抗があります
どうなのでしょうか？

2018/03/26(月) 14:30:58.34

https://gist.github.com/hisasann/a99b7e4aa5f2c9cfc7eb

electronの座標系のpaddingに言及しているページがありました
ただleftやtopを0、widthやあheightを画面サイズにすればウインドウが全画面になる
と書かれているので、この時点と今では挙動が変わっていそうです
ともかくこの座標系レベルのpaddingは意図的に作られたもののようです

2018/03/26(月) 14:50:12.91

Electronではじめるアプリ開発
~JavaScript/HTML/CSSでデスクトップアプリを作ろう
野口将人・倉見洋輔、2017

この本では、1280×800(735), scaleFactor: 2 とか

screen.getAllDisplay()[0] を見てみれば？

2018/03/26(月) 16:00:59.46

>>38
ありがとうございます
getAllDisplayとgetPrimaryDisplayが返す値は同じでした
ただ、その本とは異なり、scaleFactorは1.25でした
多分、このscaleFactorが、
Electron座標系とディスプレイ座標系の対応関係を決めているのだと思いますが。
その本は、Retinaなどの画素数が多い環境に基づいているのでしょうね

38 (ﾜｯﾁｮｲ 4e80-9PFr) · 2018/03/27(火) 04:05:44.39

2018/03/27(火) 21:08:57.89

ありがとうございます
ということは、設定可能な項目なのでしょうか
何か色々知識が足りてない気がするので「Electronではじめるアプリ開発」をぽちってみました

38 (ﾜｯﾁｮｲ 4e80-9PFr) · 2018/03/27(火) 23:33:55.43

漏れも、よくわからない

screen モジュールの機能を見て

2018/03/29(木) 15:32:50.95

ElectronではipcMainとipcRendererを使って
レンダラープロセス→メインプロセスへのIPCのsendと
それに応対してのメインプロセス→レンダラープロセスのsendは出来ますが
メインプロセスを起点にしたレンダラープロセスへのIPCは出来ないようです
メインプロセス側のタイミングでレンダラープロセスを呼びたい時はどうすればいいのでしょうか？

2018/03/29(木) 21:16:50.19

>>43
BrowserWindowオブジェクトのwebContentsプロパティに対してsendメソッドを発行することで出来ました

2018/04/04(水) 14:42:57.52

ElectronがAndroid対応になるのはいつぐらい？
ロードマップはある？
誰がやってる？

2018/04/04(水) 22:43:52.94

ないよ

2018/04/09(月) 12:53:29.29

ウインドウのalwaysOnTopをトグルする処理をしようと思います
レンダラプロセス中のwindowがBrowserWindowオブジェクトなのかと思って
レンダラプロセスの中で
window.setAlwaysOnTop(true);
とやってみたのですが、エラーになりまりした
windowはBrowserWindowオブジェクトではなかったようです
レンダラプロセスの中で自分自身のBrowserWindowオブジェクトにアクセスするにはどうしたらいいのでしょうか？

2018/04/10(火) 09:16:38.93

APIドキュメントを見ても、レンダラプロセスから自身の外観を変えることはできないようなので
IPCでメインプロセスを呼ぼうと思ったのですが
メインプロセス側でレンダラプロセスのBrowserWindowオブジェクトを確定するには
どうするのかという問題が出てきました
マルチウインドウのアプリなのでレンダラプロセスが複数あります
メインプロセスが受信するeventのsenderには、webContentsが入っているとドキュメントにあります
このwebContentsは、BrowserWindowのプロパティの一つだそうです
ですがwebContentsには、自身を所有しているBrowserWindowを取得するメソッドがないっぽいです
idプロパティを持っているので、
BrowserWindowオブジェクトのリストをループさせて比較するという方法で見つけることは出来そうですが
こういう方法しかないのでしょうか？

2018/04/10(火) 16:01:49.23

>>48
もっといい方法があるのかないのか分かりませんが
idを使って同定するようにしました

2018/04/12(木) 15:49:20.83

electronで新しいBrowserWindowを作る時
若干待たされる感があるのが気になっていたのですが
前もって非表示のスペアウインドウを作っておいて必要なタイミングでshowするようにしたら、
気持ちいい動作になりました
これはelectronに限らず複数ウインドウを使うアプリを作る時には定石なのかもしれませんね

2018/04/14(土) 07:56:32.32

electronについてです
ipcMain/ipcRendererにはsendSyncがありますが
webContentsにはsendのみでsendSyncがないようです
何故でしょうか？

2018/04/15(日) 06:01:35.77

>>47の件ですが
「Electronではじめるアプリ開発」を読んでいたら
remoteモジュールのgetCurrentWindow()を使えば
レンダラプロセスから自身のBrowserWindowオブジェクトを取得出来ると出てきました
remoteモジュールはgetGlobalでメインプロセスのグローバル変数も取得できるという
なかなかすごいモジュールです

2018/04/15(日) 14:38:45.54

remoteを使うようにしたら
泥臭いIPCのコードをほとんどなくせますね
remoteを使うためにはIPCを理解することが重要なので、無駄だとは言いませんが・・

2018/04/16(月) 12:06:03.54

>>52の件ですが
メインプロセスの配列をレンダラプロセスからremote.getGlobalして
メインプロセス側でその配列を破壊的に変更すれば
レンダラプロセス側でもその変更が反映するのだろうと思っていたのですが、
どうも反映しないようです
remote.getGlobalで配列は参照渡しできないのでしょうか？

2018/04/16(月) 13:50:17.49

electronで、オブジェクトが(remoteで取得した)リモートオブジェクトかどうかを
コード上から調べる方法はあるのでしょうか？
consoleに出力しても普通のオブジェクトと全く同じに見えます

2018/04/16(月) 14:49:27.72

https://github.com/electron/electron/blob/v0.35.0/atom%2Frenderer%2Fapi%2Flib%2Fremote.coffee

remoteのソースコードがありました
配列とオブジェクトの処理は異なっていて
オブジェクトの場合、メソッド呼び出しやプロパティの読み書きでIPCが呼び出されるが
配列の場合は値渡しになる、という挙動のようです

2018/04/23(月) 01:34:07.55

グローバルショートカットキーの修飾キーとしてWindowsキーを使いたいです
https://github.com/electron/electron/blob/master/docs/api/accelerator.md
ここにWindowsキーはSuperと書くとありますが、
Super+R
みたいに書いても動作しません
Alt+Ctrl+R
のようにSuper以外の書き方ではちゃんと動作しています
なぜでしょうか？

2018/05/15(火) 21:58:20.08

開発フレームワークElectronのエクスプロイトでWebとモバイルの人気アプリが危険
https://jp.techcrunch.com/2018/05/15/2018-05-14-exploit-puts-popular-web-and-mobile-apps-at-risk/

これを見て、バージョンアップしておいた方がいいのだろうと思って、
electronのバージョンアップをして
使ってるパッケージもついでにバージョンアップしました
leveldbのパッケージはネイティブモジュールなので、electron-rebuildでリビルドしようとしたのですが

An unhandled error occurred inside electron-rebuild
Could not detect abi for version 2.0.0 and runtime electron.
Updating "node-abi" might help solve this issue if it is a new release of electron

と言われました
ABIとか言われても、何を言っているのか分かりません
どうしたらいいのでしょうか？

2018/05/19(土) 13:40:43.15

>>58の件ですが
検証するためにプレーンなelectronプロジェクトを作ってみて、leveldbをリビルドしたら無問題。
エラーの出るプロジェクトでモジュールの再インストールなどを繰り返しながら原因を探したところ
なんとelectron-rebuildのコマンドヒストリーからいつの間にか引数が一つ消えていたことが原因でした
electronのバージョンアップはまったく関係なかったです
失礼しました

2018/05/23(水) 20:01:18.75

僕の知り合いの知り合いができたパソコン一台でお金持ちになれるやり方
役に立つかもしれません
グーグルで検索するといいかも『ネットで稼ぐ方法　モニアレフヌノ』

2BIZV

2018/07/05(木) 01:39:12.11

7UF

2018/08/16(木) 14:09:43.66

Electron Fiddle
https://github.com/electron/fiddle

こんなのあった
electronアプリが動かせるプレイグラウンド
なかなか良さそう

2018/09/24(月) 12:43:07.12

user32.dllとか winapi呼び出せますか

2018/09/24(月) 15:45:48.89

特定のサイトを便利に使うための専用ブラウザを作ろうとしたけど、セキュリティーの扱いが難しくて断念した

2018/09/26(水) 08:23:48.51

＞特定のサイトを便利に使うための専用ブラウザ
2ちゃんの専ブラみたいので他サイトの奴？

発想は良さそうな気がするけど
セキュリティで引っかかるのも分かる

2018/11/03(土) 03:34:28.06

Android NDKとObjective-C使うと
AndroidとiOSアプリってほぼワンソースでできたりする？

2018/11/18(日) 09:16:25.09

Objective-Cはネイティブコードじゃないよな。
iOSに特化したコーディング言語何で無理に１００ペリカ。

2018/12/18(火) 12:58:01.95

だれかquasar frameworkという奴を使ってみて

2018/12/18(火) 16:10:50.57

Chroniumは、普通のJavaScriptでは使えない「同期wait処理」が行える
ようになっていることも特徴の1つかも知れない。
この機能により、「Modal」なDialogが作れる。
よく知らないが、ライバルのCordovaはそれが出来ないかもしれない。
ここで言ってる「同期wait処理」とは、sleep(1000);とすると、
単純に、1000(ms)待って戻ってこないという普通の言語では昔から
当たり前にあったような機能のこと。

JavaScriptではこのような単純な「待機処理」が出来ないらしく、。
待機したい場合は、大体、以下の2種類の方法しか使えないらいい：

1. 以後の処理を関数に分けて、タイマーイベントのコールバック関数として指定する。
　しかしこれだと、for 文の中で sleep したい場合などは、難しい気がする。

2. async, await を使う。しかし、これだと、async 修飾された関数を呼び出した側には
　にはすぐに帰ってくるので、ちゃんと wait したことにはならない。

**デフォルトの名無しさん** (JP 0H27-pqTg) · 2019/03/26(火) 11:58:33.97

electronを最近始めたんだけど
コレ読んどけ的ないい本ないかしら？

2019/03/26(火) 21:20:55.45

>>70
プログラム初心者じゃないんでしょ？
そこらのブログと公式ページのリファレンス見れば事足りるよ。
バージョンアップが早いから書籍だと情報が古いと思う。

2019/03/27(水) 06:49:24.76

>>71
macでやってる人が多いんだけど
macじゃなきゃ安定しないの？

ubuntuでwinのインストーラー作ってみたけど起動しない(´・ω・｀)

2019/03/30(土) 10:28:06.75

>>72
windowsでいい
electron-packagerとelectron-builderどっち使ってる？

2019/03/30(土) 12:36:05.89

electron-builderでやった
おすすめだって聞いたので

2019/04/03(水) 09:52:02.05

>>72
Electronを使いたがるMacユーザーが多そうに見える原因として考えられるもの：

1. Macは、東大が、学生に「標準パソコン」として指定してる。
　東大の学生は優秀なのでQiitaなどに沢山の技術的な記事が書かれる。
2. Macユーザーにとっては、マルチプラットフォーム開発が重要となる。

**デフォルトの名無しさん** (JP 0H8f-eYI3) · 2019/04/03(水) 12:25:56.27

東大生はあんな頭悪いqiita書かないよ多分。。。

2019/04/03(水) 16:29:12.11

Windowsはどんなバカでも使えるようにレガシーな機能もずっと保守し続けてる
そのせいで最新の機能が制約されてたり、MACに比べたらいろいろと劣ってる
消費者ならWin、働くためのツールならMacだよ

2019/04/03(水) 18:39:19.31

つまり
electron開発ならmacを買え、と

2019/04/03(水) 18:45:21.93

関係ありません

2019/04/03(水) 19:34:45.42

>>79
どの環境でやってるの？

2019/04/03(水) 23:04:34.81

以前はmacで開発してたけど今はWindowsでやってるわ
VSCode使ってるから大して変わらん

2019/04/05(金) 11:23:06.13

テスト用にはどの環境もあったほうがいい
マルチプラットフォームだけど表示や挙動がそれぞれ少しずつ違うこともあるから。

ただWindowsだとnpm install -gでPATHが通らなかったりcross-env使わないと環境変数設定できなかったりするので開発はubuntuやMacの方がやりやすかったりする

んでMac使うことで開発モチベーション上がるならMac使えばいいだけ

2019/04/05(金) 11:57:25.04

ろくな知識もないやつの書き込み

**デフォルトの名無しさん** (JP 0H8d-muAH) · 2019/04/05(金) 12:18:33.52

>>82
ｻﾝｸｽ

2019/04/05(金) 12:37:37.41

5ちゃんねるなんてそんなもんよ
意見あるなら反論訂正すればいいだけ

2019/04/05(金) 15:08:26.58

npx コマンドで、node_modules 内のプログラムを、パス無しで実行できる

例、npx gulp

2019/04/05(金) 16:47:33.10

npxは知ってるがそれで対処できない例外として
例えばnpmでyarnを入れるチュートリアルを見た初心者が躓く

ネットに書いてるコマンド通りに実行しても、うまくいかない可能性がwindowsの方ではやや大きくなる

2019/04/05(金) 18:39:22.93

親が裕福でない限り、どんなに頭が良くてもWindowsを使うことになるハズ。
食っていかなきゃならないからだよ。

2019/04/05(金) 20:47:15.62

一番安いmacでいいじゃん

2019/04/06(土) 00:36:45.93

gulp, npm scripts に書くとか

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門、中村勇希、2018/5/29

2019/04/06(土) 02:40:41.30

>>89
・PC/ATの場合、自作機にすれば、物凄く安く付く。買い直さずに好きな部分だけ
　変えていけばいいので、特に箱(筐体)はいつまでも同じものが使える。電源も。
・一般人の大部分が Windows使ってるので、一般向けの何かを作って食って
　いくためには Windowsでないととても不利になる。

2019/04/15(月) 18:10:55.77

外部からのデータ取得ってmainプロセスrendererプロセスどっちでやるべきなの？
javascript勉強中でとりあえず題材として2ch専ブラ作ってるから板やスレの一覧とかなんだけど
main側のnetモジュールとかにお願いするのかｆｅｔｃｈとかでrenderer側で完結させるべきなのか
それぞれの使いどころとかも知りたい

**デフォルトの名無しさん** (JP 0H4d-83pk) · 2019/04/15(月) 18:14:43.51

mainプロセスじゃん？

2019/04/15(月) 18:34:15.05

漏れはスクレイピングを、Ruby, Nokogiri, Selenium WebDriver でやってる。
GUI は、HTML, CSS, JavaScript

自動ログインも、やってる

2019/04/15(月) 19:10:45.53

コルドバってhttp鯖はリモートでも動くのね
知らんかった

**デフォルトの名無しさん** (JP 0H4d-83pk) · 2019/04/16(火) 12:36:29.98

>>94
electronスレでなぜそんな告白？

2019/04/16(火) 13:47:07.41

>>94
Rubyキチここにもいたのか

2019/04/16(火) 13:50:57.15

>>92
レンダラーの役割はメインから受け取ったデータをもとに描画することだよ
基本的にデータの取得はメイン

2019/04/17(水) 00:08:06.68

まじかめんどくさそう
こういうのどういう風に書いたらいいのか
ipcMainとipcRendererでイベント管理すんの？
あと参考になりそうなossプロジェクトあったら教えてくださいな

2019/04/18(木) 20:39:47.87

レンダラー側でも取得はできるけど
キャッシュの管理はメインでやる必要があるから
メインでデータ取得してレンダラーに渡すほうが使い分けがはっきりしていいかなと思う

ipcイベント管理がちょっと複雑になるけど
同期通信はipcRenderer.sendSync()で書ける

2019/04/18(木) 23:20:13.21

レンダラーでもnodeモジュールは使えるし、どっちでもいいんじゃね？
複数window使うならメインプロセスで制御したほうがいいだろうけど設計次第かと。

2019/04/19(金) 00:57:43.36

どうせLANのサーバーにしかアクセスしないんで全部同期通信でいいですかね？

2019/04/19(金) 02:24:43.25

win10って文字汚すぎでしょ、よく目が潰れないなって関心する
それと4Kも増えてるのに対応してないことが多すぎる、ダメダメすぎてMac選んだわ

2019/04/19(金) 06:51:27.15

(´・∀・｀)ﾍｰ

2019/05/04(土) 07:14:21.16

electronの技術を使ってデスクトップのアプリケーションを開発するなら、
ユニークで、かなりの高品質なプログラムでないと全く割に合わない。

https://boostnote.io/
electronベースのBoostnootをダウンロードしてみた。
ダウンロードしたファイルをダブルクリックしたら、インストールに時間がかかる。

C:\Users\各自のユーザ名\AppData\Local\boostのフォルダにインストールされて、
383 MBの容量があった。

ブラウザソフト並みの大容量だ。小物のソフトでも似たようなものだろう。

Boostnootは優秀なプログラムだ。

2019/05/04(土) 19:17:50.53

空っぽのアプリでも100MB超えるのは難点だねえ。
chrome分離モードとかできたらいいのに。

2019/05/05(日) 06:48:37.59

そう？
気にしなきゃいいんじゃない？

2019/05/05(日) 10:29:46.56

どうせ馬鹿にされるだろうけど、おいらの環境だと、100MBのファイルの
Download に20分～40分くらいかかることがある。

どうせ金が無いのは、実力がない馬鹿だから、という解釈で自己責任で
終わってしまうんだろうがね。アメリカ人はだから嫌われる。

2019/05/05(日) 21:06:11.42

特殊環境で活きるプラットフォームではないね

2019/05/06(月) 13:44:49.84

>>103
使いこなせないのをOSのせいにしてもね。

2019/07/12(金) 01:58:58.18

OS戦争とか禅時代の遺物すぎるだろもっと新しい時代に生きろよ

2019/12/16(月) 14:17:14.84

自分用（+仲間内）の書き捨てソフト作るのに便利だね
これ

配布にはデカすぎるが

2019/12/18(水) 08:16:46.92

Electronフレームワーク、Node.jsなどの開発をホストする「OpenJS Foundation」に合流
https://www.publickey1.jp/blog/19/electronnodejsopenjs_foundation.html

2020/01/24(金) 18:57:29.35

UNITYはjavascriptが使えなくなって悲しい。
JSにも高性能なゲーム開発環境ソフトがあればいいのに。

あと、Electronはメジャーになりますでしょうか？

2020/01/27(月) 11:58:59.83

naru

2020/01/27(月) 16:30:35.95

javascript専用のゲームエンジンを作ってくれ。

UNREAL.jsってなんやねん。

2020/02/15(土) 18:45:02.05

electronは人気ないのかな？
悲しい。

2020/02/16(日) 10:01:26.97

ポテンシャルの高さは VSCodeやDiscordで証明してるし多くの場面で実用化されてるので
人気無いってことはない

2020/02/21(金) 21:00:04.28

あんまり個人開発向きじゃないからスレが伸びてないだけだ

2020/03/24(火) 16:52:18.48

>>117
日本でのnode.jsのメジャー度合いでしょ。

海外じゃNode.jsもPythonも人気だが、日本は遅れてるからね

2020/04/11(土) 07:07:23.27

adobe phonegap desktopでを起動すると
プロジェクト一覧がずっとクルクル読み込みしてて終わらないんだけど対策知ってる人いますか？
再インストールでも直らない...

2020/04/12(日) 04:39:51.17

https://yutakaaoki.github.io/demo1/index.html

2020/04/12(日) 07:50:03.33

>>122
しょっぼ

2020/04/12(日) 09:33:13.80

>>122
C++ nexとはなんですか？

2020/04/12(日) 13:09:57.72

>>124
C++98 と Standard C は最低限使える C++ の独自拡張言語です。
WasmやJavaのJNIが、C++ソースから簡単に記述できる他、言語自体にも、
さまざまな拡張が施されており、リンクリストなどもC++より簡単に使用できます。
アイデアの流出を防ぐため、詳細は明かせません。

2020/04/12(日) 14:35:13.10

ゲーム的なものに興味がお有りなら、以下の様なデモも有ります：
山岳地形の実行時生成 :
https://yutakaaoki.github.io/demo_Mountain/index.html
テニスゲーム:
https://yutakaaoki.github.io/demo_tennis/index.html
田園風景とアサガオ :
https://yutakaaoki.github.io/demo2/index.html

2020/04/12(日) 17:47:17.86

>>126
5ch以外で他に活動などはされていないですか？