(2017年3月28日追記)

先日、プロジェクションマッピングをオリジナルのアプリとして開発した際にWindowsとMac相互で動作するアプリを作るためにElectronを使用したので構築からモジュールの使い方などを色々紹介していこうと思います。
またElectron上でKiect2と連携できるアプリの作り方なども紹介していけたらと考えております。

 

Electronとは


Electronは、JavaScript、HTML、CSSなどのWeb技術を使用してデスクトップアプリケーションを簡単に作成するためのフレームワークです。アプリケーションの制作に集中できるように、アプリのコアとなる難しい部分を処理して来れます。
 
また、MITライセンスなので商用利用も可能で、WordpressやAtom・SlackなどのアプリもElectronで作られています。
ElectronはNode.jsとChroniumで動作するようになっていて、WindowsやMac(OS X)それぞれに対応するアプリを一度に制作ができてしまいます。
 

 

Electron開発環境をiOS上に構築する前に


Electronはnode.jsを使用しているため、あらかじめnode環境をiOS上で構築しておく必要があります。
node環境をiOS上で構築する方法は、色々と厄介な事が多いのでまた別の記事で詳しく紹介しようと思います。(homebrewのインストールなど)

node環境編は以下参照
Javascriptでネイティブアプリが作れるElectron開発 〜node環境構築編〜


  

Electronアプリを作る


node環境がiOS上で動けば、Electronのアプリ構築自体は実はとても簡単です。 

Macでターミナルを起動し、以下のコマンドを入力して雛形となるElectronアプリをインストールします。

$ git clone https://github.com/electron/electron-quick-start 

次に作成したディレクトリに移動します。

$ cd electron-quick-start 
 
最後にnode.jsの「npm」を使用してnode環境をアプリにインストールします。 

$ npm install

これでサンプルアプリを起動する準備は整いました。

  

サンプルアプリを起動してみる


以下のコードをターミナル上で入力するとサンプルアプリが起動します。
先ほどインストールしたディレクトリに移動していないとエラーが出るので注意してください。

$ npm start

ウィンドウが立ち上がって「Hello World!」という文字が出ればひとまず無事インストール完了です。
 

おわりに


Electronサンプルアプリ自体の起動はとても簡単にできるのがわかったかと思います。Windows・Mac両方に対応するネイティブアプリをJavascrptで作れちゃうのはとても魅力的ですので是非皆さんも試してみてください。
今後はnode環境の構築方法や色々なモジュールの使い方、パッケージングの流れなどを紹介していこうと思います。

パッケージングの流れはこちら