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/

SlideShare for iOS

Chrome Apps & Chromeウェブストア概要

by yoshikawa_t

on Oct 18, 2014

Statistics

Views

Actions

0 Embeds 0

Accessibility

Categories

Upload Details

Usage Rights

Report content

Chrome Apps & Chromeウェブストア概要 Presentation Transcript