$30 off During Our Annual Pro Sale. View Details »

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

Mikio Fujita
November 15, 2014

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

Mikio Fujita

November 15, 2014
Tweet

More Decks by Mikio Fujita

Other Decks in Programming

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