Electronに触ってみる第一回目はElectronの開発環境を整え、HTMLファイルを開くだけの簡単なデスクトップアプリケーションを作って、一連の流れを体験してみましょう。そのポテンシャルの一端に触れてもらうことができます。Electron!!アプリケーションのパッケージングおわりにElectronとはElectronはGitHub社が作ったデスクトップアプリケーションフレームワークです。Electronの中身はブラウザエンジンのChromiumとNode.jsで、JavaScript、HTML、CSSを使ってデスクトップアプリケーションの開発ができます。簡単に言うとWebアプリケーションをElectronを使ってパッケージングする、といったようなイメージです。Electron手軽にデスクトップアプリケーションを作れる筆者はElectronを使ってcgmd-previewという、codegrid-markdown*をリアルタイムにプレビューするためのデスクトップアプリケーションを作成しました。プレビューでは、CodeGridのWebアプリ上での記事の状態が表示されるので、原稿を執筆する際にイメージがつかみやすくなります。注*:codegrid-markdowncodegrid-markdownはCodeGridの執筆フローを効率化するために作られた、CodeGridのためのMarkdownパーサーです。CodeGrid独自のMarkdown記法を参照ください。ちなみにこの記事もcgmd-previewを使って書かれました。エディタで原稿を書くと、それがリアルタイムでプレビューされます。原稿が保存されるたびにプレビューも自動で更新されます。cgmd-previewの使用Electronでは、ブラウザアプリケーションやNode.jsの開発で培ったノウハウと、npmにある豊富なパッケージをそのままデスクトップアプリケーションの開発に活かすことができます。Electronのルールや手順さえ覚えてしまえば、とても簡単にデスクトップアプリケーションを作ることができるでしょう。この連載では、ローカル環境にあるMarkdownファイルをプレビューするアプリケーションを作りながら、Electronの基礎を解説していきます。紹介するサンプルは次のリポジトリからダウンロード、またはクローンできます。併せて参照してください。サンプルリポジトリ2016-electron/tree/master/1このシリーズでは、次の環境にて動作を確認しています。環境や各ソフトウェアのバージョン違いにより、本シリーズで解説している内容がそのまま動作しない可能性がありますので、その点ご留意ください。1.2.6環境構築Electronを実行するための環境を整えましょう。準備として、アプリケーション用の新規ディレクトリを作成しておき、以降はこのフォルダ内で作業を進めていきます。package.jsonの作成アプリケーションで利用するnpmのモジュールを管理するために、アプリケーション用のディレクトリ内にpackage.jsonを作成します。次のJSONをpackage.jsonというファイル名で保存します。}}package.jsonにはアプリケーションのエントリポイントとなるファイルの指定をmainに、scriptsにアプリケーションを起動するためのstartコマンドと、バージョンを確認するversionコマンドを設定しておきます。electron-prebuiltのインストールElectronをインストールします。ターミナルから次のコマンドを実行してインストールを行います。electron-prebuiltインストール完了後、次のコマンドでelectronコマンドが正しくインストールされたかを確認します。v1.2.6のようなバージョン番号が表示されれば正しくインストールされています。version【ワンポイント】electron-prebuiltの管理Electronのアプリケーションは、electron-prebuiltのバージョンが異なるとうまく動かなくなる場合があります。これを避けるためにアプリケーションごとにelectron-prebuiltをローカルモジュールとしてインストールし、管理することを推奨します。スクリプトを管理するを参照してください。Electron!!まずはElectronでHTMLファイルを開くという動作を実装してみましょう。main.jsElectronのアプリケーションには、エントリポイントとなるメインのJavaScriptファイルが必要になります(メインプロセス)。メインプロセスからブラウザウインドウ(レンダラプロセス)を操作して、アプリケーションを構築します。メインプロセスでは主にOSとのやり取りを行うバックグラウンドのプロセスを担当し、レンダラプロセスではHTMLとCSSによる画面のレンダリングと、それに伴うJavaScriptの実行を担当します。重い処理やレンダリングと関係ない処理に関してはメインプロセスで行い、レンダラプロセスはレンダリングの処理に徹するのが望ましいでしょう。2つのプロセスは実行されるコンテキストが異なるので、プロセス同士で通信するにはElectronのipcモジュールを利用する必要があります(ipcモジュールについては次回以降解説します)。それではメインプロセスの処理を書いてみましょう。次のコードをmain.jsとして保存します。main.jsではブラウザウインドウを生成してローカルのHTMLファイルを開きます。browserWindow.loadURL(`file://${__dirname}/browser.html`);});アプリケーションのメインとなるのはappです。アプリケーションに関する処理はreadyイベントがappに対して発生したあと(アプリケーションの起動の準備ができたあと)に行うのがElectronのセオリーです。アプリケーションの準備ができたあと、BrowserWindowのインスタンスを生成し、loadURL()で指定したHTMLファイルを開きます。【ワンポイント】一部の新しいJavaScriptの機能が使えるElectronはNode.jsとChromiumの比較的新しいバージョンによってできていますので(Electronのバージョン1.2.7では、Node.jsにはv6.1.0が適用されています)、ES2015の一部の機能などを使ってコードを記述することができます。Babelなどのトランスパイラを使わずとも、そのまま実行できますので、ES2015の素振り的な意味も兼ねて積極的に使ってみることをオススメします。browser.htmlブラウザウインドウで開くHTMLを用意します。次のコードをbrowser.htmlとして保存します。</body></html>このbrowser.htmlがmain.jsのbrowserWindow.loadURL(file://${__dirname}/browser.html);という指定によって開かれます。Electronの実行ターミナルで、次のコマンドを実行してElectronのアプリケーションを起動してみましょう。start実行後、次のようなウインドウが表示されれば成功です。Electronbrowser.htmlが表示される。HTMLを表示するだけという単純なものですが、これだけのコードでデスクトップアプリケーションとして動作させることができました。ローカルのファイルではなく、特定のURLを開きたい場合にはbrowserWindow.loadURL()の引数としてURLを渡すことで開くことができます。さきほどのターミナルで実行中のコマンドをcontrol+cキーで終了すると、このアプリケーションを終了できます。アプリケーションのパッケージング簡単なアプリケーションができましたが、このままでは自身のローカル環境でしか動作させることができません。アプリケーションを配布するにはパッケージングツールで単独で実行可能な形式に変換する必要があります。今回はelectron-packagerというパッケージングツールを使います。X、Linuxで実行可能なバイナリファイルを生成できます。electron-packagerのインストール次のコマンドでelectron-packagerをインストールします。electron-packagerパッケージング用コマンドの設定インストールが完了したらpackage.jsonのscriptsに次のようにパッケージング用のreleaseコマンドを追加します。--arch=x64"},electron-packagerに指定する項目は次のようになっています。XとWindowsを指定するdarwin,win32を、<arch>には64bitを指定するx64を指定します。パッケージングしてみる次のコマンドを実行してアプリケーションのパッケージングをします。X用のmarkdown-preview.appとWindows用のmarkdown-preview.exeがフォルダに出力されます。to:/path/to/markdonw-preview/markdown-preview-darwin-x64/path/to/markdonw-preview/markdown-preview-win32-x64出力されたファイルmarkdown-preview.appとmarkdown-preview.exeが出力される。これらを実行すると、ターミナルから実行したときと同じようにbrowser.htmlの内容が表示されるアプリケーションが起動します。【ワンポイント】アプリケーションの詳細な設定ここで解説したのは、ミニマムな必要最低限の設定です。実際にリリースをする際には詳細にアプリケーションの情報を設定する必要があるでしょう。electron-packagerはNode.jsのモジュールとして使うこともでき、JavaScriptで設定を書いてアプリケーションをビルドすることができます。必要に応じて次のドキュメントにも目を通してみてください。Storeにアプリケーションをリリースする際には、Appleから発行される証明書の取得が必要だったりと、若干の手間がかかることがありますので、こちらにも目を通してみてください。Guide/日本語訳おわりにここまで解説した手順だけで、単体で配布できるデスクトップアプリケーションが作ることができてしまいました。リリースする場合には、いろいろな手順が必要になりますが、簡単なアプリケーションであれば、GitHubなどに圧縮したファイルを置くだけでも十分でしょう。次回はアプリケーションにメニューを付ける方法と、ダイアログからファイルを開いて表示する方法を解説する予定です。直博フロントエンド・エンジニアJavaScriptとCSSへの興味から大学院を中退してWebの世界に飛び込む。大手デジタルコンテンツベンダーにてHTML、CSS、JavaScriptなどフロントエンド全般の担当として、主にスマートフォン向けゲームの開発に従事。2014年1月にフロントエンド・エンジニアとして株式会社ピクセルグリッドへ入社。スマートフォンサイトの実装を得意とする。在学中からhtml5jのスタッフとして、さまざまな技術系勉強会の運営に関わる。特定商取引法に基づく。