🤔Electronで組み込み端末向けアプリケーションを開発し3年間運用してみて2021/06/06に公開15件ElectronJavaScriptNode.jsWindowstechGitHubで編集を提案Discussion大学生だった.2021/06/06新卒1年目からゴリゴリコード書いて、色々対応したりすごいですね。 Electron使ってみたいと思っていたので、こんな使い方もできるんだと読んでいて面白かったです！ aku2021/06/06ありがとうございます！コメントいただけてとても嬉しいです！ 返信を追加kitamin2021/06/07 イベントビューアーを起動して「Windows ログ → システム」を確認するとエラーログがびっしり並んでいます。 ログの外部転送が可能なら監視組み込んでおくと運用しやすいですよ。 スペックとの相談にもなりますが、大抵の監視サービスはwinイベント用の監視エージェントが用意されていますし、他のwin機に対して転送することもできます。 あとwinイベントは何気に容量食うので、外部監視に逃がして本体のログは切り詰めるなりアーカイブするなりの設定しておくと良いです。 aku2021/06/07確かに監視系入れておけば良かったですね… サーバーでなくPCの延長と考えていたせいか思いつかなかったです。 参考になりました。ありがとうございます！ aku2021/07/07 あとwinイベントは何気に容量食うので、外部監視に逃がして本体のログは切り詰めるなりアーカイブするなりの設定しておくと良いです。 そういえば、イベントビューアーを開く時に一覧が表示されるまで数十秒かかっていました。 これは大事かも知れない… 返信を追加odakaz2021/06/28ただの好奇心なのですが、フロント側はなにかフレームワーク採用されましたか？ Next.js Vue などなど・・・ aku2021/07/28に更新Reactを採用したかったのですが、社内で実績がなく周囲の理解を得られなかったのでjQuery + EJSでやりました… にも関わらずSPAじゃないとクリアできない要件（画面遷移にアニメーションを持たせる）があったので、ヤケクソ独自のフレームワークを作ってEJSでレンダリングしたHTMLをDOMに流し、画面遷移に合わせて入れ替えていく実装にしました。 AndroidのアクティビティやUnityのシーンのライフサイクルを参考にして、 beforeLoad→(EJSレンダリング)→onLoad→afterLoad→onUnload と要所にjQueryを実行するためのメソッドを作ったベースクラスを用意し、それを継承する実装にしました。 思った通りに動いてくれましたが、EventListenerの解除漏れなど潜在的な不具合に悩まされたりしたので、やはりReactを採用しておいた方が良かったと思っています。 新技術を導入するにあたって、社内の理解を得るために勉強会を開いたりすることがとても大事だと実感しましたし、jQueryを使う（おそらく）最初で最後の機会だったのでいい経験になりました。 長々とすみません！ 返信を追加anon2022/04/11Web系やってるとserve中にブラウザのように要素検証したくなるんですが、これできないんですかね？ aku2022/04/11こちら参考になると思いますー https://www.electronjs.org/ja/docs/latest/tutorial/application-debugging 返信を追加anon2022/04/12ありがとうございます。 やってみましたがうまくいきませんでした。 返信を追加りん2023/04/22 音声再生 Electron のレンダラープロセス上で JS を使って音声を再生してみると、処理性能の問題で再生されるまでの遅延が大きくて使い物になりませんでした。 これ本当にキッツイんですよねー！ アプリ開発用PC上でも遅延することがあるし、有名な音声再生用のライブラリ使っても改善しなかったので、たぶんChromium側の問題で安定しないんだと思ってました。 外部プログラムでの再生で対応したとのことですが、そのプログラムを起動すること自体では遅延しなかったのですね。 私の環境の場合、外部プログラムを使って再生する方法の方がより遅延してしまってがっかりしてました。 音源再生するためのネイティブの実装方法によるかもしれません。 aku2023/04/22他チームの人にWindowsのネイティブAPIで再生するとても軽いプログラムをC++で作ってもらいました！参考になれば〜 返信を追加Mr.Acorn2023/05/09Electronにはめちゃくちゃ興味があるのですがやったことがないです。やったほうがいいのかな・・・ aku2023/05/25「今後のために覚えておくと良い技術」という印象は世間的にもあまりないと思います。 習得するのはデスクトップアプリを作りたくなった/作る必要が出てきた時でも遅くないかなと思います。 その時に自分の技術がWeb開発に特化している場合はElectronを使うと他の方法よりも簡単にデスクトップアプリが作れると思います〜 返信を追加Mr.Acorn2023/05/25ありがとうございます！！少しチャレンジしてみます 返信を追加
大学生だった.2021/06/06新卒1年目からゴリゴリコード書いて、色々対応したりすごいですね。 Electron使ってみたいと思っていたので、こんな使い方もできるんだと読んでいて面白かったです！ aku2021/06/06ありがとうございます！コメントいただけてとても嬉しいです！ 返信を追加
kitamin2021/06/07 イベントビューアーを起動して「Windows ログ → システム」を確認するとエラーログがびっしり並んでいます。 ログの外部転送が可能なら監視組み込んでおくと運用しやすいですよ。 スペックとの相談にもなりますが、大抵の監視サービスはwinイベント用の監視エージェントが用意されていますし、他のwin機に対して転送することもできます。 あとwinイベントは何気に容量食うので、外部監視に逃がして本体のログは切り詰めるなりアーカイブするなりの設定しておくと良いです。 aku2021/06/07確かに監視系入れておけば良かったですね… サーバーでなくPCの延長と考えていたせいか思いつかなかったです。 参考になりました。ありがとうございます！ aku2021/07/07 あとwinイベントは何気に容量食うので、外部監視に逃がして本体のログは切り詰めるなりアーカイブするなりの設定しておくと良いです。 そういえば、イベントビューアーを開く時に一覧が表示されるまで数十秒かかっていました。 これは大事かも知れない… 返信を追加
aku2021/07/07 あとwinイベントは何気に容量食うので、外部監視に逃がして本体のログは切り詰めるなりアーカイブするなりの設定しておくと良いです。 そういえば、イベントビューアーを開く時に一覧が表示されるまで数十秒かかっていました。 これは大事かも知れない…
odakaz2021/06/28ただの好奇心なのですが、フロント側はなにかフレームワーク採用されましたか？ Next.js Vue などなど・・・ aku2021/07/28に更新Reactを採用したかったのですが、社内で実績がなく周囲の理解を得られなかったのでjQuery + EJSでやりました… にも関わらずSPAじゃないとクリアできない要件（画面遷移にアニメーションを持たせる）があったので、ヤケクソ独自のフレームワークを作ってEJSでレンダリングしたHTMLをDOMに流し、画面遷移に合わせて入れ替えていく実装にしました。 AndroidのアクティビティやUnityのシーンのライフサイクルを参考にして、 beforeLoad→(EJSレンダリング)→onLoad→afterLoad→onUnload と要所にjQueryを実行するためのメソッドを作ったベースクラスを用意し、それを継承する実装にしました。 思った通りに動いてくれましたが、EventListenerの解除漏れなど潜在的な不具合に悩まされたりしたので、やはりReactを採用しておいた方が良かったと思っています。 新技術を導入するにあたって、社内の理解を得るために勉強会を開いたりすることがとても大事だと実感しましたし、jQueryを使う（おそらく）最初で最後の機会だったのでいい経験になりました。 長々とすみません！ 返信を追加
aku2021/07/28に更新Reactを採用したかったのですが、社内で実績がなく周囲の理解を得られなかったのでjQuery + EJSでやりました… にも関わらずSPAじゃないとクリアできない要件（画面遷移にアニメーションを持たせる）があったので、ヤケクソ独自のフレームワークを作ってEJSでレンダリングしたHTMLをDOMに流し、画面遷移に合わせて入れ替えていく実装にしました。 AndroidのアクティビティやUnityのシーンのライフサイクルを参考にして、 beforeLoad→(EJSレンダリング)→onLoad→afterLoad→onUnload と要所にjQueryを実行するためのメソッドを作ったベースクラスを用意し、それを継承する実装にしました。 思った通りに動いてくれましたが、EventListenerの解除漏れなど潜在的な不具合に悩まされたりしたので、やはりReactを採用しておいた方が良かったと思っています。 新技術を導入するにあたって、社内の理解を得るために勉強会を開いたりすることがとても大事だと実感しましたし、jQueryを使う（おそらく）最初で最後の機会だったのでいい経験になりました。 長々とすみません！
anon2022/04/11Web系やってるとserve中にブラウザのように要素検証したくなるんですが、これできないんですかね？ aku2022/04/11こちら参考になると思いますー https://www.electronjs.org/ja/docs/latest/tutorial/application-debugging 返信を追加
りん2023/04/22 音声再生 Electron のレンダラープロセス上で JS を使って音声を再生してみると、処理性能の問題で再生されるまでの遅延が大きくて使い物になりませんでした。 これ本当にキッツイんですよねー！ アプリ開発用PC上でも遅延することがあるし、有名な音声再生用のライブラリ使っても改善しなかったので、たぶんChromium側の問題で安定しないんだと思ってました。 外部プログラムでの再生で対応したとのことですが、そのプログラムを起動すること自体では遅延しなかったのですね。 私の環境の場合、外部プログラムを使って再生する方法の方がより遅延してしまってがっかりしてました。 音源再生するためのネイティブの実装方法によるかもしれません。 aku2023/04/22他チームの人にWindowsのネイティブAPIで再生するとても軽いプログラムをC++で作ってもらいました！参考になれば〜 返信を追加
Mr.Acorn2023/05/09Electronにはめちゃくちゃ興味があるのですがやったことがないです。やったほうがいいのかな・・・ aku2023/05/25「今後のために覚えておくと良い技術」という印象は世間的にもあまりないと思います。 習得するのはデスクトップアプリを作りたくなった/作る必要が出てきた時でも遅くないかなと思います。 その時に自分の技術がWeb開発に特化している場合はElectronを使うと他の方法よりも簡単にデスクトップアプリが作れると思います〜 返信を追加
aku2023/05/25「今後のために覚えておくと良い技術」という印象は世間的にもあまりないと思います。 習得するのはデスクトップアプリを作りたくなった/作る必要が出てきた時でも遅くないかなと思います。 その時に自分の技術がWeb開発に特化している場合はElectronを使うと他の方法よりも簡単にデスクトップアプリが作れると思います〜
Discussion
新卒1年目からゴリゴリコード書いて、色々対応したりすごいですね。
Electron使ってみたいと思っていたので、こんな使い方もできるんだと読んでいて面白かったです！
ありがとうございます！コメントいただけてとても嬉しいです！
ログの外部転送が可能なら監視組み込んでおくと運用しやすいですよ。
スペックとの相談にもなりますが、大抵の監視サービスはwinイベント用の監視エージェントが用意されていますし、他のwin機に対して転送することもできます。
あとwinイベントは何気に容量食うので、外部監視に逃がして本体のログは切り詰めるなりアーカイブするなりの設定しておくと良いです。
確かに監視系入れておけば良かったですね…
サーバーでなくPCの延長と考えていたせいか思いつかなかったです。
参考になりました。ありがとうございます！
そういえば、イベントビューアーを開く時に一覧が表示されるまで数十秒かかっていました。
これは大事かも知れない…
ただの好奇心なのですが、フロント側はなにかフレームワーク採用されましたか？
などなど・・・
Reactを採用したかったのですが、社内で実績がなく周囲の理解を得られなかったのでjQuery + EJSでやりました…
にも関わらずSPAじゃないとクリアできない要件（画面遷移にアニメーションを持たせる）があったので、
ヤケクソ独自のフレームワークを作ってEJSでレンダリングしたHTMLをDOMに流し、画面遷移に合わせて入れ替えていく実装にしました。AndroidのアクティビティやUnityのシーンのライフサイクルを参考にして、
beforeLoad→(EJSレンダリング)→onLoad→afterLoad→onUnloadと要所にjQueryを実行するためのメソッドを作ったベースクラスを用意し、それを継承する実装にしました。思った通りに動いてくれましたが、EventListenerの解除漏れなど潜在的な不具合に悩まされたりしたので、やはりReactを採用しておいた方が良かったと思っています。
新技術を導入するにあたって、社内の理解を得るために勉強会を開いたりすることがとても大事だと実感しましたし、jQueryを使う（おそらく）最初で最後の機会だったのでいい経験になりました。
長々とすみません！
Web系やってるとserve中にブラウザのように要素検証したくなるんですが、これできないんですかね？
こちら参考になると思いますー
ありがとうございます。
やってみましたがうまくいきませんでした。
これ本当にキッツイんですよねー！
アプリ開発用PC上でも遅延することがあるし、有名な音声再生用のライブラリ使っても改善しなかったので、たぶんChromium側の問題で安定しないんだと思ってました。
外部プログラムでの再生で対応したとのことですが、そのプログラムを起動すること自体では遅延しなかったのですね。
私の環境の場合、外部プログラムを使って再生する方法の方がより遅延してしまってがっかりしてました。
音源再生するためのネイティブの実装方法によるかもしれません。
他チームの人にWindowsのネイティブAPIで再生するとても軽いプログラムをC++で作ってもらいました！参考になれば〜
Electronにはめちゃくちゃ興味があるのですがやったことがないです。やったほうがいいのかな・・・
「今後のために覚えておくと良い技術」という印象は世間的にもあまりないと思います。
習得するのはデスクトップアプリを作りたくなった/作る必要が出てきた時でも遅くないかなと思います。
その時に自分の技術がWeb開発に特化している場合はElectronを使うと他の方法よりも簡単にデスクトップアプリが作れると思います〜
ありがとうございます！！少しチャレンジしてみます