WebRTC�

Chrome Appsで作る新しいユーザー体験

Eiji Kitamura @agektmr

Today's menu

• Intro to Chrome Apps
• yeoman
• AngularJS
• Chrome Apps
• APIs
• Security

Chrome Apps

Introduction

Chrome Apps v1

"Packaged apps deliver an experience as capable as a native app, but as safe as a web page. Just like web apps, packaged apps are written in HTML5, JavaScript, and CSS."

Chrome Apps v2 will bring...

​

• ユーザーインターフェースの改善
• ブラウザの枠を超えたエクスペリエンス
• オフライン前提
• 新しい API

http://developer.chrome.com/apps

Demo

Chrome Music Player

http://github.com/agektmr/ChromeMusicPlayer

Chrome Music Player

mediaGalleries API

ID3 parser

Audio

AngularJS

IndexedDB

FileSystem

http://github.com/agektmr/ChromeMusicPlayer

How does Chrome Music Player work?

• 音楽の読み込み
• mediaGalleries API でローカルディスクの音楽ファイルを吸い出す
• mp3 ファイルの ID3 タグで音楽ファイルの情報を読み込む
• IndexedDB API で音楽ファイルの情報をインデックス化する
• 音楽ファイルのコピーを FileSystem に保存する

​

• 音楽の再生
• 再生したい楽曲のエントリを取得
• FileSystem から直接再生

http://github.com/agektmr/ChromeMusicPlayer

Chrome Music Player

IndexedDB

FileSystem

http://github.com/agektmr/ChromeMusicPlayer

Components

• Required files
• manifest.json
• HTML
• CSS
• JavaScript

​

• Optional files
• language resources
• other images
• ...

http://github.com/agektmr/ChromeMusicPlayer

yeoman

Modern workflows for modern web apps

What's yeoman?

• 「ヨーマン」と発音
• フロントエンド開発者向けツール
• ライブラリパッケージ管理 (Bower)
• タスク管理 (Grunt)
• プリプロセッシング
• 画像最適化
• リソース圧縮・結合
• ウェブサーバー
• LiveReload と組み合わせることで自動更新可
• テンプレート生成 (scaffold / bootstrap / boilerplate)

http://yeoman.io/

Life of Chrome Apps

​

• バックグラウンドプロセスが起動�(Event Page)
• onLaunch イベント発生
• ウィンドウを起動

http://developer.chrome.com/apps

Event Pages

background.js

chrome.app.runtime.onLaunched.addListener(function() {

chrome.app.window.create('index.html', {

width: 840,

minWidth: 770,

height: 500,

minHeight: 400,

singleton: true

}, function(win) {

...

});

});

​

http://developer.chrome.com/apps

AngularJS

HTML enhanced for web apps!

What's AngularJS?

• ウェブアプリフレームワーク
• はじめての人にも手が出しやすい
• 宣言的ユーザーインターフェース
• 双方向データバインディング
• HTMLタグや属性が自分で定義可能

http://angularjs.org/

Live coding

Introduction to AngualrJS

chrome.mediaGalleries API

• ローカルディスクに存在する音楽・写真・映像のファイルのみを吸い上げてくれる
• FileSystem API と同様の API で操作可能 (read only)

​

chrome.mediaGalleries.getMediaFileSystems({

interactive: 'if_needed'

}, function(localfilesystem) {

localfilesystem.forEach(function(fs) {

var metadata = chrome.mediaGalleries.getMediaFileSystemMetadata(fs);

if (metadata.name === 'Music') {

mediaRoot = fs.root;

}

});

});

IndexedDB API

• WebSQL DB に変わるインデックス型データベース
• Firefox, Internet Explorer 10 でも利用可能
• スキーマ不要
• キーやインデックスを指定しておくことで効率的に検索

​

var music = db.createObjectStore('music', {keyPath: 'path'});

music.createIndex('name', 'name', {unique: false});

music.createIndex('path', 'path', {unique: false});

music.createIndex('artist', 'artist', {unique: false});

music.createIndex('title', 'title', {unique: false});

FileSystem API

filer.js で UNIX コマンドライクに操作

https://github.com/ebidel/filer.js

• ブラウザ内にファイルシステムを持つことができる
• ディレクトリ構造を構築可能
• バイナリファイルの保存に最適

​

​

filer.cd('/', function(dir) {

filer.write(entry.name, {data:file, type:file.type},

function(fileEntry, fileWriter)

console.log(fileEntry, fileWriter);

});

});

​

• Chrome のみサポート
• IndexedDB をサポートしていれば idb.filesystem.js でシミュレート可

​

• AngularJS
• chrome.mediaGalleries API
• IndexedDB API
• FileSystem API (filer.js)

​

- JavaScript-ID3-Reader for reading MP3's ID3 tag

- LESS for better CSS management

Other APIs

• Sync FileSytem API
• ファイルシステムをクラウドで同期
• Storage API
• Identity API
• Commands API
• TCP / UDP API
• USB / Serial / Bluetooth API

http://angularjs.org/

One more thing...

Content Security Policy

"Content Security Policy (CSP) は、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃を含む、よく知られた種類の攻撃を検出して軽減する、セキュリティの追加レイヤーです。"

Introducing Content Security Policy

(Mozilla Developer Network)

What is Content Security Policy?

• サーバーの送信する X-Content-Security-Policy HTTP ヘッダを検知し、ブラウザが判断

​

X-Content-Security-Policy: allow 'self'; img-src 'self' data:

​

• 基本的にホワイトリストでポリシーが適用され、それ以外は受け付けなくなる
• img, script, object, frame, font, xhr, style, etc...

Content Security Policy on Chrome Apps

• デフォルトでは外部リソースを読み込めない
• eval はできない
• innerHTML で DOM を変更できない

​

dom.innerHTML = 'this is innerHTML';

​

• インラインスクリプトは利用できない

​

<div onclick="javascript:alert('test');">button</div>

厳しいデフォルトポリシー

Work around

• XHR for images
• 直接画像が参照できない場合は XMLHttpRequest を使って Blob 化して表示する
• sandbox
• manifest.json で指定された HTML ファイルを通常のウェブサイトとして扱う代わりに chrome.* の API などの特権をなくす
• iframe を使ってこの HTML を表示し、 postMessage でデータを交換
• webview
• HTML 内に webview タグを用いることで、外部ウェブサイトを別プロセスとして参照することができる

Thanks!

Eiji Kitamura @agektmr

�