Webアプリを Electronに乗せる 第9回 HTML5minutes！ 〜triton-js〜
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Webアプリを Electronに乗せる
第9回 HTML5minutes！ 〜triton-js〜
@pirosikick
穴井 宏幸 リッチラボ株式会社 エンジニア
(ぴろしきっく)
提供
• Yahoo! JAPANの子会社
• 社内ハッカソン（HackDay）から誕生
• スマフォのリッチ広告
• http://www.advertimes.com/20150420/article189401/
今日の話すこと
• Electronのざっとした概要
• easy-video-mapping.comのElectron版を開発中
• 躓いたとこと、その解決法など。
Electronのロゴ
http://electron.atom.io/
• Github社製
• HTML・CSS・JSでデスクトップアプリが作れる
• Atom、Slack、Kobitoとかで採用
簡単なサンプル
Hello! World
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello! World</title> </head> <body> <h1>Hello! World</h1> </body> </html>
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
package.json
{ "main": "main.js" }
Electronのバイナリをインストール
// Global npm install electron-prebuilt -g
// npm install electron-prebuilt --save-dev
起動
// Macの場合 $ ./node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron .
• メインプロセス（main.js）でBrowserWindowを作る
• BrowserWindowはブラウザなのでHTML/JS/CSSが動く
• ブラウザ側でNode.jsが動く
ブラウザ側で Node.jsのパッケージをrequireして実行できる
http://easy-video-mapping.com/
• WebGLでプロジェクションマッピング
• 画像・動画等を変形させてマッピングする
サーバサイド無しだし、ソースをコピーすれば そのまま動きそう！
jQueryがundefined
• ブラウザにmodule.exportsが存在する
• jQueryがCommonJS経由でロードされたと勘違い
requireでロードして 自分でwindow.jQuery, window.$を定義する
<!-- <script src="lib/jquery.js"></script> --> <script> window.jQuery = window.$ = require('./lib/jquery'); </script>
※browserifyやwebpackでbundleする方が楽かも
skywayが動かない
http://nttcom.github.io/skyway/
• WebRTCのP2Pで動画取得
• WebGLのテクスチャとして利用する
• Electronからskaywayに接続できない。。。
• XHR・WebSocketのOriginヘッダーが「file://」になりskywayに弾かれる
• node.jsからOriginヘッダーを書き換えリクエスト
• skyway-peerjs-electron
デモ（時間があれば）
まとめ・その他
• サーバサイドが無ければElectronに乗せるのは楽
• XHRのOriginが「file://」になるので注意
• Node.jsのコードが動くので割りとなんでもできる
• 配布までにはまだまだ作業が必要
• Cmd+Cでコピーや、 を押下時にフルスクリーンなど、自分で実装する必要がある
提供
Thanks:)
Related Documents
