JavaScript初心者がFirefox OSの時計アプリを読んでみた

Transcript

1. +BWB4DSJQUॳ৺ऀ͕

   'JSFGPY04ͷ
   ࣌ܭΞϓϦΛಡΜͰΈͨ
   @staybuzz
   @benevolent0505
   @jade_halcyon
   

   'Y04ίʔυϦʔσΟϯάϛʔτΞοϓ
   

   View Slide

2. ࣗݾ঺հdstaybuzzd
   @staybuzz
   ● ిؾ௨৴େֶ೥
   ● ࠷ۙόΠτ࢝Ίͨ
   o Ϋϥ΢υʂ
   ● ͋·Γϓϩάϥϛϯά͠ͳ͍
   ● චശͷ৭͸'JSFGPYΦϨϯδ
   

   View Slide

3. ࣗݾ঺հdbenevolent0505d
   !benevolent0505 Έ͖͓
   
   ● ిؾ௨৴େֶ೥ੜ
   !
   ● ϓϩάϥϛϯά͸ॳ৺ऀؾຯʁ
   !
   ● ϚοΫϒοΫΦϨ
   

   View Slide

4. ࣗݾ঺հdjade_halcyond
   !jade_halcyon ͋͗͞Μ
   
   w ిؾ௨৴େֶ̏೥
   w ϓϩάϥϛϯάॳ৺ऀ
   w +BWB4DSJQU͸z)FMMP XPSMEz͢Βॻ͚ͳ͍͘
   Β͍ʹΘ͔Βͳ͔ͬͨ
   w ΋ʹΐ΋ʹΐ
   

   View Slide

5. ൃදͷഎܠ
   ౔
   ʹߦΘΕͨ04$ʹͯ
   !NBTBXBEBʮ࠙਌ձ͋Δ͠ߦ͖·͠ΐ͏ʂʯ
   ๻ୡʮֶੜԁͳΒߦͬͯΈΑ͏͔ͳʜʯ
   ͥͻߦ͖·͠ΐ͏ʂ
   

   View Slide

6. ൃදͷഎܠ
   04$࠙਌ձʹͯ!BPJ@OBHBUTVLJ͞Μʹ
   BPJʮ܅ͨͪɺ'Y04ڵຯ͋ΔΑͶʁ͆ʯ
   ˣ
   BPJʮίʔυಡΜͰΈͳ͍ʁ͆ʯ
   ˣ
   BPJʮ࿮ۭ͍ͯΔΜ͚ͩͲɺग़ΔΑͶʁ͆ʯ
   ˣ
   ๻ୡʮ͋͸͸͸ʙ͆ʯ
   ʊਓਓਓਓਓਓʊ
   ʼɹొஃܾఆɹʻ
   ʉ:?:?:?:?:ʉ
   

   View Slide

7. ࣗ෼͕ͨͪͨ͜͠ͱdऔΓ૊Έͷํ਑d
   !
   w·ͣ͸֤͕ࣗࣗ༝ʹಡΈਐΊ͍ͯ͘
   wண໨఺ͷચ͍ग़͠
   w(PPHMFεϓϨουγʔτʹΘ͔ͬͨ͜ͱΛ࣍ʑ
   ʹϝϞ͍ͯ͘͠
   w৘ใڞ༗
   

   View Slide

8. ࣗ෼͕ͨͪͨ͜͠ͱdऔΓ૊Έͷํ਑d
   w ೔ʹҰ౓΄ͲͷϖʔεͰ4LZQF͠ͳ͕Βಡ
   ΈਐΊΔ
   w Ϟνϕʔγϣϯͷҡ࣋ɺूத
   

   View Slide

9. ࣗ෼͕ͨͪͨ͜͠ͱd࣮ࡍͷྲྀΕd
   panels
   alarm
   stopwatch
   timer
   clock_view
   alarm_list
   post_message

   _proxy
   active_alarm
   alarm_edit
   child_window

   _manager
   ֤ϑΝΠϧɾσΟϨΫτϦ໊͔Β໾ׂΛਪଌ
   

   View Slide

10. ࣗ෼͕ͨͪͨ͜͠ͱd࣮ࡍͷྲྀΕd
    ● σόοΨΛ࢖͍͸͡ΊΔ
    ○ ͱ͸͍͑ɺίʔυΛಡΉ͚ͩ
    ○ ϒϨʔΫϙΠϯτɾɾɾʁ
    ● ϝιου໊ͰίʔυΛݕࡧ͠ݺͼग़͠ͷྲྀΕΛਪଌ
    ○ ͋͘·Ͱʮਪଌʯ͔͍ͯ͠͠ͳ͔ͬͨ
    

    View Slide

11. ࣗ෼͕ͨͪͨ͜͠ͱd࣮ࡍͷྲྀΕd
    w ΞϥʔϜ͕໐Δॠؒʹண໨͢Δ͜ͱʹ
    w ΞϥʔϜͷ࠷ॏཁػೳ
    ʁ
    ͳʹ͕ΞϥʔϜΛ
    ໐Β͍ͯ͠Δͷɾɾɾʁ
    

    View Slide

12. ࣗ෼͕ͨͪͨ͜͠ͱd࣮ࡍͷྲྀΕd
    w ϒϨʔΫϙΠϯτͷଘࡏΛ஌Δʂʂʂ
    w ਪଌ͕֬৴ʹมΘΔॠؒ
    ϒϨʔΫϙΠϯτɺ

    ࢖ͬͯ·͔͢ʁ
    

    View Slide

13. Θ͔ͬͨ͜ͱ
    

    View Slide

14. Θ͔ͬͨ͜ͱdΞϥʔϜͷൃՐd
    Navigator.mozAlarm
    !
    w ࢦఆ࣌ؒʹΠϕϯτΛൃՐ
    w 'Y04ݻ༗ͷ"1*
    w ར༻ʹ͸ಛݖΞϓϦͰ͋Δ͜ͱ͕ඞཁ
    

    View Slide

15. Θ͔ͬͨ͜ͱdΞϥʔϜͷൃՐd
    manifest.webappͷpermissions෦෼
    https://github.com/mozilla-b2g/gaia/blob/master/apps/clock/manifest.webappΑΓ
    ͜͜
    

    View Slide

16. Θ͔ͬͨ͜ͱdΞϥʔϜͷൃՐd
    Alarm.scheduleϝιου
    navigator.mozAlarm.add()
    ͕ൃՐ࣌ؒΛࢦఆ
    ΞϥʔϜ࡞੒࣌
    

    View Slide

17. `
    Θ͔ͬͨ͜ͱdΞϥʔϜͷൃՐd
    onAlarmFired
    or
    onTimerFired
    Viewͷ
    දࣔ
    indexedDB
    mozSetMessageHandler
    ͕ઃఆ
    onMozAlarm
    ΞϥʔϜൃՐ࣌ʂʂ
    อଘ͞ΕͨΞϥʔϜ
    ͷઃఆΛಡΈࠐΉ
    ϝΠϯετϦʔϜ
    

    View Slide

18. Θ͔ͬͨ͜ͱdεψʔζd
    ൃՐͨ͠ΞϥʔϜͷ*%ͷ৘ใΛ%#ΑΓऔಘ
    active_alarm.js (v2.0)
    

    View Slide

19. Θ͔ͬͨ͜ͱdεψʔζd
    ݱࡏ࣌ࠁ b4OPP[F`Λλοϓͨ࣌͠ࠁ
    ʹ༧Ίઃఆͨ͠ε
    ψʔζλΠϜΛ଍ͨ࣌͠ࠁΛ%#ʹॻ͖ࠐΈ
    alarm.js (v2.0)
    

    View Slide

20. Θ͔ͬͨ͜ͱd"1*ͱ͔d
    !
    • Navigator.mozAlarm
    w ࠓճͷ࣌ܭΞϓϦͷ؊
    • Navigator.mozSetMessageHandler
    w γεςϜʹൃՐ࣌ͷىಈ͢ΔΠϕϯτΛઃఆ͢ΔͨΊ
    • Navigator.requestWakeLock
    w ݤʹͳ͍ͬͯͦ͏ͳΜ͚ͩͲಾɾɾɾ
    

    View Slide

21. Θ͔ͬͨ͜ͱd8FC"1*d
    8FC"1*Λ࢖ͬͯΞϓϦΛ։ൃ͕Ͱ͖Δ
    ʢྫʣ
    ● indexedDB API
    ○ ΞϥʔϜͷઃఆͷอଘʹ࢖༻
    ● vibration API
    ○ ୺຤ͷόΠϒϨʔγϣϯ
    

    View Slide

22. ίʔυϦʔσΟϯάʹऔΓ૊ΜͰΈͨ݁Ռ
    dऔΓ૊Έํʹ͍ͭͯd
    ● ࢝Ί͸֤͕ࣗࣗ༝ʹಡΜͰ͍͘
    ● +4ͷجຊతͳ஌͔ࣝΒ
    ● ͩΜͩΜ֤ࣗͷಡΉൣғʹऩଋ
    !
    ● (PPHMFεϓϨουγʔτʹ·ͱΊΔ
    ● ଞਓͷϝϞ͕͔ͳΓ໾ʹཱͬͨ
    !
    ● 4LZQFͰձ࿩Λ͠ͳ͕ΒಡΉ
    ● ΋͘΋͘ձ෩Ͱ͸͕͋ͬͨɾɾɾ
    

    View Slide

23. ίʔυϦʔσΟϯάʹऔΓ૊ΜͰΈͨ݁Ռ
    dܦݧʹ͍ͭͯd
    .%/ͷهࣄ ӳޠ
    ͕໾ʹཱͬͨ
    w ॳΊʹ'Y04ͷ߲໨ʹͭͯಡΊ͹Α͔ͬͨײ
    

    View Slide

24. ίʔυϦʔσΟϯάʹऔΓ૊ΜͰΈͨ݁Ռ
    dܦݧʹ͍ͭͯd
    γϛϡϨʔλͱ(JUIVCͷNBTUFSϒϥϯνͷ
    όʔδϣϯͷҧ͍
    master v 2.0
    

    View Slide

25. ίʔυϦʔσΟϯάʹऔΓ૊ΜͰΈͨ݁Ռ
    dܦݧʹ͍ͭͯd
    +BWB4DSJQU͸೉͍͠
    w UIJTͱ͔QSPUPUZQFͱ͔
    w ࣗ༝౓͕ߴ͍
    w ॳ৺ऀʹ͸ѻ͍ͮΒ͍
    

    View Slide

26. ίʔυϦʔσΟϯάʹऔΓ૊ΜͰΈͨ݁Ռ
    dܦݧʹ͍ͭͯd
    σόοΨͷ࢖༻
    w ن໛ͷେ͖ͳ΋ͷʹ৮Δ͜ͱͰؾ͍ͮͨ༗༻ੑ
    

    View Slide

27. ײ૝dstaybuzzd
    ● ॳσόοΨɺॳϒϨʔΫϙΠϯτʹײಈ
    !
    ● 'Y04ʹॳΊͯ৮ΕͯΈͯɺຊ౰ʹ)5.-
    ΍+4Ͱ࡞ΒΕ͍ͯΔͷ͔ʁͱٙͬͯ͠·ͬ
    ͨ
    !
    ● ͜ΕΛػʹ+4ͳͲΛษڧͯ͠ΞϓϦΛ࡞ͬ
    ͯΈ͍ͨ
    

    View Slide

28. ײ૝dbenevolent0505d
    w +BWB4DSJQU͕นͩͬͨ
    w ଞͷݴޠͱൺ΂Δͱ׳Εͳ͍ײ͡
    w 8FCͷٕज़ʹڵຯΛ΋ͬͨ
    w 8FCͷٕज़ͷڧྗ͞
    w ਓͰ΍Δ͜ͱͷྑ͞
    w ձ࿩͠ͳ͕Β΍ͬͨ΄͏͕ਐΜͩؾ͕͢Δ
    

    View Slide

29. ײ૝djade_halcyond
    Կ΋͔΋͕ॳΊͯͷܦݧͩͬͨ
    ɾΞϓϦέʔγϣϯʹ͍ͭͯ৮ΕΔ
    !
    ɾ৮Εͨ͜ͱͷͳ͍ݴޠ
    !
    ɾҰͭͷίʔυΛ̏ਓͰಡΉ
    

    View Slide

30. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide