Windows7でElectronの開発環境を構築するための手順をまとめたものです。

と言っても、ElectronはNode.jsアプリなので、実質的にNode.jsの環境構築手順です。

Windows7 Professional Service Pack 1 (64bit)

Node.jsのインストール手順は「Windows の Node.js 開発環境構築 最小手順 - qiita.com/okamoai/」を参考にやります。

git公式サイトより、最新版をDL&インストールします。

2016-12-20現在「Git-2.11.0-64-bit.exe」でした。

インストールウィザードは以下のように設定しました。

• Select Components
  • Additional icons
    • On the Desktop
  • Windows Explorer integration
    • Git Bash Here
    • Git GUI Here
  • Associate .git configuration files with the default text editor
  • Associate .sh files to be run with Bash
  • Use a TrueType font in all console windows
• Adjusting your PATH environment
  • Use Git from Git Bash only
  • Use Git from the Windows Command Prompt
  • Use Git and optional Unix tools from the Windows Command Prompt
• Choosing the SSH executable
  • Use OpenSSH
  • Use (Tortoise)Plink
• Configuring the line ending conversions
  • Checkout Windows-style, commit Unix-style line endings
  • Checkout as-is, commit Unix-style line endings
  • Checkout as-is, commit as-is
• Configuring the terminal emulator to use with Git Bash
  • Use MinTTY (the default terminal of MSYS2)
  • Use Windows' default console window
• Configuring extra options
  • Enable file system caching
  • Enable Git Credential Manager
  • Enable symbolic links
• Configuring experimental options
  • Enable experimental, builtin difftool

gitをインストール後にコマンドプロンプトが文字化け（日本語が全部豆腐になる）するなら、以下の手順を試して下さい。 「Windows Vista のコマンドプロンプトが文字化けしている場合の対処方法 - drk7.jp」

Electron内蔵のNode.jsと同じバージョンをインストールします。

Electron公式サイトを見ると以下のバージョンでした。

• Electron: 1.4.12
• Node: 6.5.0
• Chromium: 53.0.2785.143
• V8: 5.3.332.47

Node.js v6.5.0のリリースページから、node-v6.5.0-x64.msiをDL&インストールします。

インストールウィザードは全てデフォルトを設定しました。

「Windows Vista SP2、Windows 7 SP1、Windows 8、Windows Server 2008 SP2、Windows Server 2008 R2 SP1、および Windows Server 2012 用 Microsoft .NET Framework 4.5.1 (Web インストーラー)」をインストールします。

と思ったら、既に 4.6.1 がインストール済みでした。

バージョンが高い分には問題ないかな？ そのままにします。

Visual C++ Build Tools公式ページ より、最新版をDL&インストールします。

インストールウィザードは全てデフォルトを設定しました。

（超長かった！）

pythonの公式ページより、2.7系の最新版をDL&インストールします。

2016-12-20現在「Python 2.7.13」でした。

npmにpytonとVisual C++ Build Toolsのバージョンを教えます。

PowerShellで以下を実行してください。

> npm config set python python2.7
> npm config set msvs_version 2015

設定されたか確認します。

> npm config list
; cli configs
user-agent = "npm/3.10.3 node/v6.5.0 win32 x64"

; userconfig C:\Users\h-morishita\.npmrc
msvs_version = "2015"
python = "python2.7"

; builtin config undefined
prefix = "C:\\Users\\h-morishita\\AppData\\Roaming\\npm"

; node bin location = C:\Program Files\nodejs\node.exe
; cwd = C:\Users\h-morishita
; HOME = C:\Users\h-morishita
; "npm config ls -l" to show all defaults.

あとでVSCodeによるデバッグ環境を整えるときに、シェルとしてPowerShellを使用します。 Windows7にはPowerShellがデフォルトでインストール済みですが、最新版ではない可能性があるので最新版をインストールします。

1. https://msdn.microsoft.com/en-us/powershell/ へアクセス
2. 「Download WMF」から最新版のダウンロードページへ飛ぶ    * 2016-12-21時点では「Download WMF 5.0」が最新でした
3. 「Windows Management Framework 5.0」ページで [Download] ボタンをクリックする
4. 「Win7AndW2K8R2-KB3134760-x64.msu」をチェックして [Next] ボタンをクリックする
5. Win7AndW2K8R2-KB3134760-x64.msuを実行する

「インストーラーはエラーを検出しました: 0xc80003f3」エラーがでてインストールできず。

あとでPSReadLineを導入するときにImport-Module PSReadLineを使いたいので5.0にしたかったのですが、手動でもインストールできるので4.0でもOKです。

ちなみに、これを試したときのバージョンは以下の通りです。

PS> $psversiontable

Name                           Value
----                           -----
PSVersion                      4.0
WSManStackVersion              3.0
SerializationVersion           1.1.0.1
CLRVersion                     4.0.30319.42000
BuildVersion                   6.3.9600.16406
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0}
PSRemotingProtocolVersion      2.2

PowerShellでgrep、sed、awkなどを使えるようにします。

Git for Windowsの中にMinGW/MSYS2が入っているので、それを使います。 詳細は「Mingw-w64/MSYS2 を入れなくても Git for Windows で間に合うみたい - 檜山正幸のキマイラ飼育記」を参照。

ただ、環境変数PATHにパスを通すとMSYS1を使っている他のビルド環境と競合するので、PowerShellを使った時だけパスを通すようにします。 PowerShellの起動時にPATHを変更すればOK。

やり方は以下の記事を参照。

• PowerShell/PowerShellで環境変数PATHにパスを追加する方法
• PowerShell/PowerShellコンソール起動時にスクリプトを実行する方法

以下を実施します。

1. PowerShellで PS> $profile を実行し、初期化スクリプトのパスを得る。

2. 初期化スクリプトに以下を記載する。

   # Path to MSYS commands of Git for Windows
   $env:path += ';C:\Program Files\Git\mingw64\bin'
   $env:path += ';C:\Program Files\Git\usr\bin'

PowerShellはemacsキーバインドが使えない（マジか！）ので、PSReadLineを導入する。

1. 「github/lzybkr/PSReadline」から最新版をダウンロード。

   * 2016-12-21時点ではv1.2でした。

2. zipを解答したものを以下にコピーする。

   • C:\Users[User]\Documents\WindowsPowerShell\modules\PSReadline

3. 初期化スクリプトに以下を記載する。

   # for PSReadLine
   if ($host.Name -eq 'ConsoleHost')
   {
       Import-Module PSReadline
   
       # emacsキーバインド
       Set-PSReadlineOption -EditMode Emacs
   
       # ベルを表示しない
       Set-PSReadlineOption -BellStyle None
   
       # 同じコマンドはhistoryに記録しない
       Set-PSReadlineOption -HistoryNoDuplicates
   }

PowerShellのデフォルト文字コードはShift－JIS(CP932)です。 しかし、gitのコミットログはUTF-8で書きますよね（もちろんですよね）。 そうすると、git log したときに文字化けします。 PowerShellの文字コードをUnicode(CP65001)にしたいところですが、そうすると他のWindowsのツールたちが動かなかったりします（いい加減、SJISやめれや）。 そのため、コミットログだけUTF-8を使えるようにしましょう。

以下を実施します。

1. lv for Windows(*1)をDL&解凍する。

2. gitのcore.pager設定を変更する。

   PS> git config --global core.pager "path/to/lv/lv.exe -Iu -Os -c"

これで PS>git log しても文字化けしません。

(*1)これが何者かは分かりませんが、バイナリで提供されていたので使わせてもらいます。

準備が長すぎて目的を忘れそうになりましたが、このドキュメントはElectronの環境構築でしたね。

やっと環境構築が終わったので、実際に動くか試してみます。

Electronの公式サイトに、とりあえず試せる手順が書いてあるので、それを実施してみます。

PowerShellで以下を実行してください。

PS> cd /path/to/work/directory/
PS> git clone https://github.com/electron/electron-quick-start
PS> cd electron-quick-start
PS> npm i
PS> npm start

ウィンドウがひとつ開き、「Hello World」が表示されれば成功です。

ElectronのGUIはChroniumなので、Chromeの「デベロッパーツール」でデバッグできます。 しかし、エディタでコード書いてブレイクポイント貼って実行してデバッグできたほうが楽ですよね。 デベロッパーツールだと、ウィンドウが出た後しかデバッグできないし。

そこで、Microsoft社製「Visual Studio Code（VSCode）」でデバッグできるようにします。

VSCodeの公式ページから最新版をDL＆インストール。

2016-12-20現在「VSCodeSetup-1.8.1.exe」でした。

VSCodeに、以下のプラグインをインストールします。

• npm - npm commands for VSCode

（Ctrl+Shift+pからnpmが叩けるのは良いんだけど、npmを知らない人向けにコマンドがラッパーされてて素のコマンドが通らないので使いづらい…）

本当はbashを使いたいけど、MSYSもCygwinも重いのでしょうがなくPowerShellを使います。 CMDよりは随分マシなので。

「Visual Studio CodeのターミナルをPowerShellに変える際に注意すべきこと - 素敵なおひげですね」を参考に以下を設定します。

VSCodeの「ファイル」メニュー→「基本設定」→「ユーザ設定」で、settings.jsonを開いて、以下を追加します。

"terminal.integrated.shell.windows": "C:\\Windows\\Sysnative\\WindowsPowerShell\\v1.0\\powershell.exe"

なんだかデジャヴ。

さっきやったきがしますが、VSCodeからPowerShellを使うときにはもう一段階の設定が必要です。 PowerShellのキーバインドは変更されていても、VSCodeのキーバインドが競合するためです。 具体的にはCtrl+p、Ctrl+n、Ctrl+kなどが別の機能に割り当てられており、それがPowerShellに渡りません。

以下の手順を実施します。

1. 「ファイル」メニュー→「基本設定」→「キーボードショートカット」でkeybindings.jsonを開く。

2. keybindings.jsonに以下を追記する。

   // ターミナルでemacsキーバインドと競合するのを解消する
   { "key": "ctrl+k", "command":"", "when": "terminalFocus"},
   { "key": "ctrl+p", "command":"", "when": "terminalFocus"},
   { "key": "ctrl+n", "command":"", "when": "terminalFocus"},
   { "key": "ctrl+e", "command":"", "when": "terminalFocus"}

VSCodeで、先ほどのelectron-quick-startフォルダを開きます。

VSCodeでElectronアプリケーションをデバッグできるように設定します。

1. Ctrl+Shift+Dでデバッグ画面を開きます。

2. 「歯車」ボタンを押してlaunch.jsonを作成します。

3. 以下のとおりに修正してください。   runtimeExecutableとconsoleがポイントです。

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "launch",
         "name": "プログラムの起動",
         "program": "${workspaceRoot}\\main.js",
         "cwd": "${workspaceRoot}",
         "runtimeExecutable": "${workspaceRoot}\\node_modules\\.bin\\electron",
         "runtimeArgs": [
           "--enable-logging"
         ],
         "args": [
           "."
         ],
         "console": "integratedTerminal"
       },
       {
         "type": "node",
         "request": "attach",
         "name": "プロセスに添付",
         "port": 5858
       }
     ]
   }

1. Ctrl+Shift+D でデバッグ画面を開きます。
2. 「デバッグの開始」ボタンでElectronアプリケーションが起動します。