Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (20)
Similar to Chrome apps for mobile 概要
Similar to Chrome apps for mobile 概要 (20)
More from yoshikawa_t
More from yoshikawa_t (14)
Recently uploaded
Recently uploaded (11)
Chrome apps for mobile 概要
- 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
- 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） 例例えば、ページに特定のボタンを追加したり、逆にページの 内容を削除することもできる
- 10. Chrome Apps の作成⽅方法 1.任意のフォルダを作成 2.マニフェストファイルを作成する 3.バックグランドで動作するJSファイルを作成する 4.ビューであるhtmlファイルを作成する 5.あとは普通のWebアプリと同様に作成（もちろん 拡張APIも利利⽤用できる） https://developer.chrome.com/apps/first_app
- 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)の登壇者募集！
- 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