俺たちのチャットワークのデスクトップ版がでたよ! 中身をちょっと見てみた。

チャットワークはとてもよいサービスです。
リアルタイムなチャットはもちろん、ファイル添付、ボイスチャット、絵文字でキャッキャウフフしたり、そして無料でもかなり使える、という至れり尽くせりのサービスで、お試しで使ってるうちにメールが嫌で嫌で仕方なくなります!

そんなチャットワークのデスクトップ版がリリースされたようで、JSでデスクトップアプリが作れるElectronで作られているそうで、ってことはソース丸見えってことで、公開されていないOAuthのログインAPIもこっそりゴニョゴニョできたり?とワクワクしながらちょっと見てみました。

ちなみに、この記事はElectronを触ったことがない僕がお酒を飲みながら書いてるのであまりあてになりません。

結論からいうと

基本はウェブ版を表示しているだけでした。
いつからログインAPIを叩けると錯覚していた?

orz

解凍してみるしてみる

使用ライブラリ

ls -1 Frameworks
ChatWork Helper EH.app
ChatWork Helper NP.app
ChatWork Helper.app
Electron Framework.framework
Mantle.framework
ReactiveCocoa.framework
Squirrel.framework

MantleはモデルクラスをよしなにしてくれるCocoaのライブラリ。
ReactiveCocoaはその名の通り。攻めの選択ですね!
Electronだから全部JSなのかと思いきや。この辺をどう使ってるかは追っていません。

Chatworkは当初、モバイルアプリはTitaniumを使っていたり、技術的には挑戦的な印象!
(今はnativeで作ってるそうです。Chatworkのように通信が多く、素早い動きが求められるものには不向きでしたね。)

ソースコード

ls -1 Resources
am.lproj
app.asar
ar.lproj
atom.asar
atom.icns
...

asarはElectronのアーカイバ? 難読化?

asarを展開してみる

npm install asar
node_modules/asar/bin/asar e app.asar out

え、npmなんてコマンドがない!?
それはいけないのでこのエントリを見t…

追ってみる

index.html

入り口です。

<webview id="chatwork-view" nodeintegration="on"></webview>
<script src="./front/index.js"></script>

webviewがあるだけ。
この辺で僕の目的のものは得られないだろうな、と思いだいぶがっかりしました。

index.js

this.webView.setAttribute('useragent', 'Kamogawa ChatWork Desktop/' + app.getVersion() + ' ' + process.platform + ' ' + process.arch);

京都、鴨川の清流が脳裏に浮かぶ、風流なUA名である。
このような名前を付けたいものです。
他は各種イベントハンドラが登録されてます。
APIを使っている箇所がないかgrepしたところ、自動更新のチェックのためのAPIがあるようですね〜(しょんぼり)

感想

すごく少ないコードでデスクトップアプリが実装できていて素晴らしい。
(コードが少ないことは、理解もメンテもしやすく、良いこと)
僕もElectronにチャレンジしたくなったが、インストールいらないしWebでよくね?という気持ちにもなった。

Electronはソースコードが丸見えになってしまう。
どうせならOSSにして、改善点を受け入れられるようにしては良いのでは? と思ったが、これだけだとWebの方の指摘になってしまいそうで、あんまり公開するメリットはないかなぁ。

そして、もし中の人がここを見ていたら、どうか認証APIの公開を早く…。
個人的に開発中のスマホアプリでは、予めデベロッパ登録をした上で、PC版にログインさせてスクレイピングしてtokenを取得していて、とても辛いです…。