設定 - WebStormとの連携 - 版の履歴

Wiki: /* WebStormの設定 */

2021-03-10T15:54:47Z

WebStormの設定

← 古い版		2021年3月11日 (木) 00:54時点における版
10行目:		10行目:
	<br><br>		<br><br>

	== ~~WebStormの設定~~ ==		== Electronのインストール(WebStormの使用) ==
	# WebStormを起動して、[Create New Project]を選択する。		# WebStormを起動して、[Create New Project]を選択する。
	# [New Project]画面左にある[Node.js]を選択して、[Location:]項目にプロジェクト名を入力する。<br>[Node Interpreter:]プルダウンと[Package Manager:]プルダウンには、任意のバージョンのNodeとNPMを選択する。><br><u>※プロジェクト名には、<span style="color:#C00000">大文字のアルファベットは使用できない</span>ので注意すること。</u>		# [New Project]画面左にある[Node.js]を選択して、[Location:]項目にプロジェクト名を入力する。<br>[Node Interpreter:]プルダウンと[Package Manager:]プルダウンには、任意のバージョンのNodeとNPMを選択する。><br><u>※プロジェクト名には、<span style="color:#C00000">大文字のアルファベットは使用できない</span>ので注意すること。</u>
23行目:		23行目:
	#: <br>		#: <br>
	# package.jsonファイル内に<code>dependencies</code>が自動的に追記されて、<code>electron</code>という項目が記述される。<br>同様に、node_modulesディレクトリにelectronが追加されていることが確認できる。		# package.jsonファイル内に<code>dependencies</code>が自動的に追記されて、<code>electron</code>という項目が記述される。<br>同様に、node_modulesディレクトリにelectronが追加されていることが確認できる。
			<br><br>

			== コード補完機能の有効化 ==
			Electronのコーディング支援機能は、Electron 1.6.9以降、electron.d.tsファイル(TypeScript定義ファイル)を介して提供される。<br>
			このファイルは、<Electronのプロジェクトディレクトリ>/node_modules/electronディレクトリに存在する。<br>
			<br>
			コード補完機能を有効にするには、以下の手順を行う。<Br>
			# プロジェクト画面から、[File] - [Settings...]を選択して、設定画面を開く。
			# 設定画面左から、[Language & Frameworks] - [Node.js and NPM]を選択する。
			# [Enable coding assistance]チェックボックスにチェックを入力する。
	<br><br>		<br><br>

Wiki: /* 概要 */

2021-03-10T15:14:35Z

概要

← 古い版		2021年3月11日 (木) 00:14時点における版
1行目:		1行目:
	== 概要 ==		== 概要 ==
	~~WebStormを使用して、Electronを開発するための手順を記載する。~~<br>		WebStormを使用して、ワークフローを設定する方法、コーディング支援を有効にする方法、<br>
			Electronソフトウェアを実行およびデバッグする手順を記載する。<br>
	<br><br>		<br><br>

Wiki: /* デバッグの設定 */

2021-01-15T15:07:45Z

デバッグの設定

← 古い版		2021年1月16日 (土) 00:07時点における版
137行目:		137行目:
	<br><br>		<br><br>

	== デバッグの設定 ==		== デバッグの設定(不要) ==
	# WebStormのプロジェクト画面右上にある[ADD CONFIGURATION...]プルダウンから、[Run/Debug Configurations]を選択する。		# WebStormのプロジェクト画面右上にある[ADD CONFIGURATION...]プルダウンから、[Run/Debug Configurations]を選択する。
	# [Run/Debug Configurations]画面左にある[Templates] - [Node.js]を選択する。		# [Run/Debug Configurations]画面左にある[Templates] - [Node.js]を選択する。

Wiki: /* サンプルコード */

2021-01-15T15:06:43Z

サンプルコード

← 古い版		2021年1月16日 (土) 00:06時点における版
24行目:		24行目:
	<br><br>		<br><br>

	== ~~サンプルコード~~ ==		== package.jsonの設定 ==
	~~index.htmlファイルとmain.jsファイルを作成する。<br>~~
	~~<br>~~
	Electronをインストールした場合、package.jsonファイル内には、エントリポイントがindex.jsと記述されているが、<br>		Electronをインストールした場合、package.jsonファイル内には、エントリポイントがindex.jsと記述されているが、<br>
	Electronの公式Webサイトでは、main.jsが標準のようなので、この記述を編集する。<br>		Electronの公式Webサイトでは、main.jsが標準のようなので、この記述を編集する。<br>
38行目:		36行目:
	"main": "main.js",		"main": "main.js",
	</syntaxhighlight>		</syntaxhighlight>
			<br>
			次に、package.jsonファイル内の"scripts"項目において、以下の設定を追記する。<br>
			# Electronをローカルインストールしている場合
			"run": "./node_modules/.bin/electron .",

			# Electronをグローバルインストールしている場合
			"run":"electron ."
			<br><br>

			== サンプルコード ==
			index.htmlファイルとmain.jsファイルを作成する。<br>
	<br>		<br>
	Electronの公式Webサイトから、基本となるindex.htmlファイルの内容とmain.jsファイルの内容をコピーする。<br>		Electronの公式Webサイトから、基本となるindex.htmlファイルの内容とmain.jsファイルの内容をコピーする。<br>

Wiki: /* サンプルコード */

2021-01-15T14:49:12Z

サンプルコード

← 古い版		2021年1月15日 (金) 23:49時点における版
40行目:		40行目:
	<br>		<br>
	Electronの公式Webサイトから、基本となるindex.htmlファイルの内容とmain.jsファイルの内容をコピーする。<br>		Electronの公式Webサイトから、基本となるindex.htmlファイルの内容とmain.jsファイルの内容をコピーする。<br>
			以下のサンプルコードは、[https://electronjs.org/docs/tutorial/first-app Writing Your First Electron App]から引用している。<br>
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	// main.jsファイル		// main.jsファイル

Wiki: ページの作成:「== 概要 == WebStormを使用して、Electronを開発するための手順を記載する。

== 事前準備 == 以下のソフトウェアがインス…」

2021-01-15T14:47:34Z

ページの作成:「== 概要 == WebStormを使用して、Electronを開発するための手順を記載する。<br> <br><br> == 事前準備 == 以下のソフトウェアがインス…」

新規ページ

== 概要 ==
WebStormを使用して、Electronを開発するための手順を記載する。<br>
<br><br>

== 事前準備 ==
以下のソフトウェアがインストールされているものとする。<br>
* Node.js
* WebStorm
<br><br>

== WebStormの設定 ==
# WebStormを起動して、[Create New Project]を選択する。
# [New Project]画面左にある[Node.js]を選択して、[Location:]項目にプロジェクト名を入力する。<br>[Node Interpreter:]プルダウンと[Package Manager:]プルダウンには、任意のバージョンのNodeとNPMを選択する。><br><u>※プロジェクト名には、<span style="color:#C00000">大文字のアルファベットは使用できない</span>ので注意すること。</u>
# [Create]ボタンを押下して、プロジェクトを生成する。
#: <br>
# プロジェクト画面から、[File] - [Settings...]を選択して、設定画面を開く。
# 設定画面左から、[Language & Frameworks] - [Node.js and NPM]を選択する。
# 画面左の下部にある[+]ボタンを押下して、[Available Packages]画面を開く。
# [Available Packages]画面上にある検索欄に"electron"と入力して、一覧に表示された"electron"を選択する。
# [Available Packages]画面下にある[INSTALL PACKAGE]ボタンを押下して、electronをインストールする。
# "Package 'electron' installed successfully"と表示されて、インストールが完了する。
#: <br>
# package.jsonファイル内に<code>dependencies</code>が自動的に追記されて、<code>electron</code>という項目が記述される。<br>同様に、node_modulesディレクトリにelectronが追加されていることが確認できる。
<br><br>

== サンプルコード ==
index.htmlファイルとmain.jsファイルを作成する。<br>
<br>
Electronをインストールした場合、package.jsonファイル内には、エントリポイントがindex.jsと記述されているが、<br>
Electronの公式Webサイトでは、main.jsが標準のようなので、この記述を編集する。<br>
<syntaxhighlight lang="javascript">
# package.jsonファイル

# 変更前
"main": "index.js",

# 変更後
"main": "main.js",
</syntaxhighlight>
<br>
Electronの公式Webサイトから、基本となるindex.htmlファイルの内容とmain.jsファイルの内容をコピーする。<br>
<syntaxhighlight lang="javascript">
// main.jsファイル

const { app, BrowserWindow } = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow ()
{
// Create the browser window.
win = new BrowserWindow(
{
width: 800,
height: 600,
webPreferences:
{
nodeIntegration: true
}
})

// and load the index.html of the app.
win.loadFile('index.html')

// Open the DevTools.
//win.webContents.openDevTools()

// Emitted when the window is closed.
win.on('closed', () =>
{
// 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.
win = null
})
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () =>
{
// On macOS 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()
}
})

app.on('activate', () =>
{
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null)
{
createWindow()
}
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
</syntaxhighlight>
<br>
<syntaxhighlight lang="html">
index.htmlファイル

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</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>
</syntaxhighlight>
<br><br>

== デバッグの設定 ==
# WebStormのプロジェクト画面右上にある[ADD CONFIGURATION...]プルダウンから、[Run/Debug Configurations]を選択する。
# [Run/Debug Configurations]画面左にある[Templates] - [Node.js]を選択する。
#: <br>
# 画面右に表示されている以下の項目を設定する。
#* [Node interpreter]項目の右にある[...]を選択する。<br>[Node.js interpreter]画面左下にある[+]ボタンを押下して、[Add Local...]を選択する。<br>プロジェクトディレクトリにあるnode_moduleディレクトリから、electronファイル(Windowsの場合は、electron.cmd)を選択する。
#* [Node parameters]項目に、<code>.</code>を入力する。
#* [Working directory]項目は変更しない。
#* [JavaScript file]項目に、<code>main.js</code>を入力する。
#* [Application parameters]項目に、<code>--remote-debugging-port=9222</code>を入力する。
#* [Environment variables]項目は変更しない。
#: <br>
# [OK]ボタンを押下して、[Run/Debug Configurations]画面を閉じる。
<br>
プロジェクト画面右上にある虫アイコンを選択して、デバッグを実行する。<br>
<br><br>

__FORCETOC__
[[カテゴリ:Electron]]

設定 - WebStormとの連携 - 版の履歴

Wiki: /* WebStormの設定 */

Wiki: /* 概要 */

Wiki: /* デバッグの設定 */

Wiki: /* サンプルコード */

Wiki: /* サンプルコード */

Wiki: ページの作成:「== 概要 == WebStormを使用して、Electronを開発するための手順を記載する。 == 事前準備 == 以下のソフトウェアがインス…」

Wiki: ページの作成:「== 概要 == WebStormを使用して、Electronを開発するための手順を記載する。

== 事前準備 == 以下のソフトウェアがインス…」