20150829 firefox-os-handson
•
0 likes•1,385 views
This slide explains how to create Firefox OS apps. It explains procedure to setup apps' development environment, apps structure by evolving Hello World app, and how to create privileged app with a sample ic-recorder app.
Recommended
More Related Content
What's hot
What's hot (18)
Viewers also liked
Similar to 20150829 firefox-os-handson
Similar to 20150829 firefox-os-handson (20)
More from Noritada Shimizu
More from Noritada Shimizu (20)
Recently uploaded
Recently uploaded (20)
20150829 firefox-os-handson
- 47. <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user- scalable=no,initial-scale=1"> <title>Hello World</title> <link rel="stylesheet" href="app.css"> <script src="app.js" defer></script> </head>
- 51. body{ font-size: 18px; overflow: hidden; background-color: #00539F; } h1{ font-size: 640%; line-height: .8; color: white; }
- 55. var handleDeviceLightEvent = function(event){ var indicator = document.querySelector("h1"); var lux = event.value; if(indicator != null){ indicator.textContent = lux; } }; window.addEventListener("devicelight", handleDeviceLightEvent);
- 60. "type": "privileged", "permissions": { "device-storage:music": { "access": "readwrite", "description": "録音データの保存ため" }, "audio-capture": { "description": "録音のため" }, "desktop-notification": { "description": "保存できたかどうかを通知するため" } }
- 61. function initializeAudioStream(){ navigator.getUserMedia({video: false, audio:true}, function(_stream){ console.log("ストリーム取得") stream = _stream; initializeRecorder(); initializeVisualizer(); ui.startButton.disabled = false; }, function(error){ console.log(error); }); }
- 62. function initializeRecorder(){ if(stream != null){ console.log("MediaRecorder 初期化") recorder = new MediaRecorder(stream); recorder.addEventListener("stop", function(event){ toggleRecordButtonState(); }); recorder.addEventListener("dataavailable", function(event){ console.log("blob取得"); saveCapturedData(event.data); }); } }
- 63. function initializeStorage(){ storage = navigator.getDeviceStorage("music"); }
- 64. function saveCapturedData(blob){ if(storage != null){ var filename = createFileName(); var req = storage.addNamed(blob, filename); req.onsuccess = function(){ console.log(this.result + "に保存"); }; req.onerror = function(){ console.log(this.error.name + ":" + this.error.message); }; } }
- 66. function initializeVisualizer(){ if(stream != null && ui.indicator != null){ update(); } }
- 67. var audioContext= new AudioContext(); visualizer.sourceNode = audioContext.createMediaStreamSource(stream); visualizer.analyser = audioContext.createAnalyser(); visualizer.analyser.fftSize = 32; visualizer.buffer = new Uint8Array(visualizer.analyser.frequencyBinCount); visualizer.sourceNode.connect(visualizer.analyser); visualizer.audioContext = audioContext;
- 69. visualizer.canvas = ui.indicator; visualizer.graphicsContext = visualizer.canvas.getContext("2d");
- 70. function initializeVisualizer(){ if(stream != null && ui.indicator != null){ var audioContext= new AudioContext(); visualizer.sourceNode = audioContext.createMediaStreamSource(stream); visualizer.analyser = audioContext.createAnalyser(); visualizer.analyser.fftSize = 32; visualizer.buffer = new Uint8Array(visualizer.analyser.frequencyBinCount); visualizer.sourceNode.connect(visualizer.analyser); visualizer.audioContext = audioContext; visualizer.canvas = ui.indicator; visualizer.graphicsContext = visualizer.canvas.getContext("2d"); update(); } }
- 71. get volume(){ this.analyser.getByteFrequencyData(this.buffer); return scale(average(this.buffer), 0, 128); }
- 72. function doUpdateVisualizer(){ var gc = visualizer.graphicsContext; gc.fillStyle = "white"; gc.fillRect(0, 0, visualizer.canvas.width, visualizer.canvas.height); var h = visualizer.volume * visualizer.canvas.height; gc.fillStyle = "green"; gc.fillRect(0, visualizer.canvas.height - h, visualizer.canvas.width, h); }
- 73. req.onsuccess = function(){ console.log(this.result + "に保存"); new Notification("IC Recorder", { body: "音声を " + filename + " に保存しました。", icon: "/icons/icon16x16.png" }); };