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="time" id="time" /> <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(){ var time = document.getElementById("time"); console.log(time.value); };

ボタンを押した時に行う実装を設定 input要素のvalueを取得する windowのloadのタイミングで呼び出す必要がある。


app.jsの解説

16

console.log(time.value);

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 time = document.getElementById("time"); var timeList = time.value.split(":"); var hour = timeList[0]; var minute = timeList[1];

var today = new Date(); 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 time = document.getElementById("time"); var timeList = time.value.split(":"); var hour = timeList[0]; var minute = timeList[1];

var today = new Date(); 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


http://wada811.blogspot.com/2013/12/android-shake-detection.html




devicemotionイベント設定

40


window.addEventListener("devicemotion", handleMotionEvent, true);

devicemotionは端末の加速度や傾きを検知するイベント。常に発生しているものと考えてよさそう。


devicemotionのリスナ

41

2.app.jsに下記を追加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", handleMotionEvent, true); }}

イベントから端末の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", handleMotionEvent, true);

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> <input type="time" id="time" /> <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の外部ファイルを参照するよう置き換え

<input type="time" id="time" /> <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





Filesファイラアプリ

59

https://marketplace.firefox.com/app/files




文庫ビューアドキュメント閲覧アプリ

60

https://marketplace.firefox.com/app/document-reader




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

Engineering