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

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

ただいまの
回答率

89.53%

Electronのバージョンを.html上で表示させたいが、出来ない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 441

3dprinter

score 0

前提・実現したいこと

electron、Node.jsともに触ったばかりです。

最新版で学ぶElectron入門
上のサイトを参考にNode.jsや、electronをインストールしてプログラムを実行しました。

そのプログラムは簡単なもので、文字と使っているelectronなどのバージョンを出力するものです。

ですが自分の作成したものだと、実行自体は出来たのですが、
electronなどのバージョン表示をすることができずにデベロッパーツールの、コンソールにエラーが出力されました。

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

Uncaught ReferenceError: process is not defined
    at index.html:9
Uncaught ReferenceError: process is not defined
    at index.html:10
Uncaught ReferenceError: process is not defined
    at index.html:11


実行結果(本来ならWe are using nodeの後にバージョン表示が出る)
イメージ説明

該当のソースコード

プログラムは参考にしたサイトをそのままコピペしたものです。

---main.js

// アプリケーション作成用のモジュールを読み込み
const { app, BrowserWindow } = require("electron");

// メインウィンドウ
let mainWindow;

function createWindow() {
  // メインウィンドウを作成します
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });

  // メインウィンドウに表示するURLを指定します
  // (今回はmain.jsと同じディレクトリのindex.html)
  mainWindow.loadFile("index.html");

  // デベロッパーツールの起動
  mainWindow.webContents.openDevTools();

  // メインウィンドウが閉じられたときの処理
  mainWindow.on("closed", () => {
    mainWindow = null;
  });
}

//  初期化が完了した時の処理
app.on("ready", createWindow);

// 全てのウィンドウが閉じたときの処理
app.on("window-all-closed", () => {
  // macOSのとき以外はアプリケーションを終了させます
  if (process.platform !== "darwin") {
    app.quit();
  }
});
// アプリケーションがアクティブになった時の処理(Macだと、Dockがクリックされた時)
app.on("activate", () => {
  // メインウィンドウが消えている場合は再度メインウィンドウを作成する
  if (mainWindow === null) {
    createWindow();
  }
});

---index.html

<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>

<body>
  <h1>初めてのElectron</h1>
  We are using node <script>document.write(process.versions.node)</script>,
  Chrome <script>document.write(process.versions.chrome)</script>,
  and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

試したこと

・main.jsの、createWindow()内にconsole.log(process.versions.node);と記述したところ、
cmdの方にバージョンが表示されたので、process.versions.nodeはjs上でちゃんと動くことを確認しました。

・index.htmlのdocument.writeの中身をただの数字に変えたところ、エラーが消えたので、
document.writeがおかしいわけではなさそうでした。

・index.html内でprocess.versions.nodeが見れないのが原因であると推測したのですが、
electronはもちろん、Node.jsすら初めての自分には、解決方法が思いつきませんでした。

・Node.jsの再インストールも試したのですが、改善されませんでした。

・いくつかサイトを回って確認してみたのですが、自分と同じような事が起こった人物を見つけられませんでした。

・それから自分と同じようにサイトを参考にelectronでプログラムを実行したところ、 正しく実行できた人の記述を見て
自分一人ではどうすることも出来なさそうだと感じ、ここで質問することにしました。

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

Node.js : v10.16.3
npm : 6.9.0
electron : v6.0.3

追記

htmlのスクリプトを、別スクリプトを参照する方式をとってみたのですが、解決できませんでした。
これはmain.js意外だとprocess.versions.nodeを参照することが出来ないようになっているからだと推測しています。

以下、その追記したプログラム内容

<!--Here is index.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>

<body>
  <h1>初めてのElectron</h1>
  We are using node <script type="text/javascript" src="version.js"></script>,
  Chrome <script>document.write(process.versions.chrome);</script>,
  and Electron <script>document.write(process.versions.electron);</script>.
</body>
</html>
//Here is version.js
document.write(process.versions.node);
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

こちらを参考に、electronを過去バージョン(1.8.8)でインストールしたところ、エラーが消えました。

良く分かりませんが、最新安定版であるv6.0.3であると動作しないようです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/22 16:33

    ただ、そのままのプログラムだと、a javascript error occurred in the main process というエラーが出ます。
    loadFileをloadURLにするなどの若干の修正が必要でした。

    キャンセル

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

  • ただいまの回答率 89.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る