10分で分かるかもしれないElectron入門

Electron, Node.js

この記事は最終更新日から1年以上が経過しています。

はじめに

  • 学生時代から考えるとC言語、Java、PHP、AWS、Androidと時代とともに広く浅く学んできた器用貧乏な私ですが、最近では、趣味でElectronを触って見てます。

  • そんな訳で、Electronの学習メモを最低限、人が読んでも理解できる程度にまとめました。

 

Electronとは

396-1.jpg

  • Node.jsとWebの技術(HTML、CSS、JavaScript)で(1)クロスプラットフォームの(2)デスクトップアプリケーションを構築するフレームワークです。

メモ

  • (1) クロスプラットフォーム : Windows、Mac OS X、Linuxなどのように仕様が異なるOS
  • (2) デスクトップアプリケーション : “Atom”、”Slack”のようなアプリケーション

とりあえずインストール

  • 検索すると色々な方法が出てきますが、10分くらいでサクッとやりたい方は、公式HP(2017/1/17現在)のQuick Startの方法が良いかと思います。調べたことのメモと共に記載します。

  • (参考) http://electron.atom.io/

方法
# (1) ElectronのQuickStartリポジトリをローカルに複製
$ git clone https://github.com/electron/electron-quick-start myelectron
 
# (2) 複製したディレクトリに移動
$ cd myelectron
 
# (3) モジュールのインストール、起動
$ npm install && npm start

解説

(1) ElectronのQuickStartリポジトリをローカルに複製

  • 複製したディレクトリの中を見てみると以下のようになっています。番号を振った3つをざっくりと見てみます。
myelectron
├── LICENSE.md
├── README.md
├── index.html ・・・ [1]
├── main.js ・・・ [2]
├── package.json ・・・ [3]
└── renderer.js

[1] index.html

  • 顔部分です。実行すると、最初に表示されるページ。
  • HTMLタグだけだと、Node.jsが動いているかちゃんと確認できないので、”process.~~~”という箇所でNode.jsのグローバルオブジェクト”process”のプロパティ(Node.jsのバージョンとか)を引っ張ってきて、Node.jsがちゃんと動いてることを確認しています。

index.html
<br />Hello World!
<h1>Hello World!</h1>
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
 
<script>
    require('./renderer.js')
  </script>
 

[2] main.js

  • 心臓部分です。
  • 2行目でElectronのAPIを使って、BrowserWindowインスタンスを作成しています。名前の通り、アプリのウインドウが作成されるイメージです。
  • あとは、表示させるページである”index.html”を読み込んだり、イベントハンドラを記述しています。
  • (参考) https://github.com/electron/electron/blob/master/docs/api/browser-window.md

main.js
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})
 
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
 
// Open the DevTools.
mainWindow.webContents.openDevTools()
 
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
 
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
 
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
 
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
 
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
 

[3] package.json

  • 体の設計図という意味でのDNAみたいなイメージです(この辺から無理やり感が。。。)。
  • どちらかというとNode.jsの話なので、重要なところだけ説明します。
  • name,version : 必須のパラメータ。意味は英語の通り。
  • main : パッケージの中で最初に呼ばれるモジュールのID。

package.json
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^1.4.1"
}
}

(2) 複製したディレクトリに移動

  • 解説は省略

(3) モジュールのインストール、起動

  • これで、Electronアプリが開きます。

とりあえず寿司🍣を流してみます

396-2.jpg

やってみた感想

◎ 良い

  • サクッとやれるのが、良いです。HTML、CSS、JavaScriptの知識がそのまま使えるっていうののが良いです。ただ、少しはNode.jsの学習は必要そうです。というか、「Node.jsでできること(得意なこと)」 + 「webでできること」 + 「デスクトップ上でやりたいこと(今までやりにくかったところ)」っていう組み合わせのアイディア次第で面白くなるかが決まりそう。

  • 試しにWindows用にコンパイルしてみたけど、コマンド一発なので、楽でした。

  • ブラウザに依存しないため(Electron自体にChromiumブラウザが内蔵されている)、表示崩れとかないってのはまぁまぁメリットかと思います。

  • パッと思いつくのは社内用のツールとか、ローカルのファイルをごにょごにょするのには使えそうです。

△ 不安

  • 「あれ?これ結局、なんだかんだ言ってWindows用の改修必要じゃない?」とかなった時、絶望しそうです。この辺はガッツリと触った人に聞いてみたいところです。

この記事を書いた人

氏川博光
1989年北海道生まれ。レコチョクでは主にWebサービスの運用/保守やAndroidアプリケーションの開発を担当しています。最近はReact.js、Electronなどにも興味があります。音楽は、楽器を弾くことも、聴くことも大好きです。お手柔らかによろしくお願い致します。
最近書いた記事

Electron, Node.js