replyツイートWindows10にNode.jsをインストールし、Electronアプリの開発環境を作成します。サンプルプログラムを作成し、実行してみます。はじめに今更かもしれませんが、node.jsを調べてみました。「javascriptでWebアプリが作れるサーバー」のイメージでしたが、やってみるとスクリプト環境です。Perlでソケットを開いてTCPサーバーを作るのと同じような感覚。双方ともモジュールを追加することで、簡単にいろいろできるようになります。「フロントエンドにWebkitのレンダラーを同梱すればデスクトップアプリにもなるかな」と思って調べたところ、既に同発想のNW.js、Electronというものがあることがわかりました。何れもブラウザのChromiumが組み込まれており、Node.jsと同じMITライセンス、そしてNode.jsのモジュールも使えそうです。javascript(とHTML/CSS)で簡単にアプリが作れそうです。NW.jsはいきなりHTMLから作るということで、より簡単にアプリが作れそうです。パッケージ作成はNW.exeの後ろに環境のzipをくっつけるという荒業。Electronは、エントリーにjavascriptを書いて、そこからレンダラーのウィンドウを開くという形式。こちらは通常のウィンドウのアプリを作るのに似ていて馴染みがあります。(今のデスクトップアプリ開発はエントリーをコードする必要はないかもしれませんが。)後者の方が馴染みのある設計方式なのと、バージョンが1.0を越えていて完成してそうなイメージなのとで、Electronを試してみることにしました。本稿では、Node.jsのインストールからElectronアプリのパッケージまでをレポートします。本稿の環境は以下です。Windows10:ver.1607Node.js:v6.9.1npm:3.10.8Electron:1.4.10バージョンが異なる場合は、本稿の内容が再現しない場合が多々ありますのでご留意ください。各WEBサイトの情報は2016年11月29日現在のものです。Node.jsのインストール最初にNode.jsをインストールします。インストーラーを使うNode.jsのページ(日本語)に行くと、いきなりページ中央にダウンロードのリンクがあります。簡単にインストールできます。手動でインストールするいろいろなバージョンのnode.jsを使いたいとか、環境によって使い分けたい場合は手動でインストールします。その場合、Node.jsのサイトの上部にあるメニュー「ダウンロード」をクリックしてダウンロードのページに行きます。(.exe)」があります。ここからダウンロードできるのは「node.exe」単体です。モジュールを管理するnpmがありません。ここでは推奨版のバージョン番号だけ覚えて、リンクは無視します。このページの一番下に行くと「バージョンの一覧」がありますのでここをクリックし、リリース一覧のページに行きます。このページの表から、先の推奨版バージョンの行を探し、その行の「ダウンロード」をクリックします。これでようやくダウンロードできるページにたどり着きます。(現時点での推奨版、v6.9.1のリリースページはここ。」(64bit版)をクリックしてダウンロードします。zipの中に「node-v6.9.1-win-x86」(或は-x64)というディレクトリがありますので、これをエクスプローラーで任意のディレクトリにドラッグ&ドロップして、その名前を「node.js」等にリネームします。パスを通せばインストール完了です。パスの通しかた一応パスの通し方も書いておきますね。Windows10の場合です。(インストーラーでインストールした場合はパスが通されているはずです。)コルタナさんに「環境変数」と聞くと、「システム環境変数を編集」を提示してくれますのでこちらをクリックします。(「環境変数を編集」だとダメ。)「システムのプロパティ」ダイアログから「環境変数」をクリックし、「環境変数」ダイアログからシステム環境変数のPathを選択して「編集」ボタンを押します。「環境変数名の編集」ダイアログにて「新規」をクリックし、リストの最後に、先の「node.js」(node.exeがあるディレクトリ)までの絶対パスを書き込みます。Windows10ではパスの編集がしやすくなりましたね。(それを書きたかっただけ。–version」と入力して、バージョン表示がなされれば成功です。続いて開発環境を作成し、Electronをインストールします。プロジェクトのディレクトリの作成プロジェクトのディレクトリを適当なワークスペースに作成します。ここでは、プロジェクト名を「glasspot」とし、そのディレクトリをB:\workspace\下に作成することにします。あ、プロジェクトの名前は何となくです。fragileなイメージ。次に開発環境を記録するpackage.jsonを、パッケージ管理ツールのnpmで作成します。c)、「B:\workspace\glasspot」に移動します。(コマンド入力はこんなのです。init↲」と入力し、その後対話的にプロジェクトの情報を入力します。name、versionだけ入力し、あとはリターン連打しました。プロジェクトディレクトリに「package.json」が出来ていればOKです。ElectronのインストールElectronもnpmでインストールします。コマンドプロンプトより以下を入力します。--save-devオプションの「--save-dev」ですが、これはpackage.jsonに依存関係を自動記録するためのものです。後々「--save」というオプションも使いますが、こちらはアプリに必要なモジュール、「--save-dev」は開発に必要なモジュールの記録ですね。electron↲」とします。こちらを示すブログ記事もありますが、本シリーズでは以降「-g」オプションは一切使いません。開発環境を再現できるようにすることがその理由です。他のブログ記事では「electron-prebuilt」を指定してインストールしている解説があったりしますが、現時点でのnpmパッケージではelectron-prebuiltとelectronは同じものです。後者を使うことが推奨されています。(electronパッケージのページ、及びelectron-prebuiltパッケージのページを参照。)以上でElectronアプリの開発環境の作製は終了です。プロジェクトディレクトリの確認ではディレクトリを確認してみましょう。現在「B:\\workspace\glasspot」の下には、package.jsonというファイルと、node-modulesというディレクトリがあります。現在のpackage.jsonの中身は以下です。}}そしてnode-modulesの中には、electron以外のディレクトリがいっぱい。依存関係で引っ張ってきたのでしょう。node-modulesの一番上に「.bin」というディレクトリがあります。この中に「electron.cmd」というコマンドがあり、これでelectronが走ります。確認のため、コマンドプロンプトから以下を打ち込んでみます。--versionバージョンが表示されれば成功です。サンプルプログラムの実行Electronのサンプルプログラムを実行してみましょう。Startにあります。App」の章があり、ここにpackage.json、main.js、index.htmlのソースが書いてあります。これをプロジェクトディレクトリに作成します。“main.js”,」に書き換えます。main.js、index.htmlをpackage.jsonと同じディレクトリに作成し、ページのソースをこれらの中にコピペします。実行はページの下方に書いてある通り、コマンドプロンプト(開いていればプロジェクトディレクトリにいるはず)で以下を入力します。.暫くして、以下のような画面が表示されれば成功です!index.htmlの内容とデベロッパーツールが表示されています。デベロッパーツールはChromeなどと同様に、ドック解除したり、画面のしたにドックしたりできます。アプリの画面作成では、ドック解除したほうが良いでしょう。(ドック解除は、デベロッパーツールのメニュー右にある「|」アイコンから。)メニューバーもそれなりに動くのですが、ソースにはそれらしきものがありません。それっぽいメニューがデフォルトにセットされているのでしょうね。main.jsのソースはコメント共々ご一読することをお勧めします。Electronの作法がなんとなくわかります。MacOSの場合とか。index.htmlでは、processというオブジェクトが何の定義もなしに使われています。これはNode.jsのグローバルオブジェクトのようですね。HTMLの中でもNode.jsの機能が使えるようです。(セキュリティの問題に関してはまた後の稿にて。)javascriptっぽい書き方C言語からのプログラマーである私にとっては、main.jsには見慣れない書き方があります。全ての行末にセミコロンがありません。require('electron')無名のオブジェクトにrequireが返すオブジェクトをセットし、app、BrowserWindowのメンバーだけ名前を明確にして使っているのでしょうか。{...}」これは無名関数「function(){...}」でしょうね。46行目をfunctionに書き換え、また1行目を以下のように3行に書き換えて、動作することを確認します。electron.BrowserWindow;無事動作しました。{...}」は、ブロック内のthisがその外のthisと一致するのですねφ(..)メモメモ。こちらのほうが間違いがすくないかもしれません。まとめNode.jsをインストールし、またプロジェクトのディレクトリにElectronをインストールしました。サンプルプログラムを実行してみました。本稿で作成した環境を元に、次回からアプリ作成を目指します。コメントをキャンセルメールアドレスが公開されることはありません。