Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to WebアプリをElectronに乗せる
Similar to WebアプリをElectronに乗せる (20)
Recently uploaded
Recently uploaded (7)
WebアプリをElectronに乗せる
- 3. 提供
- 4. • Yahoo! JAPANの子会社 • 社内ハッカソン（HackDay）から誕生 • スマフォのリッチ広告 • http://www.advertimes.com/20150420/ article189401/
- 5. 今日の話すこと
- 6. • Electronのざっとした概要 • easy-video-mapping.comのElectron版を 開発中 • 躓いたとこと、その解決法など。
- 8. • Github社製 • HTML・CSS・JSでデスクトップアプリが 作れる • Atom、Slack、Kobitoとかで採用
- 10. 簡単なサンプル
- 11. Hello! World
- 12. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="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
- 15. Electronのバイナリをインストール // Global npm install electron-prebuilt -g // npm install electron-prebuilt --save-dev
- 17. • メインプロセス（main.js）で BrowserWindowを作る • BrowserWindowはブラウザなのでHTML/JS/ CSSが動く • ブラウザ側でNode.jsが動く
- 24. jQueryがundefined
- 27. requireでロードして 自分でwindow.jQuery, window.$を定義する <!-- <script src="lib/jquery.js"></script> --> <script> window.jQuery = window.$ = require('./lib/jquery'); </script> ※browserifyやwebpackでbundleする方が楽かも
- 28. skywayが動かない
- 34. • XHR・WebSocketのOriginヘッダーが 「file://」になりskywayに弾かれる • node.jsからOriginヘッダーを書き換え リクエスト • skyway-peerjs-electron
- 35. デモ（時間があれば）
- 36. まとめ・その他
- 37. • サーバサイドが無ければElectronに乗せ るのは楽 • XHRのOriginが「file://」になるので注 意 • Node.jsのコードが動くので割りとなん でもできる
- 39. 提供
- 40. Thanks:)