1.
ソニーで
Electronアプリをリリースしてみた
2017/11/6
ソニーネットワークコミュニケーションズ株式会社
クラウド＆アプリ事業部門 1部 2課
Seki Yasuharu

2.
自己紹介
• ソニーネットワークコミュニケーションズ株式会社 (So-net の会社) 所属
• PC / Android アプリ開発してきた
• Hybrid アプリの開発手法を広めるチーム(CDP) のリーダー
• cdp-info@jp.sony.com
• a.k.a.) 社内・グループ内 Electron/Cordova evangelist (!?)
• 好きな言語： JavaScript
• 嫌いな言語： JavaScript
number of U.S. states state capitols I've visited.
yasuharu.seki.7
ahirun0426
Yasuharu.Seki@jp.sony.com

3.
利用させて頂いています

4.
ソニーグループ内での採用例
HUIS UI CREATOR
Developer Tools
Digital Paper App

5.
例１) HUIS UI CREATOR

6.
HUIS
@HUIS_JPhttp://huis.jp/

7.
HUIS UI
CREATOR
@HUIS_JPhttp://huis.jp/remote-controller/ui-creator/

8.
@HUIS_JP
ユーザーの皆さまのHUISカスタム例
紹介もあります

9.
HUIS UI CREATOR
デバイス認識
ファイル転送
独自plugin
node fs
両対応

10.
例2) Digital Paper App

11.
Digital Paper
http://www.sony.jp/digital-paper/

12.
Digital Paper App
ドキュメント管理が効率的におこなえる「Digital Paper App」
主な機能
【特長1】ワイヤレスでドキュメントを転送する
【特長2】デジタルペーパーに“印刷”する
【特長3】コンピューターとデジタルペーパーを同期する
【特長4】デジタルペーパーのドキュメントを整理
http://www.sony.jp/digital-paper/apl/dpa.html

13.
Digital Paper App
経路制御
プロセス
Node plugin による
プロセス間通信
httpd
データ転送
over TCP/IP
両対応

14.
例3) Future Lab Program

15.
FUTURE LAB PROGRAM N
http://www.futurelab.sony.net/N/

16.
FUTURE LAB PROGRAM N ... のアプリ developer tool
ユーザー
アプリユーザー
アプリユーザー
アプリ
作成・管理・実行
機器上のJavaScript Engine
シミュレーション

17.
おまけ) 画像転送アプリ on Cordova

18.
おまけ: 画像転送アプリ (Cordova)
データ転送
Ver4.1 Low Energy

19.
採用理由

20.
ハードウェアとの連携アプリを作る機会が多い！
Node plugin によるハードウェア連携が可能
Chromium
Node plugin
(Native)
WebView
v8 v8
node.js
Node plugin
(Native)
WebApp
(Browser part)
Chromium
IPC
Blink
WebApp
(Renderer part)
アプリUIは WebApp
既存の Node Plugin が活用できる
当然自作も可

21.
その他の採用理由
• Windows / Mac 版の同時リリースがしやすい
• 豊富な(社外)採用事例がある
https://electron.atom.io/apps/
...

22.
その他の採用理由
• WebApp 部分は JavaScript Engineer に開発依頼できる
• 今一番ポピュラーな言語は JavaScript !! By GitHub (https://octoverse.github.com/)
• UI の実装が Native と比較して容易... というかイイトコドリできる
• 画面UIには HTML+CSS が使える
• Native の標準的なダイアログも使える

23.
良かった点・苦労した点

24.
良かった点：複数 Platform 対応
• リリースタイミング
• ほぼ同タイミングで Windows / Mac のアプリがリリースできた
• 開発工数
• Windows + Mac 対応
1 + 1 + 0.2 1 + 0.5
当社比
調整
2.2 1.5
3割減位

25.
苦労した点：Windows / Mac での UI の違い
• UI テイストの統一
Windows / Mac で UI を同一にした
⇒ 事前にデザイナーと認識合わせをする必要があった
• メニューの振る舞い・構成の違い
• モーダルダイアログ表示時の振る舞い
• Windows ： メニュー操作できない
• Mac： メニュー操作ができる
• メニューの構成が Windows / Mac で異なる
⇒ メニューの実装および状態管理が複雑になった
多少のノウハウが必要になる部分

26.
良かった点：アプリベースの共通化
• Windows / Mac OS / Android / iOS で開発手法を統一できた
• ⇒ Electron と Cordova の構造の違いは抑えておく必要はある
• 弊チーム(CDP) ではアプリ開発の基礎となるスケルトンを用意して、そこから編集してア
プリを作っている

27.
One thing...
• CDPのアプリスケルトンをOSS化した
• http://github.com/sony/cdp-js
• 製品化を目的とした堅実な作り
• 実績のあるライブラリセレクション
• 興味がある人は ☆ 付けてください
• 現況 Cordova 用になっている
• Electron 対応を促進するためにもスターの後押しがあると嬉しい
2017.3.22 第10回 Apache Cordova 勉強会にて
https://www.slideshare.net/ShinOgata1/cordova-73839153

28.
[Tips] 要注意な点：asar の中身も気をつけねば
.asar ファイルは簡単にファイルの中身にアクセスできる
• minify や uglify して安心してたら package.json の中に思わぬ情報が記録されてい
たという例も...
$ npm install –g asar
$ asar extract app.asar output
app.asarの中身を展開したい場合
コードネームとか組織名とか要注意

29.
良かった点：Community の反応が早い！
Mac の dialog の扱いでバグを見つけた
• 2016.9.29 レポート
• 2016.9.30 修正パッチが用意された
• 2016.10.6 修正が含まれた版がリリースされた
• 9.30 に前のバージョンがリリースされた直後だっ
た
• ※ 最近は以前ほど頻繁なリリースではなくなっている
https://github.com/electron/electron/issues/7401
1 week で修正版リリースを入手できた！！

30.
[Tips] ちょっとハマった点：NODE_MODULE_VERSION
既存の node plugin を導入するとそのままでは動かないことがある
• Electron 起動するけど、画面が白いままで焦る
• 起動しないで落ちちゃう場合も
• Developer Tool で console を見ると下記のようなエラーが
$ npm install --save pigpio
Uncaught Error: The module '{hogehoge}'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 51. This version of Node.js requires
NODE_MODULE_VERSION 53. Please try re-compiling or re-installing
the module (for instance, using npm rebuild ornpm install).
※ Electron v1.7.2 のプロジェクトで実行した場合の例
例)
⇒ electron-rebuild を使って解決

31.
その他のトライアル

32.
Quick Prototyping
• Electron アプリ作成のノウハウを生かして、短時間でプロトを作れる仕組みを作ってみた

33.
Quick Prototyping 例：構成
sample
app
sample
app
GPIO
plugin
BLE
Peripheral
plugin
BLE
Central
plugin
Accelerometer
plugin

34.
Quick Prototyping
• この程度の物をオーダーに応じて概ね３日程度で作ることを考えている
• 用途
• ユーザテスト用の実動アプリ
• 展示会等でのデモ用
• プロジェクト関係者間の意識合わせ
• などなど
• 構造：コードを弄れる人向け
• 反響が大きいようであればオープン化の可能性も
• 興味がある人は cdp-info@jp.sony.com までコンタクトください！
＋ ＋ plugins ＋ α

35.
まとめ

36.
まとめ
• 多くのアプリで Electron 使っています！ありがとう！
• ハードウェア連携のアプリが多い
• Desktop App の開発案件では今や Electron が primary choice
• 製品化アプリのフレームワークを OSS 化しました！
• http://github.com/sony/cdp-js
• お試しください
• ☆ 押してください！！
• クイックプロトサービスのデモをしました！
• cdp-info@jp.sony.com へコンタクトお願いします！
• オーダーしてみたい！という人
• 技術的な部分に興味がある方
• その他
ご清聴ありがとうございました

37.
あとがき
その他、本書で登録するシステム名、製品名は、一般に各開発メーカーの登録商標あるいは商標です。
なお、本文中では、TM、®マークは表記していません。
本書に明示されていないすべての権利は、その所有者に帰属します。
Raspberry Pi is a trademark of the Raspberry Pi Foundation
Android ロボットは、Google が作成および提供している作品から複製または変更したものであり、
Creative Commons 3.0 Attribution ライセンスに記載された条件に従って使用しています。
「Wi-Fi」は、Wi-Fi Allianceの登録商標です。
「Bluetooth」は、Bluetooth SIG. Inc.の登録商標です。