Your SlideShare is downloading. ×
0
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Chrome apps for mobile 概要

1,122

Published on

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

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

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

No Downloads
Views
Total Views
1,122
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×