Electronを使ってデスクトップアプリを開発しました

ハコベルの開発をしている吉岡です。

入社してからずっと印刷ECの開発をしていましたが、
今年の5月からハコベルチームに移って開発してます。

ハコベルはインターネットを使って簡単に荷物の配送を手配できる
運送のマッチングサービスです。
もっと詳しく知りたい人はこの辺とかをぜひ見てみてください。

ちなみに、先日「Ruby biz Grand prix 2016」でハコベルがグランプリを受賞しました。
興味のある方は是非こちらもご覧ください。
https://www.wantedly.com/companies/raksul/post_articles/46184

それでは開発の話へ。

開発の背景

Railsにようやく慣れてきた頃に「ドライバー向けのデスクトップアプリの開発をしよう!」
という話があがり、幸運にも担当させてもらうことになりました。

そもそも開発に至った理由として、一般貨物を扱うドライバーに対して、
新着案件の通知をしたいという背景がありました。

ハコベルでは荷物を依頼できる車両が大きく分けて軽貨物と一般貨物の2種類があります。
軽貨物の場合、個人事業主の方が自ら仕事をとって自ら配送するというケースが多いです。
ドライバー用のスマホアプリを提供しているので、スマートフォンさえあれば、
新着案件の通知はアプリを通して受け取ることができます。

それに対し一般貨物の場合、配車マンと呼ばれる
荷物をドライバーに振り分け作業をする人がいます。
配車マンはデスクで業務をしていることが多く、
スマホよりもデスクトップPCの方が触れている時間が長いので、
スマホアプリの通知だと相性が悪い部分があります。

デスクトップにも通知システムを提供することで、
一般貨物を扱うドライバーの方にも効率よく通知できるはず、
という考えのもと開発を始めました。

なぜElectronなのか?

デスクトップPCに通知をする手段はいろいろあります。
その中でなぜElectronを選んだのか?以下のような理由があります。

OSとかブラウザを気にしなくていい

サービスを使うドライバーの環境を気にせず開発できるのは非常に楽です。
ブラウザによっては通知機能を備えているものもありますが、
業界全体でIT化が進んでいない傾向にあり、PCの環境が古い場合も多いので、
通知という要件を満たすのにはアプリの方が向いていると思いました。

学習コストが低い

Webのアプリケーションを作っているエンジニアであれば学習コストは低いように感じました。
HTML/CSS/JavaScriptがある程度わかっていれば比較的簡単にアプリをつくることができます。
比較的簡単にマルチプラットフォームに対応させることができるのも利点です。

サービスの使用頻度を増やしたい

デスクトップにアプリというかたちで常駐させることで、
ハコベル自体の使用頻度を向上させることができるのではと考えました。

実装する機能

今回のアプリは以下の機能を満たすように開発しました。

  • webviewでドライバーページが見れる
  • ページの 戻る/進む/リロード ができる
  • 新着案件が通知される
  • アプリの自動更新ができる

基本的には公式ドキュメントを読みながら進めました。
http://electron.atom.io/docs/

手始めにQuick Startをやると概要がつかめるのでオススメ。
http://electron.atom.io/docs/tutorial/quick-start/

登場人物の紹介

図にするとざっくりこんな感じです。
矢印の部分はなんらかのパラメータの受け渡しを示しています。

diagram_1

Electron

今回の主人公。
Main ProcessはNode.jsで動きます。
Nodeのライブラリが使えるのでありがたいです。
Renderer ProcessではChromiumのブラウザが動きます。

Pusher

Pusherは専用のサーバーを立てずに、
比較的簡単にWebSocketを使った通信を実現できるサービスです。
通知の部分はこいつの力を借りて構築しました。

認証用API

Pusherの認証を行うためにAPIも準備しました。
あと、図には書いていませんが、Main Processからの
クラッシュレポートを受けとる役割もしています。

Amazon S3

アップデート用のファイルを置いたり、
アプリ起動時に必要な設定ファイルを置いたりしています。

使用したライブラリ

pusher-js

前述のPusherを使うためのライブラリ。
https://github.com/pusher/pusher-js

node-notifier

通知センターに新着案件を表示させるために使います。
https://github.com/mikaelbr/node-notifie

electron-squirrel-startup

Squirrelはアプリのインストールやアップデートをいい感じにしてくれるやつです。
このライブラリはSquirrelのイベントハンドラーを簡単に実装してくれます。
https://github.com/mongodb-js/electron-squirrel-startup

request

設定ファイルをS3から取得するのに使用してます。
https://github.com/request/request

詰まった点

ビルドの方法を模索するのに一番苦労しました。
調べてみるとやり方もいろいろありましたが、
最終的にこちらを参考にしながら進めました。
http://electron.rocks/distributing-electron-apps/

ビルドするにあたりディレクトリ構造を少し工夫しています。
こんな感じ。

スクリーンショット 2016-12-02 16.39.43

 

 

 

 

 

 

 

 

 

 

 

 

基本的にアプリで必要なファイルはappディレクトリに入れて、
それ以外のファイルはレポジトリの直下に置きます。

ビルドに必要な設定やパッケージなどは直下のpackage.jsonに記述して、
アプリで必要なものはapp配下のpackage.jsonに記述しています。

ビルドに使っているライブラリはこちら。
https://github.com/electron-userland/electron-builder

完成品

ビルドが成功するとdmgファイルができます。
開くとお馴染みの画面。
スクリーンショット 2016-12-16 11.00.53

基本的にはWebViewでドライバー画面を表示しているだけなので、
見た目はブラウザを使っているときとあまりかわりません。
ただ、そのままだと戻る/進む/リロードなどができないので、
それだけは別で実装しています。

screenshot

 

通知はこんな感じで通知センターに表示されます。
クリックするとアプリにフォーカスして案件の詳細ページに遷移するよう実装しました。

f8e8162f1ad9d64199813d0b3ff86e18

感想

学習コストが低いと思ったものの、開発にはそれなりに時間がかかってしまいました。
どちらかというとドキュメントを読んだり、分からないことを調べたりするのに
時間を費やしてしまった感じです。

ただ、複雑なことをしない限りはサクッとデスクトップアプリを作れると思うので、
興味のある方は是非触ってみてください。

最後に…
ハコベルではエンジニアを大大大募集中です!!
ご興味ある方お待ちしております!!
https://www.wantedly.com/projects/78140