WebアプリをElectronに乗せる

1. Webアプリを Electronに乗せる第9回 HTML5minutes！〜triton-js〜

2. @pirosikick 穴井宏幸リッチラボ株式会社エンジニア (ぴろしきっく)

3. 提供

4. • Yahoo! JAPANの子会社 • 社内ハッカソン（HackDay）から誕生 • スマフォのリッチ広告 • http://www.advertimes.com/20150420/ article189401/

5. 今日の話すこと

6. • Electronのざっとした概要 • easy-video-mapping.comのElectron版を開発中 • 躓いたとこと、その解決法など。

7. Electronのロゴ http://electron.atom.io/

8. • Github社製 • HTML・CSS・JSでデスクトップアプリが作れる • Atom、Slack、Kobitoとかで採用

9. 簡単なサンプル

10. Hello! World

11. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello! World</title> </head> <body> <h1>Hello! World</h1> </body> </html>

12. var app = require('app'); var BrowserWindow = require('browser-window'); // Report crashes to our server. require('crash-reporter').start(); var mainWindow = null; // ready: Windowを作る準備が出来た時に呼ばれる app.on('ready', function() { // 800x600のWindowを生成しindex.htmlをロード mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadUrl('file://' + __dirname + '/index.html'); // ウィンドウが閉じた時 mainWindow.on('closed', function() { mainWindow = null; }); }); // 全てのウィンドウが閉じた時 app.on('window-all-closed', function() { if (process.platform != 'darwin') app.quit(); }); main.js

13. package.json { "main": "main.js" }

14. Electronのバイナリをインストール // Global npm install electron-prebuilt -g // npm install electron-prebuilt --save-dev

15. 起動 // Macの場合 $ ./node_modules/electron-prebuilt/dist/ Electron.app/Contents/MacOS/Electron .

16. • メインプロセス（main.js）で BrowserWindowを作る • BrowserWindowはブラウザなのでHTML/JS/ CSSが動く • ブラウザ側でNode.jsが動く

17. ブラウザ側で Node.jsのパッケージをrequireして実行できる

18. http://easy-video-mapping.com/

19. • WebGLでプロジェクションマッピング • 画像・動画等を変形させてマッピングする

20. サーバサイド無しだし、ソースをコピーすればそのまま動きそう！

21. jQueryがundefined

22. ElectronでjQueryがundefinedになる

23. • ブラウザにmodule.exportsが存在する • jQueryがCommonJS経由でロードされたと勘違い

24. requireでロードして自分でwindow.jQuery, window.$を定義する  <script> window.jQuery = window.$ = require('./lib/jquery'); </script> ※browserifyやwebpackでbundleする方が楽かも

25. skywayが動かない

26. http://nttcom.github.io/skyway/

27. • WebRTCのP2Pで動画取得 • WebGLのテクスチャとして利用する

28. • Electronから skaywayに  接続できない。。。

29. Electronでskayway.ioを使う

30. • XHR・WebSocketのOriginヘッダーが  「file://」になりskywayに弾かれる • node.jsからOriginヘッダーを書き換えリクエスト • skyway-peerjs-electron

31. デモ（時間があれば）

32. まとめ・その他

33. • サーバサイドが無ければElectronに乗せるのは楽 • XHRのOriginが「file://」になるので注意 • Node.jsのコードが動くので割りとなんでもできる

34. • 配布までにはまだまだ作業が必要 • Cmd+Cでコピーや、  を押下時にフルスクリーンなど、  自分で実装する必要がある

35. 提供

36. Thanks:)

WebアプリをElectronに乗せる

Hiroyuki Anai

Transcript