heimdalの技術ノート

IT全般、Linux、Windows、プログラミング開発など、何でもござれ

WindowsへのElectron導入する前後でハマったところを解決してみた その1

はじめに

Electronというものをつい数か月前に知りました。皆さんも知ってますか?
簡単に言うとWindowsでデスクトップ用のソフトウェアを作れる環境みたいなものです。
Windowsで使われているソフトウェアは、C#などの.net系やC言語Delphiあたりで作られてることが多いです。
それ以外はブラウザを介してWebサービスでソフトウェアのように使っていると思います。 Gmailとかがそれですね。
ElectronはWeb技術であるHTML、CSS、JS系などの組み合わせでデスクトップ用のソフトウェアを作れちゃうんです。 しかもWindowsMacLinuxなどのプラットフォームを問わずに実装できる夢のような環境ですね。
サーバ上でしか、身動きできなかったWeb技術がサーバいらずでどこでも実装できるのであれば、
いよいよHTMLが世界を支配しそうですね。

Electronの動作の実態は、
HTML、CSS、JS系のソースをchromium(オープンソース版のChrome)で動かす
というシンプルな構成と思えばいいですね。

準備物

Node.js

Atom
 HTMLを書くのに便利なエディタ。
 出た当初は重すぎて使えず、Sublime Textを使っていたが、最近は十分実用的になった。

導入

インストール手順は、ここを参考にしています。

導入してハマったところ

  • nodeのプロキシ設定
  • Windows環境でのsqlite3導入

プロキシ設定

Electronを導入するコマンドはnodejs導入後に

npm -g install electron-prebuilt

で導入できるが、プロキシ環境ではデフォルト設定では動作しない。
会社で導入する場合はプロキシサーバなどで通常のネット通信以外の通信が遮断されている可能性が高いため、突破する必要がある。
※プロキシサーバを突破して接続していいかは、会社でちゃんと調整してね。

プロキシサーバが書かれているの場所

Internet Explorerを開いて、インターネットのプロパティを開き、 「接続」タブ→「LANの設定」をクリックすればプロキシサーバのアドレスとポートが書かれているので、メモをする。

コマンドプロンプトを開き、以下のコマンドを入力する。
※プロキシサーバのアドレスは、ポートはへそれぞれ置き換えて実行する。

netsh winhttp import proxy source=ie
npm config set proxy "http://<server>:<port>/"
npm config set https-proxy "http://<server>:<port>/"

上記のコマンドは
1つ目は、Windows自体の設定を変更するコマンドで、Internet Explorerのプロキシ設定を使用するようにするための設定、
2つ目と3つ目は、node.jsのnpmコマンドの設定でプロキシサーバを介してネットワークの外に出るための設定を指します。
それでもつながらなかった場合は以下のコマンドも実行すればいいらしいが、上記の設定で基本、接続できます。

npm config set registry "http://registry.npmjs.org/"

私がハマったところというのは、

npm config set proxy "http://<server>:<port>/"

の箇所を

npm -g config set proxy "http://<server>:<port>/"

としてしまいました。
これがいけなかった。。。orz
-gというglobalに設定するオプションをつけたため、 プロキシサーバの設定は一見できており、

npm -g install asar

を導入できました。
が、Electron導入の

npm -g install electron-prebuilt

がどうしてもインストールできなった。

理由は一部のシステムがglobalの設定を読まなかったせいでした。
-gをつけずにユーザ設定として設定すればすべてがうまくいきました。

本件については以下の記事が参考になります。

npm config -g でプロキシの設定をしているのに electron-quick-start や electron-prebuilt でコケる | Aqua Ware つぶやきブログ

この-gの問題は一時的なものかもしれませんが、 同様にハマっている人がいれば、役に立てるかと思います。

sqlite3導入

sqlite3については長くなりそうなので、また次回!!!