Download as PDF, PPTX
More Related Content
Chrome Apps 概要
- 1.
- 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.
- 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.
- 10. Chrome Apps の作成⽅方法 1.任意のフォルダを作成 2.マニフェストファイルを作成する 3.バックグランドで動作するJSファイルを作成する 4.ビューであるhtmlファイルを作成する 5.あとは普通のWebアプリと同様に作成（もちろん 拡張APIも利利⽤用できる） https://developer.chrome.com/apps/first_app
- 11.
- 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-‐‑‒ file/tip/csp-‐‑‒specification.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.
- 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.
- 29.
- 30.
- 31. Chrome Apps のデバッグ デバッグツールの呼び出しアレコレ アプリ・ウィンドウのデバッグ バックラウンドページのデバッグ Content Scriptsのデバッグ chrome://inspect
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.