20141030 html5j-firefox os-deviceapi

51

Upload: noritada-shimizu

Post on 20-Aug-2015

6.286 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: 20141030 html5j-firefox os-deviceapi
Page 2: 20141030 html5j-firefox os-deviceapi
Page 3: 20141030 html5j-firefox os-deviceapi
Page 4: 20141030 html5j-firefox os-deviceapi

FFiirreeffooxx をよろしくね!

Page 5: 20141030 html5j-firefox os-deviceapi
Page 6: 20141030 html5j-firefox os-deviceapi
Page 7: 20141030 html5j-firefox os-deviceapi

ネットワーク、電池

連絡帳

動画、音楽、SDカード

通信量管理

アプリ間連携

アプリの管理

ブラウザ

通知 、プッシュ通知

カメラ

Marketplace

FMラジオ、端末の設定

ホーム画面、壁紙

電話、SMS

Page 8: 20141030 html5j-firefox os-deviceapi
Page 9: 20141030 html5j-firefox os-deviceapi

manifest.webapp:アプリマニフェスト

{ "name": "My App", "description": "My elevator pitch goes here", "launch_path": "/index.html", "type": "privileged" "icons": { "128": "/img/icon-128.png" }, "developer": { "name": "Your name or organization", "url": "http://your-homepage-here.org" }, "default_locale": "ja"}

Page 10: 20141030 html5j-firefox os-deviceapi
Page 11: 20141030 html5j-firefox os-deviceapi
Page 12: 20141030 html5j-firefox os-deviceapi
Page 13: 20141030 html5j-firefox os-deviceapi
Page 14: 20141030 html5j-firefox os-deviceapi
Page 15: 20141030 html5j-firefox os-deviceapi
Page 16: 20141030 html5j-firefox os-deviceapi
Page 17: 20141030 html5j-firefox os-deviceapi
Page 18: 20141030 html5j-firefox os-deviceapi
Page 20: 20141030 html5j-firefox os-deviceapi
Page 21: 20141030 html5j-firefox os-deviceapi

manifest.webapp

"permissions": { "device-storage:videos":{ "access": "readonly" }, "device-storage:pictures":{ "access": "readwrite" }}

Page 22: 20141030 html5j-firefox os-deviceapi

ファイル名が既知の場合の読み込み

var sdcard = navigator.getDeviceStorage('sdcard');var request = sdcard.get("my-file.txt");

request.onsuccess = function () { var file = this.result; console.log("Get the file: " + file.name);}

request.onerror = function () { console.warn("Unable to get the file: " + this.error);}

Page 23: 20141030 html5j-firefox os-deviceapi

ファイルの書き出し

var sdcard = navigator.getDeviceStorage("sdcard");var file = new Blob(["This is a text file."], {type: "text/plain"});

var request = sdcard.addNamed(file, "my-file.txt");

request.onsuccess = function () { var name = this.result; console.log('File "' + name + '" successfully wrote on the sdcard storage area');}

// An error typically occur if a file with the same name already existrequest.onerror = function () { console.warn('Unable to write the file: ' + this.error);}

Page 24: 20141030 html5j-firefox os-deviceapi

ファイルの削除

var sdcard = navigator.getDeviceStorage('sdcard');var request = sdcard.delete("my-file.txt");

request.onsuccess = function () { console.log("File deleted");}

request.onerror = function () { console.log("Unable to delete the file: " + this.error);}

Page 25: 20141030 html5j-firefox os-deviceapi

ストレージ内のファイル走査

var list = [];var storage = navigator.getDeviceStorage("music");var cursor = storage.enumerate();cursor.onsuccess = function(){ var file = this.result; if(file.type == "audio/mpeg"){

list.push(file); } if(!this.done){ this.continue(); }}

Page 26: 20141030 html5j-firefox os-deviceapi

ストレージサイズの取得

var videos = navigator.getDeviceStorage('videos');var request = videos.usedSpace();

request.onsuccess = function () { // The result is express in bytes, lets turn it into megabytes var size = this.result / 1048576; console.log("The videos on your device use a total of " + size.toFixed(2) + "Mo of space.");}

request.onerror = function () { console.warn("Unable to get the space used by videos: " + this.error);}

Page 28: 20141030 html5j-firefox os-deviceapi

navigator.getUserMedia

navigator.getUserMedia({ video: true, audio: false}, function(stream) { var vendorURL = window.URL || window.webkitURL; video.src = vendorURL.createObjectURL(stream); video.play();}, function(err) { console.log("An error occured! " + err);});

Page 29: 20141030 html5j-firefox os-deviceapi

写真の撮り方

function takepicture() { canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(video, 0, 0, width, height); var data = canvas.toDataURL('image/png'); photo.setAttribute('src', data);}

Page 31: 20141030 html5j-firefox os-deviceapi

manifest.webapp

"permissions": { "camera": { "description": "Required for accessing cameras on the device." }}

Page 32: 20141030 html5j-firefox os-deviceapi

カメラの取得

var options = { mode: 'picture', recorderProfile: 'jpg', previewSize: { width: 352, height: 288 }};var camera = navigator.mozCamera.getListOfCameras()[0];function onSuccess(camera) { // Do stuff with the camera};function onError(error) { console.warn(error);};navigator.mozCamera.getCamera(camera, options, onSuccess, onError);

Page 33: 20141030 html5j-firefox os-deviceapi

CameraControl

var capabilities = camera.capabilities;

camera.onShutter = function () { console.log("The camera is now turned off.");};camera.onPreviewStateChange = onPreviewStateChange;camera.onRecorderStateChange = onRecorderStateChange;

Page 34: 20141030 html5j-firefox os-deviceapi
Page 35: 20141030 html5j-firefox os-deviceapi

プレビュー画面の取得と表示

var display = document.querySelector("video");

function onStreamReady( stream ) { display.mozSrcObject = stream; display.play();}

camera.getPreviewStream(size, onStreamReady);

Page 36: 20141030 html5j-firefox os-deviceapi

写真の撮影

function onPictureTaken( blob ) { storage.addNamed(blob, 'myImage.jpg');}

pictureOptions.pictureSize = camera.capabilities.pictureSizes[0];

pictureOptions.fileformat = camera.capabilities.fileFormats[0];

camera.takePicture(pictureOptions, onPictureTaken);

Page 37: 20141030 html5j-firefox os-deviceapi

フィルタの設定

var capabilities = camera.capabilities;

if (capablities.effects.indexOf('sepia') > -1) { camera.effect = 'sepia';}

Page 39: 20141030 html5j-firefox os-deviceapi

周波数の設定

var frequency = 99.1;var radio = navigator.mozFMRadio;

if(radio.antennaAvailable){ // アンテナがある場合

radio.enable(frequency); // 周波数をセット

}

Page 40: 20141030 html5j-firefox os-deviceapi

ヘッドフォン脱着イベント

var radio = navigator.mozFMRadio;radio.addEventListener("antennaavailablechange", function(){

var frequency = 99.1; if(radio.antennaAvailable){

radio.enable(frequency); // アンテナがある場合はラジオをON

}else{ radio.disable(); //アンテナがない場合はラジオをOFF

}});

Page 42: 20141030 html5j-firefox os-deviceapi

スピーカー利用の強制

var sm = new MozSpeakerManager();sm.forcespeaker = true;

sm.onspeakerforcedchange = function() {// change views' state here};

Page 43: 20141030 html5j-firefox os-deviceapi
Page 45: 20141030 html5j-firefox os-deviceapi

WebActivities

var pick = MozActivity({ name : "pick", data: { type: "img/jpeg" }});pick.onsuccess = function(){ var result = this.result; // do something};

Page 48: 20141030 html5j-firefox os-deviceapi
Page 49: 20141030 html5j-firefox os-deviceapi
Page 50: 20141030 html5j-firefox os-deviceapi
Page 51: 20141030 html5j-firefox os-deviceapi