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

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

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

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

解決済

1回答

5204閲覧

Electronでパッケージングしたアプリでdevtoolsを開かせない方法

nand

総合スコア4

Electron

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2020/11/02 14:11

編集2020/11/02 23:28

Electronでパッケージングしたアプリでdevtoolsを開きたくありません

公式ドキュメントのクイックスタートを参考に、アプリ作成からパッケージングまでを行いました。

npx @electron-forge/cli import npm run make

そして配布用のアプリのメニューに、「View」の「toggle developer tools」が出ていて、開くとソースが確認できてしまいます。
またキーボードショートカットでもdevtoolsが開けてしまいます。

公開用アプリでdevtoolsを開かせない方法はないでしょうか?
出来れば開発時はdevtoolsを使える状態にしておきたいです。
知っている方いましたら、ご教授いただけますと幸いです。

試したこと

BrowserWindowのオプションに下記を追加しました。

main.js

1webPreferences: { 2 devTools: false 3}

正直これでも目的は達成できているのですが、これだとサブウィンドウなど全てにこのオプションが必要になります。
パッケージングのときに全て直すのは大変ですし、メニューの「toggle developer tools」は残ったままでした。

●追記
次のメニューを上書きし「toggle developer tools」をなくしました。
するとショートカットも消えるとのでdevtoolが開けなくなりました。
これでも問題ないので自己解決にしようと思ったのですが、これだと開発環境でもdevtoolが開けず不便でした。

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

OS: Mac osx var.10.15.7
Electron: 10.1.5

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

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

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

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

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

guest

回答1

0

ベストアンサー

electronで、開発時とリリース後を分けるときにはapp.isPackagedを使うとよいです。

app.isPackaged

アプリがパッケージされている場合はtrue、それ以外は false を返す Boolean プロパティ。 多くのアプリケーションでは、このプロパティを用いて開発版の環境と製品版の環境を区別できます。(Electron APIより引用)

例えば、

js

1if (!app.isPackaged) { 2 win.webContents.openDevTools(); 3}

のようにすると、開発時にしか開かれません。
つまり、追記に書かれている上書き処理をif (app.isPackaged){}で囲むと、

  • パッケージされているとき ・・・ その上書き処理が実行される。
  • 開発時 ・・・ 上書き処理は実行されなくてdevtoolを開くことできる。

という風になります。


また、環境変数のNODE_ENVを使う方法もあります。
現在の実行モードを確かめるには、process.env.NODE_ENVを使います(Electronの機能ではなく、Node.jsの機能です)。
ただし、実行するときには、環境変数を設定しないといけません。
コマンドプロンプトで、以下のように実行すると、環境変数が設定されます。

どんなときMacOS、Linuxの場合Windowsの場合
開発時NODE_ENV=developmentset NODE_ENV=development
テスト時NODE_ENV=testset NODE_ENV=test
リリース後NODE_ENV=productionset NODE_ENV=production

js

1if (process.env.NODE_ENV == "development"){ 2 win.webContents.openDevTools(); 3}

このようにすると、NODE_ENVがdevelopmentの時にだけdevtoolが開かれます。
つまり、追記に書かれている上書き処理をif (process.env.NODE_ENV == "production" || process.env.NODE_ENV == "test"){}で囲むと、

  • リリース後 ・・・ その上書き処理が実行される。
  • テスト時 ・・・ その上書き処理が実行される。
  • 開発時 ・・・ 上書き処理は実行されなくてdevtoolを開くことできる。

という風になります。
ここここなどを参考にしてみてください。


長文で分かりにくいかもしれません。
ちなみに、自分は今回の場合、app.isPackagedをおすすめします。

投稿2021/01/26 10:34

YND_teratail

総合スコア89

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

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

nand

2021/01/28 23:13

とてもご丁寧にありがとうございます!この方法で解決しました。 electronは英語で検索かけても情報が少なく、開発に慣れていない自分のような初心者には答えが出せなかったのでとても助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問