この記事は Electron Advent Calendar 2015 - Qiita の1日目の記事です。
ここ最近作っているアプリについてまとめる。
アプリについて
HipChat をギョームで使っているが、巷では Slack が流行しており、乗り換えたい願望が高まっている。
しかし乗り換えにはコストの面でハードルがある。
そこでSlack風味なHipChatクライアントがあれば面白いかもと、作っている。
ただ作るだけでは面白くないので、未経験だった技術(Electron, AngularJS, gulp)を使っている。
まだまだいろんな機能が足りてないが、ちょっとメッセージを送る程度には使える。
HipChat 公式クライアントは最後に開いたRoom(SlackでいうところのChannel)がデバイス間をまたいで微妙に同期する仕様。
別PCで少しRoomを開き、元のPCで見ると開いていた大量のRoomが勝手に閉じられたりする。
こういう問題を回避するのに有効。
余談だが HipChat Webクライアントのコンソールのログで採用募集しててウケた。
Electron と AngularJS との相性
元々よくなさそうという話は見かけていた。
既に語られてる部分は省略し、実感したよくないところを書く。
設計のコンフリクト
AngularJS を使うメリットの一つに、どういう機能はどこで実装すればいいかが迷わなくて済むというものがある。
一方、Electron ではレンダリングプロセスとバックグラウンドプロセスが存在しており、レンダリング以外の仕事はバックグラウンドに持っていくことが推奨されている。もちろん AngularJS はレンダリングプロセスに存在する。
つまり AngularJS と Electron が設計面でコンフリクトしており、お互いの良さを打ち消し合ってしまうことになる。
（HipSlack v0.0.1 ではよくわかっておらず、平気でレンダリングプロセスを使いまくっている）
リモートオブジェクトをバインディングに使うと、同じ controller にバインディングしている textarea の日本語IMEの挙動がおかしくなる。
IMEの変換中の文字列がバインディングに取り込まれてしまっている模様。
最低限のコードをまとめたサンプル
自動化
最初はわけもわからず generator-angular から grunt を使ってた。
いざ自分でいじろうと思ったら意味がわからず、gulp でイチから書き直した。
とはいっても gulp のプラグインを組み合わせただけ。
gulp lint で構文チェックgulp serve でビルド、Electron 起動gulp package で製品のパッケージ作成
これくらいできれば十分。（テストは！？）
これから始めるなら grunt より gulp がいいと思う。
今後
ES6 or TypeScript
素の JavaScript を書くとツライのでどうにかしたほうがいい。
HipSlack の開発では VisualStudioCode を使っている。
Microsoft/vscode · GitHub をVisualStudioCode で開いてみたところ、TypeScript の関数定義の移動がかなり使いやすかった。
まさに VisualStudio の名を受け継いでいる感じ。
ということで TypeScript に傾きつつある。
Push通知
チャットアプリなのにリアルタイムに更新されないとかありえない。
HipChat には Webhooks が用意されているので、それを使って push 通知したい。
ChromeでW3C Push APIを使ってみた - Qiita を参考に実装していた。
が、現在の Chromium のバージョンが低くてムリっぽい。
Registration failed - push service not available
AngularJS を捨てる
Electron と AngularJS の相性がよくないと実感できた。
React あたりに置き換えるのがよさそう。
もともと AngularJS を触りたくてやってただけなので全くこだわりはない。
自動アップデート
手軽にできそうなので気になっている。
このへんとか。
jenslind/electron-gh-releases · GitHub
参考資料
お世話になった記事。
最後に
Electron は MS が採用してきたりと、いわゆるWeb系ではない人（僕みたいなエンタープライズ系）でも関わりやすい、面白い技術だと思う。
なのでいろんな人が手を動かしてみるといいんじゃないかな。
明日は Quramy さんです。
