Firefox os 目覚ましアプリ forハンズオン

めこ３００
Firefox OS 目覚ましアプリ
115年1月18日日曜日

アプリ紹介
 目覚ましアプリ
 mozAlarmを利用して設定した時間にイ
ベントを起こす
 音をならす
 バックグラウンドからの復帰
 シェイクで音を止める
2

ひな形作成
3

WebIDEでひな形作成
 WebIDEを起動し、「アプリを開く」
から新規アプリを作成
 アプリの名称はAlarmAppとする
 テンプレートは[HelloWorld]を選択
 任意の場所を指定し、OKボタンを押
す
4

WebIDEでひな形作成
5
ひな形のテンプレートを選択
プロジェクト名を入力
OKを押すとファイラが開くので
プロジェクトを保存したいディレクトリを
選択

時間を設定する
6

inputタグで時間を設定・取得
 <input type= time >を使う
 javascrpitで設定値を取得する
7

inputタグの配置
8
<body>
<input type="time" id="time" />
</body>
1. index.htmlを開く
2. bodyタグの中身を置き換える

9
input領域が表示される

10
input領域をタップすると
時間設定のダイアログが表示
される

設定時間の取得
11
<body>
<input type="button" id="timeSetButton" value="時間を取得" />
</body>
1. index.htmlを開く
2. bodyタグの中にinputのbuttonを追加する

12
1. app.jsを開く

13
2.app.jsを下記のように置き換える
window.addEventListener("load", function() {
console.log("Hello World!");
init();
});
function init(){
var timeSetButton =
document.getElementById("timeSetButton");
timeSetButton.onclick = function(){
var time = document.getElementById("time");
console.log(time.value);
};
}

app.jsの解説
14
window.addEventListener("load", function() {
console.log("Hello World!");
init();
});
 addEventListenerは1つのイベントに対して
イベントリスナーを登録する
 windowのloadイベントが来た時にfunctionを
呼び出す。
 アプリ起動時のinitを設定できる。

app.jsの解説
15
function init(){
var timeSetButton =
document.getElementById("timeSetButton");
timeSetButton.onclick = function(){
};
 ボタンを押した時に行う実装を設定
 input要素のvalueを取得する
 windowのloadのタイミングで呼び出す必要が
ある。

app.jsの解説
16
 console.logでWebIDE上に出力できる
 ツールは[WebIDEのメニュー > プロジェクト
> アプリケーションをデバッグする] で表示

設定時間に初期値
17
1.app.jsのinit()に下記を追加。
var today = new Date();
time.defaultValue = toDoubleDigits(today.getHours()) + ":"
+ toDoubleDigits(today.getMinutes());
var toDoubleDigits = function(num) {
num += "";
if (num.length === 1) {
num = "0" + num;
}
return num;
};
2.0埋め用のメソッドを追加。

mozAlarmを使う
18

設定した時間に処理を実行
 mozAlarmを使う
 permissionが必要になる
 バックグラウンドからの復帰も
19

permissionの設定
20
1. manifest.webappを開く

permissionの設定
21
2.”permissions”を下記のように置き換える
“messages”も追加する
"messages": [
{ "alarm": "/index.html" }
],
"permissions": {
"alarms": {
"description": "Required to schedule alarms"
}
}
カンマ(,)の位置に注意!

app.jsを編集
22
3.app.jsにsetAlarm()を追加

23
function setAlarm(){
var timeList = time.value.split(":");
var hour = timeList[0];
var minute = timeList[1];
var alarmTime = new
Date(today.getFullYear(),today.getMonth(),today.getDate(),hour,minute,0);
if(alarmTime < today){
alarmTime.setDate(today.getDate() + 1);
}
var data = {foo: "bar"};
var request = navigator.mozAlarms.add(alarmTime, "ignoreTimezone",
data);
request.onsuccess = function () {
alert("アラームを設定しました！");
};
request.onerror = function () {
alert("An error occurred: " + this.error.name);
};
}

setAlarm()の解説
24
var timeList = time.value.split(":");
var hour = timeList[0];
var minute = timeList[1];
var alarmTime = new
Date(today.getFullYear(),today.getMonth(),today.getDate(),hour,minute,0);
 inputから取得した時間をDate型に
 inputからは hh:mm で取得できるのでsplitを
利用

setAlarm() の解説
25
if(alarmTime < today){
alarmTime.setDate(today.getDate() + 1);
}
 現在時刻より早く設定されていた場合は明日に

setAlarm() の解説
26
var data = {foo: "bar"};
var request = navigator.mozAlarms.add(alarmTime, "ignoreTimezone",
data);
request.onsuccess = function () {
alert("アラームを設定しました！");
};
request.onerror = function () {
alert("An error occurred: " + this.error.name);
};
 mozAlarmに時間を登録
 dataを使って値を渡す事が出来る
 onsuccessとonerrorが返ってくる

AlarmActivityHandlerの設定
27
5.app.jsに下記を追加
function AlarmActivityHandler(mozAlarm) {
alert("AlarmActivityHandler called");
}
 mozAlarmに登録した時間になると、
AlarmActivityHandler()が呼ばれる
4.app.jsのinit()に下記を追加
navigator.mozSetMessageHandler('alarm',
AlarmActivityHandler);

28
アラームの設定時刻になると

バックグラウンドからの復帰
29
6.app.jsのAlarmActivityHandler()に下記を追加
navigator.mozApps.getSelf().onsuccess = function
_onAppReady(evt) {
console.log("onAppReady called")
var app = evt.target.result;
if (app) {
app.launch();
}
}
 目覚ましアプリがバックグラウンドにあった場
合、フォアグラウンドに表示される

音を使う
30

mp3音源を鳴らす
 AudioAPIを使うと簡単に音源を利用
できる
 音源はassetsフォルダを作成してその
中へ格納しておく
31

音源をproject内に置く
32
1. assetsフォルダを作成し、mp3ファイルを保存
https://github.com/meco300/AlarmAppForFirefoxOS/blob/master/
assets/alarmSound.mp3
音源はこちらからDLしてください
1.[ViewRaw]を右クリック
2.[リンク先を別名で保存]を選択

Audioを使う
33
var musicplayer;
musicplayer = new Audio('assets/alarmSound.mp3');
musicplayer.loop = true;
function playMusic(){
try{
musicplayer.play();
}catch(e){
alert(e);
}
}
function stopMusic(){
musicplayer.pause();
}

Audioの解説
34
var musicplayer;
musicplayer = new Audio('assets/alarmSound.mp3');
musicplayer.loop = true;
 Audioのインスタンスを作る際にmp3ファイル
を引数に入れる
 loopをtrueにしないと一回再生しただけで止
まる

Audioの解説
35
function playMusic(){
try{
musicplayer.play();
}catch(e){
alert(e);
}
}
function stopMusic(){
musicplayer.pause();
}
 play()で音源が再生し、pause()で止まる。

設定時刻に音を鳴らす
36
3. app.jsのAlarmActivityHandler()内に下記を追加
playMusic();
 alart();を削除してplayMusic();に置き換え
 設定時間が来たら音がなる

音を止める
37
4.index.htmlのbody内に下記を追加
<input type="button" id="stopMusicButton" value="音を止め
る" />
5.app.jsのinit内に下記を追加
var stopMusicButton =
document.getElementById("stopMusicButton");
stopMusicButton.onclick = function(){
stopMusic();
}
 音楽を止めるボタンを設置

シェイクを検出する
38

加速度センサを利用
 devicemotionイベントを使う
 端末のx,y,z方向の加速度が取得でき
る
 シェイクの検出ロジックがあまり調整で
きていません…
39
参照
http://wada811.blogspot.com/2013/12/android-shake-detection.html

devicemotionイベント設定
40
window.addEventListener("devicemotion",
handleMotionEvent, true);
 devicemotionは端末の加速度や傾きを検知す
るイベント。常に発生しているものと考えてよ
さそう。

devicemotionのリスナ
41
function handleMotionEvent(event){
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;
var z = event.accelerationIncludingGravity.z;
var isShake = detectShake(x,y,z);
if(isShake){
stopMusic();
window.removeEventListener("devicemotion",
}
}
 イベントから端末のx,y,zを取得
 シェイク検知時にリスナを削除する

x,y,zからシェイクを検出
42

43
var SPEED_THRESHOLD = 40;
var SHAKE_TIMEOUT = 500;
var SHAKE_DURATION = 3000;
var SHAKE_COUNT = 10;
var mShakeCount = 0;
var mLastTime = 0;
var mLastAccel = 0;
var mLastShake = 0;
var mLastX, mLastY, mLastZ = 0;
function detectShake(x, y, z){
var isShaked = false;
var now = new Date();
if(mLastTime == 0){
mLastTime = now;
}
if(now - mLastAccel > SHAKE_TIMEOUT){
mShakeCount = 0;
}
var diff = now - mLastTime;
var speed = Math.abs(x + y + z - mLastX - mLastY - mLastZ) / diff * 10000;
sensorArea.innerHTML = "speed:" + speed;
if(speed > SPEED_THRESHOLD){
if(++mShakeCount >= SHAKE_COUNT && now - mLastShake > SHAKE_DURATION){
mLastShake = now;
mShakeCount = 0;
isShaked = true;
}
mLastAccel = now;
}
mLastTime = now;
mLastX = x;
mLastY = y;
mLastZ = z;
return isShaked;
}

イベントリスナの登録
44
window.addEventListener("devicemotion",
 playMusic();の直後くらいの位置に実装

レイアウトを整える
45

レイアウト調整
 黒枠は<head>内の<style>で指定して
いる
 外部ファイルからもcssの調整は可能
 そちらの方がオススメ
46

cssファイルを作成
47
1. cssフォルダを作成し、app.cssファイルを作成

index.htmlの修正
48
2.index.htmlを下記に置き換え
<!DOCTYPE html>
<html>
<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="css/app.css">
<script src="app.js" defer></script>
</head>
<body>
<section id="alarmSet">
<input type="button" id="timeSetButton" value="アラームを設定" />
</section>
<section id="alarmStop">
<input type="button" id="stopMusicButton" value="音を止める" />
</section>
</body>
</html>

index.htmlの修正の解説
49
<link rel="stylesheet" href="css/app.css">
 <style>タグでcssを設定していた部分を、css
の外部ファイルを参照するよう置き換え
<section id="alarmSet">
<input type="button" id="timeSetButton" value="アラームを設定" />
</section>
<section id="alarmStop">
<input type="button" id="stopMusicButton" value="音を止める" />
</section>
 アラーム設定時とアラーム呼び出し時でボタン
を出し分けるために<section>タグを追加

css設定
50
3.app.cssに下記を追加
#time {
width: 100%;
height: 60px;
font-size: 2.5em;
text-align: center;
border: 0px solid #ffffff;
margin: 40% 0;
}
section{
width: 100%;
text-align: center;
}
input[type="button"]{
width: 80%;
height: 40px;
font-size: 1.5em;
margin: 10px auto;
}

ボタンの出し分け設定
51
function componentChanger(isAlarmSetting){
var alarmSetSection = document.getElementById("alarmSet");
var alarmStopSection = document.getElementById("alarmStop");
if(isAlarmSetting){
alarmSetSection.style.display = "block";
alarmStopSection.style.display = "none";
}else{
alarmSetSection.style.display = "none";
alarmStopSection.style.display = "block";
}
}
 trueが来た場合にはアラーム設定ボタン、
falseが来た場合には音を止めるボタンを表示

ボタン表示の切り替え
52
5.上記のメソッドを、下記のとおりに追加
componentChanger(bool);
引数:true
・init()
・stopMusicButton.onclick
・handleMotionEventのif(isShake)
引数:false
・AlarmActivityHandler()

完成！
53

残った時間は…
 他のセンサー系を使ってみる
 mozAlarmのキャンセル処理
 レイアウトを変えてみる
 複数個のアラームを登録できるように
してみる
54
わからなくなったらチューターか
詳しそうな雰囲気の人に聞いてみよう！

サンプルアプリの紹介
 様々なセンサー系のサンプル
 DB
 ストレージ
55

ボイラープレート
 様々なセンサー系のサンプルが試せる
56
http://robnyman.github.io/Firefox-OS-Boilerplate-App/

DB系
 IndexedDB
57
https://github.com/meco300/Simple-Memo-for-FirefoxOS

DB系
 localForage
58
https://github.com/meco300/Simple-Memo-for-FirefoxOS

Files
 ファイラアプリ
59
https://marketplace.ﬁrefox.com/app/ﬁles

文庫ビューア
 ドキュメント閲覧アプリ
60
https://marketplace.ﬁrefox.com/app/document-reader

Firefox os 目覚ましアプリ forハンズオン

More Related Content

Featured

Firefox os 目覚ましアプリ forハンズオン