前から導入が簡単でHTML/CSS/JSの知識だけでクロスプラットフォームなアプリケーションが作れてしまうと有名なElectronでしたが、なかなかアプリケーションを作る機会もなくて、触っていませんでした。今回、ある事業をやる上で顧客向けのアプリケーションが必要となったため、手軽に今ある知識でできそうなElectronを使おうと思いました。途中、エラーが発生したりして意外と導入が面倒だっため、紹介したいと思います。導入Macのコンソール上での作業となります。nodeすでに、nodeを入れている人は最新版を入れるために一旦削除してください。nodenodeをインストールします。npmこれで、ファイルパスが返ってこればインストールはできています。electron-prebuiltElectronをインストールします。electronファイルパスが返ってこれば、Electronのインストールは完了です。World!をしてみます。ターミナル上で作業していきます。現在地を表示できます。今回は、Documentsファイル内に作業ディレクトリを作成していきます。指定のディレクトリに移動できます。Documentsフォルダ内に移動できました。フォルダを作成できます。package.jsonを作成します。package.jsonファイル構成はこんな感じです。main.jsの作成main.jsには、アプリの制御部分を記述していきます。});});index.htmlを作成index.htmlにはアプリの表示部分を記述していきます。1つ上のフォルダへ移動します(この場合Documentsフォルダ)。アプリを起動できます。アプリの終了アプリの終了ボタン(Macなら左上の赤丸ボタン)をクリックすれば閉じるかと思いきや、終了しません。コンソール上でCtrl+Cを押すか、アプリを終了する際に、Command+Qで終了させましょう。-g今回は、コンソールで実行していくので、このコマンドを入力してインストールします。--save-devnpmスクリプトから使いたい場合は、こちらのコマンドです。コマンドを叩くと、wineが入っていないというエラーが表示されます。wineはWindowsアプリをビルドするときに必要なもので、Macアプリをビルドするときには必要ありません。普通はWin/Mac両方のアプリを作成したいはずなので、インストールしていきます。インストールしようとするとエラーが表示されます。20行目にこのコマンドを入力せよと表示があるので、入力します。xquartzこれで、xquartzはインストールできました。インストールしたいのはwineです。入力するとまたもやエラーが発生します。