常連

### 実現したいこと

Electron + React + Vite環境のソフトをElectron Builderを使ってパッケージ化して正常動作することを目的とする。

### 前提
開発段階ではエラーは何も出ていなかったがelectron builderを使ってパッケージ化するとエラーが出た。
Electronとreactはそれぞれviteでビルドして一つにまとめてあり、ビルド済みフォルダdistなどを対象としてelectron builderでパッケージ化。

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

```
failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
```

### 該当のソースコード

```index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDFSoft</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./src/main.tsx"></script>
  </body>
</html>

```

### 試したこと

ELectronのメインファイルに以下のコードの記述をした。
```main.ts
mainWindow.webContents.session.webRequest.onHeadersReceived((details,callback) => {
        callback({
            responseHeaders: {
                ...details.responseHeaders,
                'Content-Type': ['text/javascript']
            }
        })
    });
```
別のエラーが出てしまった(Uncaught ReferenceError: require is not defined at react/main.cjs)。

### 補足情報（FW/ツールのバージョンなど）
react:18.2.0
electron:23.1.2
electron-builder:23.6.0
vite:4.0.1



MIME typeがtext/plainになってしまっている

### 実現したいこと

現在、Electron + Three.jsで環境を作成しようとしています。
その中で、Three.jsがインポートされません。これを解決したいです。

### 前提

Electronの初期画面を作成後、<canvas>要素を配置。
この<canvas>要素に対してThree.jsで描画を行う第一歩として、
WebGLRendererインスタンスを作成し、これによって<canvas>要素を黒色でクリアしようとしました。
その後、以下のエラーが発生しました。
### 発生している問題・エラーメッセージ

```
エラーメッセージ
> Failed to load resource: net::ERR_FILE_NOT_FOUND　　three.module:1
> Failed to load resource: net::ERR_FILE_NOT_FOUND　　RendererManager:1
```

### 試したこと

まず、エラーが発生しているRendererManager.jsはThree.jsのクラスを使っています。
そのため、これはThree.jsのモジュールが正しくインポートされていないと考えました。

そのうえで二つのことを試しました。
### ①index.htmlのパスをチェックする

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gameapp</title>
        <script type="module" src="./src/lib/three.module.js"></script>
        <script type="module" src="./src/js/init.js"></script>
        <script type="module" src="./src/js/renderer/RendererManager.js"></script>
    </head>
<body>
  <canvas id="main_canvas">
</body>
</html>
```
ここで行ったのは、モジュールのパスが誤っていないかの確認がまず一つです。
ただし、ここに誤りはありませんでした。

```html
<script type="importmap">
{
  "imports": {
    "three": "./src/lib/three.module.js"
  }
}
</script>
```
また、importmapによるインポートも試しましたが、機能しませんでした。

### ②package.jsonを修正する
```json
{
  "name": "gameapp",
  "homepage": "./",
  "version": "0.0.1",
  "description": "",
  "main": "./main.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "konio",
  "license": "ISC"
}
```
main.jsを上記のように変更したのと、"homepage"の項目を追加しました。
しかしそれでも改善しませんでした。



Electron + Three.jsの環境構築で、Three.jsがインポートできない

### 実現したいこと

React + Electron + Viteの環境のプロジェクトです。
開発段階では正常に動作しているので後はelectron-buidlerでパッケージ化して動作確認するだけです。



### 発生している問題・エラーメッセージ
electronソフトは起動するが、画面が真っ白。root要素はレンダリングされているので元となるhtmlファイルは読み込めている模様。
```
Failed to load resource: net::ERR_FILE_NOT_FOUND
```
開発者モードでどのファイルで発生しているかを見たところmain.tsxでreactコードのメインファイルとなっていました。

### 該当のソースコード

```react/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from "react-router-dom";
import App from './App';

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>
);
```
```electron/main.ts
長いので要望されたら追記します。
```
```package.jsonのbuild部分
"build": {
    "appId": "com.github.PDFSoft",
    "directories": {
      "output": "builderdist"
    },
    "files": [
      "package.json",
      "package-lock.json",
      "dist/**/*",
      "render/**/*",
      "scripts/**/*"
    ],
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  },
```
renderがreactフォルダ、distの中にはviteでビルドされたelectronファイルがある。

### 試したこと

プロジェクト全体のpackage.jsonにhomepage: "./"の記述、その中のrenderディレクトリにあるreactフォルダのpackage.jsonにhomepage: "./"の記述をしたが変わらず。

### 補足情報（FW/ツールのバージョンなど）

react:18.2.0
electron:23.1.2
electron-builder:23.6.0
vite:4.0.1



Failed to load resource: net::ERR_FILE_NOT_FOUNDエラーについて


The U.K Casino Tourism Market is estimated to reach US$ 6,223 Mn in 2022. As per the report, sales are forecast to increase at a robust 5.8% CAGR, with the market valuation reaching US$ 10,936 Mn by 2032.
2017-2021 U.K Casino Tourism Market Outlook Compared to 2022-2032 Forecast
Gambling has a long history in U.K and can be considered as a part of the tradition. As the proposal to construct more than a dozen "Super Casinos" complexes in the style of Las Vegas, bigger than anything previously seen in the nation, takes shape, the gambling sector in the UK has recently experienced unheard-of expansion. In 2011, the first of these modern gambling establishments opened in London. The Aspers Casino, the biggest casino in London, has an astounding 70 gaming tables, plus approximately a dozen poker tables and 150 electronic gambling machines.

With more than 100 land-based casinos spread out across the nation, sports betting, and online gambling, the gambling environment in the UK is one of the most varied in all of Europe. Casino games at UK land-based establishments range from the traditional favourites like Blackjack, Roulette, and Craps to the more unusual ones like Mahjong, Kalooki, Casino War, and Wheel of Fortune. Despite the fact that poker rooms and UK casinos frequently use the Rake system, poker is a favourite among British casino goers as well.
https://www.futuremarketinsights.com/reports/uk-casino-tourism-market 

U.K Casino Tourism Market  Growth ,Forecast to 2032																		

### 実現したいこと

自作のWebアプリから自作のデスクトップアプリの起動ボタンを押したい。

### 前提

自作でElectronでデスクトップアプリを作成したのですが、簡単にどういうものかと言うと、

デスクトップアプリ上にある「起動ボタン」を押したらのキーボードの打鍵数を記録し始めて、
「終了」ボタンを押すとキーボードの打鍵数の記録をしなくなる。

というものを作りました。

そこで次は自作のWebアプリにある「起動ボタン」を押すと上記のデスクトップアプリの「起動ボタン」を押してくれる。みたいな動きを実装してみたいなと思ったのですが、色々調べてもその方法がわかりませんでした。
だいぶ大雑把な質問になってしまうのですが、上記の動きを実現するにはどうしたらいいかの案をいただけると嬉しいです。
詳細な解決方法ではなく、こういった技術や機能を使うと実装できると思うよ。みたいな回答で十分です。

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

なし

### 該当のソースコード


### 試したこと

Electronのプロセス間通信を使うのかと思ったのですが、これはデスクトップアプリの中での通信なので、違うのかなと思いました。
またAWSとかでAPIを用意して、Webアプリ上の起動するボタンを押したらそのAPIを叩き、Electron側でそのAPIが実行されたことを検知して、起動ボタンを押す処理を実行する。みたいな動きができるのか？と思って調べたのですが、いい案が浮かびませんでした。

### 補足情報（FW/ツールのバージョンなど）

electron: 22.2.0


自作のWebアプリから自作のデスクトップアプリ（Electron）の操作をすることは可能でしょうか。

### 実現したいこと

electron-logをrendererプロセスから使用したい。

### 前提

Electronを使用したデスクトップアプリケーションを作成しています。
アプリケーションのログをとるのにelectron-logの使用を考えています。
ただ、正しい使い方がわからないせいか、うまく使用できずに困っているところです。

electron-logは現在ベータ版のVer５を使用したいと思っています。
理由はrendererプロセスからのログが簡単になったよー、みたいな説明が書いてあったので
それを利用したいと思っています。

### 試したこと

とりあえずは公式の説明を参考に実装を行なってみました。
```TypeScript
  /**
   * electron-log初期化関数
   */
  public init(): void {
    const curr = log.transports.file.fileName;
    log.transports.file.fileName = `${this.prefix}_${curr}`;
    log.initialize();

    process.on('uncaughtException', (err) => {
      // ログファイルへ記録
      log.error(err);
      // アプリを終了する (継続しない方が良い)
      app.quit();
    });
  }
```
上記コードで設定したファイル名でログファイルが生成されているのでコードは問題なく動作しているようです。
ただ、ログファイルの中には以下の警告が入っていました。
```ここに言語を入力
[2023-02-14 08:46:05.091] [warn]  Error: Preload file /Users/[user-name]/[project-name]/renderer/preload.js doesn't exist
    at initializePreload (/Users/[user-name]/[project-name]/dist/main.js:23624:15)
    at /Users/[user-name]/[project-name]/dist/main.js:23613:13
```
preload.jsがないということですが、確かに`initialize()`で引数指定なしだと、上記のパスにpreload.jsを探しに行く処理になっていましたが、ここでいうpreload.jsはelectron-logで用意されているpreload.jsのことですが、これをビルド時に所定の位置に配置する方法がよくわかっていなくて困っています。
それに仮に配置できたとしても既に自前のpreload.jsがあるため、**二つ読み込むことになると思うのですが、そのようなことは可能なのでしょうか？**

また、別の方法？であるグローバル変数を使用したログ方法があるようですが、こちらも動作しませんでした。
```TypeScript
__electronLog.info('test');
```
以下のエラーが出ます。
```ここに言語を入力
Uncaught ReferenceError: __electronLog is not defined
```

長くなってしまいましたが、どうやったらrendererプロセスからログができるようになるでしょうか？
もちろん、自作のプロセス間通信の実装使ってmainプロセスの処理をrendererプロセスで呼べるようにすればいいのですが、
electron-log側でそれが必要ないように準備してあるのであればそれをどうにかして使いたいです。
心当たりがある方がいらっしゃいましたら、教えていただけませんでしょうか？
よろしくお願いいたします。

### 補足情報（FW/ツールのバージョンなど）
electron : 20.1.3
esbuild : 0.15.7
typescript : 4.8.3

electron-logをRendererプロセスから使用する方法

Electronをインストールしたいのですが、エラーがでてしまいます。
会社のPCからインストールしているのでプロキシ認証に失敗してる可能性があります。
エラーコードは以下の通りです。
ご教授お願い致します。

C:\test>npm install electron
npm WARN registry Unexpected warning for http://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to http://registry.npmjs.org/electron failed, reason: connect ETIMEDOUT 10.0.58.88:8080
npm WARN registry Using stale data from http://registry.npmjs.org/ due to a request error during revalidation.

環境
Windows10
Node.js v12.16.1

補足
実行したこと(参考https://heimdal.hatenablog.com/entry/electron-setup)
npm config set registry "http://registry.npmjs.org/"
npm config set proxy "http://<server>:<port>/"
npm config set proxyhttps-proxy  "http://<server>:<port>/"
npm i electron 
パスワードを入力していないことに気づき
↓
npm config set proxy "http://<username>:<password>@<server>:<port>/"
npm config set proxyhttps-proxy  "http://<username>:<password>@<server>:<port>/"
これを入力しましたがうまく行きませんでした…

Electronがインストールできない

シンプルなElectronアプリを作り、windows用のexeファイルをビルドしました。
※デフォルトのGUIが起動し、`Hello World`と表示されるだけ

このexeをクリックすると表示されるまでに7秒くらい掛かります。
※ちなみにExcel2016だとスプラッシュ画像が2秒程度で表示される環境です。

実行環境(windows 10)上でのその他アプリと比較してだいぶ遅すぎるのですがElectronだとこれが当たり前なのでしょうか。

例えばVSCodeもElectron製らしいのですが起動の速度は段違いに早いです。

仕組み上、ある程度は起動時に時間がかかるのは承知しておりますが
せめてストレスのかからないレベルには早めたいと思っています。

何か高速化の方法はないでしょうか。ご存じの方どうぞご教授願います。

※2019/11/04追記その１
exeファイルはelectron-builderで作成し、`'target': 'portable'`、`'arch':['x64']`でビルドしています。
また`electron`コマンドの実行や`asar`で作ったアーカイブを実行する場合はそれなりに早く起動します。

※2019/11/04追記その２
electron-builderでビルドすると、単体で動作するexeと、おそらくそれを作る元になるファイル群が格納されたwin-unpackedディレクトリが作られます。

win-unpackedはおそらくelectron-builderでzipを生成した時の中身とほぼ一緒で、その中にあるexeはとても早く起動します。(追記１と同じ)

単体exeの方は自身に含まれるソースをメモリ上に解凍したりする等の時間の掛かる処理でもあるのでしょうか。。
こちらの方がソースファイルが見れない等の利点も有って良いのですが
これ以上早くならないようであれば諦めてzip版を使う事になりそうです。