Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
ソニーで
Electronアプリをリリースしてみた
2017/11/6
ソニーネットワークコミュニケーションズ株式会社
クラウド&アプリ事業部門 1部 2課
Seki Yasuharu
自己紹介
• ソニーネットワークコミュニケーションズ株式会社 (So-net の会社) 所属
• PC / Android アプリ開発してきた
• Hybrid アプリの開発手法を広めるチーム(CDP) のリーダー
• cdp-info@jp....
利用させて頂いています
ソニーグループ内での採用例
HUIS UI CREATOR
Developer Tools
Digital Paper App
例1) HUIS UI CREATOR
HUIS
@HUIS_JPhttp://huis.jp/
HUIS UI
CREATOR
@HUIS_JPhttp://huis.jp/remote-controller/ui-creator/
@HUIS_JP
ユーザーの皆さまのHUISカスタム例
紹介もあります
HUIS UI CREATOR
デバイス認識
ファイル転送
独自plugin
node fs
両対応
例2) Digital Paper App
Digital Paper
http://www.sony.jp/digital-paper/
Digital Paper App
ドキュメント管理が効率的におこなえる「Digital Paper App」
主な機能
【特長1】ワイヤレスでドキュメントを転送する
【特長2】デジタルペーパーに“印刷”する
【特長3】コンピューターとデジタル...
Digital Paper App
経路制御
プロセス
Node plugin による
プロセス間通信
httpd
データ転送
over TCP/IP
両対応
例3) Future Lab Program
FUTURE LAB PROGRAM N
http://www.futurelab.sony.net/N/
FUTURE LAB PROGRAM N ... のアプリ developer tool
ユーザー
アプリユーザー
アプリユーザー
アプリ
作成・管理・実行
機器上のJavaScript Engine
シミュレーション
おまけ) 画像転送アプリ on Cordova
おまけ: 画像転送アプリ (Cordova)
データ転送
Ver4.1 Low Energy
採用理由
ハードウェアとの連携アプリを作る機会が多い!
Node plugin によるハードウェア連携が可能
Chromium
Node plugin
(Native)
WebView
v8 v8
node.js
Node plugin
(Native)...
その他の採用理由
• Windows / Mac 版の同時リリースがしやすい
• 豊富な(社外)採用事例がある
https://electron.atom.io/apps/
...
その他の採用理由
• WebApp 部分は JavaScript Engineer に開発依頼できる
• 今一番ポピュラーな言語は JavaScript !! By GitHub (https://octoverse.github.com/)
...
良かった点・苦労した点
良かった点:複数 Platform 対応
• リリースタイミング
• ほぼ同タイミングで Windows / Mac のアプリがリリースできた
• 開発工数
• Windows + Mac 対応
1 + 1 + 0.2 1 + 0.5
当社比
...
苦労した点:Windows / Mac での UI の違い
• UI テイストの統一
Windows / Mac で UI を同一にした
⇒ 事前にデザイナーと認識合わせをする必要があった
• メニューの振る舞い・構成の違い
• モーダルダイア...
良かった点:アプリベースの共通化
• Windows / Mac OS / Android / iOS で開発手法を統一できた
• ⇒ Electron と Cordova の構造の違いは抑えておく必要はある
• 弊チーム(CDP) ではアプリ...
One thing...
• CDPのアプリスケルトンをOSS化した
• http://github.com/sony/cdp-js
• 製品化を目的とした堅実な作り
• 実績のあるライブラリセレクション
• 興味がある人は ☆ 付けてください...
[Tips] 要注意な点:asar の中身も気をつけねば
.asar ファイルは簡単にファイルの中身にアクセスできる
• minify や uglify して安心してたら package.json の中に思わぬ情報が記録されてい
たという例も....
良かった点:Community の反応が早い!
Mac の dialog の扱いでバグを見つけた
• 2016.9.29 レポート
• 2016.9.30 修正パッチが用意された
• 2016.10.6 修正が含まれた版がリリースされた
• 9...
[Tips] ちょっとハマった点:NODE_MODULE_VERSION
既存の node plugin を導入するとそのままでは動かないことがある
• Electron 起動するけど、画面が白いままで焦る
• 起動しないで落ちちゃう場合も
•...
その他のトライアル
Quick Prototyping
• Electron アプリ作成のノウハウを生かして、短時間でプロトを作れる仕組みを作ってみた
Quick Prototyping 例:構成
sample
app
sample
app
GPIO
plugin
BLE
Peripheral
plugin
BLE
Central
plugin
Accelerometer
plugin
Quick Prototyping
• この程度の物をオーダーに応じて概ね3日程度で作ることを考えている
• 用途
• ユーザテスト用の実動アプリ
• 展示会等でのデモ用
• プロジェクト関係者間の意識合わせ
• などなど
• 構造:コードを弄...
まとめ
まとめ
• 多くのアプリで Electron 使っています!ありがとう!
• ハードウェア連携のアプリが多い
• Desktop App の開発案件では今や Electron が primary choice
• 製品化アプリのフレームワークを...
あとがき
その他、本書で登録するシステム名、製品名は、一般に各開発メーカーの登録商標あるいは商標です。
なお、本文中では、TM、®マークは表記していません。
本書に明示されていないすべての権利は、その所有者に帰属します。
Raspberry P...
Prochain SlideShare
Chargement dans…5
×

ソニーでElectronアプリをリリースしてみた

4 376 vues

Publié le

2017.11.6 Electron MeetUp in Tokyo

Publié dans : Ingénierie
  • Identifiez-vous pour voir les commentaires

ソニーでElectronアプリをリリースしてみた

  1. 1. ソニーで Electronアプリをリリースしてみた 2017/11/6 ソニーネットワークコミュニケーションズ株式会社 クラウド&アプリ事業部門 1部 2課 Seki Yasuharu
  2. 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. 3. 利用させて頂いています
  4. 4. ソニーグループ内での採用例 HUIS UI CREATOR Developer Tools Digital Paper App
  5. 5. 例1) HUIS UI CREATOR
  6. 6. HUIS @HUIS_JPhttp://huis.jp/
  7. 7. HUIS UI CREATOR @HUIS_JPhttp://huis.jp/remote-controller/ui-creator/
  8. 8. @HUIS_JP ユーザーの皆さまのHUISカスタム例 紹介もあります
  9. 9. HUIS UI CREATOR デバイス認識 ファイル転送 独自plugin node fs 両対応
  10. 10. 例2) Digital Paper App
  11. 11. Digital Paper http://www.sony.jp/digital-paper/
  12. 12. Digital Paper App ドキュメント管理が効率的におこなえる「Digital Paper App」 主な機能 【特長1】ワイヤレスでドキュメントを転送する 【特長2】デジタルペーパーに“印刷”する 【特長3】コンピューターとデジタルペーパーを同期する 【特長4】デジタルペーパーのドキュメントを整理 http://www.sony.jp/digital-paper/apl/dpa.html
  13. 13. Digital Paper App 経路制御 プロセス Node plugin による プロセス間通信 httpd データ転送 over TCP/IP 両対応
  14. 14. 例3) Future Lab Program
  15. 15. FUTURE LAB PROGRAM N http://www.futurelab.sony.net/N/
  16. 16. FUTURE LAB PROGRAM N ... のアプリ developer tool ユーザー アプリユーザー アプリユーザー アプリ 作成・管理・実行 機器上のJavaScript Engine シミュレーション
  17. 17. おまけ) 画像転送アプリ on Cordova
  18. 18. おまけ: 画像転送アプリ (Cordova) データ転送 Ver4.1 Low Energy
  19. 19. 採用理由
  20. 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. 21. その他の採用理由 • Windows / Mac 版の同時リリースがしやすい • 豊富な(社外)採用事例がある https://electron.atom.io/apps/ ...
  22. 22. その他の採用理由 • WebApp 部分は JavaScript Engineer に開発依頼できる • 今一番ポピュラーな言語は JavaScript !! By GitHub (https://octoverse.github.com/) • UI の実装が Native と比較して容易... というかイイトコドリできる • 画面UIには HTML+CSS が使える • Native の標準的なダイアログも使える
  23. 23. 良かった点・苦労した点
  24. 24. 良かった点:複数 Platform 対応 • リリースタイミング • ほぼ同タイミングで Windows / Mac のアプリがリリースできた • 開発工数 • Windows + Mac 対応 1 + 1 + 0.2 1 + 0.5 当社比 調整 2.2 1.5 3割減位
  25. 25. 苦労した点:Windows / Mac での UI の違い • UI テイストの統一 Windows / Mac で UI を同一にした ⇒ 事前にデザイナーと認識合わせをする必要があった • メニューの振る舞い・構成の違い • モーダルダイアログ表示時の振る舞い • Windows : メニュー操作できない • Mac: メニュー操作ができる • メニューの構成が Windows / Mac で異なる ⇒ メニューの実装および状態管理が複雑になった 多少のノウハウが必要になる部分
  26. 26. 良かった点:アプリベースの共通化 • Windows / Mac OS / Android / iOS で開発手法を統一できた • ⇒ Electron と Cordova の構造の違いは抑えておく必要はある • 弊チーム(CDP) ではアプリ開発の基礎となるスケルトンを用意して、そこから編集してア プリを作っている
  27. 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. 28. [Tips] 要注意な点:asar の中身も気をつけねば .asar ファイルは簡単にファイルの中身にアクセスできる • minify や uglify して安心してたら package.json の中に思わぬ情報が記録されてい たという例も... $ npm install –g asar $ asar extract app.asar output app.asarの中身を展開したい場合 コードネームとか組織名とか要注意
  29. 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. 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. 31. その他のトライアル
  32. 32. Quick Prototyping • Electron アプリ作成のノウハウを生かして、短時間でプロトを作れる仕組みを作ってみた
  33. 33. Quick Prototyping 例:構成 sample app sample app GPIO plugin BLE Peripheral plugin BLE Central plugin Accelerometer plugin
  34. 34. Quick Prototyping • この程度の物をオーダーに応じて概ね3日程度で作ることを考えている • 用途 • ユーザテスト用の実動アプリ • 展示会等でのデモ用 • プロジェクト関係者間の意識合わせ • などなど • 構造:コードを弄れる人向け • 反響が大きいようであればオープン化の可能性も • 興味がある人は cdp-info@jp.sony.com までコンタクトください! + + plugins + α
  35. 35. まとめ
  36. 36. まとめ • 多くのアプリで Electron 使っています!ありがとう! • ハードウェア連携のアプリが多い • Desktop App の開発案件では今や Electron が primary choice • 製品化アプリのフレームワークを OSS 化しました! • http://github.com/sony/cdp-js • お試しください • ☆ 押してください!! • クイックプロトサービスのデモをしました! • cdp-info@jp.sony.com へコンタクトお願いします! • オーダーしてみたい!という人 • 技術的な部分に興味がある方 • その他 ご清聴ありがとうございました
  37. 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.の登録商標です。

×