ハコベルの開発をしている吉岡です。
入社してからずっと印刷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/
登場人物の紹介
図にするとざっくりこんな感じです。
矢印の部分はなんらかのパラメータの受け渡しを示しています。
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/
ビルドするにあたりディレクトリ構造を少し工夫しています。
こんな感じ。
基本的にアプリで必要なファイルはappディレクトリに入れて、
それ以外のファイルはレポジトリの直下に置きます。
ビルドに必要な設定やパッケージなどは直下のpackage.jsonに記述して、
アプリで必要なものはapp配下のpackage.jsonに記述しています。
ビルドに使っているライブラリはこちら。
https://github.com/electron-userland/electron-builder
完成品
ビルドが成功するとdmgファイルができます。
開くとお馴染みの画面。
基本的にはWebViewでドライバー画面を表示しているだけなので、
見た目はブラウザを使っているときとあまりかわりません。
ただ、そのままだと戻る/進む/リロードなどができないので、
それだけは別で実装しています。
通知はこんな感じで通知センターに表示されます。
クリックするとアプリにフォーカスして案件の詳細ページに遷移するよう実装しました。
感想
学習コストが低いと思ったものの、開発にはそれなりに時間がかかってしまいました。
どちらかというとドキュメントを読んだり、分からないことを調べたりするのに
時間を費やしてしまった感じです。
ただ、複雑なことをしない限りはサクッとデスクトップアプリを作れると思うので、
興味のある方は是非触ってみてください。
最後に…
ハコベルではエンジニアを大大大募集中です!!
ご興味ある方お待ちしております!!
https://www.wantedly.com/projects/78140