Taste of Tech Topics

Acroquest Technology株式会社のエンジニアが書く技術ブログ

社内技術イベントLTxRT紹介　～仕事でElectronアプリ開発をした結果を発表しました

HTML5/CSS JavaScript Electron 社内勉強会

こんにちは
最近JavaScriptが一番詳しい言語になってきたmaron8676です。

先日Electronについて業務で使用する機会があり、その結果のフィードバック会を行いました。
f:id:acro-engineer:20180524074506j:plain:w300
図1. フィードバック会の様子

Electron は、JavaScriptやHTML/CSS関連で数年前に出てきた技術なのですがなかなか面白いことができそうです。
そこで今回は、フィードバック会でも話したElectron の紹介をしていきます。

Electronとは

HTML/CSS/JavaScriptでクライアントアプリを作るためのランタイムです。
Electronは、Visual Studio CodeやGitHub Desktop、Slackなどなど、よく知られたアプリにも使われています。
HTML/CSSをアプリ画面としてレンダリングしたり、画面に対する処理(JavaScript)を実行するためのChromiumと、
JavaScriptからOSのAPIを使用するためのNode.jsから構成されています。
f:id:acro-engineer:20180524080801p:plain
図2. Electronの構成

機能としては、クライアントアプリで必要になることを大体行うことができます。
例えば、以下のようなことができます。

  1. ローカルファイルへのアクセス
  2. メニューバーの表示
  3. コンテキストメニューの表示や編集
  4. 複数ウィンドウの表示
  5. トレイによる表示
  6. 他のプログラムを起動
  7. 自動アップデート

Electronのいいところ

Webアプリ開発と比較したいいところ

  1. ブラウザ依存がない
    組み込みのChromiumで固定されるため、クロスブラウザ対応が不要になります。
  2. OSの機能を使用できる
    ユーザ設定をローカルに保存したり、通知を出すことができます。
  3. Node.jsのライブラリを画面から呼べる
    Electronアプリは以下のようなプロセスで構成されていて、クライアント処理にあたるレンダラープロセスからサーバ処理にあたるメインプロセスをimportされているかのように実行できます。

f:id:acro-engineer:20180524082034p:plain
図3. Electronのプロセス構成

従来のデスクトップアプリ開発と比べたいいところ

  1. Webアプリとの連携
    HTML/CSSの画面とJavaScriptの内部処理によって、アプリ画面にWebアプリを埋め込むことができます。元々Webアプリとしてあったものを利用するなどして作る量を減らせます。
  2. Webアプリ開発での知識を生かしやすい
    Webアプリで使用されるJavaScriptでそのまま開発できるため、従来のデスクトップアプリ開発を勉強するより、新しく覚えることが少なくて済みます。

よくないところ(難しいところ）

  1. 並列処理の実現が面倒
    JavaScriptがシングルスレッド言語のため、並列処理を行いたい場合は、WebWorkerやServiceWorkerを利用するなどの工夫が必要です。
  2. Native Module(Cで書かれたモジュール)の使用に必要な手順が複雑
    特にWindowsではCをビルドできるようにするための準備が複雑でした 詳細は以下にまとめてあります
    WindowsでElectronからNative Moduleを使えるようにする
  3. ビルドやモジュール読み込みでつまりどころが多かった
    exe化にはelectron-builderを使用していましたが、Native Moduleではexe化により圧縮されるファイルからの読み込みがうまくいかなかったり、
    ビルドしたときにディレクトリ構成が変わって、特殊な読み込みをしているモジュールがそのままでは読み込めなかったりといった問題がありました。

発表してみて

発表にあたり復習するなど準備しましたが、それでも発表中の質問で新たに気づくことがあったり、新たな利用法を提案してもらえたりあるので面白いですね。
これからの話としては、HTML/CSSを使ってアプリ画面を作ったり、Webアプリではできなかった機能を追加したりなどいろいろ考えられそうです。

Acroquest Technologyでは、キャリア採用を行っています。


  • ビッグデータ（Hadoop/Spark、NoSQL）、データ分析（Elasticsearch、Python関連）、Web開発（SpringCloud/SpringBoot、AngularJS）といった最新のOSSを利用する開発プロジェクトに関わりたい。
  • マイクロサービス、DevOpsなどの技術を使ったり、データ分析、機械学習などのスキルを活かしたい。
  • 社会貢献性の高いプロジェクトや、顧客の価値を創造するようなプロジェクトで、提案からリリースまで携わりたい。
  • 書籍・雑誌等の執筆や、対外的な勉強会の開催・参加を通した技術の発信、社内勉強会での技術情報共有により、エンジニアとして成長したい。

　
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
データ分析案件で時系列データの異常検知に挑戦したいエンジニアWanted！ - Acroquest Technology株式会社のエンジニア中途・インターンシップ・契約・委託の求人 - Wantedlywww.wantedly.com