SlideShare a Scribd company logo
Chrome Apps & 
Chrome ウェブストア概要 
2014/10/18 
Geek Girls 
Toru Yoshikawa (@yoshikawa_̲t)
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/
Chrome Apps の概要
Chrome Apps とは? 
Chrome Web Storeで配布、販売できるアプリケー 
ションプラットフォーム 
HTML5、CSS3、JavaScriptといったWeb技術でアプ 
リを開発することができる 
Chromeブラウザ上(ChromeOS)で動作するため、 
HTML5をフルに利利⽤用できる 
ネイティブデバイスにアクセスするための、独⾃自の拡 
張APIなどを持つ
Chrome Apps 
新しいタブ 
アプリランチャー
Chrome ウェブストア
宇宙侵略略者ゲーム 
http://bit.ly/SpaceEnemy 
via @osamum_MS
Chrome Apps の種類 
Chrome Apps 
Packaged Apps 
ファイル⼀一式をChromeに保存して利利⽤用する⽅方式 
Hosted Apps 
通常通り公開しているWebアプリをそのままChrome Web 
Storeで公開しているもの 
Extensions 
アプリではなく、ブラウザの機能⾃自体を拡張する⽬目的で作られるも 
の
Packaged Apps 
アプリランチャーから直接起 
動可能 
Chromeが⽴立立ち上がるのでは 
なく専⽤用のUIを持ったアプリ 
豊富な拡張APIを持つ 
USB, Bluetooth, Serial
Extensions 
ブラウザのUIに追加する 
ブラウザアクション 
ページアクション 
オムニボックス 
右クリックメニュー 
閲覧しているページでJavaScriptを実⾏行行する(Content Scripts) 
例例えば、ページに特定のボタンを追加したり、逆にページの 
内容を削除することもできる
Chrome Apps の作り⽅方
Chrome Apps の作成⽅方法 
1.任意のフォルダを作成 
2.マニフェストファイルを作成する 
3.バックグランドで動作するJSファイルを作成する 
4.ビューであるhtmlファイルを作成する 
5.あとは普通のWebアプリと同様に作成(もちろん 
拡張APIも利利⽤用できる) 
https://developer.chrome.com/apps/first_app
manifest.json 
アプリケーションの情報を記述するメタファイル 
{ 
"name": "SpaceEnemy", 
"description": "宇宙侵略者", 
"version": "0.1", 
"app": { 
"background": { 
"scripts": ["background.js"] 
} 
}, 
"icons": { "16": "icon-16.png", "128": "icon-128.png" } 
} 
iconsは開発中はなくても大丈夫です。
background.js 
chrome.app.runtime.onLaunched.addListener(function() { 
chrome.app.window.create('index.html', { 
'bounds': { 
'width': 400, 
'height': 500 
} 
}); 
});
Chrome Apps/Extensions の 
アーキテクチャ 
バックグラウンドプロセスを1つ持つ 
すべてのウィンドウ、その他のビュー(ページ)はバッ 
クグラウンドプロセスとメッセージのやりとりを⾏行行う
実際に作ってみる 
ハンズオン資料料 
( http://bit.ly/chromeapps20131224 )
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
CSPへの準拠 
Chrome Apps では、CSPに独⾃自に準拠した作りになっている 
外部リソースの読込み禁⽌止 
<script src="http://example.com/..."> 
インラインスクリプトの禁⽌止 
<body onload="..."> 
⽂文字列列を評価して実⾏行行するJavaScriptの禁⽌止 
eval() 
Extensionsでは、上記の制限をある程度度カスタマイズすることができる 
Appsでは、sandboxページやiframeを利利⽤用して回避する必要がある
その他の制限事項 
localStorageは、chrome.storageを利利⽤用する 
chrome.storageは⾮非同期API 
Googleの同期機能で他のChromeとデータを同期できる 
setIntervalやsetTimeoutは、chrome.alarmsを利利⽤用する 
バックグラウンドプロセスがシャットダウンされる可能性 
があるため、setTimeoutなどは利利⽤用できない 
(バックグラウンドをpersistent:trueにすれば利利⽤用可能)
Chrome Apps のマネタイズ 
アプリ/拡張機能の販売(定期・不不定期購⼊入) 
Chromeウェブストア決済/Google Checkout 
無料料トライアル 
1回払い 
⽉月間登録料料 
年年間登録料料 
アプリ内課⾦金金(デジタルグッズなどの販売) 
Chrome In-‐‑‒App Payments 
広告の掲載 
Googleの課⾦金金⽅方法を使う場合、Google ウォレット販売者アカウントを作成す 
る必要がある。独⾃自の課⾦金金⽅方法を利利⽤用しても良良い。⼿手数料料は⼀一律律5%
Chrome Apps を公開する
デベロッパーダッシュボード
Chrome ウェブストア 
デベロッパーダッシュボード 
デベロッパーダッシュボードでできること 
アイテムの登録/編集/公開 
アイテムのテストユーザーの登録など 
週間利利⽤用ユーザー数などの統計情報の表⽰示 
ユーザーからの評価やフィードバックの表⽰示と返信 
アイテムを公開する場合、デベロッパー登録料料と 
して初回のみ5ドルが必要
統計情報の表⽰示
次のステップ 
Chrome本で :) 
Chrome Apps の開発からChrome Web Storeで 
の公開までを網羅羅 
Chrome Developer Toolsの使い⽅方について解説 
http://amzn.to/12eKqmt 
困ったらChrome API Developers JP コミュニティへ 
https://sites.google.com/site/chromeapijp/
Thank you!! 
(@yoshikawa_̲t) 
! 
slideshare 
http://bit.ly/gg-‐‑‒chrome
Appendix
どんなことができるのか? 
Chrome Apps のAPI
Chrome Apps のAPI 
独⾃自APIを利利⽤用する場合、マニフェストファイルにパーミッ 
ションを追加する(不不要のものもある) 
Apps 
http://developer.chrome.com/apps/api_̲index.html 
Extensions 
http://developer.chrome.com/extensions/ 
api_̲index.html
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 アプリウィンドウの操作◯
Chrome Apps のAPI 
ブラウザ機能 
機能・説明アプリ拡張 
chrome.bookmarks ブックマークの操作◯ 
chrome.cookies クッキーの操作◯ 
chrome.history 履歴の操作◯ 
chrome.commands ショートカットキーの設定◯ 
chrome.pageCapture ページをMHTML形式で保存◯ 
chrome.storage データ保存・同期◯ ◯ 
chrome.fileSystem ファイルの読み書き◯ 
chrome.mediaCalleries メディアフィアルへのアクセス◯
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のソケット通信◯
Chrome Apps のAPI 
デバイスアクセス 
機能・説明アプリ拡張 
chrome.serial シリアル通信◯ 
chrome.usb USB通信◯
Chrome Apps のAPI 
メタ情報・管理機能 
機能・説明アプリ拡張 
chrome.management アプリ・拡張機能の管理◯ 
chrome.permissions 必要な権限をあとから追加◯ ◯ 
chrome.brawsingData ブラウジングデータの取得◯ 
chrome.contentSettings サイトのJavaScriptやプラグインの設定◯ 
chrome.extension 拡張機能のユーティリティ◯ 
chrome.fontSettings フォント設定◯
Chrome Apps のAPI 
入力 
機能・説明アプリ拡張 
chrome.tts 音声読み上げ◯ ◯ 
chrome.ttsEngine 音声合成エンジンを登録◯
Chrome Apps のAPI 
ライフサイクル・その他 
機能・説明アプリ拡張 
chrome.idle マシンのアイドル状態を検知◯ ◯ 
chrome.runtime アプリ・拡張機能のライフサイクルイベントを検知◯ ◯ 
chrome.app.runtime アプリの起動・再起動を検知◯ 
chrome.i18n 多言語対応◯ ◯ 
chrome.alarms タスク実行(setTimeoutやsetIntervalの代わり◯ ◯ 
chrome.privacy プライバシー関連の設定を管理する◯ 
chrome.webstore 自サイトで直接アプリをインストール◯ ◯ 
chrome.devtools デベロッパーツールの拡張◯
モバイル対応 
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)
Chrome Apps のデバッグ
Chrome Apps のデバッグ 
デバッグツールの呼び出しアレコレ 
アプリ・ウィンドウのデバッグ 
バックラウンドページのデバッグ 
Content Scriptsのデバッグ 
chrome://inspect
アプリ・ウィンドウのデバッグ 
アプリ・ウィンドウで右クリックメニューの「要 
素の検証」「バックグラウンドページの検証」
Consoleでエラーを確認しよう 
「要素の検証」「バックグラウンドページの検 
証」それぞれでConsoleパネルを表⽰示
バックグラウンドページのデバッグ 
(主に拡張機能など) 
ビューを調査でアクティブなファイルがリンクで 
表⽰示されるので対象ページをクリック 
chrome://extensions
Content Scriptのデバッグ 
(拡張機能) 
対象ページでデベロッパーツールを開いて「Sources」 
パネル、ファイルツリーの「Content Scripts」タブ
Content ScriptのConsole操作 
(拡張機能) 
コンソールの下側のセレクトメニューで該当の拡 
張機能を選択
chrome://inspect 
デバッグ可能なページをすべて表⽰示!(リモート 
デバッグもこちらから)
Resources 
https://developer.chrome.com/ 
https://developer.chrome.com/apps/about_̲apps 
https://github.com/MobileChromeApps/mobile-‐‑‒ 
chrome-‐‑‒apps/

More Related Content

What's hot

これからのモバイルWebと最新動向
これからのモバイルWebと最新動向これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
 
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグChrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
 
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTipsモバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
 
Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.next
yoshikawa_t
 
potatotips (iOS/Android開発Tips共有会) 第19回 資料
potatotips (iOS/Android開発Tips共有会) 第19回 資料potatotips (iOS/Android開発Tips共有会) 第19回 資料
potatotips (iOS/Android開発Tips共有会) 第19回 資料
Takao Sumitomo
 
SQLiteDatabaseを無理矢理覗く
SQLiteDatabaseを無理矢理覗くSQLiteDatabaseを無理矢理覗く
SQLiteDatabaseを無理矢理覗く
Takao Sumitomo
 
jQuery Mobile
jQuery MobilejQuery 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 GomobileGo 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 ~本当にあったこわい話~Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
 
粗探しをしてGoのコントリビューターになる方法
粗探しをしてGoのコントリビューターになる方法粗探しをしてGoのコントリビューターになる方法
粗探しをしてGoのコントリビューターになる方法
Takuya Ueda
 
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
Masataka Kono
 
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法
Takao Sumitomo
 
Titanium
TitaniumTitanium
Titanium
yono05
 
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違いPHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
Masataka Kono
 
Uno Platform 触ってみた
Uno Platform 触ってみたUno Platform 触ってみた
Uno Platform 触ってみた
一希 大田
 
Titaniumって何?
Titaniumって何?Titaniumって何?
Titaniumって何?
Toshiro Yagi
 
リンク機構を有するロボットをGazeboで動かす
リンク機構を有するロボットをGazeboで動かすリンク機構を有するロボットをGazeboで動かす
リンク機構を有するロボットをGazeboで動かす
tomohiro kuwano
 
過去に自作したGoプロダクトの紹介 - Goオールスターズ
過去に自作したGoプロダクトの紹介 - Goオールスターズ過去に自作したGoプロダクトの紹介 - Goオールスターズ
過去に自作したGoプロダクトの紹介 - Goオールスターズ
Shogo Ichinose
 
Goだけでモバイルアプリを作る
Goだけでモバイルアプリを作るGoだけでモバイルアプリを作る
Goだけでモバイルアプリを作る
Takuya Ueda
 

What's hot (20)

これからのモバイルWebと最新動向
これからのモバイルWebと最新動向これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
 
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグChrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
 
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTipsモバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
 
Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.next
 
potatotips (iOS/Android開発Tips共有会) 第19回 資料
potatotips (iOS/Android開発Tips共有会) 第19回 資料potatotips (iOS/Android開発Tips共有会) 第19回 資料
potatotips (iOS/Android開発Tips共有会) 第19回 資料
 
SQLiteDatabaseを無理矢理覗く
SQLiteDatabaseを無理矢理覗くSQLiteDatabaseを無理矢理覗く
SQLiteDatabaseを無理矢理覗く
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
 
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Go goes Mobile: Quick Exploration on Go 1.5 and GomobileGo 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 ~本当にあったこわい話~Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
 
粗探しをしてGoのコントリビューターになる方法
粗探しをしてGoのコントリビューターになる方法粗探しをしてGoのコントリビューターになる方法
粗探しをしてGoのコントリビューターになる方法
 
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
 
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法
 
Titanium
TitaniumTitanium
Titanium
 
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違いPHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
 
Uno Platform 触ってみた
Uno Platform 触ってみたUno Platform 触ってみた
Uno Platform 触ってみた
 
Titaniumって何?
Titaniumって何?Titaniumって何?
Titaniumって何?
 
リンク機構を有するロボットをGazeboで動かす
リンク機構を有するロボットをGazeboで動かすリンク機構を有するロボットをGazeboで動かす
リンク機構を有するロボットをGazeboで動かす
 
過去に自作したGoプロダクトの紹介 - Goオールスターズ
過去に自作したGoプロダクトの紹介 - Goオールスターズ過去に自作したGoプロダクトの紹介 - Goオールスターズ
過去に自作したGoプロダクトの紹介 - Goオールスターズ
 
Goだけでモバイルアプリを作る
Goだけでモバイルアプリを作るGoだけでモバイルアプリを作る
Goだけでモバイルアプリを作る
 

Viewers also liked

HTML5開発最前線
HTML5開発最前線HTML5開発最前線
HTML5開発最前線
yoshikawa_t
 
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかたオフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
Shumpei Shiraishi
 
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
 
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろうHTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
yoshikawa_t
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
 
jQuery Mobile is not dead!
jQuery Mobile is not dead!jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
 
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPIChrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
 

Viewers also liked (7)

HTML5開発最前線
HTML5開発最前線HTML5開発最前線
HTML5開発最前線
 
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかたオフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
 
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
 
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろうHTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
 
jQuery Mobile is not dead!
jQuery Mobile is not dead!jQuery Mobile is not dead!
jQuery Mobile is not dead!
 
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPIChrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
 

Similar to Chrome Apps & Chromeウェブストア概要

Chrome Apps 概要
Chrome Apps 概要Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
 
About Chrome web store
About Chrome web storeAbout Chrome web store
About Chrome web store
knj77
 
素敵なjavascript ~google chrome編~
素敵なjavascript ~google chrome編~素敵なjavascript ~google chrome編~
素敵なjavascript ~google chrome編~
ngi group.
 
僕のChrome拡張
僕のChrome拡張僕のChrome拡張
僕のChrome拡張
Syo Igarashi
 
Media programing2012
Media programing2012Media programing2012
Media programing2012
y42sora
 
gcp ja night #27 Google Cloud Endpoints with Golang
gcp ja night #27 Google Cloud Endpoints with Golanggcp 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_codelab8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelab
Kensaku Komatsu
 
Apps for Web Platform
Apps for Web PlatformApps for Web Platform
Apps for Web Platform
dynamis
 
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
Monaca
 
Chrome Extensionで スクリーンシェアをやってみる
Chrome ExtensionでスクリーンシェアをやってみるChrome Extensionでスクリーンシェアをやってみる
Chrome Extensionで スクリーンシェアをやってみる
Yusuke Naka
 
Microsoft Graph API Library for Go
Microsoft Graph API Library for GoMicrosoft Graph API Library for Go
Microsoft Graph API Library for Go
yaegashi
 
Chrome 拡張のご紹介
Chrome 拡張のご紹介Chrome 拡張のご紹介
Chrome 拡張のご紹介
Tetsunosuke Saito
 
HTML5 のお話
HTML5 のお話HTML5 のお話
HTML5 のお話
tomo_masakura
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
Sho Ito
 
Web Speech API で2時間で作れる?ブラウザロボット
Web Speech API で2時間で作れる?ブラウザロボットWeb Speech API で2時間で作れる?ブラウザロボット
Web Speech API で2時間で作れる?ブラウザロボット
Hirokazu Egashira
 
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
Developers Summit
 
20160730 fluentd meetup in matsue slide
20160730 fluentd meetup in matsue slide20160730 fluentd meetup in matsue slide
20160730 fluentd meetup in matsue slide
cosmo0920
 
[POST.Dev Japan] VS Code で試みる開発体験の向上
[POST.Dev Japan] VS Code で試みる開発体験の向上[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 BeyondLotus Notes/Domino Application Development by XPages and Beyond
Lotus Notes/Domino Application Development by XPages and Beyond
Atsushi Sato
 
HTML5が創り出す新たな世界
HTML5が創り出す新たな世界HTML5が創り出す新たな世界
HTML5が創り出す新たな世界
lpijapan
 

Similar to Chrome Apps & Chromeウェブストア概要 (20)

Chrome Apps 概要
Chrome Apps 概要Chrome Apps 概要
Chrome Apps 概要
 
About Chrome web store
About Chrome web storeAbout Chrome web store
About Chrome web store
 
素敵なjavascript ~google chrome編~
素敵なjavascript ~google chrome編~素敵なjavascript ~google chrome編~
素敵なjavascript ~google chrome編~
 
僕のChrome拡張
僕のChrome拡張僕のChrome拡張
僕のChrome拡張
 
Media programing2012
Media programing2012Media programing2012
Media programing2012
 
gcp ja night #27 Google Cloud Endpoints with Golang
gcp ja night #27 Google Cloud Endpoints with Golanggcp 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_codelab8th july2013 packaged_apps_codelab
8th july2013 packaged_apps_codelab
 
Apps for Web Platform
Apps for Web PlatformApps for Web Platform
Apps for Web Platform
 
いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門いまさら聞けない!HTML5超入門
いまさら聞けない!HTML5超入門
 
Chrome Extensionで スクリーンシェアをやってみる
Chrome ExtensionでスクリーンシェアをやってみるChrome Extensionでスクリーンシェアをやってみる
Chrome Extensionで スクリーンシェアをやってみる
 
Microsoft Graph API Library for Go
Microsoft Graph API Library for GoMicrosoft Graph API Library for Go
Microsoft Graph API Library for Go
 
Chrome 拡張のご紹介
Chrome 拡張のご紹介Chrome 拡張のご紹介
Chrome 拡張のご紹介
 
HTML5 のお話
HTML5 のお話HTML5 のお話
HTML5 のお話
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
Web Speech API で2時間で作れる?ブラウザロボット
Web Speech API で2時間で作れる?ブラウザロボットWeb Speech API で2時間で作れる?ブラウザロボット
Web Speech API で2時間で作れる?ブラウザロボット
 
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
 
20160730 fluentd meetup in matsue slide
20160730 fluentd meetup in matsue slide20160730 fluentd meetup in matsue slide
20160730 fluentd meetup in matsue slide
 
[POST.Dev Japan] VS Code で試みる開発体験の向上
[POST.Dev Japan] VS Code で試みる開発体験の向上[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 BeyondLotus Notes/Domino Application Development by XPages and Beyond
Lotus Notes/Domino Application Development by XPages and Beyond
 
HTML5が創り出す新たな世界
HTML5が創り出す新たな世界HTML5が創り出す新たな世界
HTML5が創り出す新たな世界
 

More from yoshikawa_t

Ionicで作るTechfeed
Ionicで作るTechfeedIonicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
 
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
 
Html5概要 & デモ
Html5概要 & デモHtml5概要 & デモ
Html5概要 & デモ
yoshikawa_t
 
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
 
最近のブラウザ状況
最近のブラウザ状況最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
 
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
 
Let's begin WebRTC
Let's begin WebRTCLet's begin WebRTC
Let's begin WebRTC
yoshikawa_t
 
Chrome DevTools for beginners
Chrome DevTools for beginnersChrome DevTools for beginners
Chrome DevTools for beginners
yoshikawa_t
 
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
 
Devtools.next
Devtools.nextDevtools.next
Devtools.next
yoshikawa_t
 
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
yoshikawa_t
 
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
yoshikawa_t
 

More from yoshikawa_t (12)

Ionicで作るTechfeed
Ionicで作るTechfeedIonicで作るTechfeed
Ionicで作るTechfeed
 
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
 
Html5概要 & デモ
Html5概要 & デモHtml5概要 & デモ
Html5概要 & デモ
 
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
 
最近のブラウザ状況
最近のブラウザ状況最近のブラウザ状況
最近のブラウザ状況
 
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
 
Let's begin WebRTC
Let's begin WebRTCLet's begin WebRTC
Let's begin WebRTC
 
Chrome DevTools for beginners
Chrome DevTools for beginnersChrome DevTools for beginners
Chrome DevTools for beginners
 
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
 
Devtools.next
Devtools.nextDevtools.next
Devtools.next
 
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
 
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
 

Recently uploaded

Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo Lab
 
Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
Takayuki Nakayama
 
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツールMOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
TsuyoshiSaito7
 
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit IntroductionMatsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo Lab
 
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
iPride Co., Ltd.
 
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
TsuyoshiSaito7
 
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
Takuya Minagawa
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
Sony - Neural Network Libraries
 
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
Hironori Washizaki
 
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
shogotaguchi
 

Recently uploaded (10)

Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
 
Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
 
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツールMOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
 
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit IntroductionMatsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit Introduction
 
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
 
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
 
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
 
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
 
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
 

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などを持つ
  • 5. Chrome Apps 新しいタブ アプリランチャー
  • 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) 例例えば、ページに特定のボタンを追加したり、逆にページの 内容を削除することもできる
  • 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%
  • 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/
  • 26. Thank you!! (@yoshikawa_̲t) ! slideshare http://bit.ly/gg-‐‑‒chrome
  • 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
  • 43. Content Scriptのデバッグ (拡張機能) 対象ページでデベロッパーツールを開いて「Sources」 パネル、ファイルツリーの「Content Scripts」タブ
  • 44. Content ScriptのConsole操作 (拡張機能) コンソールの下側のセレクトメニューで該当の拡 張機能を選択
  • 46. Resources https://developer.chrome.com/ https://developer.chrome.com/apps/about_̲apps https://github.com/MobileChromeApps/mobile-‐‑‒ chrome-‐‑‒apps/