インターネット -第10回- Firefox OSアプリ開発 応用編

前回はHello, Worldアプリを作成しましたが、今回はFirefox OSアプリケーションの開発の応用編としてラーメンタイマーの実装を行います

Transcript

1. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
   Keio University Logo is licensed by its copyright holders.
   Πϯλʔωοτ
   ୈճ'JSFGPY04ΞϓϦ։ൃԠ༻ฤ
   ଜҪ७ɹೆ੓थɹதౡതܟ
   UXJUUFSJOFUT
   
   

   View Slide

2. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
   Keio University Logo is licensed by its copyright holders.
   
   ࣄલ४උ
   w ҎԼͷ߲໨Λ֬ೝ͠·͠ΐ͏
   w 8FC*%&ͷىಈํ๏
   w 'JSFGPY04γϛϡϨʔλͷΠϯετʔϧىಈํ
   ๏
   w લճͷ)FMMP8PSMEΞϓϦͷ࡞Γํ
   w μ΢ϯϩʔυ
   w तۀͰ࢖༻͢ΔͷͰ4'$4'4͔ΒϓϩάϥϜΛμ΢
   ϯϩʔυͯ͠อଘ͍ͯͩ͘͠͞
   

   View Slide

3. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
   Keio University Logo is licensed by its copyright holders.
   'JSFGPY04ΞϓϦ։ൃԠ༻ฤ
   
   

   View Slide

4. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
   Keio University Logo is licensed by its copyright holders.
   
   ϥʔϝϯλΠϚʔ
   w ϥʔϝϯλΠϚʔͱ͸
   w ΧοϓϥʔϝϯΛ࡞Δ෼ΛܭΔλΠϚʔ
   w )FMMP8PSMEͱฒΜͰϓϩάϥϛϯάֶशॳ৺ऀ
   ͕Α͘࡞੒͢ΔϓϩάϥϜͷҰछ
   w ϥʔϝϯλΠϚʔ
   w -JOVYΞϯαΠΫϩϖσΟΞ

   ʠҒͦ͏ʹޠΔͤ͘ʹɺϥʔϝϯλΠϚʔͭ·ͱ΋ʹ࡞Δ
   ͜ͱ΋Ͱ͖ͳ͍Τη։ൃऀ
   w (PPHMF4FBSDIϥʔϝϯλΠϚʔ࡞ͬͯΈͨɹ
   

   View Slide

5. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
   Keio University Logo is licensed by its copyright holders.
   
   ࿅शૉࡐͱͯ͠͸ྑ͍
   w ෼Χ΢ϯτμ΢ϯ͢Δ͚ͩ
   

   View Slide

6. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
   Keio University Logo is licensed by its copyright holders.
   
   ·ͣ͸σβΠϯ
   w ͍͖ͳΓίʔυΛॻ͖࢝Ίͳ͍
   w ͲΜͳػೳ΍ը໘͕ඞཁ͔ߟ͑Δ
   w ػೳؒͷؔ܎ੑΛߟ͑Δ
   w ػೳ
   w ෼ؒ࣌ؒΛܭΔ͜ͱ͕ग़དྷΔ
   w ελʔτͯ͠ɺετοϓͰ͖Δ
   w ը໘
   w Χ΢ϯτμ΢ϯͷจࣈ͕දࣔ͞ΕΔ
   

   View Slide

7. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
   Keio University Logo is licensed by its copyright holders.
   
   ίϯηϓτΛܾΊΑ͏
   w ࢥ͍͖ͭͰ͍Ζ͍Ζ௥Ճͨ͘͠ͳΔ
   w Կ͕ॏཁͰԿʹϑΥʔΧεͯ͠࡞ͬͯΔͷ͔Λ
   ֬ೝ͢Δඞཁ͕͋Δ
   w ϥʔϝϯλΠϚʔͷ৔߹
   w λΠϚʔͳͷͰ͋ͱԿ෼͔஌Γ͍ͨ
   w ඵ୯ҐͰΧ΢ϯτμ΢ϯͯ͠Δͱಈ͍ͯΔ
   ײ͕ग़Δ
   w ଞͷΞϓϦΛ࢖͍ͬͯͯ΋௨஌͕དྷΔΑ͏ʹ͍ͨ͠
   w ͱΓ͋͑ͣ෼ݻఆͰ0,
   

   View Slide

8. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
   Keio University Logo is licensed by its copyright holders.
   
   σβΠϯ͕ઌ͔ɺػೳ͕ઌ͔
   w σβΠϯΛ࡞Δ
   w ը໘ʹදࣔ͠ͳ͚Ε͹ͳΒͳ͍ύʔπΛߟ͑Δ
   w Ͳ͏ը໘ʹϨΠΞ΢τ͢Δ͔ߟ͑Δ
   w ύʔπʹͲΜͳػೳΛׂΓ౰ͯΔ͔ߟ͑Δ
   w ػೳΛߟ͑Δ
   w ػೳʹରͯ͠ͲΜͳϘλϯ͕ඞཁ͔ߟ͑Δ
   w ʜ
   w جຊతʹը໘͔Βߟ͑ͨํ͕Α͍৔߹͕ଟ͍
   

   View Slide

9. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
   Keio University Logo is licensed by its copyright holders.
   
   σβΠϯΛ࡞Δ
   w ίϯηϓτʹج͍ͮͯεέον͢Δ
   w ࢴͱԖචͰ΍Δ͜ͱ͕Φεεϝ
   w ը໘ͷେ·͔ͳਤΛखॻ͖͢Δ
   w ϫΠϠʔϑϨʔϜਤ
   w .JDSPTPGU7JTJP
   w 0NOJ(SBGqF
   w େ఍࣌ؒͷແବ
   w खॻ͖ͰεΩϟϯ͕ྑ͍
   XJSFGSBNFCZCBMEJSJJTMJDFOTFEVOEFS$$#:
   

   View Slide

10. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    σβΠϯΛߟ͑Δ
    ΞϓϦͷ໊લ
    ࢒Γ࣌ؒΛදࣔ

    σδλϧͬΆ͍ϑΥϯτ
    ελʔτϘλϯ
    ։࢝ͨ͠Βετοϓʹ͍ͨ͠
    ϦηοτϘλϯ
    ϔομʔ෦
    Χ΢ϯτμ΢ϯ෦
    Ϙλϯ෦
    

    View Slide

11. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    σβΠϯͷ࣮૷
    w ·ͣ͸)5.-ͱ$44Λ࢖࣮ͬͯ૷͍ͯ͘͠
    w JOEFYIUNM͕ىಈ࣌ʹ࣮ߦ͞ΕΔ
    w EJWཁૉΛ༻͍ͯ

    ͦΕͧΕϔομʔ Χ΢ϯτμ΢ϯ Ϙλϯ෦෼
    Λ࡞͍ͬͯ͘
    

    View Slide

12. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ৽͍͠ϓϩδΣΫτΛ࡞੒
    w ͔͜͜Β͸ϥΠϒίʔσΟϯάΛ͍͖ͯ͠·͢
    w ׬੒ͨ͠ϓϩάϥϜ͸4'$4'4ʹ্͕͍ͬͯΔ
    ͷͰɺ͍ͭͯߦ͔ͳͯ͘େৎ෉Ͱ͢

    ͱ͍͏͔ແཧͰ͢
    
    

    View Slide

13. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    σβΠϯͷ࣮૷
    
    
    
    ラーメンタイマー
    
    
    
    
    0:00.00
    
    
    
    
    スタート
    
    
    リセット
    
    
    
    
    
    

    View Slide

14. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ϥΠϒϥϦΛ׆༻͢Δ
    w ૉͷ)5.-Ͱ͸͔ͬ͜Α͘ͳ্͍ʹ࢖͍ͮΒ͍
    w ྑ͍ײ͡ͷΠϯλϑΣΠεʹ͍ͨ͠
    w ϥΠϒϥϦΛ׆༻͢Δ
    w ػೳ΍ίʔυΛ࠶ར༻Ͱ͖ΔΑ͏·ͱΊͨϞϊ
    w +BWB4DSJQUͰࢉज़ԋࢉΛߦ͏ࡍʹར༻͢Δ.BUIͳ
    Ͳ΋ϥΠϒϥϦͷྫ
    w ϥΠϒϥϦͷछྨ͸ଟذʹΘͨΓɺϢʔβΠϯλϑΣ
    Πεͷ࣮૷Λॿ͚Δ΋ͷ΋͋Δ
    

    View Slide

15. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    6*ϥΠϒϥϦΛ࢖͓͏
    w 6* 6TFS*OUFSGBDF
    ޲͚ͷϥΠϒϥϦ
    w ୅දతͳ6*ϥΠϒϥϦ
    w K2VFSZ6*
    w ࠷΋ϙϐϡϥʔͳ+BWB4DSJQUϥΠϒϥϦͷ6*ϥ
    ΠϒϥϦ
    w #PPUTUSBQ
    w 5XJUUFSͷσβΠϯΛϕʔεʹ։ൃ
    w .BUFSJBM%FTJHO
    w "OESPJEͰఏҊ͞Εͨ৽͍͠σβΠϯ
    w 1PMZNFS1SPKFDU
    

    View Slide

16. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    K2VFSZ.PCJMF6*Λ࢖ͬͯΈΔ
    w ͍Ζ͍Ζ6*ϥΠϒϥϦ͸͋Γ·͕͢

    ͱΓ͋͑ͣK2VFSZ.PCJMF6*Λ࢖ͬͯΈ·
    ͠ΐ͏
    w K2VFSZ.PCJMF6*Λ࢖͏ͨΊʹඞཁͳ΋ͷ
    w K2VFSZຊମ +BWB4DSJQU
    
    w K2VFSZ.PCJMF6* +BWB4DSJQU
    
    w K2VFSZ.PCJMF6*4UZMFTIFFU $44
    
    

    View Slide

17. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    K2VFSZ.PCJMF6*
    w JOEFYIUNMͰͦΕͧΕಡΈࠐΉ
    
    
    
    

    View Slide

18. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    K2VFSZ.PCJMF6*ͦͷ
    w K2VFSZ.PCJMF6*ʹରͯ͠

    ͦΕͧΕͷEJWཁૉ͕ͲΜͳ໾ׂͷEJWͳͷ͔

    ఻͑Δඞཁ͕͋Δ
    w આ໌͸ׂѪ͠·͕͢ɺEBUBSPMF EBUBQPTJUJPO
    ͳͲͷଐੑΛ࢖͍·͢
    w ৄ͘͠͸K2VFSZ.PCJMF6*ͷυΩϡϝϯτΛ
    ݟ·͠ΐ͏
    

    View Slide

19. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    K2VFSZ.PCJMF6*ͦͷ
    
    
    
    ラーメンタイマー
    
    
    
    
    0:00.00
    
    
    
    
    スタート
    
    
    リセット
    
    
    
    
    
    

    View Slide

20. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ΋͏গ͠σβΠϯΛௐ੔͠Α͏
    w Χ΢ϯτμ΢ϯ෦
    w จࣈ͕ࠨدͤʹͳͬͯΔͷ͕ͪΐͬͱඍົ
    w จࣈΛେ͖͍ͨ͘͠
    w σδλϧͬΆ͍ϑΥϯτʹ͍ͨ͠
    w Χ΢ϯτμ΢ϯͷจࣈ
    w UJNFSEJHJUTΛJEଐੑʹ࣋ͭQཁૉ
    w ͦ͜ʹରͯ͠ελΠϧΛద༻͢Δ
    w $44ϑΝΠϧΛ࡞੒ͯ͠ɺಡΈࠐ·ͤΔ
    

    View Slide

21. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    $44Λ࡞੒͢Δ
    #timer-digits {
    margin:10 auto;
    text-align: center;
    font-size: 36px;
    font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
    }
    
    

    View Slide

22. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    σβΠϯ͕ग़དྷͨΒػೳΛ࣮૷͢Δ
    w σβΠϯ͸େମͰ͖͕͋ͬͨ
    w ͦΕͧΕͷϘλϯʹରͯ͠ػೳΛ࣮૷͍ͯ͘͠
    w Ϙλϯ
    w ελʔτετοϓϘλϯ
    w ϘλϯΛԡ͢ͱΧ΢ϯτμ΢ϯ͕։࢝
    w ετοϓΛԡ͢ͱΧ΢ϯτ͕ఀࢭ
    w ϦηοτϘλϯ
    w ϘλϯΛԡ͢ͱΧ΢ϯτ͕Ϧηοτ͢Δ
    

    View Slide

23. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ϘλϯʹػೳΛ࣮૷͢Δ
    w ʮϘλϯ͕ԡ͞Εͨʯͱ͍ͬͨΠϕϯτʹର͠
    ͯػೳΛ࣮૷͢Δ
    w Πϕϯτ͕ൃੜͨ͠ࡍʹ࣮ߦ͢Δؔ਺ΛΠϕϯ
    τϦεφʔͱ͍͏
    w ΠϕϯτϦεφʔΛ࡞ͬͯɺϘλϯʹରͯ͠ఆ
    ٛ͢Δ
    

    View Slide

24. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ϘλϯʹػೳΛ࣮૷͢Δ
    // タイマーの機能を実装する
    var setRamenTimer1 = function() {
    var startButton = document.getElementById('button-start');
    startButton.addEventListener('click', function() {
    setTimeout(function() {
    alert("時間だよ")
    createNotification1(timerMessage);
    }, 3*60*1000);
    });
    };
    setRamenTimer1();
    

    View Slide

25. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ௨஌ํ๏ͷվྑ
    w BMFSUΛ࢖ͬͯϢʔβʹ࣌ؒͷ౸ୡΛ௨஌ͨ͠
    w BMFSUͷܽ఺͸ΞϓϦ͕όοΫάϥ΢ϯυʹͳͬͯ
    ͍Δ৔߹ʹ௨஌͞Εͳ͍
    w J04΍"OESPJEͰ͸ϓογϡ௨஌͕ར༻ग़དྷΔ
    w όοΫάϥ΢ϯυͰ΋௨஌Λड͚औΔ͜ͱ͕ग़དྷΔ
    

    View Slide

26. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    8FC/PUJpDBUJPO
    w 8FC"QQͰ௨஌Λར༻Մೳͱ͢Δ࢓૊Έ
    w 'JSFGPY04ΞϓϦ͚ͩͰͳ͘

    (PPHMF$ISPNFͳͲͰ΋ར༻ग़དྷΔ
    *NBHFGSPNۓٸ஍਒଎ใCZ&YUFOTJPO
    

    View Slide

27. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    8FC/PUJpDBUJPOΛ࢖ͬͯΈΔ
    w 'JSFGPY04ͷҰ෦ͷػೳ͸Ϣʔβͷಉҙແ͠ʹ
    ͸ར༻ग़དྷͳ͍Α͏ʹͳ͍ͬͯΔ
    w উखʹ(14ͰҐஔଌఆͱ͔͞ΕͨΒࠔΔ
    w 1PXFSGVM'FBUVSFͱ͔ݴ͍·͢
    w ΞϓϦΛΠϯετʔϧͨ͠λΠϛϯάͰͲΜͳ
    ػೳΛ࢖͏͔໌ࣔతʹڐՄΛٻΊΔ࢓૊Έ
    

    View Slide

28. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    .BOJGFTUͷฤू
    w ΞϓϦͷ໊લ΍EFTDSJQUJPOɺͲΜͳಛݖΛར
    ༻͢Δ͔ͳͲΞϓϦͷ৘ใΛऩΊͨϑΝΠϧ
    w 8FC/PUJpDBUJPO͸ಛݖΛ࢖͏ػೳͳͷͰɺ
    NBOJGFTUʹॻ͘
    w ͍ͭͰʹΞϓϦͷ໊લ΍EFTDSJQUJPOͳͲ΋ม
    ߋͯ͠͠·͍·͠ΐ͏
    

    View Slide

29. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    .BOJGFTUͷฤू
    {
    "name": "RamenTimer",
    "description": "カップラーメンを作るときに最適な3分タイマーです",
    "launch_path": "/index.html",
    "icons": {
    "16": "/icons/icon16x16.png",
    "48": "/icons/icon48x48.png",
    "60": "/icons/icon60x60.png",
    "128": "/icons/icon128x128.png"
    },
    "developer": {
    "name": "Hirotaka Nakajima",
    "url": "https://blog.nunnun.jp"
    },
    "permissions": {
    "desktop-notification": {
    "description": "ラーメンの出来上がりを通知します"
    }
    }
    }
    

    View Slide

30. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    8FC/PUJpDBUJPOͷ࣮૷
    w ΞϓϦ͔Β௨஌Λ࡞੒͢Δʹ͸
    w Ϣʔβ͕௨஌ΛڐՄͯ͠ͳ͍৔߹͕͋ΔͷͰɺ

    ֬ೝ༻ͷίʔυ΋࢓ࠐΉ
    // ユーザに通知する
    var createNotification1 = function(message) {
    var n = new Notification("ラーメンタイマー", {
    body: "時間だよ"
    });
    }
    

    View Slide

31. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    8FC/PUJpDBUJPOͷ࣮૷
    // WebNotificationを使うので、通知許可を取得する
    // 許可を得てない場合は確認する
    if (Notification && Notification.permission !== "granted") {
    Notification.requestPermission(function(status) {
    if (Notification.permission !== status) {
    Notification.permission = status;
    }
    });
    }
    var timerMessage = "時間だよ";
    // ユーザに通知する
    var createNotification1 = function(message) {
    var n = new Notification("ラーメンタイマー", {
    body: message
    });
    }
    

    View Slide

32. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    Χ΢ϯτμ΢ϯ͍ͤͨ͞
    w ࠓͷ··ͩͱޙԿ෼Ͱ෼ͳͷ͔Θ͔Βͳ͍
    w όϦΧλͰ৯΂͍ͨਓʹจ۟ݴΘΕͦ͏
    w ࢒Γ࣌ؒΛදࣔ͢ΔͨΊͷػೳΛ࣮૷͢Δ
    w Ͳ͏͍͏ػೳ͕ඞཁ͔ߟ͑ͯΈΔ
    w Ұఆ࣌ؒຖʹ࢒Γ࣌ؒΛ֬ೝͯ͠දࣔ͢Δ
    w Ұఆ࣌ؒ͸ඵʹͯ͠ΈΔ
    w ࣮૷ͯ͠ΈΔ
    w Ұఆ࣌ؒຖʹಛఆͷಈ࡞Λͤ͞Δʹ͸

    TFU*OUFSWBM GVOD EVSBUJPO
    

    Λ࢖͏ͱߦ͑Δ
    

    View Slide

33. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    Χ΢ϯτμ΢ϯ࣮૷
    var timerMilliSec = 3 * 60 * 1000;
    // 残り時間を表⽰示するようにする
    var setRamenTimer2 = function() {
    // スタートボタンを取得
    var startButton = document.getElementById('button-start');
    // 時間を表⽰示するエリアを取得する
    var timerDigits = document.getElementById('timer-digits');
    startButton.addEventListener('click', function() {
    var tmp = timerMilliSec;
    // 10ミリ秒毎に以下の処理を繰り返す
    var i = setInterval(function() {
    var c = tmp -= 10;
    timerDigits.textContent = c;
    // 時間切れになった場合の処理
    if (tmp == 0) {
    // 通知を飛ばす
    createNotification1(timerMessage);
    }
    }, 10);
    });
    };
    setRamenTimer2();
    

    View Slide

34. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ϛϦඵΛ෼ඵϛϦඵʹม׵͢Δ
    w ࣌ؒ͸ίϯϐϡʔλͰॲཧ͢Δͷ͕΍͔͍ͬͳ
    ͷͰɺඵ΍ϛϦඵͰॲཧ͢Δ͜ͱ͕ଟ͍
    w TFU*OUFSWBMͰ͸ϛϦඵͰؔ਺͕࣮ߦ͞ΕΔ࣌ؒ
    Λࢦఆ͍ͯ͠Δ
    w ࠓճ΋෼Λ

    ෼
    Y ඵ෼
    Y ϛϦඵඵ
    

    ͱͯ͠ܭࢉ͍ͯ͠Δ
    w දࣔ͢Δͱ͖͸ϛϦඵΛม׵͠ͳ͍ͱ͍͚ͳ͍
    

    View Slide

35. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ϛϦඵΛ෼ඵϛϦඵʹม׵͢Δ
    w ~~ˠϏοτԋࢉࢠ
    w ࠓճ͸খ਺఺Λ੾ΓࣺͯΔͱೝ͍ࣝͯͩ͘͠͞
    ʢຊ౰͸ҧ͏ʣ
    • var a = 2.11;

    ~~a → 2
    //ミリ秒を分、秒、ミリ秒に変換する
    var c = tmp -= 10, // cはtmpから10を引いた値が⼊入る
    m = ~~(c / 60 / 1000), // 分はミリ秒を1000で割り、60で割ると求まる
    s = ~~((c - m * 60 * 1000) / 1000) + '', // 秒はミリ秒から分を引いた値を1000で割ると求まる
    ms = (c - m * 60 * 1000 - s * 1000) / 10 + ''; // ミリ秒は10ミリ秒単位で表⽰示する
    timerDigits.textContent = m + ':' + s + "." + ms;
    

    View Slide

36. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ද่ࣔΕΛ௚͢
    w ෼ඵϛϦඵͱ͍ͬͨͱ͖ʹ

    ͱදࣔ͞ΕΔˠຊདྷ͸ͱͨ͠
    ͍
    w TMFOHUITͷ௕͞
    w TMFOHUI
    w Tͷ௕͕͞ҎԼͷ৔߹͸Λ಄ʹ௥Ճ͢Δ
    timerDigits.textContent = m + ':' + (s.length
    > 1 ? '' : '0') + s + "." + (ms.length > 1 ?
    '' : '0') + ms;
    

    View Slide

37. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ετοϓػೳΛ࣮૷͢Δ
    w ͜ͷ··ͩͱελʔτ͸ग़དྷͯ΋ࢭΊΔ͜ͱ͕ग़དྷ
    ͳ͍
    w ελʔτ͢ΔͱελʔτϘλϯ͕ετοϓϘλϯʹ
    มΘΔΑ͏ʹ͍ͨ͠
    w σβΠϯ
    w ελʔτΛԡͨ࣌͠ͷػೳͱ

    ετοϓΛԡͨ͠ͱ͖ͷػೳΛผʑͷؔ਺ͱͯ͠ఆٛ͢
    Δ
    w ͦΕͧΕͷػೳΛ੾Γସ͑ΔػೳΛؔ਺ͱͯ͠ఆٛ͢Δ
    w ͦΕͧΕͷػೳΛ੾Γସ͑ΔػೳΛަޓʹ࣮ߦͰ͖ΔΑ
    ͏ΠϕϯτϦεφʔΛఆٛ͢Δ
    

    View Slide

38. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    3BNFO5JNFSͷఆٛ
    // 残り時間を表⽰示して、⽌止められるようにする
    var setRamenTimer3 = function() {
    // スタートボタンを取得
    var startButton = document.getElementById('button-start');
    // 時間を表⽰示するエリアを取得する
    var timerDigits = document.getElementById('timer-digits');
    var timerInterval;
    var timeRemaining = timerMilliSec;
    };
    setRamenTimer3();
    w setInterval()͸clearInterval()Λ࢖͏ͱఀ
    ࢭ͢Δ͜ͱ͕ग़དྷΔ
    w setInterval஋Λ࣋ͨͤΔͨΊʹtimerInterval
    ͱ͍͏ม਺Λఆٛ͢Δ
    

    View Slide

39. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ελʔτϘλϯΛԡͨ͠ͱ͖ͷػೳΛؔ਺ఆٛ
    var startEventHander = function() {
    // 10ミリ秒毎に以下の処理を繰り返す
    timerInterval = setInterval(function() {
    // ミリ秒を分、秒、ミリ秒に変換する
    var c = timeRemaining -= 10, // cはtmpから10を引いた値が⼊入る
    m = ~~(c / 60 / 1000), // 分はミリ秒を1000で割り、60で割ると求まる
    s = ~~((c - m * 60 * 1000) / 1000) + '', // 秒はミリ秒から分を引いた値を1000で割ると求まる
    ms = (c - m * 60 * 1000 - s * 1000) / 10 + ''; // ミリ秒は10ミリ秒単位で表⽰示する
    timerDigits.textContent = m + ':' + (s.length > 1 ? '' : '0') + s + "." + (ms.length >
    1 ? '' : '0') + ms;
    // 時間切れになった場合の処理
    if (timeRemaining == 0) {
    // setIntervalを停⽌止する
    clearInterval(timerInterval);
    // 通知を飛ばす
    createNotification1(timerMessage);
    // スタートボタンに戻す
    renameStartStopButton(TIMER_START);
    }
    }, 10);
    // タイマーが始まったらスタートボタンをストップボタンに書き換える
    renameStartStopButton(TIMER_STOP);
    };
    

    View Slide

40. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ετοϓΛԡͨ͠ͱ͖ͷػೳΛؔ਺ͱͯ͠ఆٛ
    // ストップボタンを押した際のイベントハンドラ
    var stopEventHandler = function() {
    if (timerInterval) clearInterval(timerInterval);
    // タイマーが停⽌止したらストップボタンをスタートに書き換える
    renameStartStopButton(TIMER_START);
    };
    

    View Slide

41. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ελʔτɾετοϓΛ੾Γସ͑Δؔ਺
    // ボタンを書き換える
    const TIMER_START = 0;
    const TIMER_STOP = 1;
    var renameStartStopButton = function(mode) {
    if (mode == TIMER_START) {
    startButton.innerHTML = "スタート";
    startButton.removeEventListener('click', stopEventHandler, false);
    startButton.addEventListener('click', startEventHander);
    } else {
    startButton.innerHTML = "ストップ";
    startButton.removeEventListener('click', startEventHander, false);
    startButton.addEventListener('click', stopEventHandler);
    }
    };
    

    View Slide

42. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ελʔτϘλϯΛ࠷ॳʹઃఆ
    startButton.addEventListener('click', startEventHander);
    

    View Slide

43. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ௨஌Λվྑ͢Δ
    w ϝοηʔδ͸ग़Δ͕ΞΠίϯΛද͍ࣔͤͨ͞
    w Ի͡Όؾ෇͔ͳ͍͜ͱ΋͋ΔͷͰɺόΠϒϨʔ
    γϣϯͤͨ͞ํ͕ศར
    w ·ͣ͸ΞΠίϯΛ࡞੒͢Δ

    *MMVTUSBUPSͱ͔1IPUPTIPQͰ࡞੒͢Δ
    

    View Slide

44. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ௨஌ʹΞΠίϯΛ৐ͤΔ
    w ࡞ͬͨΞΠίϯΛ

    ͍͔ͭ͘ͷαΠζʹ෼͚ͯอଘ͢Δ
    w ͱΓ͋͑ͣYαΠζͷΞΠίϯΛ
    JDPOYQOHͱͯ͠อଘ͢Δ
    // 通知は⾳音だけでなく、バイブレーションもしてみる
    var createNotification2 = function(message) {
    // 通知にアイコンを表⽰示させる
    var n = new Notification("ラーメンタイマー", {
    body: message,
    icon: window.location.origin + "/icons/icon128x128.png"
    });
    }
    

    View Slide

45. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ௨஌ͨ͠ΒόΠϒϨʔγϣϯͤ͞Δ
    w όΠϒϨʔγϣϯ͸

    OBWJHBUPSWJCSBUF EVSBUJPO
    

    Ͱىಈ͢Δ͜ͱ͕ग़དྷΔ
    w EVSBUJPOʹ഑ྻΛ౉͢ͱύλʔϯͰ࣮ߦ͢Δ͜
    ͱ͕ग़དྷΔ
    w ࠓճ͸ͱΓ͋͑ͣඵόΠϒϨʔγϣϯͤͯ͞
    ΈΔ
    navigator.vibrate(3000);
    

    View Slide

46. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ·ͩ·ͩ5P%P͸͍ͬͺ͍
    w ϦηοτϘλϯػೳ
    w ϦηοτΛԡͨ͠ΒΧ΢ϯλʔ͕໭Δ
    w ௨஌Ի͚ͩ͡Όͳ͘ɺԻΛ໐Β͍ͨ͠
    w ෼͡ΌରԠ͠ͳ͍ΧοϓϥʔϝϯʹରԠͨ͠
    ͍
    w ͜͏ͨ͠5P%Pʹ༏ઌॱҐΛ͚࣮ͭͯ૷͍ͯ͠
    ͘
    

    View Slide

47. Unless otherwise noted, the text of and illustrations in this slide are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License by Hirotaka Nakajima.
    Keio University Logo is licensed by its copyright holders.
    
    ຊ೔ͷ՝୊
    w ϥʔϝϯλΠϚʔʹԿΒ͔ͷมߋΛՃ͑ͯಈ࡞
    ͍ͯ͠Δঢ়ଶͷεΫϦʔϯγϣοτΛࡱͬͯఏ
    ग़͍ͯͩ͘͠͞ɻ
    w ྫ
    w ෼͖ͬͨΒจࣈͷ৭Λม͑Δ
    w ͕࣌ؒมߋͰ͖Δ
    

    View Slide