Download as PDF, PPTX
![[CB16] Electron - Build cross platform desktop XSS, it’s easier than you thin...](https://cdn.slidesharecdn.com/ss_thumbnails/cb16hasegawaja-161109050840-thumbnail.jpg?width=640&height=640&fit=bounds)
WebアプリをElectronに乗せる
- 1.
- 2.
- 3.
- 4. • Yahoo! JAPANの子会社 •社内ハッカソン（HackDay）から誕生 • スマフォのリッチ広告 • http://www.advertimes.com/20150420/ article189401/
- 5.
- 6. • Electronのざっとした概要 • easy-video-mapping.comのElectron版を 開発中 •躓いたとこと、その解決法など。
- 7.
- 8. • Github社製 • HTML・CSS・JSでデスクトップアプリが 作れる •Atom、Slack、Kobitoとかで採用
- 10.
- 11.
- 12. index.html <!DOCTYPE html> <html lang="en"> <head> <metacharset="UTF-8"> <title>Hello! World</title> </head> <body> <h1>Hello! World</h1> </body> </html>
- 13. 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
- 14.
- 15. Electronのバイナリをインストール // Global npm installelectron-prebuilt -g // npm install electron-prebuilt --save-dev
- 16.
- 17.
- 18.
- 19.
- 20.
- 22.
- 24.
- 25.
- 26.
- 27. requireでロードして 自分でwindow.jQuery, window.$を定義する <!-- <scriptsrc="lib/jquery.js"></script> --> <script> window.jQuery = window.$ = require('./lib/jquery'); </script> ※browserifyやwebpackでbundleする方が楽かも
- 28.
- 29.
- 31.
- 32.
- 33.
- 34. • XHR・WebSocketのOriginヘッダーが 「file://」になりskywayに弾かれる • node.jsからOriginヘッダーを書き換え リクエスト •skyway-peerjs-electron
- 35.
- 36.
- 37. • サーバサイドが無ければElectronに乗せ るのは楽 • XHRのOriginが「file://」になるので注 意 •Node.jsのコードが動くので割りとなん でもできる
- 38.
- 39.
- 40.