はじめに
この記事では、Electronを使って簡単なデスクトップアプリを作る方法について説明します。
なお、執筆時の各プログラムのバージョンは次のとおりです。
- Node: 6.11.5 LTS(推奨版)
- Electron: 1.7.9
解説はお馴染み、「恋に落ちるコード.js」に登場するJavaScript好きの女子高生、絵子と樹里がお送りします。
人物紹介
瀬尾絵子:「恋に落ちるコード.js」の登場人物。JavaScript勉強中の女子高生。
篠宮樹里: 同じく「恋に落ちるコード.js」の登場人物。JavaScriptに詳しい女子高生。
初めてのElectron
樹里「絵子よ、私とElectronしようじゃないか」
絵子「相変わらず唐突だし、言い方がちょっとイヤラシイよね」
放課後、情報処理部の部室。
二人はいつものように部活動の真っ最中である。
樹里「というわけで、今日はElectronについて学んでみよう」
絵子「Electronって、確かに前からちょっと気になってたんだよねー。教えてくれるのはありがたい」
樹里「まず。Electronとは、ざっくり言うと、デスクトップアプリを作るための仕組みだ」
絵子「デスクトップアプリ？ この部活はWeb系の技術が専門じゃなかったっけ？」
樹里「そう。HTML5やCSS3、そしてJavaScriptといったWeb技術で開発できるデスクトップアプリなのだよ。しかもMacでもWindowsでもLinuxでも動作する」
絵子「へー。それは楽しそう」
樹里「JavaScriptの実行環境にはNode.jsが使われている。だからnpmの豊富なパッケージも利用できる。良いこと尽くめだ」
絵子「うわー。もう天下取ったも同然だね」
樹里「すなわち、JSer JKとしては避けて通れない技術なのだよ」
絵子「よーし！さっそくマスターして、あたしも真のJSer JKだ！」
サンプルを触ってみる
樹里「では、さっそく作ってみよう」
絵子「おっけー」
樹里「開発にはNode.jsのインストールが前提なのだが……当然インストール済だよな？」
絵子「あったり前じゃん。JSer JKをなめてもらっちゃ困るよ」
樹里「じゃ、公式サイトに掲載されているサンプルを動かしてみよう。次のコマンドを入力するように」
git clone https://github.com/electron/electron-quick-start
絵子「おー、動いた。ちゃんとgitもインストールしといてよかった」
樹里「えらいぞ。なんせInstagramとgitは女子高生のマストアイテムだからな」
絵子「それは初耳だけど」
樹里「gitの環境が整っていないのなら、ダウンロードしたZIPファイルを解凍するだけでも良い」
絵子「はーい……よし、準備できたよ」
樹里「よろしい。では、出来上がったディレクトリの中身を見てみよう」
cd electron-quick-start
樹里「このうち、実行に必要なファイルは『index.html』『main.js』『package.json』の3つだ。それぞれどんなファイルか確認してみようか」
index.html
樹里「アプリのウィンドウに表示される部分なのだが……ごく普通のHTMLファイルなので説明は省略する。逆に言うと、ごく普通のHTMLの知識があれば書ける」
main.js
樹里「いわゆるメインプログラムの部分だな」
絵子「ぱっと見ややこしそう……なんだけど、パーツ毎に見ていくと、そんなに複雑なことはしてなさそうだね」
樹里「お、絵子も成長したじゃないか」
絵子「樹里の教え方が上手だからだよ」
樹里「……えー、確かに、多少JavaScriptをかじった人であれば、初見でもある程度理解できるだろう」
絵子「照れなくてもいいのに。可愛いなあ、樹里も…………痛でででで」
package.json
樹里「このファイルは、アプリの名前やバージョン、あとは使用するnpmのパッケージなどを定義するファイルだ。なのでElectronだけでなく、Node.jsで開発されたアプリには必ずついてくる」
絵子「Angular CLIの時にもあったよね。確かに」
樹里「特に欠かせないのが"main": "main.js"の部分だな。エントリーポイント、すなわち最初に実行すべきファイルはどれなのかを定義している。つまり、アプリが起動したらまず『main.js』を実行しなさい、と定義しているわけだ」
絵子「ほほう」
樹里「では動かす準備をする。次のコマンドを入力だ」
npm install
絵子「npm installコマンドは触ったことあるよ。npmのライブラリから、動作に必要なパッケージを取ってきてくれるんだよね？」
樹里「そう。実行すると、node_modulesディレクトリ内に必要なパッケージがインストールされる」
絵子「中身がめっちゃ増えた」
樹里「準備が終わったら、さっそく起動してみよう」
npm start
絵子「おおー、ウィンドウが開いたよ！ Hello World！ Hello Electron！」
樹里「その表示されているウィンドウは、ChromiumというWebブラウザだ。Google Chromeのベースとなったブラウザとしても有名だな」
絵子「なるほど。デスクトップアプリ、その実態はChromiumブラウザで動作するWebアプリと」
樹里「ただし、WebアプリにはできないことがElectronにはできる。npmの豊富なパッケージも利用できるし、ローカルファイルやOSの機能にもアクセスできる」
絵子「便利なもんだねー」
樹里「ちなみに、Electronアプリを実行するためのコマンドは、そのものズバリelectronだ。引数にはアプリへのパスを指定する。カレントディレクトリで実行するならelectron .だな」
絵子「ふむふむ」
樹里「ただし、『package.json』で……」
"scripts": {
"start": "electron ."
},
樹里「という風に、startコマンドとしてelectron .と定義されているので、npm startでも起動するのだ」
絵子「へー。そんな意味があったんだ」
樹里「だから、直接electron .と入力しても起動する。しかしその場合は、事前にnpm -g install electronとelectronパッケージをグローバルインストールしておく必要がある」
絵子「にゃるほどねー」
樹里「さて、Electronの仕組みもある程度理解できたところで、次回からは実際にデスクトップアプリを作成してみよう」
絵子「わーい！」
おわりに
次回からは、Angularや他のnpmパッケージを使用したデスクトップアプリの作成方法について、自分も勉強しながら解説します。