Web技術でデスクトップアプリを開発できる「Electron」(後編) - インストールから簡単なアプリ作成まで

最近、PCで使うデスクトップアプリの多くがElectronというフレームワークを利用して開発されています。Webの技術を使ってデスクトップアプリを開発できるので、手軽にアプリを作ることができます。本稿では、Electronのインストールから簡単なアプリ開発までを紹介しています。前回、インストール方法について紹介しました。今回は、簡単なアプリの作り方を紹介します。

一番簡単なElectronアプリを作ろう

それでは、一番簡単なElectronアプリを作ってみましょう。Electronのアプリは、Webの技術(HTML/CSS/JavaScript)を使って作ることは既に紹介しました。

そのため、Electronのアプリを作る際には、Webページを作るのとほとんど同じです。一枚のWebページ(例えば、index.htmlとその表示に必要なCSSやJavaScript)を作成しておくと、それが、デスクトップアプリの画面に表示されるという具合です。ただし、Webページに加えて、デスクトップアプリとして動かすために必要となる設定ファイルを作っておく必要があります。

アプリを作成するためのディレクトリを作ろう

Electronのアプリを作るためには、HTMLファイルやJavaScriptファイルなど、複数のファイルを利用することになります。そのため、アプリを作成するのに当たって、プロジェクト一式を保存するディレクトリを作成しましょう。

コマンドラインからディレクトリを作成するには「mkdir」コマンドを使います。また、そのディレクトリでいろいろな操作ができるようにするには「cd」コマンドを使います。作業対象となるディレクトリを『カレントディレクトリ』と言います。

ここでは簡単な例として「project-hello」というディレクトリを作り、そのディレクトリをカレントディレクトリとしましょう。以下のコマンドを実行してみましょう。

 mkdir project-hello
 cd project-hello

Electronの設定ファイルを作ろう

それでは、Electronのプログラムを起動するための設定ファイルを作成しましょう。そのために「package.json」というファイルを作成します。これは、Node.jsでアプリを作る時に使う設定ファイルでもあります。

このファイルを自動で作成するには、以下のコマンドを実行します。

 npm init -y

これを実行すると、プロジェクトのディレクトリに「package.json」という名前のファイルが作成されます。これを、テキストエディタで開いてみましょう。このファイルは、JSON形式のデータファイルとなっています。

それで、「main」という項目に、「index.js」と書かれているので、これを「start.js」と書き換えてみましょう。これは、Electronが起動するとき、最初に読み込み実行するファイルを指定するものです。

package.json

 {
   "name": "project-hello",
   "version": "1.0.0",
   "description": "",
   "main": "start.js",  ←←← ここを書き換える
   ... 省略 ...
 }

Electronが最初に実行する「start.js」を作ろう

それでは、Electronが最初に実行する「start.js」ファイルを作りましょう。テキストエディタに以下のプログラムを書いて保存してください。この20行程度のプログラムにより、デスクトップアプリのウィンドウを表示し、index.htmlをウィンドウ内に表示するように指定します。

project-hello/start.js

 // file: start.js

 // Electronのライブラリを読み込む --- (*1)
 const electron = require('electron')
 const app = electron.app
 const BrowserWindow = electron.BrowserWindow

 // 起動設定 --- (*2)
 const mainFile = 'file://' + __dirname + '/index.html'
 const winSize = {width: 600, height: 400}

 // Electronの各種イベントを処理する --- (*3)
 let win = null // メインウィンドウ
 // Electronの起動準備が整った時 --- (*4)
 app.on('ready', () => {
   // メインウィンドウを作成してメインファイルを読み込む
   win = new BrowserWindow(winSize)
   win.loadURL(mainFile)
   win.on('closed', () => { win = null; })
 })
 // 閉じるボタンの処理 --- (*5)
 app.on('window-all-closed', () => {
   if (process.platform != 'darwin') app.quit()
 })

プログラムの内容は、ほぼ定型文です。コメントを入れてあるので、どこでどんな処理を行っているのか参考にしてみてください。

アプリ画面を作ろう

それでは、今回のアプリで表示する簡単なHTMLファイルを作りましょう。以下は単に、Helloと画面に表示するだけの簡単なHTMLファイルです。以下のコードを「index.html」という名前で保存しましょう。

index.html

 <html><head><title>Hello</title></head>
 <body>
   <h1>Hello</h1>
 </body></html>

これで、Electronのアプリを表示する最低限のファイルが揃いました。コマンドラインから、以下のコマンドを実行して、アプリを実行しましょう。

 electron .

※ちなみに、少し見づらいかもしれませんが、「electron」の後ろにスペースと「 .(ドット)」があります。また、このとき、package.jsonがあるディレクトリが、カレントディレクトリになっている必要があります。

手順通りに、正しく作業が行われている場合、以下のように、Helloという文字の書かれたウィンドウが画面に表示されます。

一番簡単なアプリを実行したところ

クリップボードに定型文をコピーするアプリを作ろう

ところで、画面に「Hello」と表示されるだけのデスクトップアプリでは、Electronの醍醐味を体験できません。ここでは、ビジネス文書でよく使う挨拶などを手軽に、クリップボードにコピーできる、定型文のコピーツールを作ってみましょう。

まずは、アプリ内で使うファイルをまとめるために、プロジェクトのフォルダを作成し、package.jsonを作成しましょう。

 mkdir project-copy-app
 cd project-copy-app
 npm init -y

そして、ファイル「package.json」をテキストエディタで開いて、先ほどと同じように、mainの項目にある「index.js」を「start.js」に変更して保存します。

その後、「start.js」を作りましょう。JavaScriptファイル「start.js」の内容は、前回作ったプログラムと全く同じです。そのため、ここでは掲載を省略します。単にファイルをコピーしても良いでしょう。

次に、HTMLファイル「index.html」を作りましょう。ここでは、以下のようにしました。

index.html

 <html><head>
   <title>定型文コピーツール</title>
   <script src="index.js"></script>
   <style> li { line-height: 1.7em; } </style>
 </head><body>
   <h3>定型文コピーツール</h3>
   <div><ul id="tpl"></ul></div>
 </body></html>

次に、定型文を差し込み、ボタンをクリックすると文章をコピーする処理をJavaScriptファイル「index.js」に記述しましょう。これは、index.htmlから読み込まれるものです。

project-copy-app/index.js

 // テンプレート --- (*1)
 const tempList = [
   '拝啓',
   '敬具',
   '時下、ますますご隆盛のこととお慶び申し上げます。',
   '厳冬の候、ますますご清栄のこととお慶び申し上げます。',
   '早春の候、ますますご清栄のこととお慶び申し上げます。',
   '初夏の候、ますますご清栄のこととお慶び申し上げます。',
   '梅雨の候、ますますご清栄のこととお慶び申し上げます。',
   '盛夏の候、ますますご清栄のこととお慶び申し上げます。',
   '皆様お変わりなくお過ごしでしょうか。'
 ]
 // 定型文を差し込む --- (*2)
 window.onload = function () {
   let s = ''
   for (let v of tempList) {
       s += `<li><input type="button" value="${v}" onclick="cp(event)">`
       s += `</li>`
   }
   const tpl = document.getElementById('tpl')
   tpl.innerHTML = s
 };
 function cp(e) {
     const text = e.target.value
     // クリップボードにコピー --- (*3)
     const {clipboard} = require('electron')
     clipboard.writeText(text)
     alert('以下をコピーしました\n' + text)
 }

プログラムを見ていきましょう。プログラムの(＊1)の部分では、ウィンドウ上に表示する雛型文の一覧を定義します。(＊2)の部分では、HTMLの<ul id="tpl">以下に定型文とボタンを差し込みます。(＊3)の部分では、Electronの機能を利用して、クリップボードに定型文をコピーします。

それでは、Electronで実行してみましょう。コマンドラインから以下のコマンドを実行しましょう。

 electron .

ウィンドウ上の定型文をクリックすると、その内容がクリップボードにコピーされます。

定型文コピーツールを起動したところ

定型文をクリックすると、クリップボードに定型文がコピーされます

まとめ

以上、手順を見てきたように、設定ファイルを用意する必要がありますが、普通にWebページを作るのとほとんど同じコードを書くことで、デスクトップアプリを作ることができました。Electronを使えば、非常に手軽にデスクトップアプリを開発できることが分かったのではないでしょうか。

今回の後半部分では、クリップボードを操作するプログラムを作りました。クリップボードの読み書き操作は、セキュリティの関係上Webブラウザでは、なかなか簡単にいかないものです。しかし、Electronが提供するAPIを利用することで、手軽に操作することができます。

Electronが提供する機能については、以下のサイトに一覧が載せられていますので、参考にしてみてください。

Electronの機能一覧
[URL] https://electron.atom.io/docs/api/

ほかにも、IPC通信を利用することで、Node.jsが提供するすべての機能を、Electronのアプリで利用することができます。Node.jsは、多くの人に使われており、Node.jsユーザーが登録したライブラリは、非常に豊富です。ライブラリの一覧は、npmjs.comというサイトに集約されており、PDFやWord/Excelファイルの読み書きなど、デスクトップアプリで使いたいと思うさまざまな機能が提供されています。それらを利用することで、多種多様なアプリの開発が可能になるでしょう。

本稿が、Electronを使ったデスクトップアプリ開発のきっかけになることを願っています。