SlideShare a Scribd company logo

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

•
•
yoshikawa_t
yoshikawa_t

10/18(土)のGeekGirlsでの講演資料です。

1 of 46
Downloaded 11 times
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

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/