(エレクトロン)とは、ウェブ技術でデスクトップアプリケーションを作成できるテクノロジーです。HTMLとCSS、JavaScriptを使って開発し、WindowsとmacOSの両OSのアプリケーションを1つのコードから作ることができます。近年、注目度が高まっておりマイクロソフトやGitHubなど、有名企業も採用しています。Electronエレクトロン製のアプリケーションはChromiumクロミウム(Chromeブラウザの元となるもの)とNode.jsノードジェイエスがランタイムとなっています。ウェブコンテンツをそのままアプリケーションとして動かしたり、デスクトップアプリケーションとしてブラウザだけで実現できない機能を組み込めるのが特徴です。利用用途として、テキストエディターやユーティリティーソフト、デザインツールなどの小規模な使い方から、イントラネット内のクライアントツール、インスタレーションやサイネージの分野でも活用が考えられます。本記事では、Electronエレクトロンの紹介と、デスクトップアプリケーションを作るまでの手順を説明します。v6.0.10を対象に解説していますElectronの紹介と採用事例Electronは、Windows、macOS、Linuxのデスクトップアプリケーションを作成するためのフレームワークです。Electronを使うことで、ウェブ技術であるHTMLやCSS、JavaScriptで作ったコンテンツをデスクトップアプリケーションにできます。ワンソースでそれぞれのOS向けのアプリケーションを開発できることも魅力です。(Microsoft)」や「Atom(GitHub)」があります。大企業も採用していることから、導入への不安が少なくなりますね。弊社の事例としてLINEアニメスタンプが制作できる「アニメ画像に変換する君」を開発しました。StoreでElectronを公開した数少ない国内事例です。Awesome」に情報がまとまっているので、確認されるとよいでしょう。それではデスクトップアプリケーションを実際に作りながら、開発手順を学んでいきましょう。Electronでデスクトップアプリを作成しようElectronでデスクトップアプリケーションを作成していきましょう。準備しておく必要があるのは、macOSかWindowsのパソコンのみ。操作にはOSにもともとに入っているコマンドラインツールを使います。手順は動画に撮影していますので、わからない箇所があれば動画を確認ください。2分40秒の動画を見るだけで、今回の手順が理解できます。今回のサンプルはGitHubにて公開しています。手順がわからなければダウンロードして参考にしてください。Manager(npm)」が必要となるため、まずは「Node.js」をインストールしましょう。Node.jsをインストールすれば、npmコマンドが使用可能となります。▲Node.jsは公式サイトから無料でダウンロードできる。今回は「v9.7」を使って解説する。Electronのインストールコマンドライン(Windowsではコマンドプロンプト、macOSではターミナル。app)を立ち上げ、以下のコマンドを実行します。成功するとElectronをコンパイルできる環境が整います。electron※Electronを-gオプションを使ってグローバルにインストールするよう説明している解説記事もありますが、オススメできません。グローバルにインストールするとプロジェクト(案件)ごとに異なるElectronのバージョンが使えなかったり、開発者間でElectronのバージョンが異なるといったリスクが考えられます。環境構築はプロジェクトフォルダー単位で構築するのがいいでしょう。今回アプリケーションを作成するために、srcフォルダー内に3つファイルを用意しました。以下にて、それぞれどのようなファイルなのかを説明します。package.jsonpackage.jsonは必要なファイルです。ここにはエントリーポイントとなるJavaScriptのファイル名を指定します。アプリケーション名とバージョンを指定すると、のちほど管理しやすくなります。main.jsmain.jsはエントリーポイント(アプリケーションの実行開始場所)となるJavaScriptファイルです。ここからアプリケーションのウィンドウを開く実装を行っていきます。2015の対応が進んでいるので、新しい記法を使ったJavaScriptで記載しています。積極的に新しい記法を使っていくといいでしょう。index.html今回メインウィンドウとして開くHTMLファイルです。main.jsの19行目でメインウィンドウとして指定しています。<script>document.write(process.versions.electron)</script>.</body></html>たくさんファイルを作ったのでややこしいのでフォルダーを再確認しておきましょう。package.jsonが2つ存在しますが、それぞれ役割が異なります。上記のファイルが配置してあるフォルダー「FirstApp」にコマンドラインで移動しましょう(srcフォルダーの上位のフォルダーです)。次にコマンドラインからelectronコマンドを実行します。成功するとアプリケーションとしてHTMLが表示されます。HTMLをアプリケーションとして実行することが可能となりましたが、他の人へアプリとして配布するには.exeファイルや.appファイルにするためのパッケージング作業が必要となります。アプリケーションのパッケージングには「electron-packager」を使用すると簡単です。コマンドラインを立ち上げ、以下のコマンドを実行してelectron-packagerをインストールします。コマンドラインを入力するのはFirstAppフォルダーの直下です。srcフォルダーでは実行しないようにしてください。パッケージングを実行します。--overwrite上記のコマンドは、『srcというディレクトリに入っているソースコードをFirstAppというアプリケーション名で64ビット向けにパッケージングし、2回目以降は上書きを行う』という命令となります。アプリケーションのappファイルの作成にはmacOSを利用し、exeファイルの作成にはWindowsを利用するのがいいでしょう。macOSからWindows向けのビルドを行う際はWineというmacOS上でWindowsアプリケーションを動かすためのプログラム群が必要です。その他パラメーター・詳しい使い方はelectron-packager公式ページの「usage」をご参照ください。パッケージングに成功すると、プラットフォームごとにフォルダーに入ったアプリケーションが作成されます。配布するときはこのフォルダーをZIPファイルに圧縮して提供するといいでしょう。scriptsを使うことを強くオススメします。scriptsはコマンドのショートカットのようなもの。package.jsonファイルのscriptsの項目に次のようにコマンドを書いておきます。true}※package.jsonファイル内のnameやlisenceなど不要な情報は消してしまって大丈夫です。startと入力するだけでElectronを実行できます。build-macと入力するだけ。コマンドの引数など長くて入力するのは大変なので、package.jsonファイルに書くのがいいでしょう。scriptsの使い方は記事「Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ」に詳しくまとめています。Tools」を使用できます。Tools]を選択することでDevToolの表示を切り替えられます。Toolsが表示されて不便なので、右上の切り替えアイコンを長押しして別ウィンドウモードに切り替えておきましょう。Overview」を確認すると良いでしょう。まとめアプリケーション化まであっけなく実行できたのではないでしょうか。Electronを使用すればデスクトップアプリケーションをサクッと作れます。解説は続編記事「テキストエディターを作ってElectronの基礎を学ぼう」へ続きます。参考情報:類似技術との比較から見えてくるElectronの利点Electron以外にもさまざまなデスクトップアプリケーション用のフレームワークがあります。簡単な比較用の表を作成したのでご確認ください。WebkitエンジンHTMLやJavaScriptでデスクトップアプリを開発できるフレームワークはいくつかあります。ElectronエレクトロンやNW.jsはChromiumクロミウムをベースとしているため、ブラウザ依存を気にせずに最新のウェブ技術を使用できます。ウェブ技術者にとっては今まで作成してきた資産を再利用できるでしょう。この表だとElectronとNW.jsはまったく同じに見えますが、ElectronはJavaScriptファイルがエントリーポイントのためHTMLファイルを用意しなくても実行できる点でNW.jsとの違いがあります。NW.js」にまとまっています。令和元年9月30日に内容をメンテナンスしています。のぞみインタラクティブデベロッパー。好きな生き物はハムスター、好きな食べ物は豚汁です。ツールは使うより作りたい派。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。