Chrome apps for mobile 概要

1,679 views

Published on

6/26に行われた第48回HTML5とか勉強会でのスライド資料です。

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,679
On SlideShare
0
From Embeds
0
Number of Embeds
116
Actions
Shares
0
Downloads
12
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Chrome apps for mobile 概要

  1. 1.        Chrome  Apps  for  mobile  概要 2014/5/26   第48回HTML5とか勉強会   Toru  Yoshikawa  (@yoshikawa_̲t)
  2. 2. Who? 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/ 吉川  徹  /  Toru  Yoshikawa   @yoshikawa_̲t
  3. 3. Agenda Chrome  Apps  の概要   Chrome  Apps  の作り⽅方   どんなことができるのか?  
 Chrome  Apps  のAPIをピックアップ   Chrome  Apps  for  mobile
  4. 4. Chrome  Apps  の概要
  5. 5. Chrome  Apps  とは? Chrome  Web  Storeで配布、販売できるアプリケー ションプラットフォーム   HTML5、CSS3、JavaScriptといったWeb技術でアプ リを開発することができる   Chromeブラウザ上(ChromeOS)で動作するため、 HTML5をフルに利利⽤用できる   ネイティブデバイスにアクセスするための、独⾃自の拡 張APIなどを持つ
  6. 6. Chrome  Apps  の種類 Chrome  Apps   Packaged  Apps   ファイル⼀一式をChromeに保存して利利⽤用する⽅方式   Hosted  Apps   通常通り公開しているWebアプリをそのままChrome  Web   Storeで公開しているもの   Extensions   アプリではなく、ブラウザの機能⾃自体を拡張する⽬目的で作られるも の
  7. 7. Packaged  Apps アプリランチャーから直接起 動可能   Chromeが⽴立立ち上がるのでは なく専⽤用のUIを持ったアプリ   豊富な拡張APIを持つ   USB,  Bluetooth,  Serial
  8. 8. 今回は対象外ですが⼀一応   Extensions ブラウザのUIに追加する   ブラウザアクション   ページアクション   オムニボックス   右クリックメニュー   閲覧しているページでJavaScriptを実⾏行行する(Content  Scripts)   例例えば、ページに特定のボタンを追加したり、逆にページの 内容を削除することもできる
  9. 9. Chrome  Apps  の作り⽅方
  10. 10. Chrome  Apps  の作成⽅方法 1.任意のフォルダを作成   2.マニフェストファイルを作成する   3.バックグランドで動作するJSファイルを作成する   4.ビューであるhtmlファイルを作成する   5.あとは普通のWebアプリと同様に作成(もちろん 拡張APIも利利⽤用できる) https://developer.chrome.com/apps/first_app
  11. 11. 実際に作ってみる 某もの⃝さん作成の宇宙侵略者ゲームを移植
  12. 12. 実際に作ってみる お試しに作ってみる場合は、こちらのハンズオン資料料 を参考に  (  http://bit.ly/chromeapps20131224  )
  13. 13. 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
  14. 14. CSPへの準拠 Chrome  Apps  では、CSPに独⾃自に準拠した作りになっている   外部リソースの読込み禁⽌止   <script  src="http://example.com/...">   インラインスクリプトの禁⽌止   <body  onload="...">   ⽂文字列列を評価して実⾏行行するJavaScriptの禁⽌止   eval()   Extensionsでは、上記の制限をある程度度カスタマイズすることができる   Appsでは、sandboxページやiframeを利利⽤用して回避する必要がある
  15. 15. その他の制限事項 localStorageは、chrome.storageを利利⽤用する   chrome.storageは⾮非同期API   Googleの同期機能で他のChromeとデータを同期できる   setIntervalやsetTimeoutは、chrome.alarmsを利利⽤用する   バックグラウンドプロセスがシャットダウンされる可能性 があるため、setTimeoutなどは利利⽤用できない   (バックグラウンドをpersistent:trueにすれば利利⽤用可能)
  16. 16. どんなことができるのか?   Chrome  Apps  のAPI
  17. 17. Chrome  Apps  のAPI 独⾃自APIを利利⽤用する場合、マニフェストファイルにパーミッ ションを追加する(不不要のものもある)   Apps   http://developer.chrome.com/apps/api_̲index.html   Extensions   http://developer.chrome.com/extensions/ api_̲index.html
  18. 18. Chrome  Apps  のAPI ⾯面⽩白そうなもの、便便利利なものをピックアップ   power  …  パワーマネジメント(モバイル対応)   serial  …  シリアル通信   socket  …  ソケット通信   socket.tcpServer  …  TCPサーバーを⽴立立てる   storage  …  Chromeのブラウザデータ同期ができる   system系  …  cpu、display、memory、network、storageへのアクセス   tts  …  ⾳音声読み上げ   usb  …USB接続
  19. 19. Chrome  Apps  のAPI beta、dev版で追加されているAPI   bluetooth  …Bluetooth通信   audio  …  オーディオデバイスへのアクセス   hid  …  ヒューマンインターフェースデバイス (各種操作機器)へのアクセス
  20. 20. Chrome  Apps  APIの   サンプル https://github.com/GoogleChrome/chrome-‐‑‒ app-‐‑‒samples/
  21. 21. Chrome  Apps  for  mobile 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)
  22. 22. 対応APIはまだまだこれから alarms   fileSystem   i18n   identity   idle   notifications   power   pushMessaging   socket   storage   syncFileSystem
  23. 23. 最後に 今年年のGoogle  IOで何か⼤大きな発表があるかも!? (なくても怒怒らないでね…)   わからないことは、Chrome  API  Developers  JP   へ   https://sites.google.com/site/chromeapijp/   Chrome  Appsは、Chrome本で!(宣伝)   Chrome  Apps  の開発からChrome  Web  Store での公開までを網羅羅   http://amzn.to/12eKqmt
  24. 24. HTML5  Japan  Cup   Chrome  Apps賞も宜しくお願いします!
  25. 25. html5j  えんぷら部  Webプラットフォーム部合同  勉強会   【2014/6/10】120分聞けばドヤ顔で語れる   Apache  Cordova  スーパー勉強会 http://atnd.org/events/51539 Cordova事例例特集(LT)の登壇者募集!
  26. 26. Thank  you!! (@yoshikawa_̲t)
  27. 27. Resources https://developer.chrome.com/   https://developer.chrome.com/apps/about_̲apps   https://github.com/MobileChromeApps/mobile-‐‑‒ chrome-‐‑‒apps/   http://www.slideshare.net/yoshikawa_̲t/chrome-‐‑‒apps

×