Electronの入門４：Electronのデバッグ設定

タグ

Electronで作成したアプリケーションはメインプロセスとレンダラープロセスから構成されています。この二つ部分のデバッグ方法が違います。

Electronのレンダラープロセスがブラウザ（Chrome）のような動きで、ブラウザの開発ツールでHTML、css、javascriptを参照しながら、jsファイルのデバッグを行います。

Electronのメインプロセスがサーバーサイトのようなプログラム（node.js）なので、ネーティブアプリ開発のデバックツールが必要となり、その開発ツールの上でデバッグを行います。

Devtron導入してレンダラープロセス（Renderer Process）のデバッグ

レンダラープロセスのデバッグ方法がいろいろがありますが、DevtronではChromeブラウザの開発ツールと同じなので、分かりやすく、優れたデバックツールとなります
以下のコマンドでDevtronをインストールします
```
npm install --save-dev devtron
```
Electronに作成されたアプリケーションが起動後に、メニュー：view > Toggle Developer Tools をクリックするとChromeの開発ツールのようなウィンドが起動されます
簡単で、直感的ですね。

Visual Studio Codeでメインプロセスのデバッグ

開発ツールVisual Studio Codeをインストールします

Electronで開発しているアプリケーションプロジェクトのフォルダにlaunch.jsonを作成します

{
    "version": "0.2.0",
    "configurations": [
        {        
            "name": "Debug Main Process",
            "type": "node",
            "request": "launch",
            "env": {"NODE_ENV": "debug"},
            "cwd": "${workspaceRoot}",
            "program" : "${workspaceRoot}/test_1/main.js",
            "runtimeExecutable": "${env:APPDATA}/Roaming/npm/electron",
            "windows": {
              "runtimeExecutable": "${env:APPDATA}/Roaming/npm/electron.cmd"
            },
            "console":"integratedTerminal",
            "args" : ["src"]
        }
   ]
}

メインプロセスのソースコードにブレイクポイントが入れれば、アプリケーション起動時にデバックが出来るようになります

シリーズ記事一覧

記事カテゴリ

タグ

Electronについて

オーペンソースフレームワーク（Open Source Platform）、GitHubで管理されています
Node.jpをベースにして、クローズプラットフォーム（Windows,MacOS、Linunxなど）上のネーティブApp構築ができます
バックエンドはJavascript＋html＋CSSで記述（フロントエンドのエンジニアに習得するコストは高くないはず）
Chromiumでコンテンツを表示します

Windows上でのインストール

最新バージョンのNode.jsをWindowsにインストールします
Node.jsの管理ツール：npm(Node Package Manager)でElectronを以下のコマンドでインストール
```
npm install electron -g
```
Electronのインストール状況、バージョンを以下のコマンドでチェックします
```
electron -v
```

Electronの基本情報を表示

Windowsのコマンドプロンプト（cmd）を起動して、以下の実行コマンドで
```
npx electron
```

記事カテゴリ

タグ

GitHub上のElectron公式アカウントで公開されているElectron API Demosというデモアプリは、基本的なElectron APIのを具体的にどんなことができるのかを知るのに便利だ。よく使うクラスと使い方が、デモの中で解説されているため、これを見ていけばElectronのAPIで何ができるのかが効率的に理解できる。

Electron API Demoのインストール

Electron API Demos：https://github.com/electron/electron-api-demos
そのパッケージをダウンロードして、Electron開発ソースディレクトリに置けばよいです

Windowsのコマンドプロンプトでデモアプリを起動します

//デモアプリのディレクトリ内で、以下のコマンドでアプリを起動
electron .

起動途中で以下のエラーが発生するかもしれないです
- Error:Cannot find module 'glob'

globモジュールが足りないエラー

Electron API Demoアプリがglobモジュールを要求します
globモジュールはファイルをパタン（例：＊、？、＋など）でマッチング機能であります

Windowsのコマンドプロンプトでglobモジュールをインストールします

//任意のディレクトリで以下のコマンドでglobをインストール
npm install glob --save

Electronデモアプリの起動

再度Windowsのコマンドプロンプトを起動して、Electronのデモアプリを起動

//デモアプリのディレクトリ内で、以下のコマンドでアプリを起動
electron .

Electronデモアプリ

シリーズ記事一覧

記事カテゴリ

タグ

Electronについて

オーペンソースフレームワーク（Open Source Platform）、GitHubで管理されています
Node.jpをベースにして、クローズプラットフォーム（Windows,MacOS、Linunxなど）上のネーティブApp構築ができます
バックエンドはJavascript＋html＋CSSで記述（フロントエンドのエンジニアに習得するコストは高くないはず）
Chromiumでコンテンツを表示します

Windows上でのインストール

最新バージョンのNode.jsをWindowsにインストールします
Node.jsの管理ツール：npm(Node Package Manager)でElectronを以下のコマンドでインストール
```
npm install electron -g
```
Electronのインストール状況、バージョンを以下のコマンドでチェックします
```
electron -v
```

Electronの基本情報を表示

Windowsのコマンドプロンプト（cmd）を起動して、以下の実行コマンドで
```
npx electron
```

記事カテゴリ

タグ

ElectronアプリケーションはMain Processと Renderer Processから構成されます

【Main Process】Electronのプロジェクトのフォルダにあるpackage.jsonの中身でmainで定義されているファイルを実行するプロセスがメインプロセスで、このメインプロセスが起動＝アプリケーションの起動。このメインプロセスが終了＝アプリケーションの終了ということです。
【Renderer Process】いわゆる、画面ごとに作成されるプロセスの事です。メインプロセスからxxxx.htmlを読み込んで画面を表示したら、その画面自体が一つのプロセスで動作していることです。複数のレンダラープロセスを起動することが出来ます。
ブラウザでたとえば、ブラウザの枠、メニューなどがメインプロセス、描画された各タブがレンダラープロセスのことです。メインプロセスが一つだけ、レンダラープロセスが最低一つ以上が存在します。

Electronのプロジェクトがpackage.jsonで定義されています

新しいプロジェクトを作成するときに、まず新規フォルダを作成します
- 例：c:\sample
プロジェクトの最低限の構成は以下のようなファイル
```
sample
├── index.html
├── main.js
└── package.json
```
この新規フォルダにpackage.jsonファイルを作成します
- package.jsonファイルの作成方法がいろいろあります。メモ帳で必要な要素を定義したりすることも出来ます
- 最初のステップで、どんな要素が必要かは分からないので、Node.jsのコマンドで生成したほうが簡単です
```
npm init
```
  いろいろな質問に答えればよいです。ポイントはいかのようです
  - package name : 任意の名前でよいです。プロジェクトのフォルダ名と違ってもかまわない
  - entry point : メインプロセスのファイル名（例：main.js）です。何も入力しなければ、index.jsと自動に定義されます。
  - ほかの項目に何も入力しなくて良いです
- プロジェクトフォルダ内のpackage.jsonファイルを開いて、適切に編集すればよいです（例：エントリポイント：main.js に変更します）。
```
{
  "name": "op_test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}
```
パッケージが作成したら、メインプロセスとレンダラープロセスの作成となります

メインプロセス、レンダラープロセスの作成

パッケージ定義ファイル（package.json）に定義されたエントリポイントファイル（main.js）を作成します

var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;

// メインウィンドウはGCされないようにグローバル宣言
let mainWindow;

// 全てのウィンドウが閉じたら終了
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// Electronの初期化完了後に実行
app.on('ready', function() {
  // メイン画面の表示（レンダラプロセスの開始）
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });
  mainWindow.loadURL('file://' + __dirname + '/index.html');   //ローカルのhtmlを表示

  //ウィンドウが閉じられたらアプリも終了
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

ここで、メインプロセスの記述が大半です。レンダラープロセスが一行だけ： mainWindow.loadURL('file://' + __dirname + '/index.html');　

非常に簡単例で、単純的にローカルにあるhtmlファイルを表示させるとなります
ローカルにあるindex.htmlを定義します（どんなページでもかまわない）
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ElectronApp</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>
```
単純的に「Hello World」を画面に表示させるだけです
Windowsコマンドプロンプトでこのフォルダで以下のコマンドでアプリを実行します
```
electron .
```

シリーズ記事一覧

記事カテゴリ

タグ

Electronについて

オーペンソースフレームワーク（Open Source Platform）、GitHubで管理されています
Node.jpをベースにして、クローズプラットフォーム（Windows,MacOS、Linunxなど）上のネーティブApp構築ができます
バックエンドはJavascript＋html＋CSSで記述（フロントエンドのエンジニアに習得するコストは高くないはず）
Chromiumでコンテンツを表示します

Windows上でのインストール

最新バージョンのNode.jsをWindowsにインストールします
Node.jsの管理ツール：npm(Node Package Manager)でElectronを以下のコマンドでインストール
```
npm install electron -g
```
Electronのインストール状況、バージョンを以下のコマンドでチェックします
```
electron -v
```

Electronの基本情報を表示

Windowsのコマンドプロンプト（cmd）を起動して、以下の実行コマンドで
```
npx electron
```

記事カテゴリ

タグ

Electron API Demoのインストール

Electron API Demos：https://github.com/electron/electron-api-demos
そのパッケージをダウンロードして、Electron開発ソースディレクトリに置けばよいです

Windowsのコマンドプロンプトでデモアプリを起動します

//デモアプリのディレクトリ内で、以下のコマンドでアプリを起動
electron .

起動途中で以下のエラーが発生するかもしれないです
- Error:Cannot find module 'glob'

globモジュールが足りないエラー

Electron API Demoアプリがglobモジュールを要求します
globモジュールはファイルをパタン（例：＊、？、＋など）でマッチング機能であります

Windowsのコマンドプロンプトでglobモジュールをインストールします

//任意のディレクトリで以下のコマンドでglobをインストール
npm install glob --save

Electronデモアプリの起動

再度Windowsのコマンドプロンプトを起動して、Electronのデモアプリを起動

//デモアプリのディレクトリ内で、以下のコマンドでアプリを起動
electron .

Electronデモアプリ

シリーズ記事一覧

記事カテゴリ

タグ