デスクトップアプリケーションが開発できる!「Electron」入門編

2016年5月にバージョン1.0が公開され、瞬く間に話題となったElectron。Webフロント技術でデスクトップアプリケーションが開発できる、という点にも注目が集まっています。そこで今回は、このElectronの概要から特徴、魅力についてご紹介していきます。

そもそもElectronって何?

20161014_ec

【画像参照】http://electron.atom.io/

Electronとは、GitHub社製のクロスプラットフォームデスクトップアプリケーションフレームワークです。作者はCheng Zhao氏で、もともとはAtomエディタ用として開発されました。

ElectronはNode.jsとChromiumで構成されています。ブラウザのレンダリングプロセスを担当するのが後者。前者は、レンダリングプロセスの作成や、XHR/fetch以外でのメインプロセスを担当しています。

■特徴

– 対応プラットフォーム
・Windows
・Linux
・OSX
ちなみに、コードベースに関してはほとんど統一ができると考えてしまって構いません。しかし、OSX用やWindows用の機能が用意されている兼ね合いで、プラットフォームによる呼び出し可能なAPIや、受信できるEventに違いが多少あります。これが気になるなら、あらかじめAPIの確認が必要です。

– 言語
・HTML
・CSS
・JavaScript
最大の特徴とも呼べる部分がこちら。デスクトップクライアントを、HTML/CSS/JSで作ることができるのがElectronです。つまり、Web開発の技術でデスクトップアプリ制作ができてしまうわけです。

– UI
基本的にUIはWebとなっています。ネイティブのダイアログボックスの使用といった場合は、専用APIを利用します。

– パフォーマンス
基本的にWebページと同等のパフォーマンスであり、ネイティブには敵いません。ただし、オフラインキャッシュのシステムは構築可能なので、ある程度までは改善が可能と言えます。

– ネイティブ機能の呼び出し
ファイル操作や外部プロセスコールなどの機能をNode.jsから呼び出せます。また、Node.jsのアドオンを使えば、C言語等で書かれたネイティブライブラリも呼び出し可能になります。ただし、バージョン等によっては利用ができないことも多いため、詳しくは利用ガイドを確認してください。

Electronのここがすごい!

20161015_2

Electronは、Node.jsのライブラリを直接透過的に呼び出すことができます。さらにクロスプラットフォームになっているため、WindowsでもMac(OSX)でも動作可能。それに加え、Electronには豊富な事例があります。詳しくは、GitHubで公開されている「awesome-electron」のページで確認してみましょう。

その他、npmをベースにオリジナルのエコシステムが実現している点や、CSS Class Setとして「PhotonKit」が用意されており、簡単にOSX風なUIを制作できるのも魅力のひとつと言われています。

■強力なAPIにも注目

Electronには豊富なAPIが用意されています。メインプロセス側とChromium側に分けて、代表的なものを見てましょう。

– メインプロセス側のAPI
・app
アプリの起動・終了といったライフサイクル管理用のAPI
・autoUpdater
自動更新の検知や、それに伴うダウンロード、アップデートといった機能
・powerMonitor
バッテリーロウ時のサスペンドや、ACアダプター解除等の検知
・Menu/MenuItem
メニュー関連

– CHROMIUM側のAPI
・desktopCaptuer
デスクトップキャプチャーの取得ができる強力なAPI
・Webframe
zoomやinput textfield内でのスペルチェックなど

– 共通で使用できるAPI
・clipboard
クリップボードにコピーしたものの取り出し
・shell
いわゆるopenコマンドと同様の機能

ELECTRONの運用と今後について

20161015_3

Electronの開発自体は、これまでにNode.jsやWebアプリ開発をした経験を持つ方だとかなり楽でしょう。すでにWebプラットフォームが整備されているようなケースであれば、既存の資産をほとんど流用できる可能性もあります。検証には時間と手間がかかるかもしれませんが、それを抜ければ運用自体は比較的楽と言えます。

ただしElectronは、まだまだ生まれたてのプラットフォームと言っても過言ではなく、アップデートなどが頻発するおそれもあるでしょう。もちろん、それはセキュリティやパフォーマンス改善に必要不可欠なことではありますが、どうしても手放しの運用はできません。

そう考えると、すでに構築されたインフラ等があるなら、Electronの利用にこだわることはないでしょう。例えば、社内にWebエンジニアが在籍しており、ゼロベースで開発をする時や、既存のWebシステムの拡張機能的な利用が向いているかもしれません。

今後の発展に期待

まだまだ出来たばかりのElectronなだけに、いきなり開発のメインに据えるのは、環境にもよりますが現時点としてはハードルが高そうです。ただし、その技術自体は素晴らしいものなので、今後の発展を眺めつつ、いざ使おう!となった時に、すぐ手が出せるよう勉強しておくと良いかも知れませんね。

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。