Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

今日帰ってすぐに始められるChrome App #nds45

2.316 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

今日帰ってすぐに始められるChrome App #nds45

  1. 1. 2015年私が学んだ Chrome App ∼ 今日帰ってすぐに始められる Chrome App ∼ #nds45 @civic
  2. 2. 今日話す内容 • 今年私がChrome Appで学んだこと • Chrome Appをはじめよう • デモChrome Appの紹介
  3. 3. 今年私がChrome Appで学んだこと
  4. 4. Electron人気急上昇 • Atom, VSCodeなどElectron製アプリの人気 • HTML+JS+CSSで簡単にアプリが作れる • ブラウザ依存性キニシナイ • マルチプラットフォーム
  5. 5. ちょっと待って!
  6. 6. ブラウザ依存性なしだが? • Electron製アプリはブラウザ内蔵 • 特定バージョンのChromiumが内蔵 • ブラウザのアップデートの影響受けない • Chromiumバージョンは固定されてよいのか?
  7. 7. • Electron製アプリはブラウザ内蔵 • ブラウザって重い • 各アプリがみなChromeみたいな重さ? 重くないの? Electron App Chromium Node JS Electron App Chromium Node JS アプリA アプリB
  8. 8. そこでChrome Appを提案
  9. 9. 構造 • Chrome内プロセスの1つとして動作 • タブと似たプロセス • Chromeの上で動くのでChromeバージョンに従う Chrome Chrome App Chrome App Chrome App
  10. 10. Chrome Appの例
  11. 11. LINE
  12. 12. Chrome Dev Editor
  13. 13. そんなに流行ってない
  14. 14. でもポテンシャルはあると思う • Chromeの拡張機能的なもの • Chrome OS上のApp • 独立したWindow • オフライン対応 • Chrome APIを通じたネイティブ操作 • Cordova対応によるモバイルApp化
  15. 15. Electron製Appと比べた利点 • アプリ自体の配布が楽 • Chrome Web Storeからダウンロード • 安全性 • manifestで宣言された権限下で動作 • Chrome Web Storeでのソフトウェア・アップデート • Low level APIのマルチプラットフォーム性 • Chromeがやってくれる(という理想)
  16. 16. Electron製Appと比べた欠点 • ネイティブの自由度 • Chrome Platform APIでできないことは無理
 × OSファイルシステムへの無制限なIO
 × 特定プラットフォーム限定での作成 • Chromeバージョン依存 • 良くも悪くも • Chrome Web Storeを介さない野良配布 • 制限される方向
  17. 17. すべてにおいてElectronよりも 良いということではない 小規模ならばChrome Appの方が便利?
  18. 18. Chrome Appをはじめよう
  19. 19. Hello Worldの作成 • Chrome Dev Editorのインストール • これ自体がChrome App • New Project
  20. 20. manifest.json { "manifest_version": 2, "name": “Test", "version": "1.0", "app": { "background": { "scripts": ["background.js"] } } } エントリポイントとなるJS
  21. 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. 22. あとはHTML+JS+CSSの世界
  23. 23. テキストエディタで開発
  24. 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. 25. Chromeで開く • 拡張機能の読み込み • またはコマンドラインから google-chrome --load-and-launch-app=(作業フォルダ)
  26. 26. デモChrome Appの紹介
  27. 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. 28. Bluetooth Game Controller • Bluetoothデバイスとの通信 • Bluetoothを使った独自ゲームコントローラー
 Zeemote JS1H Chrome Chrome App Bluetooth https://github.com/civic/chrome-app-bluetooth-zeemote
  29. 29. 実はHTML5で「Gamepad API」 というのがある ただしZeemoteはGamepadではないようだ
  30. 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. 31. まとめ
  32. 32. 今日覚えたこと • Chrome Appは手軽に作成・配布できる • Chrome Dev ToolからNew Projectで完成 • 小規模AppならばElectronよりも楽ではないか? • Web Storeでの配布 • ブラウザの安全性 • ソフトウェアのオートアップデート
  33. 33. 今日帰ったらすぐに
 Chrome Appを作ろう

×