今日帰ってすぐに始められるchrome app #nds45
TRANSCRIPT
2015年私が学んだ Chrome App～ 今日帰ってすぐに始められる Chrome App ～
#nds45 @civic
今日話す内容• 今年私がChrome Appで学んだこと
• Chrome Appをはじめよう
• デモChrome Appの紹介
今年私がChrome Appで学んだこと
Electron人気急上昇
• Atom, VSCodeなどElectron製アプリの人気
• HTML+JS+CSSで簡単にアプリが作れる
• ブラウザ依存性キニシナイ • マルチプラットフォーム
ちょっと待って！
ブラウザ依存性なしだが？• Electron製アプリはブラウザ内蔵
• 特定バージョンのChromiumが内蔵
• ブラウザのアップデートの影響受けない • Chromiumバージョンは固定されてよいのか？
• Electron製アプリはブラウザ内蔵
• ブラウザって重い • 各アプリがみなChromeみたいな重さ？
重くないの？
Electron App
Chromium
Node JS
Electron App
Chromium
Node JS
アプリA アプリB
そこでChrome Appを提案
構造• Chrome内プロセスの1つとして動作
• タブと似たプロセス • Chromeの上で動くのでChromeバージョンに従う
Chrome
Chrome App Chrome App Chrome App
Chrome Appの例
LINE
Chrome Dev Editor
そんなに流行ってない
でもポテンシャルはあると思う• Chromeの拡張機能的なもの
• Chrome OS上のApp
• 独立したWindow
• オフライン対応 • Chrome APIを通じたネイティブ操作
• Cordova対応によるモバイルApp化
Electron製Appと比べた利点
• アプリ自体の配布が楽 • Chrome Web Storeからダウンロード
• 安全性 • manifestで宣言された権限下で動作
• Chrome Web Storeでのソフトウェア・アップデート
• Low level APIのマルチプラットフォーム性
• Chromeがやってくれる（という理想）
Electron製Appと比べた欠点
• ネイティブの自由度 • Chrome Platform APIでできないことは無理
× OSファイルシステムへの無制限なIO
× 特定プラットフォーム限定での作成
• Chromeバージョン依存
• 良くも悪くも • Chrome Web Storeを介さない野良配布
• 制限される方向
すべてにおいてElectronよりも 良いということではない
小規模ならばChrome Appの方が便利？
Chrome Appをはじめよう
Hello Worldの作成
• Chrome Dev Editorのインストール
• これ自体がChrome App
• New Project
manifest.json
{ "manifest_version": 2, "name": “Test", "version": "1.0", "app": { "background": { "scripts": ["background.js"] } } }
エントリポイントとなるJS
background.js
chrome.app.runtime.onLaunched.addListener(
function(launchData) { chrome.app.window.create('index.html', { id: 'mainWindow', bounds: {width: 800, height: 600} }); }
);
HTMLを指定してWindow表示
App起動時
あとはHTML+JS+CSSの世界
テキストエディタで開発
まっさらな状態から開発• IDEに頼らずエディタで
• npm + webpackを使ってみる
• 参考：むずかしくないJavaScriptのやさしい話
http://www.civic-apps.com/2015/11/15/ndsmeetup8/ • 手順
npm init npm install jquery --save manifest.json background.js, index.html, index.js webpack index.js bundle.js
Chromeで開く
• 拡張機能の読み込み • またはコマンドラインから
google-chrome --load-and-launch-app=（作業フォルダ）
デモChrome Appの紹介
Chrome App HTTP Server
• ブラウザ上で動くアプリでありながらWebサーバー
• chrome.sockets.tcp • chrome.sockets.tcpServer
Chrome
Chrome App HTTP ServerBrowser Tab
HTTP Request
https://github.com/civic/chrome-app-httpserver
Bluetooth Game Controller
• Bluetoothデバイスとの通信
• Bluetoothを使った独自ゲームコントローラー
Zeemote JS1H
Chrome
Chrome App Bluetooth
https://github.com/civic/chrome-app-bluetooth-zeemote
実はHTML5で「Gamepad API」 というのがある
ただしZeemoteはGamepadではないようだ
そのほかのAPI
• chrome.sockets.udp • chrome.usb • chrome.serial • chrome.commands • chrome.contextMenus • chrome.fileSystem • chrome.gcm • chrome.syncFileSystem
...
UDP通信
USB通信 シリアル通信 ショートカットキー コンテキストメニュー 無制限ファイルシステム Google Cloudメッセージ
Google Drive同期
まとめ
今日覚えたこと• Chrome Appは手軽に作成・配布できる
• Chrome Dev ToolからNew Projectで完成
• 小規模AppならばElectronよりも楽ではないか？
• Web Storeでの配布
• ブラウザの安全性 • ソフトウェアのオートアップデート
今日帰ったらすぐにChrome Appを作ろう