新しいPC環境にElectron + Keytar(もしくはsqlite3など)のネイティブモジュールを利用するようなアプリを作ろうとした時、毎回引っかかるのが、この問題。keytarは資格情報マネージャの読み書きをする大変優れたモジュールなのですが、利用する為にはネイティブモジュールをコンパイルする環境がなければなりません。

しかし、electronやnode.jsをインストールしただけでは構築ができないのです。また、最新版ではコンパイル出来ないといったケースもあります(もともとkeytar自体がElectronで使うことを想定していないので、Node.jsでは素直に使えても、Electronで動かないというケースが多い)

そこで今回改めて、Electron 5.0.0とKeytar4.6.0にてWindows用の環境構築を検証しまとめてみました(Windows10 64bitで検証)。

難易度:


今回必要とするもの

インストール

Node.jsのインストール

これは非常に簡単です。Node.jsのサイトから今回は64bit版のLTSと書かれたリンクをクリックすることでインストーラが手に入ります。素直にダウンロードして、インストーラを起動し、そのまま全てインストールを実行しましょう。

インストール後

  1. コマンドプロンプトを起動する
  2. cd Documentsでドキュメントフォルダに移動
  3. mkdir testmanにてtestmanというフォルダを作ってみる
  4. cd testmanでそのフォルダに入る
  5. npm init -yにてpackage.jsonを作成する

で、プロジェクトの作成準備が完了します。

electronのインストール

今回は相性検証済みのelectronのv5.0.0をインストール(最新版だとkeytar4.6.1はリビルドしても駄目でした)。

  1. コマンドプロンプトを起動する
  2. npm i -g electron@5.0.0を実行する
  3. インストールが完了したら、electron -vでバージョンを調べる事が可能です。

Windows Build Toolsのインストール

Python2.7などのビルドに必要な一連のコマンド類をインストールする事が可能です。こちらはPowerShellの管理者権限でインストールが必要です。

  1. PowerShellを管理者権限で起動する
  2. npm install -g windows-build-toolsを実行してインストールする。環境によっては結構時間がかかる
  3. Successfullyという文字が出たら完了です。Enterキーを押します。
  4. これでPython2.7等がインストール完了。
  5. こちらのスレでelectron-rebuildでエラーがでる場合、「[Environment]::SetEnvironmentVariable(“VCTargetsPath”, “C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\Common7\IDE\VC\VCTargets\”, “Machine”)」をPowerShellの管理者権限で実行すればOKだよとありましたが、自分は効果なかった。

VisualC++ Build Toolsをインストール

Microsoftが提供してるコマンドラインビルドツールです。Visual Studio 2017と2019が現在インストール可能になっています。

  1. ファイルをダウンロードする
  2. インストーラを実行する
  3. 続行ボタンをクリック
  4. ダウンロードが始まるのでしばらく待つ
  5. インストールをクリックする
  6. 完了すると下のスクショのような画面になる

図:インストール完了画面

electron-rebuildをインストールする

ここが結構厄介なところ。旧式のやり方を自分は使っていて使えているのでそちらの方法を。

  1. コマンドプロンプトを起動する
  2. npm install -g electron-rebuildを実行してグローバルインストールする(公式サイトは現在、npm install –save-dev electron-rebuildとして記述)
  3. インストールが完了したら終了。
  4. ただ、自分の場合、新旧どちらのケースでもエラーが出てelectron –versionでバージョン表記が出なかった
  5. エラーは設定がきちんと通っていない事が原因。次項で修正する

図:上記のようなエラーが出て止まる・・・

環境変数の設定

インストールが完了したら次に環境変数の手動変更です。ここが本作業の中で一番面倒な場所かもしれません。上記のインストールが完了したらまずは再起動して本作業を始めましょう。

electron-rebuildの場所を調べる

前項でelectron-rebuildをインストール後–versionでバージョンを調べてもエラーがでました。これは様々な設定やパスが通っていない事が原因です。electron-rebuildのファイルがある場所を見つけて、環境変数に登録をまずはしましょう。

  1. C:\Users\ユーザ名\AppData\Roaming\npmの場所に通常はある
  2. タスクバーの検索窓より、「システムの詳細設定の表示」を検索して実行
  3. システムのプロパティが出てくるので、左サイドの「システムの詳細設定」をクリック
  4. 環境変数をクリックします。
  5. 上部のユーザ環境設定側にあるpathをクリックして、編集ボタンをクリック
  6. 一番上に1.のパスを追加する

図:electron-rebuildのパスを指定する

図:electron-rebuildのバージョン表示

node-gypの場所を調べる

これが今回の中でももっとも面倒。最新のNode.jsにははじめから含まれているにも関わらず、node-gypと打っても、単独で利用できない状態(つまりパスが通っていない)それが故にネイティブモジュールをリビルドする場合に困ることになる。

  1. C:\Users\hiroyuki\node_modules\.binに通常は存在する
  2. この場所を前項のように環境変数に追加する。ただし位置は上から2番目の位置とした

図:node-gypもビルドに重要なツールです

図:node-gypと打って正常に表示された

Python.exeの場所を調べる

Windows Build Toolsをインストールしたことによって、Python2.7を使えるようになっています。これはコンパイルする場合に必要なので、パスをきちんと指定しておきます。

  1. C:\Users\ユーザ名\.windows-build-tools\python27\の場所に通常はある
  2. この場所を前項のように環境変数に追加する。ただし位置は上から3番目の位置とした

図:環境設定の位置には意味がある

図:pythonのバージョン表記

msvsのバージョン指定

ビルドで使用できるmsvsのバージョンは現在、2015と2017の2つ。今回は2015を利用してみます。

  1. コマンドプロンプトを起動する
  2. npm config listで現在の設定を確認
  3. npm config set msvs_version 2015を打って今回はセットする
  4. ここまで完了したら再起動する

図:msvs_versionがセットされてるのを確認

Keytarをネイティブビルドしてみる

さて、ここまででNode.jsのモジュールのネイティブビルド環境が整いました。しかし、これでモジュールをインストールすれば完了というわけにはいきません。ビルドに関しても手動で行う必要性があります。

keytarのインストール

今回は検証済みなのでelectron5.0.0を利用しましたが、keytarも必ずしも最新版が使えるとは限りません。すべてはNode.jsの仕組み上の弊害なのですが、Electronで使う為にはこれを乗り越えなくてはなりません。

  1. コマンドプロンプトを起動する
  2. 自分のプロジェクトフォルダ内まで移動する
  3. npm i keytar@4.6.0を実行する
  4. インストールがエラーなく終了したらOK

node-gypとelectron-rebuild

インストールが完了したらネイティブビルドをしてみる

  1. コマンドプロンプトを起動する
  2. 自分のプロジェクトフォルダ内まで移動する
  3. cd node_modulesで移動する
  4. cd keytarで移動する
  5. node-gyp configureを実行して、エラーなく完了すればOK
  6. cd ..\..\にてプロジェクトフォルダ直下に戻る
  7. electron-rebuild -w keytar -p -fにてリビルドを実行する
  8. 問題なく完了したらOK

図:リビルドが無事に完了した

検証用コード

さて、これでリビルドは完了しましたが、正しく動いてるかどうかはわかりません。実際に空のBrowserWindowを作って、資格情報マネージャにパスワードをセットし、同時にパスワードを取得して表示するコードを記述して、コマンドラインからelectronを起動してみれば、コマンドプロンプトに答えが表示されます。

  • プロジェクトフォルダ直下に上記のコードのindex.jsを作成する
  • コマンドプロンプトでプロジェクト直下に移動して、electron .で実行するとテスト実行できます。
  • zaseki_sakuraというサービス名で資格情報マネージャに作成がなされます。
  • passwordは「password」、IDは「sakura」としました。
  • タスクバーの検索窓から「資格情報マネージャ」で検索し、Windows資格情報を開くとそこに登録されています。

図:無事にID/PASSがservicenameと共に保存された

共有してみる: