More Related Content
Similar to Chrome Apps & Chromeウェブストア概要 (20)
More from yoshikawa_t (12)
Chrome Apps & Chromeウェブストア概要
- 1. Chrome Apps &
Chrome ウェブストア概要
2014/10/18
Geek Girls
Toru Yoshikawa (@yoshikawa_̲t)
- 2. Who?
吉川 徹 / Toru Yoshikawa
@yoshikawa_̲t
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/
- 4. Chrome Apps とは?
Chrome Web Storeで配布、販売できるアプリケー
ションプラットフォーム
HTML5、CSS3、JavaScriptといったWeb技術でアプ
リを開発することができる
Chromeブラウザ上(ChromeOS)で動作するため、
HTML5をフルに利利⽤用できる
ネイティブデバイスにアクセスするための、独⾃自の拡
張APIなどを持つ
- 8. Chrome Apps の種類
Chrome Apps
Packaged Apps
ファイル⼀一式をChromeに保存して利利⽤用する⽅方式
Hosted Apps
通常通り公開しているWebアプリをそのままChrome Web
Storeで公開しているもの
Extensions
アプリではなく、ブラウザの機能⾃自体を拡張する⽬目的で作られるも
の
- 12. Chrome Apps の作成⽅方法
1.任意のフォルダを作成
2.マニフェストファイルを作成する
3.バックグランドで動作するJSファイルを作成する
4.ビューであるhtmlファイルを作成する
5.あとは普通のWebアプリと同様に作成(もちろん
拡張APIも利利⽤用できる)
https://developer.chrome.com/apps/first_app
- 13. manifest.json
アプリケーションの情報を記述するメタファイル
{
"name": "SpaceEnemy",
"description": "宇宙侵略者",
"version": "0.1",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "icon-16.png", "128": "icon-128.png" }
}
iconsは開発中はなくても大丈夫です。
- 17. 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
- 18. CSPへの準拠
Chrome Apps では、CSPに独⾃自に準拠した作りになっている
外部リソースの読込み禁⽌止
<script src="http://example.com/...">
インラインスクリプトの禁⽌止
<body onload="...">
⽂文字列列を評価して実⾏行行するJavaScriptの禁⽌止
eval()
Extensionsでは、上記の制限をある程度度カスタマイズすることができる
Appsでは、sandboxページやiframeを利利⽤用して回避する必要がある
- 20. Chrome Apps のマネタイズ
アプリ/拡張機能の販売(定期・不不定期購⼊入)
Chromeウェブストア決済/Google Checkout
無料料トライアル
1回払い
⽉月間登録料料
年年間登録料料
アプリ内課⾦金金(デジタルグッズなどの販売)
Chrome In-‐‑‒App Payments
広告の掲載
Googleの課⾦金金⽅方法を使う場合、Google ウォレット販売者アカウントを作成す
る必要がある。独⾃自の課⾦金金⽅方法を利利⽤用しても良良い。⼿手数料料は⼀一律律5%
- 23. Chrome ウェブストア
デベロッパーダッシュボード
デベロッパーダッシュボードでできること
アイテムの登録/編集/公開
アイテムのテストユーザーの登録など
週間利利⽤用ユーザー数などの統計情報の表⽰示
ユーザーからの評価やフィードバックの表⽰示と返信
アイテムを公開する場合、デベロッパー登録料料と
して初回のみ5ドルが必要
- 25. 次のステップ
Chrome本で :)
Chrome Apps の開発からChrome Web Storeで
の公開までを網羅羅
Chrome Developer Toolsの使い⽅方について解説
http://amzn.to/12eKqmt
困ったらChrome API Developers JP コミュニティへ
https://sites.google.com/site/chromeapijp/
- 29. Chrome Apps のAPI
独⾃自APIを利利⽤用する場合、マニフェストファイルにパーミッ
ションを追加する(不不要のものもある)
Apps
http://developer.chrome.com/apps/api_̲index.html
Extensions
http://developer.chrome.com/extensions/
api_̲index.html
- 30. Chrome Apps のAPI
ブラウザUI系
機能・説明アプリ拡張
chrome.browserAction ブラウザアクションの各種設定◯
chrome.contextMenus コンテキストメニューの各種設定◯ ◯
chrome.pageAction ページアクションの各種設定◯
chrome.omnibox オムニボックスの各種設定◯
chrome.notifications デスクトップ通知の各種設定◯ ◯
Option Page オプション設定用のページを追加◯
Override Pages ブックマーク、履歴ページの変更◯
chrome.tabs タブの操作◯
chrome.window ウィンドウの操作◯
chrome.app.window アプリウィンドウの操作◯
- 31. Chrome Apps のAPI
ブラウザ機能
機能・説明アプリ拡張
chrome.bookmarks ブックマークの操作◯
chrome.cookies クッキーの操作◯
chrome.history 履歴の操作◯
chrome.commands ショートカットキーの設定◯
chrome.pageCapture ページをMHTML形式で保存◯
chrome.storage データ保存・同期◯ ◯
chrome.fileSystem ファイルの読み書き◯
chrome.mediaCalleries メディアフィアルへのアクセス◯
- 32. 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のソケット通信◯
- 33. Chrome Apps のAPI
デバイスアクセス
機能・説明アプリ拡張
chrome.serial シリアル通信◯
chrome.usb USB通信◯
- 34. Chrome Apps のAPI
メタ情報・管理機能
機能・説明アプリ拡張
chrome.management アプリ・拡張機能の管理◯
chrome.permissions 必要な権限をあとから追加◯ ◯
chrome.brawsingData ブラウジングデータの取得◯
chrome.contentSettings サイトのJavaScriptやプラグインの設定◯
chrome.extension 拡張機能のユーティリティ◯
chrome.fontSettings フォント設定◯
- 35. Chrome Apps のAPI
入力
機能・説明アプリ拡張
chrome.tts 音声読み上げ◯ ◯
chrome.ttsEngine 音声合成エンジンを登録◯
- 36. Chrome Apps のAPI
ライフサイクル・その他
機能・説明アプリ拡張
chrome.idle マシンのアイドル状態を検知◯ ◯
chrome.runtime アプリ・拡張機能のライフサイクルイベントを検知◯ ◯
chrome.app.runtime アプリの起動・再起動を検知◯
chrome.i18n 多言語対応◯ ◯
chrome.alarms タスク実行(setTimeoutやsetIntervalの代わり◯ ◯
chrome.privacy プライバシー関連の設定を管理する◯
chrome.webstore 自サイトで直接アプリをインストール◯ ◯
chrome.devtools デベロッパーツールの拡張◯
- 37. モバイル対応
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)
- 39. Chrome Apps のデバッグ
デバッグツールの呼び出しアレコレ
アプリ・ウィンドウのデバッグ
バックラウンドページのデバッグ
Content Scriptsのデバッグ
chrome://inspect