Submit Search
Upload
Chrome Apps & Chromeウェブストア概要
•
6 likes
•
3,313 views
yoshikawa_t
Follow
10/18(土)のGeekGirlsでの講演資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 46
Download now
Download to read offline
Recommended
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
Recommended
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
potatotips (iOS/Android開発Tips共有会) 第19回 資料
potatotips (iOS/Android開発Tips共有会) 第19回 資料
Takao Sumitomo
SQLiteDatabaseを無理矢理覗く
SQLiteDatabaseを無理矢理覗く
Takao Sumitomo
jQuery Mobile
jQuery Mobile
yoshikawa_t
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
Takao Sumitomo
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Takahiro Yoshimura
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
粗探しをしてGoのコントリビューターになる方法
粗探しをしてGoのコントリビューターになる方法
Takuya Ueda
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
Masataka Kono
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法
Takao Sumitomo
Titanium
Titanium
yono05
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
Masataka Kono
Uno Platform 触ってみた
Uno Platform 触ってみた
一希 大田
Titaniumって何?
Titaniumって何?
Toshiro Yagi
リンク機構を有するロボットをGazeboで動かす
リンク機構を有するロボットをGazeboで動かす
tomohiro kuwano
過去に自作したGoプロダクトの紹介 - Goオールスターズ
過去に自作したGoプロダクトの紹介 - Goオールスターズ
Shogo Ichinose
Goだけでモバイルアプリを作る
Goだけでモバイルアプリを作る
Takuya Ueda
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
Shumpei Shiraishi
More Related Content
What's hot
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
potatotips (iOS/Android開発Tips共有会) 第19回 資料
potatotips (iOS/Android開発Tips共有会) 第19回 資料
Takao Sumitomo
SQLiteDatabaseを無理矢理覗く
SQLiteDatabaseを無理矢理覗く
Takao Sumitomo
jQuery Mobile
jQuery Mobile
yoshikawa_t
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
Takao Sumitomo
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Takahiro Yoshimura
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
粗探しをしてGoのコントリビューターになる方法
粗探しをしてGoのコントリビューターになる方法
Takuya Ueda
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
Masataka Kono
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法
Takao Sumitomo
Titanium
Titanium
yono05
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
Masataka Kono
Uno Platform 触ってみた
Uno Platform 触ってみた
一希 大田
Titaniumって何?
Titaniumって何?
Toshiro Yagi
リンク機構を有するロボットをGazeboで動かす
リンク機構を有するロボットをGazeboで動かす
tomohiro kuwano
過去に自作したGoプロダクトの紹介 - Goオールスターズ
過去に自作したGoプロダクトの紹介 - Goオールスターズ
Shogo Ichinose
Goだけでモバイルアプリを作る
Goだけでモバイルアプリを作る
Takuya Ueda
What's hot
(20)
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
Chrome DevTools.next
Chrome DevTools.next
potatotips (iOS/Android開発Tips共有会) 第19回 資料
potatotips (iOS/Android開発Tips共有会) 第19回 資料
SQLiteDatabaseを無理矢理覗く
SQLiteDatabaseを無理矢理覗く
jQuery Mobile
jQuery Mobile
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
粗探しをしてGoのコントリビューターになる方法
粗探しをしてGoのコントリビューターになる方法
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法
Titanium
Titanium
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
Uno Platform 触ってみた
Uno Platform 触ってみた
Titaniumって何?
Titaniumって何?
リンク機構を有するロボットをGazeboで動かす
リンク機構を有するロボットをGazeboで動かす
過去に自作したGoプロダクトの紹介 - Goオールスターズ
過去に自作したGoプロダクトの紹介 - Goオールスターズ
Goだけでモバイルアプリを作る
Goだけでモバイルアプリを作る
Viewers also liked
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
Shumpei Shiraishi
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
yoshikawa_t
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
Viewers also liked
(7)
HTML5開発最前線
HTML5開発最前線
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
jQuery Mobile is not dead!
jQuery Mobile is not dead!
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
Similar to Chrome Apps & Chromeウェブストア概要
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
About Chrome web store
About Chrome web store
knj77
素敵なjavascript ~google chrome編~
素敵なjavascript ~google chrome編~
ngi group.
僕のChrome拡張
僕のChrome拡張
Syo Igarashi
Media programing2012
Media programing2012
y42sora
gcp ja night #27 Google Cloud Endpoints with Golang
gcp ja night #27 Google Cloud Endpoints with Golang
啓介 大橋
8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelab
Kensaku Komatsu
Apps for Web Platform
Apps for Web Platform
dynamis
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
Monaca
Chrome Extensionでスクリーンシェアをやってみる
Chrome Extensionでスクリーンシェアをやってみる
Yusuke Naka
Microsoft Graph API Library for Go
Microsoft Graph API Library for Go
yaegashi
Chrome 拡張のご紹介
Chrome 拡張のご紹介
Tetsunosuke Saito
HTML5 のお話
HTML5 のお話
tomo_masakura
Attractive HTML5
Attractive HTML5
Sho Ito
Web Speech API で2時間で作れる?ブラウザロボット
Web Speech API で2時間で作れる?ブラウザロボット
Hirokazu Egashira
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
Developers Summit
20160730 fluentd meetup in matsue slide
20160730 fluentd meetup in matsue slide
cosmo0920
[POST.Dev Japan] VS Code で試みる開発体験の向上
[POST.Dev Japan] VS Code で試みる開発体験の向上
Tomomi Imura
Lotus Notes/Domino Application Development by XPages and Beyond
Lotus Notes/Domino Application Development by XPages and Beyond
Atsushi Sato
HTML5が創り出す新たな世界
HTML5が創り出す新たな世界
lpijapan
Similar to Chrome Apps & Chromeウェブストア概要
(20)
Chrome Apps 概要
Chrome Apps 概要
About Chrome web store
About Chrome web store
素敵なjavascript ~google chrome編~
素敵なjavascript ~google chrome編~
僕のChrome拡張
僕のChrome拡張
Media programing2012
Media programing2012
gcp ja night #27 Google Cloud Endpoints with Golang
gcp ja night #27 Google Cloud Endpoints with Golang
8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelab
Apps for Web Platform
Apps for Web Platform
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
Chrome Extensionでスクリーンシェアをやってみる
Chrome Extensionでスクリーンシェアをやってみる
Microsoft Graph API Library for Go
Microsoft Graph API Library for Go
Chrome 拡張のご紹介
Chrome 拡張のご紹介
HTML5 のお話
HTML5 のお話
Attractive HTML5
Attractive HTML5
Web Speech API で2時間で作れる?ブラウザロボット
Web Speech API で2時間で作れる?ブラウザロボット
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
20160730 fluentd meetup in matsue slide
20160730 fluentd meetup in matsue slide
[POST.Dev Japan] VS Code で試みる開発体験の向上
[POST.Dev Japan] VS Code で試みる開発体験の向上
Lotus Notes/Domino Application Development by XPages and Beyond
Lotus Notes/Domino Application Development by XPages and Beyond
HTML5が創り出す新たな世界
HTML5が創り出す新たな世界
More from yoshikawa_t
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
Let's begin WebRTC
Let's begin WebRTC
yoshikawa_t
Chrome DevTools for beginners
Chrome DevTools for beginners
yoshikawa_t
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
Devtools.next
Devtools.next
yoshikawa_t
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
yoshikawa_t
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
yoshikawa_t
More from yoshikawa_t
(12)
Ionicで作るTechfeed
Ionicで作るTechfeed
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
Html5概要 & デモ
Html5概要 & デモ
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
最近のブラウザ状況
最近のブラウザ状況
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
Let's begin WebRTC
Let's begin WebRTC
Chrome DevTools for beginners
Chrome DevTools for beginners
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
Devtools.next
Devtools.next
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
Recently uploaded
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Recently uploaded
(8)
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
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/
3.
Chrome Apps の概要
4.
Chrome Apps とは?
Chrome Web Storeで配布、販売できるアプリケー ションプラットフォーム HTML5、CSS3、JavaScriptといったWeb技術でアプ リを開発することができる Chromeブラウザ上(ChromeOS)で動作するため、 HTML5をフルに利利⽤用できる ネイティブデバイスにアクセスするための、独⾃自の拡 張APIなどを持つ
5.
Chrome Apps 新しいタブ
アプリランチャー
6.
Chrome ウェブストア
7.
宇宙侵略略者ゲーム http://bit.ly/SpaceEnemy via
@osamum_MS
8.
Chrome Apps の種類
Chrome Apps Packaged Apps ファイル⼀一式をChromeに保存して利利⽤用する⽅方式 Hosted Apps 通常通り公開しているWebアプリをそのままChrome Web Storeで公開しているもの Extensions アプリではなく、ブラウザの機能⾃自体を拡張する⽬目的で作られるも の
9.
Packaged Apps アプリランチャーから直接起
動可能 Chromeが⽴立立ち上がるのでは なく専⽤用のUIを持ったアプリ 豊富な拡張APIを持つ USB, Bluetooth, Serial
10.
Extensions ブラウザのUIに追加する ブラウザアクション
ページアクション オムニボックス 右クリックメニュー 閲覧しているページでJavaScriptを実⾏行行する(Content Scripts) 例例えば、ページに特定のボタンを追加したり、逆にページの 内容を削除することもできる
11.
Chrome Apps の作り⽅方
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は開発中はなくても大丈夫です。
14.
background.js chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', { 'bounds': { 'width': 400, 'height': 500 } }); });
15.
Chrome Apps/Extensions の
アーキテクチャ バックグラウンドプロセスを1つ持つ すべてのウィンドウ、その他のビュー(ページ)はバッ クグラウンドプロセスとメッセージのやりとりを⾏行行う
16.
実際に作ってみる ハンズオン資料料 (
http://bit.ly/chromeapps20131224 )
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を利利⽤用して回避する必要がある
19.
その他の制限事項 localStorageは、chrome.storageを利利⽤用する chrome.storageは⾮非同期API
Googleの同期機能で他のChromeとデータを同期できる setIntervalやsetTimeoutは、chrome.alarmsを利利⽤用する バックグラウンドプロセスがシャットダウンされる可能性 があるため、setTimeoutなどは利利⽤用できない (バックグラウンドをpersistent:trueにすれば利利⽤用可能)
20.
Chrome Apps のマネタイズ
アプリ/拡張機能の販売(定期・不不定期購⼊入) Chromeウェブストア決済/Google Checkout 無料料トライアル 1回払い ⽉月間登録料料 年年間登録料料 アプリ内課⾦金金(デジタルグッズなどの販売) Chrome In-‐‑‒App Payments 広告の掲載 Googleの課⾦金金⽅方法を使う場合、Google ウォレット販売者アカウントを作成す る必要がある。独⾃自の課⾦金金⽅方法を利利⽤用しても良良い。⼿手数料料は⼀一律律5%
21.
Chrome Apps を公開する
22.
デベロッパーダッシュボード
23.
Chrome ウェブストア デベロッパーダッシュボード
デベロッパーダッシュボードでできること アイテムの登録/編集/公開 アイテムのテストユーザーの登録など 週間利利⽤用ユーザー数などの統計情報の表⽰示 ユーザーからの評価やフィードバックの表⽰示と返信 アイテムを公開する場合、デベロッパー登録料料と して初回のみ5ドルが必要
24.
統計情報の表⽰示
25.
次のステップ Chrome本で :)
Chrome Apps の開発からChrome Web Storeで の公開までを網羅羅 Chrome Developer Toolsの使い⽅方について解説 http://amzn.to/12eKqmt 困ったらChrome API Developers JP コミュニティへ https://sites.google.com/site/chromeapijp/
26.
Thank you!! (@yoshikawa_̲t)
! slideshare http://bit.ly/gg-‐‑‒chrome
27.
Appendix
28.
どんなことができるのか? Chrome Apps
のAPI
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)
38.
Chrome Apps のデバッグ
39.
Chrome Apps のデバッグ
デバッグツールの呼び出しアレコレ アプリ・ウィンドウのデバッグ バックラウンドページのデバッグ Content Scriptsのデバッグ chrome://inspect
40.
アプリ・ウィンドウのデバッグ アプリ・ウィンドウで右クリックメニューの「要 素の検証」「バックグラウンドページの検証」
41.
Consoleでエラーを確認しよう 「要素の検証」「バックグラウンドページの検 証」それぞれでConsoleパネルを表⽰示
42.
バックグラウンドページのデバッグ (主に拡張機能など) ビューを調査でアクティブなファイルがリンクで
表⽰示されるので対象ページをクリック chrome://extensions
43.
Content Scriptのデバッグ (拡張機能)
対象ページでデベロッパーツールを開いて「Sources」 パネル、ファイルツリーの「Content Scripts」タブ
44.
Content ScriptのConsole操作 (拡張機能)
コンソールの下側のセレクトメニューで該当の拡 張機能を選択
45.
chrome://inspect デバッグ可能なページをすべて表⽰示!(リモート デバッグもこちらから)
46.
Resources https://developer.chrome.com/ https://developer.chrome.com/apps/about_̲apps
https://github.com/MobileChromeApps/mobile-‐‑‒ chrome-‐‑‒apps/
Download now