blog

クロスプラットフォームのハイブリッド・アプリケーションをビルドする

I. はじめに\nウィンドウシステムの会社のプロジェクトのアプリケーションのいくつかのため、異なるプラットフォーム用のアプリケーションを構築する必要があり、最終的に電子を使用することを決定しました。\...

Sep 20, 2020 · 6 min. read
シェア

序文

  • 同社はプロジェクトのアプリケーションの一部をウィンドウシステムで使用しているため、異なるプラットフォームのアプリケーションを構築する必要があり、最終的にエレクトロンを使用することにしました。

注:バージョンの問題によるAPIやその他のエラーを避けるため、この記事で使用しているバージョンも最新バージョンは v9.1.1 公式サイトです 。

Electron ?

electronは、フロントエンドのHTML、CSS、JavaScript、およびマルチプラットフォームのハイブリッドアプリケーション開発githubオープンソースライブラリを構築するための他のWeb技術の組み合わせです。2014年にオープンソース化されました。

エレクトロンの構造は?

Electronのアップデート頻度は約2-4週間です。また、発見されたバグを頻繁に修正し、新しいAPIやバージョンアップがあった際にはアップデートがリリースされます。

第二に、必要な環境

node、npm環境の確認

➜ ~ node -v 
v10.16.0 
➜ ~ npm -v 
6.9.0 

電子機器の設置

npm install electron -g

プロジェクトの作成 / リポジトリのクローン

  • より多くの公式の手順を作成することができますが、ここでは、直接公式のelectron-quick-startクローンすることを選択することをお勧めします。
# サンプルプロジェクトのリポジトリをクローンする
git clone https://.//--rt
# この倉庫に入る。
cd electron-quick-start
# 依存関係をインストールして実行する
npm install && npm start
  • 手動によるプロジェクト作成
  • 新しいプロジェクト・ディレクトリを作成し、新しいmain.jsを作成し、コマンドラインでカレント・ディレクトリを開きます。
  • index.htmlファイルを新規に作成することもできますし、新規に作成せず、その後ろに直接好きなページを導入することもできます。
# プロダクション・プロフィール package.json
npm init
  • main.jsコンフィギュレーションを開き、以下のコードを記述します。
const { app, BrowserWindow } = require("electron"); // nodejs 構文、電子の導入
const path = require("path");
function createWindow() { // ウィンドウ作成機能
 const mainWindow = new BrowserWindow({
 width: 800,
 height: 500,
 // frame: false, // ボーダーレスモード、デフォルトはtrue
 });
 mainWindow.loadFile("./Calculator/index.html"); // ローカルファイルを開く
 // mainWindow.loadURL("https://..om"); //アドレスを開く
 // 開発者モード、デバッグを開く
 // mainWindow.webContents.openDevTools()
}
// 準コンポーネント・ローディング機能
app.whenReady().then(() => {
 createWindow();
 app.on("activate", function() { // ここで重要なのは、もしウィンドウがなければ、アクティブになったときにウィンドウを作成することである。
 if (ブラウザウィンドウ.getAllWindows().length === 0) createWindow();
 });
});
// ウィンドウを閉じたとき
app.on("window-all-closed", function() {
 if (process.platform !== "darwin") app.quit();
});
  • うごく

電子 <--- ここで「. '

electron-forgeを使用して電子プロジェクトを作成することもできます。

npm install electron-forge -g
electron-forge init my-electron
cd my-electron
npm start

III.プロセスとスレッド

はじめに

プロセス:実行中のコンピュータ・プログラム。CPUは常にプロセスを実行し、他のプロセスは保留されます。

スレッド:スレッドはオペレーティングシステムの計算スケジューリングの最小単位であり、js環境は一般的にシングルスレッドです。

JSはシングルスレッドで、電子はChromiumの開発に基づいている下は、マルチスレッドであることを知っているので、電子もマルチスレッドで、主にメインプロセスとレンダリングプロセスに分かれています。

メインプロセス: package.jsonのメインスクリプトを実行するプロセスをメインプロセスと呼びます。 メインプロセスで実行されるスクリプトは、ウェブページを作成してユーザーインターフェースを表示します。Electronアプリケーションのマスタープロセスは常に1つだけです。

レンダリングプロセス:Electronはウェブページの表示にChromiumを使用しているため、Chromiumのマルチプロセスアーキテクチャも使用されています。 Electronの各ウェブページはレンダリングプロセスと呼ばれる独自のプロセスで実行されます。

ブラウザで実行される通常のウェブページは、オペレーティングシステムのネイティブリソースにアクセスすることはできませんが、ElectronはNodejs APIのサポートにより、オペレーティングシステムとの基本的なインタラクションを実行することができます。

メインプロセスとレンダリングプロセスの関係

  • マスタープロセスは、BrowserWindowインスタンスを使用してページを作成します。 各BrowserWindowインスタンスは、独自のレンダリングプロセスでページを実行します。 BrowserWindowインスタンスが破棄されると、対応するレンダリングプロセスが終了します。
  • マスタープロセス配下の各ウェブページと、それらに関連するレンダリングプロセスは互いに独立しています。

メインプロセスとレンダリングプロセスの直接通過

Electronには、マスタープロセスとレンダラープロセス間の通信方法がいくつか用意されています。

  • ipcRenderer はレンダリング処理に使用されます。
    • ipcMain.on(channel, listener) --> channel はイベントチャネル、listener は対応する webContent.send() で使用されるトリガコールバック関数です。
  • ipcMain はメイン プロセスで使用され、レンダリング プロセスで送信されたメッセージに応答します。
    • global.foo = { 'c': 'default\x20value' }; --> ipcRenderから同じチャネルに応答します。
  • event.sender: メインプロセスは、レンダリングプロセスから送信されたメッセージをリッスンし、応答イベントコールバック関数のevent.send()メソッドを使用して、メッセージをレンダリングプロセスに送信します。
  • webContent: ipcMain 自身は、イベントを直接送信することはできません。 イベントコールバック関数に応答して、イベントを介してのみ送信することができます。 メインプロセスにメッセージを送信させたい場合は、webContent を使用することができます。webContent は、BrowserWindow インスタンスのメソッドです。
    • webContent.send(channel, data) --> メインプロセスからレンダリングプロセスにメッセージを送信します。

異なるレンダリングプロセス間でのデータ共有

  • これは、localStorageやsessionStorageといったHTML5のAPIを使用するだけで実現できます。
  • 代表例
require('electron').remote.b('sharedObject').foo = 'new\x20value';
console.log(require('electron').remote.obj('sharedObject').c);
{ ... "script": { ... "builderwin": "electron-builder -win", // 起動スクリプト "buildermac": "electron-builder -mac" ... }, build: { "appId": "com.itcast.app", // "directories": { "app": "/", // アプリケーション・カタログ "output": "dist" // 出力ディレクトリ }, "productName": " ", // プロジェクト名 xxx.exe "dmg": { // これは主にマックの設定のためである。 "icon": "./xxx/mac.icns", // アイコン経路 "window": { // ウィンドウの設定 "x": "200", "y": "150", "width": 500, "height": 400 } }, "mac": { "icon": "./images/mac.icns" }, "win": { "icon": "./images/icon.ico", // アイコン経路 "extraResource": { // DLLなどの静的ファイルを指定された場所にコピーする。 "from": "./app-update.yml", "to": "./b.txt" }, }, "asar": false, // asar "extraResource": { // DLLなどの静的ファイルを指定された場所にコピーする。 "from": "./app-update.yml", "to": "./b.txt" }, "nsis": { "oneClick": false, // ワンピース設置 "guid": "xxxx", //レジストリ名、推奨しない "perMachine": true, // インストール履歴の制限を有効にするかどうか "allowElevation": true, // 昇格要求を許可する。falseの場合、ユーザは昇格権限でインストーラを再起動しなければならない。 "allowToChangeInstallationDirectory": true, // インストール・ディレクトリの変更を許可する "installerIcon": "./build/icons/aaa.ico", // インストール・アイコン "uninstallerIcon": "./build/icons/bbb.ico", // アンインストールアイコン "installerHeaderIcon": "./build/icons/aaa.ico", // インストール中のヘッダーアイコン "createDesktopShortcut": true, // デスクトップのアイコンを作成する "createStartMenuShortcut": true, // スタートメニューのアイコンを作成する "shortcutName": "xxxx" // アイコン名 } } ... }

梱包

荷造りには2つの方法があります。

アプリケーションへの形式的なパッケージング

  • Win パッケージ: Platform --paltform=win32 | Architecture --arch=x64 | Icon --icon=**.ico
  • mac用パッケージ: Platform --paltform=drawin | Architecture --arch=x64 | Icons --icon=**.ico

インストーラーとしてパッケージ化

electron-packager ./ app --platform=win32 --out=./dist --arch=x64 --app-version=1.0.0 --icon=./image/icon.ico --overwite

  • 起動スクリプトの設定: package.jsonを開いてください。すべてを設定する必要はありません。
{
...
"script": {
 ...
 "builderwin": "electron-builder -win", // 起動スクリプト "buildermac": "electron-builder -mac" ...
},
 build: {
 "appId": "com.itcast.app", //  
 "directories": {
 "app": "/", // アプリケーション・カタログ
 "output": "dist" // 出力ディレクトリ
 },
 "productName": " ", // プロジェクト名 xxx.exe
 "dmg": { // これは主にマックの設定のためである。
 "icon": "./xxx/mac.icns", // アイコン経路
 "window": { // ウィンドウの設定
 "x": "200",
 "y": "150",
 "width": 500,
 "height": 400
 }
 },
 "mac": { "icon": "./images/mac.icns" },
 "win": { 
 "icon": "./images/icon.ico", // アイコン経路
 "extraResource": { // DLLなどの静的ファイルを指定された場所にコピーする。
 "from": "./app-update.yml",
 "to": "./b.txt"
 },
 },
 "asar": false, // asar 
 "extraResource": { // DLLなどの静的ファイルを指定された場所にコピーする。
 "from": "./app-update.yml",
 "to": "./b.txt"
 },
 "nsis": {
 "oneClick": false, // ワンピース設置
 "guid": "xxxx", //レジストリ名、推奨しない
 "perMachine": true, // インストール履歴の制限を有効にするかどうか
 "allowElevation": true, // 昇格要求を許可する。falseの場合、ユーザは昇格権限でインストーラを再起動しなければならない。 "allowToChangeInstallationDirectory": true, // インストール・ディレクトリの変更を許可する "installerIcon": "./build/icons/aaa.ico", // インストール・アイコン "uninstallerIcon": "./build/icons/bbb.ico", // アンインストールアイコン "installerHeaderIcon": "./build/icons/aaa.ico", // インストール中のヘッダーアイコン "createDesktopShortcut": true, // デスクトップのアイコンを作成する "createStartMenuShortcut": true, // スタートメニューのアイコンを作成する "shortcutName": "xxxx" // アイコン名
 }
 }
...
}
Read next

Javaの<? extend E>と<? super E>である。

Javaは"?" 一般的なパラメータでワイルドカードは、役割は次のとおりです。コンテナの現在のタイプが指定されている知らない、あなたがすることができます?プレースホルダーにすることができます。 私が最初に一番戸惑ったのは、コンパイラが対応するワイルドカード型に格納できるデータをどうやって知るのかということでした。 コンパイラがリストを使用する場合、そのリストの汎用パラメータしか知らないことを覚えておいてください...

Sep 19, 2020 · 4 min read