Chrome Apps 概要

1. Chrome Apps 概要 2014/4/9 html5j Webプラットフォーム部第1回 Toru Yoshikawa (@yoshikawa_̲t)

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. Agenda Chrome Apps の概要 Chrome Apps の作り⽅方どんなことができるのか？  Chrome Apps のAPI Chrome Apps のマネタイズモバイル対応 Appendix Chrome Apps のデバッグ

4. Chrome Apps の概要

5. Chrome Apps とは？ Chrome Web Storeで配布、販売できるアプリケーションプラットフォーム HTML5、CSS3、JavaScriptといったWeb技術でアプリを開発することができる Chromeブラウザ上（ChromeOS）で動作するため、 HTML5をフルに利利⽤用できるネイティブデバイスにアクセスするための、独⾃自の拡張APIなどを持つ

6. Chrome Apps の種類 Chrome Apps Packaged Apps ファイル⼀一式をChromeに保存して利利⽤用する⽅方式Hosted Apps 通常通り公開しているWebアプリをそのままChrome Web Storeで公開しているもの Extensions アプリではなく、ブラウザの機能⾃自体を拡張する⽬目的で作られるもの

7. Packaged Apps アプリランチャーから直接起動可能 Chromeが⽴立立ち上がるのではなく専⽤用のUIを持ったアプリ豊富な拡張APIを持つ USB, Bluetooth, Serial

8. Extensions ブラウザのUIに追加するブラウザアクションページアクションオムニボックス右クリックメニュー閲覧しているページでJavaScriptを実⾏行行する（Content Scripts）例例えば、ページに特定のボタンを追加したり、逆にページの内容を削除することもできる

9. Chrome Apps の作り⽅方

10. Chrome Apps の作成⽅方法 1.任意のフォルダを作成 2.マニフェストファイルを作成する 3.バックグランドで動作するJSファイルを作成する 4.ビューであるhtmlファイルを作成する 5.あとは普通のWebアプリと同様に作成（もちろん拡張APIも利利⽤用できる） https://developer.chrome.com/apps/first_app

11. 実際に作ってみるハンズオン資料料  ( http://bit.ly/chromeapps20131224 )

12. Chrome Apps／Extensions のアーキテクチャバックグラウンドプロセスを1つ持つすべてのウィンドウ、その他のビュー（ページ）はバックグラウンドプロセスとメッセージのやりとりを⾏行行う

13. CSP (Content Security Policy) CSPは、W3Cで策定されているセキュリティの追加レイヤー本来のCSPでは、HTTPのレスポンスヘッダに"Content-‐‑‒ Security-‐‑‒Policy"で指定する例例えば、外部スクリプトの読込みを禁⽌止したり、インラインスクリプト、evalを禁⽌止したりすることができる https://dvcs.w3.org/hg/content-‐‑‒security-‐‑‒policy/raw-‐‑‒ ﬁle/tip/csp-‐‑‒speciﬁcation.dev.html

14. CSPへの準拠 Chrome Apps では、CSPに独⾃自に準拠した作りになっている外部リソースの読込み禁⽌止 <script src="http://example.com/..."> インラインスクリプトの禁⽌止 <body onload="..."> ⽂文字列列を評価して実⾏行行するJavaScriptの禁⽌止 eval() Extensionsでは、上記の制限をある程度度カスタマイズすることができる Appsでは、sandboxページやiframeを利利⽤用して回避する必要がある

15. その他の制限事項 localStorageは、chrome.storageを利利⽤用する chrome.storageは⾮非同期API Googleの同期機能で他のChromeとデータを同期できる setIntervalやsetTimeoutは、chrome.alarmsを利利⽤用するバックグラウンドプロセスがシャットダウンされる可能性があるため、setTimeoutなどは利利⽤用できない（バックグラウンドをpersistent:trueにすれば利利⽤用可能）

16. どんなことができるのか？ Chrome Apps のAPI

17. Chrome Apps のAPI 独⾃自APIを利利⽤用する場合、マニフェストファイルにパーミッションを追加する（不不要のものもある） Apps http://developer.chrome.com/apps/api_̲index.html Extensions http://developer.chrome.com/extensions/ api_̲index.html

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. Chrome Apps のAPI 機能・説明アプリ拡張 chrome.bookmarks ブックマークの操作 ⃝ chrome.cookies クッキーの操作 ⃝ chrome.history 履歴の操作 ⃝ chrome.commands ショートカットキーの設定 ⃝ chrome.pageCapture ページをMHTML形式で保存 ⃝ chrome.storage データ保存・同期 ⃝ ⃝ chrome.fileSystem ファイルの読み書き ⃝ chrome.mediaCalleries メディアフィアルへのアクセス ⃝ ブラウザ機能

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. Chrome Apps のAPI 機能・説明アプリ拡張 chrome.serial シリアル通信 ⃝ chrome.usb USB通信 ⃝ デバイスアクセス

22. Chrome Apps のAPI 機能・説明アプリ拡張 chrome.management アプリ・拡張機能の管理 ⃝ chrome.permissions 必要な権限をあとから追加 ⃝ ⃝ chrome.brawsingData ブラウジングデータの取得 ⃝ chrome.contentSettings サイトのJavaScriptやプラグインの設定 ⃝ chrome.extension 拡張機能のユーティリティ ⃝ chrome.fontSettings フォント設定 ⃝ メタ情報・管理機能

23. Chrome Apps のAPI 機能・説明アプリ拡張 chrome.tts 音声読み上げ ⃝ ⃝ chrome.ttsEngine 音声合成エンジンを登録 ⃝ 入力

24. Chrome Apps のAPI 機能・説明アプリ拡張 chrome.idle マシンのアイドル状態を検知 ⃝ ⃝ chrome.runtime アプリ・拡張機能のライフサイクルイベントを検知 ⃝ ⃝ chrome.app.runtime アプリの起動・再起動を検知 ⃝ chrome.i18n 多言語対応 ⃝ ⃝ chrome.alarms タスク実行（setTimeoutやsetIntervalの代わり ⃝ ⃝ chrome.privacy プライバシー関連の設定を管理する ⃝ chrome.webstore 自サイトで直接アプリをインストール ⃝ ⃝ chrome.devtools デベロッパーツールの拡張 ⃝ ライフサイクル・その他

25. Chrome Apps のマネタイズアプリ内課⾦金金（デジタルグッズなどの販売） Chrome In-‐‑‒App Payments 独⾃自の課⾦金金⽅方法を利利⽤用しても良良いアプリ／拡張機能の販売（定期・不不定期購⼊入） Chromeウェブストア決済／Google Checkout 無料料トライアル 1回払い⽉月間登録料料年年間登録料料広告の掲載

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. 次のステップ Chrome本で :) Chrome Apps の開発からChrome Web Storeでの公開までを網羅羅 Chrome Developer Toolsの使い⽅方について解説 http://amzn.to/12eKqmt 困ったらChrome API Developers JP コミュニティへ https://sites.google.com/site/chromeapijp/

28. Thank you!! (@yoshikawa_̲t)

29. Appendix

30. Chrome Apps のデバッグ

31. Chrome Apps のデバッグデバッグツールの呼び出しアレコレアプリ・ウィンドウのデバッグバックラウンドページのデバッグ Content Scriptsのデバッグ chrome://inspect

32. アプリ・ウィンドウのデバッグアプリ・ウィンドウで右クリックメニューの「要素の検証」「バックグラウンドページの検証」

33. Consoleでエラーを確認しよう「要素の検証」「バックグラウンドページの検証」それぞれでConsoleパネルを表⽰示

34. バックグラウンドページのデバッグ（主に拡張機能など）ビューを調査でアクティブなファイルがリンクで表⽰示されるので対象ページをクリック chrome://extensions

35. Content Scriptのデバッグ（拡張機能）対象ページでデベロッパーツールを開いて「Sources」パネル、ファイルツリーの「Content Scripts」タブ

36. Content ScriptのConsole操作（拡張機能）コンソールの下側のセレクトメニューで該当の拡張機能を選択

37. chrome://inspect デバッグ可能なページをすべて表⽰示！（リモートデバッグもこちらから）

38. Resources https://developer.chrome.com/ https://developer.chrome.com/apps/about_̲apps https://github.com/MobileChromeApps/mobile-‐‑‒ chrome-‐‑‒apps/

Chrome Apps 概要

You are reading a preview.

Check these out next

Chrome Apps 概要

More Related Content

Slideshows for you (20)

Viewers also liked (6)

Similar to Chrome Apps 概要 (20)

More from yoshikawa_t (18)

Recently uploaded (20)

Chrome Apps 概要