Chrome Apps 概要

7,078 views

Published on

4/9に開催されたhtml5j Webプラットフォーム部 第1回の説明資料です。

Published in: Technology
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,078
On SlideShare
0
From Embeds
0
Number of Embeds
1,985
Actions
Shares
0
Downloads
31
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

Chrome Apps 概要

  1. 1.        Chrome  Apps  概要 2014/4/9   html5j  Webプラットフォーム部  第1回   Toru  Yoshikawa  (@yoshikawa_̲t)
  2. 2. Who? html5j/HTML5とか勉強会スタッフ/ビ ギナー部  (副部⻑⾧長)   Google  Developer  Experts  (Chrome)   HTML5  Experts.jp  エキスパートNo.3   Web先端技術味⾒見見部  (顧問)/⽇日本jQuery   Mobileユーザー会  (管理理⼈人)/Sublime   Text  2  Japan  Users  Group  (管理理⼈人)など など   Blog:  http://d.hatena.ne.jp/pikotea/ 吉川  徹  /  Toru  Yoshikawa   @yoshikawa_̲t
  3. 3. Agenda Chrome  Apps  の概要   Chrome  Apps  の作り⽅方   どんなことができるのか?
 Chrome  Apps  のAPI   Chrome  Apps  のマネタイズ   モバイル対応   Appendix   Chrome  Apps  のデバッグ
  4. 4. Chrome  Apps  の概要
  5. 5. Chrome  Apps  とは? Chrome  Web  Storeで配布、販売できるアプリケー ションプラットフォーム   HTML5、CSS3、JavaScriptといったWeb技術でアプ リを開発することができる   Chromeブラウザ上(ChromeOS)で動作するため、 HTML5をフルに利利⽤用できる   ネイティブデバイスにアクセスするための、独⾃自の拡 張APIなどを持つ
  6. 6. Chrome  Apps  の種類 Chrome  Apps   Packaged  Apps   ファイル⼀一式をChromeに保存して利利⽤用する⽅方式Hosted   Apps   通常通り公開しているWebアプリをそのままChrome  Web   Storeで公開しているもの   Extensions   アプリではなく、ブラウザの機能⾃自体を拡張する⽬目的で作られる もの
  7. 7. Packaged  Apps アプリランチャーから直接起 動可能   Chromeが⽴立立ち上がるのでは なく専⽤用のUIを持ったアプリ   豊富な拡張APIを持つ   USB,  Bluetooth,  Serial
  8. 8. Extensions ブラウザのUIに追加する   ブラウザアクション   ページアクション   オムニボックス   右クリックメニュー   閲覧しているページでJavaScriptを実⾏行行する(Content  Scripts)   例例えば、ページに特定のボタンを追加したり、逆にページの 内容を削除することもできる
  9. 9. Chrome  Apps  の作り⽅方
  10. 10. Chrome  Apps  の作成⽅方法 1.任意のフォルダを作成   2.マニフェストファイルを作成する   3.バックグランドで動作するJSファイルを作成する   4.ビューであるhtmlファイルを作成する   5.あとは普通のWebアプリと同様に作成(もちろん 拡張APIも利利⽤用できる) https://developer.chrome.com/apps/first_app
  11. 11. 実際に作ってみる ハンズオン資料料
 (  http://bit.ly/chromeapps20131224  )
  12. 12. Chrome  Apps/Extensions  の アーキテクチャ バックグラウンドプロセスを1つ持つ   すべてのウィンドウ、その他のビュー(ページ)はバッ クグラウンドプロセスとメッセージのやりとりを⾏行行う
  13. 13. CSP  (Content  Security  Policy) CSPは、W3Cで策定されているセキュリティの追加レイ ヤー   本来のCSPでは、HTTPのレスポンスヘッダに"Content-‐‑‒ Security-‐‑‒Policy"で指定する   例例えば、外部スクリプトの読込みを禁⽌止したり、インライ ンスクリプト、evalを禁⽌止したりすることができる   https://dvcs.w3.org/hg/content-‐‑‒security-‐‑‒policy/raw-‐‑‒ file/tip/csp-‐‑‒specification.dev.html
  14. 14. CSPへの準拠 Chrome  Apps  では、CSPに独⾃自に準拠した作りになっている   外部リソースの読込み禁⽌止   <script  src="http://example.com/...">   インラインスクリプトの禁⽌止   <body  onload="...">   ⽂文字列列を評価して実⾏行行するJavaScriptの禁⽌止   eval()   Extensionsでは、上記の制限をある程度度カスタマイズすることができる   Appsでは、sandboxページやiframeを利利⽤用して回避する必要がある
  15. 15. その他の制限事項 localStorageは、chrome.storageを利利⽤用する   chrome.storageは⾮非同期API   Googleの同期機能で他のChromeとデータを同期できる   setIntervalやsetTimeoutは、chrome.alarmsを利利⽤用する   バックグラウンドプロセスがシャットダウンされる可能性 があるため、setTimeoutなどは利利⽤用できない   (バックグラウンドをpersistent:trueにすれば利利⽤用可能)
  16. 16. どんなことができるのか?   Chrome  Apps  のAPI
  17. 17. Chrome  Apps  のAPI 独⾃自APIを利利⽤用する場合、マニフェストファイルにパーミッ ションを追加する(不不要のものもある)   Apps   http://developer.chrome.com/apps/api_̲index.html   Extensions   http://developer.chrome.com/extensions/ api_̲index.html
  18. 18. Chrome  Apps  のAPI 機能・ 説明 アプリ 拡張 chrome.browserAction ブラウザアクションの各種設定 ⃝ chrome.contextMenus コンテキストメニューの各種設定 ⃝ ⃝ chrome.pageAction ページアクションの各種設定 ⃝ chrome.omnibox オムニボックスの各種設定 ⃝ chrome.notifications デスクトップ通知の各種設定 ⃝ ⃝ Option Page オプション設定用のページを追加 ⃝ Override Pages ブックマーク、履歴ページの変更 ⃝ chrome.tabs タブの操作 ⃝ chrome.window ウィンドウの操作 ⃝ chrome.app.window アプリウィンドウの操作 ⃝ ブラウザUI系
  19. 19. Chrome  Apps  のAPI 機能・ 説明 アプリ 拡張 chrome.bookmarks ブックマークの操作 ⃝ chrome.cookies クッキーの操作 ⃝ chrome.history 履歴の操作 ⃝ chrome.commands ショートカットキーの設定 ⃝ chrome.pageCapture ページをMHTML形式で保存 ⃝ chrome.storage データ保存・同期 ⃝ ⃝ chrome.fileSystem ファイルの読み書き ⃝ chrome.mediaCalleries メディアフィアルへのアクセス ⃝ ブラウザ機能
  20. 20. Chrome  Apps  のAPI 機能・ 説明 アプリ 拡張 Message Passing バックグラウンドページ等とメッセージ交換 ⃝ ⃝ CORS XHR 別ドメインへのXMLHttpRequest ⃝ ⃝ chrome.declarativeWebRequest リクエストの制御を行う ⃝ ⃝ chrome.proxy Chromeのプロキシ設定 ⃝ ⃝ chrome.webNavigation ページの各種ナビゲーションイベントを補足 ⃝ ⃝ chrome.webRequest リクエストへ割り込み制御を行う ⃝ ⃝ chrome.pushMessaging Google Cloud Messagingでプッシュ通信 ⃝ ⃝ chrome.socket TCP・UDPのソケット通信 ⃝ ネットワーク・メッセージ系
  21. 21. Chrome  Apps  のAPI 機能・ 説明 アプリ 拡張 chrome.serial シリアル通信 ⃝ chrome.usb USB通信 ⃝ デバイスアクセス
  22. 22. Chrome  Apps  のAPI 機能・ 説明 アプリ 拡張 chrome.management アプリ・拡張機能の管理 ⃝ chrome.permissions 必要な権限をあとから追加 ⃝ ⃝ chrome.brawsingData ブラウジングデータの取得 ⃝ chrome.contentSettings サイトのJavaScriptやプラグインの設定 ⃝ chrome.extension 拡張機能のユーティリティ ⃝ chrome.fontSettings フォント設定 ⃝ メタ情報・管理機能
  23. 23. Chrome  Apps  のAPI 機能・ 説明 アプリ 拡張 chrome.tts 音声読み上げ ⃝ ⃝ chrome.ttsEngine 音声合成エンジンを登録 ⃝ 入力
  24. 24. Chrome  Apps  のAPI 機能・ 説明 アプリ 拡張 chrome.idle マシンのアイドル状態を検知 ⃝ ⃝ chrome.runtime アプリ・拡張機能のライフサイクルイベントを検知 ⃝ ⃝ chrome.app.runtime アプリの起動・再起動を検知 ⃝ chrome.i18n 多言語対応 ⃝ ⃝ chrome.alarms タスク実行(setTimeoutやsetIntervalの代わり ⃝ ⃝ chrome.privacy プライバシー関連の設定を管理する ⃝ chrome.webstore 自サイトで直接アプリをインストール ⃝ ⃝ chrome.devtools デベロッパーツールの拡張 ⃝ ライフサイクル・その他
  25. 25. Chrome  Apps  のマネタイズ アプリ内課⾦金金(デジタルグッズなどの販売)   Chrome  In-‐‑‒App  Payments   独⾃自の課⾦金金⽅方法を利利⽤用しても良良い   アプリ/拡張機能の販売(定期・不不定期購⼊入)   Chromeウェブストア決済/Google  Checkout   無料料トライアル   1回払い   ⽉月間登録料料   年年間登録料料   広告の掲載
  26. 26. モバイル対応 Apache  Cordovaを使ったChrome  Appsのモバイルアプリへの 変換   Cordovaのプラグイン群として提供されている   現在はデベロッパープレビュー版で、まだ対応APIは限られてい る   https://github.com/MobileChromeApps/mobile-‐‑‒chrome-‐‑‒ apps/blob/master/README.md   天使やカイザーと呼ばれて  »  Chrome  Apps  for  mobileの開発 ⽅方法  (http://bit.ly/1jtaGR4)
  27. 27. 次のステップ Chrome本で  :)   Chrome  Apps  の開発からChrome  Web  Storeで の公開までを網羅羅   Chrome  Developer  Toolsの使い⽅方について解説   http://amzn.to/12eKqmt   困ったらChrome  API  Developers  JP  コミュニティへ   https://sites.google.com/site/chromeapijp/
  28. 28. Thank  you!! (@yoshikawa_̲t)
  29. 29. Appendix
  30. 30. Chrome  Apps  のデバッグ
  31. 31. Chrome  Apps  のデバッグ デバッグツールの呼び出しアレコレ   アプリ・ウィンドウのデバッグ   バックラウンドページのデバッグ   Content  Scriptsのデバッグ   chrome://inspect
  32. 32. アプリ・ウィンドウのデバッグ アプリ・ウィンドウで右クリックメニューの「要 素の検証」「バックグラウンドページの検証」
  33. 33. Consoleでエラーを確認しよう 「要素の検証」「バックグラウンドページの検 証」それぞれでConsoleパネルを表⽰示
  34. 34. バックグラウンドページのデバッグ (主に拡張機能など) ビューを調査でアクティブなファイルがリンクで 表⽰示されるので対象ページをクリック chrome://extensions
  35. 35. Content  Scriptのデバッグ (拡張機能) 対象ページでデベロッパーツールを開いて「Sources」 パネル、ファイルツリーの「Content  Scripts」タブ
  36. 36. Content  ScriptのConsole操作 (拡張機能) コンソールの下側のセレクトメニューで該当の拡 張機能を選択
  37. 37. chrome://inspect デバッグ可能なページをすべて表⽰示!(リモート デバッグもこちらから)
  38. 38. Resources https://developer.chrome.com/   https://developer.chrome.com/apps/about_̲apps   https://github.com/MobileChromeApps/mobile-‐‑‒ chrome-‐‑‒apps/

×