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

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

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

難易度:


今回必要とするもの

インストール

Node.jsのインストール

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

インストール後

  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-rebuild –versionでバージョン表記が出なかった
  5. エラーは設定がきちんと通っていない事が原因。次項で修正する

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

Python 3.xをインストールする

2020/1/1ついに、Python 2.x系サポートが終了した為、今後Node.jsでNative BuildするにもPython 2.x系に頼るのはどうかと思う。既にnode-gypが3.x系に対応済みであるので、上記のツール類で2.x系がインストールされてしまうが、別途3.xをインストールし、2.x系はアンインストールすると良いでしょう。自分のOSのbit数に応じたPython3を入れましょう。今回は64bit版で進めます。

  1. ホームからインストーラをダウンロードする
  2. 実行する。Add Python 3.x to PATHにはチェックを入れておく
  3. そのままインストールを完了する。
  4. コマンドプロンプトから、python –versionで3.xが出ればOK。2.x系が出る場合には、コントロールパネルのプログラムと機能からpython 2.x系を削除しておく(環境変数いじっても可)

※3.x系インストールしてから、2.x系削除をすると環境変数を削除されてしまうので、先に2.x系をアンインストールしてから3.xを入れるとGood

図:WindowsユーザはPATHの追加をチェックしておこう

環境変数の設定

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

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\ユーザ名\node_modules\.binに通常は存在する(C:\Users\ユーザ名\AppData\Roaming\npmの場合もある)
  2. この場所を前項のように環境変数に追加する。ただし位置は上から2番目の位置とした
  3. 見つからない場合は、npm install -g node-gypでインストールしてみると良いかも。node-gyp -vでv6.1.0が最新版で入ってると思います。

※v5.0.5以降はPython2だけでなくPython3もサポートしたようです。

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

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

Python.exeの場所を調べる

Windows Build Toolsをインストールしたことによって、Python2.7を使えるようになっています。これはコンパイルする場合に必要なので、パスをきちんと指定しておきます。ただし、現在はPython3も利用出来るので、別途インストールしてPython2.xは使わないほうが良いと思います。

  1. C:\Users\ユーザ名\.windows-build-tools\python27\の場所に通常はある。予め、Pythonを別でインストールしてると、C:\直下にあったりします。ただし、2.x系は今回使わないので、記述が残ってれば逆に削除しておく。
  2. Python3を使う場合には、C:\Users\ユーザ名\AppData\Local\Programs\Python\Python38にpython.exeがあります。
  3. この場所を前項のように環境変数に追加する。ただし位置は上から3番目の位置とした
  4. npm config set python python.exeのフルパス コマンドを実行する

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

図:pythonのバージョン表記

msvsのバージョン指定

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

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

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

プロキシーに阻まれて追加できない時

社内でnpmでモジュールを追加する時に、プロキシーに阻まれて(getaddrinfo ENOTFOUNDというエラーがでます)追加できない場合があります。その場合には以下の手順でnpmに対してProxyのセッティングを通しておくと追加が可能です。アドレスはお使いのプロキシーのURLを入力します。

  1. npm config set proxy http://proxy.example.com:8080 を実行する
  2. npm config set https-proxy http://proxy.example.com:8080 を実行する
  3. npm config set registry https://registry.npmjs.org/ を実行する

この設定ファイルは、c:\Users\ユーザ名\.npmrcに保存されています。

また、node-gypなどもProxyのセッティングが必要なのですが、これはコマンドプロンプトからプロキシー超え出来ないと駄目なので、以下のコマンドを入力すれば、一時的に使えます。いつでもプロキシにするには環境変数に登録が必要です。以下の例はhttpの無認証プロキシをhttpおよびhttpsで利用する場合のセットです。

環境変数に登録する場合には、以下の手順で登録しておくといちいちコマンドを打つ必要がなくなります。

  1. コントロールパネルよりシステムの詳細設定を開く
  2. 環境変数を開く
  3. ユーザ環境変数に於いて、新規をクリック
  4. 変数名にhttp_proxyと入れる
  5. 変数値にhttp://を除いたプロキシのURL:ポート番号を入力し、OKをクリック
  6. 同じくhttps_proxyについても同じ様に登録する

再起動後、この設定は有効になり、node-gyp、electron-rebuildなどでプロキシ超えができるようになります。

ただ、electron7.0および一部のモジュール(electron-packager)などはプロキシ参照先変数が変更されており、以下の設定を同じく環境変数に追加しないと、ダウンロードやnpm installが出来ないです。以下の設定も追加しておきましょう。

  • ELECTRON_GET_USE_PROXY:値はtrue
  • GLOBAL_AGENT_HTTP_PROXY:値はhttpから始まるプロキシアドレス:プロキシポート
  • GLOBAL_AGENT_HTTPS_PROXY:値はhttpから始まるプロキシアドレス:プロキシポート

セットしたら、さっそくelectron-packagerでパッケージングを実行してみたところ、エラーが解消し無事にパッケージの作成が成功しました。今後他のモジュールも移行していくのかもしれません。

図:プロキシ越えって本当に面倒

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

最新版のelectron-rebuildとmsvs2015だとエラーが出た。npm i electron-rebuild@1.10.1で旧バージョンを入れ、msvs2017だとエラーでずにリビルドが出来た。相性があるのかもしれません。

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

検証用コード

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

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

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

関連リンク

共有してみる: