Electron - Electronの概要 - 版の履歴

Wiki: /* Electronの機能 */

2023-08-26T18:53:33Z

Electronの機能

@@ 31行目: / 31行目: @@
 http://electron.atom.io/docs<br>
 https://github.com/atom/electron<br>
 <br><br>

Wiki: /* Electronソフトウェアのパッケージング */

2021-01-15T03:54:09Z

Electronソフトウェアのパッケージング

@@ 220行目: / 220行目: @@
 <br>
 このディレクトリを配布することで、他の環境でも実行可能となる。<br>
 <br><br>

Wiki: /* Electronソフトウェアのパッケージング */

2021-01-15T01:15:05Z

Electronソフトウェアのパッケージング

← 古い版		2021年1月15日 (金) 10:15時点における版
204行目:		204行目:
	#: <code>npm install electron-packager -g</code>(グローバルインストール)		#: <code>npm install electron-packager -g</code>(グローバルインストール)
	# パッケージングを実行する。		# パッケージングを実行する。
			#: Electronのバージョンは、<code>npm list</code>コマンドを実行することにより確認できる。
	#* Linux x64		#* Linux x64
	#: <code>electron-packager ./app "hello-world" --out=dist --platform=linux --arch=x64 --version=~~0.25.3~~</code>		#: <code>electron-packager ./app "hello-world" --out=dist --platform=linux --arch=x64 --electron-version=<Electronのバージョン></code>
	#: Windows x86		#* Windows x86
	#: <code>electron-packager ./app "hello-world" --out=dist --platform=win32 --arch=ia32 --version=~~0.25.3~~</code>		#: <code>electron-packager ./app "hello-world" --out=dist --platform=win32 --arch=ia32 --electron-version=<Electronのバージョン></code>
	#: Windows x64 / MacOSX		#* Windows x64 / MacOSX
	#: <code>electron-packager ./app "hello-world" --out=dist --platform=darwin,win32 --arch=x64 --version=~~0.25.3~~</code>		#: <code>electron-packager ./app "hello-world" --out=dist --platform=darwin,win32 --arch=x64 --electron-version=<Electronのバージョン></code>
	<br>		<br>
	パッケージングが完了すると、以下のディレクトリが生成される。<br>		パッケージングが完了すると、以下のディレクトリが生成される。<br>

Wiki: /* Electronソフトウェアのパッケージング */

2021-01-15T01:10:56Z

Electronソフトウェアのパッケージング

← 古い版		2021年1月15日 (金) 10:10時点における版
201行目:		201行目:
	# 作業ディレクトリに移動する。		# 作業ディレクトリに移動する。
	# 以下のコマンドを実行して、electron-packagerをインスールする。		# 以下のコマンドを実行して、electron-packagerをインスールする。
	#: <code>npm install electron-packager -g</code>		#: <code>npm install electron-packager --save-dev</code>(ローカルインストール) <span style="color:#C00000">※推奨</span>
			#: <code>npm install electron-packager -g</code>(グローバルインストール)
	# パッケージングを実行する。		# パッケージングを実行する。
	#* Linux x64		#* Linux x64

Wiki: /* Electronソフトウェアのパッケージング */

2021-01-15T01:03:28Z

Electronソフトウェアのパッケージング

← 古い版		2021年1月15日 (金) 10:03時点における版
203行目:		203行目:
	#: <code>npm install electron-packager -g</code>		#: <code>npm install electron-packager -g</code>
	# パッケージングを実行する。		# パッケージングを実行する。
	#: Windows ~~x86をパッケージング~~		#* Linux x64
			#: <code>electron-packager ./app "hello-world" --out=dist --platform=linux --arch=x64 --version=0.25.3</code>
			#: Windows x86
	#: <code>electron-packager ./app "hello-world" --out=dist --platform=win32 --arch=ia32 --version=0.25.3</code>		#: <code>electron-packager ./app "hello-world" --out=dist --platform=win32 --arch=ia32 --version=0.25.3</code>
	#: Windows x64 / ~~MacOSXをパッケージング~~		#: Windows x64 / MacOSX
	#: <code>electron-packager ./app "hello-world" --out=dist --platform=darwin,win32 --arch=x64 --version=0.25.3</code>		#: <code>electron-packager ./app "hello-world" --out=dist --platform=darwin,win32 --arch=x64 --version=0.25.3</code>
	<br>		<br>
	パッケージングが完了すると、以下のディレクトリが生成される。<br>		パッケージングが完了すると、以下のディレクトリが生成される。<br>
	/dist/		/dist/
	\|-- /hello-world-~~darwin~~-x64/ (~~MacOSX~~)		\|-- /hello-world-linux-x64/ (Linux x64)
	\|-- /hello-world-win32-ia32/ (Windows x86)		\|-- /hello-world-win32-ia32/ (Windows x86)
	\|-- /hello-world-win32-x64/ (Windows x64)		\|-- /hello-world-win32-x64/ (Windows x64)
			\|-- /hello-world-darwin-x64/ (MacOSX)
	<br>		<br>
	このディレクトリを配布することで、他の環境でも実行可能となる。<br>		このディレクトリを配布することで、他の環境でも実行可能となる。<br>

Wiki: /* Electronによる開発 */

2021-01-15T00:47:31Z

Electronによる開発

← 古い版		2021年1月15日 (金) 09:47時点における版
130行目:		130行目:
	mainWindow = null;		mainWindow = null;
	});		});

			// このファイルには、アプリの他の特定のメインプロセスコードを含めることができる。
			// また、別々のファイルに記述して、ここで要求することもできる。
	});		});
	</syntaxhighlight>		</syntaxhighlight>

Wiki: /* Electronソフトウェアのパッケージング */

2021-01-15T00:46:21Z

Electronソフトウェアのパッケージング

@@ 212行目: / 212行目: @@
 <br>
 このディレクトリを配布することで、他の環境でも実行可能となる。<br>
 <br><br>
 __FORCETOC__
 [[カテゴリ:Electron]]

Wiki: /* Electronによる開発 */

2021-01-15T00:36:08Z

Electronによる開発

← 古い版		2021年1月15日 (金) 09:36時点における版
97行目:		97行目:
	{		{
	app.quit();		app.quit();
			}
			});

			app.on('activate', function()
			{
			// MacOSXでは、ウィンドウを全て閉じてもプロセスは生存し続けており、ドックアイコンをクリックすると再表示される
			if (win === null)
			{
			createWindow();
	}		}
	});		});

Wiki: /* ソフトウェアの実行 */

2021-01-15T00:01:04Z

ソフトウェアの実行

@@ 144行目: / 144行目: @@
 == ソフトウェアの実行 ==
-ターミナルから以下のコマンドを実行して、ソフトウェアを実行する。<br>
+プロジェクトのディレクトリに移動して、ターミナルまたはコマンドプロンプト(Powershell)から以下のコマンドを実行する。<br>
-  electron app
+* ローカルインストール時の場合
 <br>
 後は通常のHTML / JavaScriptによる開発と同様である。<br>
 デバッガが表示されているのは、main.jsファイルに以下の行が記述されているからである。<br>
 この行をコメントアウトすることで非表示になる。<br>
   main.jsファイル
   // mainWindow.openDevTools();
 <br><br>

Wiki: /* Electronのインストール */

2021-01-14T19:17:49Z

Electronのインストール

← 古い版		2021年1月15日 (金) 04:17時点における版
38行目:		38行目:
	Node.js - https://nodejs.org/<br>		Node.js - https://nodejs.org/<br>
	<br>		<br>
	~~以下のコマンドを実行して、Electronをインストールする。~~<br>		まず、以下のコマンドを実行して、package.jsonファイルを作成する。<br>
	<code>npm ~~install electron~~ -g</code><br>		<code>npm init</code>コマンド(<code>-y</code>オプションを付加しない)を実行する時は、ソフトウェアのエントリポイントを<code>main.js</code>と入力する。<br>
	<s><~~code~~>~~npm install electron-prebuilt -g~~</~~code~~></s><br>		npm init
	<span style="color:#C00000">※ electron-~~prebuiltはdeprecatedとなっているので注意すること。~~</~~span~~><br>		または
			npm init -y
			<br>
			次に、以下のコマンドを実行して、Electronをインストールする。<br>
			<u>グローバルインストールする場合、Electronのアップデートにおいて、プロジェクトによっては動作しなくなる可能性がある。</u><br>
			<u>そのため、プロジェクトごとのインストール(ローカルインストール)を推奨する。</u><br>
			npm install --save-dev electron (ローカルインストール) プロジェクトフォルダ直下で実行する <span style="color:#C00000">※推奨</span>
			または
			npm install electron -g (グローバルインストール)
			<br>
			<u>※補足</u><br>
			<u>electron-prebuiltはdeprecated(廃止)となっているので注意すること。</u><br>
			<s>npm install electron-prebuilt -g</s>
	<br><br>		<br><br>

Wiki: ページの作成:「== 概要 == Electron(旧 : Atom Shell)とは、HTML5 / JavaScript等のWeb技術で実装されたソフトウェアを実行するためのクロスプラットフォ…」

2021-01-14T18:39:23Z

ページの作成:「== 概要 == Electron(旧 : Atom Shell)とは、HTML5 / JavaScript等のWeb技術で実装されたソフトウェアを実行するためのクロスプラットフォ…」

新規ページ

== 概要 ==
Electron(旧 : Atom Shell)とは、HTML5 / JavaScript等のWeb技術で実装されたソフトウェアを実行するためのクロスプラットフォーム実行環境である。 
NW.jsと同様に、ChrominumとNode.jsをベースとしている。 
 
MicrosoftからリリースされたVisual Studio CodeもElectronで開発されている。 
 

== Electronで開発するメリット ==
Electronは、HTML5 / JavaScriptのコードとそれを実行するためのChromiumをバンドルして配布している。 
そのため、開発者は実行環境の違いを意識せずに開発を行うことができる。 
 
Electronは、Windows / Mac / Linux等の主要なOSをほぼ全てサポートしており、 
HTML5 / JavaScriptだけで実現できないネイティブの多くの機能もプラグインとして提供している。 
 
また、既存の膨大なJavaScriptライブラリをフルに活かして開発することができ、 
Webアプリケーションやスマートフォン向けソフトウェアの大部分のコードを共通化することも可能である。 
 

== Electronの機能 ==
Electronには、様々な機能やツールが用意されている。 
主なものは以下の通りである。 
* アプリケーションの自動更新機能
* クラッシュレポーティング機能
* Windowsインストーラの作成ツール
* デバッグ及び印刷機能
* ネイティブメニューや通知機能
 
その他、Node.jsで記述された様々なプラグインが用意されている。 
 
詳細については、公式Webサイトのドキュメントを確認すること。 
http://electron.atom.io/docs 
https://github.com/atom/electron 
 

== Electronのインストール ==
Electronのインストールは、Node.jsのnpmコマンド(Node Pacakge Manager)で行う。 
npmコマンドを使用するには、Node.jsをインストールする必要がある。 
Node.js - https://nodejs.org/ 
 
以下のコマンドを実行して、Electronをインストールする。 
<code>npm install electron -g</code> 
<s><code>npm install electron-prebuilt -g</code></s> 
※ electron-prebuiltはdeprecatedとなっているので注意すること。 
 

== Electronによる開発 ==
ここでは、Hello Worldソフトウェアを作成する。 
 
Hello Worldソフトウェアを構成するファイルは、以下の通りである。 
/app/
|-- package.json
|-- main.js
|-- index.html
 
package.jsonファイルは、ソフトウェアのマニフェストファイルである。 
ソフトウェアに関する情報を記述する。 
package.jsonファイル

{
"name" : "hello-world",
"version" : "0.1.0",
"main" : "main.js"
}
 
main.jsファイルは、ソフトウェアの実行時に最初に読み込まれるファイルである。 
<syntaxhighlight lang="javascript">
main.jsファイル

var app = require('app'); // Module to control application life.
var BrowserWindow = require('browser-window'); // Module to create native browser window.

// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function()
{
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform != 'darwin')
{
app.quit();
}
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function()
{
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600});

// and load the index.html of the app.
mainWindow.loadUrl('file://' + __dirname + '/index.html');

// Open the devtools.
mainWindow.openDevTools();

// Emitted when the window is closed.
mainWindow.on('closed', function()
{
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
});
</syntaxhighlight>
 
index.htmlは、ソフトウェアの実行時に表示されるHTMLファイルである。 
main.jsファイルから読み込まれる。 
<syntaxhighlight lang="html">
index.htmlファイル

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using io.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.
</body>
</html>
</syntaxhighlight>
 

== ソフトウェアの実行 ==
ターミナルから以下のコマンドを実行して、ソフトウェアを実行する。 
electron app
 
後は通常のHTML / JavaScriptによる開発と同様である。 
デバッガが表示されているのは、main.jsファイルに以下の行が記述されているからである。 
この行をコメントアウトすることで非表示になる。 
main.jsファイル

// mainWindow.openDevTools();
 

== Electronソフトウェアのパッケージング ==
# まず、distディレクトリを作成する。
# 作業ディレクトリに移動する。
# 以下のコマンドを実行して、electron-packagerをインスールする。
#: <code>npm install electron-packager -g</code>
# パッケージングを実行する。
#: Windows x86をパッケージング
#: <code>electron-packager ./app "hello-world" --out=dist --platform=win32 --arch=ia32 --version=0.25.3</code>
#: Windows x64 / MacOSXをパッケージング
#: <code>electron-packager ./app "hello-world" --out=dist --platform=darwin,win32 --arch=x64 --version=0.25.3</code>
 
パッケージングが完了すると、以下のディレクトリが生成される。 
/dist/
|-- /hello-world-darwin-x64/ (MacOSX)
|-- /hello-world-win32-ia32/ (Windows x86)
|-- /hello-world-win32-x64/ (Windows x64)
 
このディレクトリを配布することで、他の環境でも実行可能となる。 
 

__FORCETOC__
[[カテゴリ:Electron]]