Chrome Appを始めようという提案

1. 2015年私が学んだ Chrome App
∼ 今日帰ってすぐに始められる Chrome App ∼
#nds45 @civic

2. 今日話す内容
• 今年私がChrome Appで学んだこと
• Chrome Appをはじめよう
• デモChrome Appの紹介

3. 今年私がChrome Appで学んだこと

4. Electron人気急上昇
• Atom, VSCodeなどElectron製アプリの人気
• HTML+JS+CSSで簡単にアプリが作れる
• ブラウザ依存性キニシナイ
• マルチプラットフォーム

5. ちょっと待って！

6. ブラウザ依存性なしだが？
• Electron製アプリはブラウザ内蔵
• 特定バージョンのChromiumが内蔵
• ブラウザのアップデートの影響受けない
• Chromiumバージョンは固定されてよいのか？

7. • Electron製アプリはブラウザ内蔵
• ブラウザって重い
• 各アプリがみなChromeみたいな重さ？
重くないの？
Electron App
Chromium
Node JS
Electron App
Chromium
Node JS
アプリA アプリB

8. そこでChrome Appを提案

9. 構造
• Chrome内プロセスの1つとして動作
• タブと似たプロセス
• Chromeの上で動くのでChromeバージョンに従う
Chrome
Chrome App Chrome App Chrome App

10. Chrome Appの例

11. LINE

12. Chrome Dev Editor

13. そんなに流行ってない

14. でもポテンシャルはあると思う
• Chromeの拡張機能的なもの
• Chrome OS上のApp
• 独立したWindow
• オフライン対応
• Chrome APIを通じたネイティブ操作
• Cordova対応によるモバイルApp化

15. Electron製Appと比べた利点
• アプリ自体の配布が楽
• Chrome Web Storeからダウンロード
• 安全性
• manifestで宣言された権限下で動作
• Chrome Web Storeでのソフトウェア・アップデート
• Low level APIのマルチプラットフォーム性
• Chromeがやってくれる（という理想）

16. Electron製Appと比べた欠点
• ネイティブの自由度
• Chrome Platform APIでできないことは無理
× OSファイルシステムへの無制限なIO
× 特定プラットフォーム限定での作成
• Chromeバージョン依存
• 良くも悪くも
• Chrome Web Storeを介さない野良配布
• 制限される方向

17. すべてにおいてElectronよりも
良いということではない
小規模ならばChrome Appの方が便利？

18. Chrome Appをはじめよう

19. Hello Worldの作成
• Chrome Dev Editorのインストール
• これ自体がChrome App
• New Project

20. manifest.json
{
"manifest_version": 2,
"name": “Test",
"version": "1.0",
"app": {
"background": {
"scripts": ["background.js"]
}
}
}
エントリポイントとなるJS

21. 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起動時

22. あとはHTML+JS+CSSの世界

23. テキストエディタで開発

24. まっさらな状態から開発
• 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

25. Chromeで開く
• 拡張機能の読み込み
• またはコマンドラインから
google-chrome --load-and-launch-app=（作業フォルダ）

26. デモChrome Appの紹介

27. Chrome App HTTP Server
• ブラウザ上で動くアプリでありながらWebサーバー
• chrome.sockets.tcp
• chrome.sockets.tcpServer
Chrome
Chrome App
HTTP Server
Browser Tab
HTTP Request
https://github.com/civic/chrome-app-httpserver

28. Bluetooth Game Controller
• Bluetoothデバイスとの通信
• Bluetoothを使った独自ゲームコントローラー
Zeemote JS1H
Chrome
Chrome App Bluetooth
https://github.com/civic/chrome-app-bluetooth-zeemote

29. 実はHTML5で「Gamepad API」
というのがある
ただしZeemoteはGamepadではないようだ

30. そのほかのAPI
• chrome.sockets.udp
• chrome.usb
• chrome.serial
• chrome.commands
• chrome.contextMenus
• chrome.fileSystem
• chrome.gcm
• chrome.syncFileSystem
...
UDP通信
USB通信
シリアル通信
ショートカットキー
コンテキストメニュー
無制限ファイルシステム
Google Cloudメッセージ
Google Drive同期

31. まとめ

32. 今日覚えたこと
• Chrome Appは手軽に作成・配布できる
• Chrome Dev ToolからNew Projectで完成
• 小規模AppならばElectronよりも楽ではないか？
• Web Storeでの配布
• ブラウザの安全性
• ソフトウェアのオートアップデート

33. 今日帰ったらすぐに
Chrome Appを作ろう