Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie ソニーでElectronアプリをリリースしてみた
Ähnlich wie ソニーでElectronアプリをリリースしてみた (20)
ソニーでElectronアプリをリリースしてみた
- 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
- 10. 例2) Digital Paper App
- 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 アプリ作成のノウハウを生かして、短時間でプロトを作れる仕組みを作ってみた
- 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.の登録商標です。