インターネット -第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. Πϯλʔωοτ
   ୈճ
   'JSFGPY
   04ΞϓϦ։ൃ
   Ԡ༻ฤ ଜҪ
   ७ɹೆ
   ੓थɹதౡ
   തܟ
   UXJUUFS
   JOFUT 
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 'JSFGPY
   04
   γϛϡϨʔλͷΠϯετʔϧىಈํ ๏
   w લճͷ)FMMP
   8PSMEΞϓϦͷ࡞Γํ
   w μ΢ϯϩʔυ
   w तۀͰ࢖༻͢ΔͷͰ4'$4'4͔ΒϓϩάϥϜΛμ΢ ϯϩʔυͯ͠อଘ͍ͯͩ͘͠͞
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. 'JSFGPY
   04
   ΞϓϦ։ൃ
   Ԡ༻ฤ 
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 )FMMP
   8PSMEͱฒΜͰϓϩάϥϛϯάֶशॳ৺ऀ ͕Α͘࡞੒͢ΔϓϩάϥϜͷҰछ
   w ϥʔϝϯλΠϚʔ
   w -JOVY
   
   ΞϯαΠΫϩϖσΟΞ
 ʠҒͦ͏ʹޠΔͤ͘ʹɺϥʔϝϯλΠϚʔͭ·ͱ΋ʹ࡞Δ ͜ͱ΋Ͱ͖ͳ͍Τη։ൃऀ
   w (PPHMF
   4FBSDI
   ϥʔϝϯλΠϚʔ
   ࡞ͬͯΈͨɹ
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 ෼Χ΢ϯτμ΢ϯ͢Δ͚ͩ
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 Χ΢ϯτμ΢ϯͷจࣈ͕දࣔ͞ΕΔ
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,
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 جຊతʹը໘͔Βߟ͑ͨํ͕Α͍৔߹͕ଟ͍
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 .JDSPTPGU
   7JTJP
   w 0NOJ(SBGqF
   w େ఍࣌ؒͷແବ
   w खॻ͖ͰεΩϟϯ͕ྑ͍ XJSFGSBNF
   CZ
   CBMEJSJ
   JT
   MJDFOTFE
   VOEFS
   $$
   #:
   
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.  σβΠϯΛߟ͑Δ ΞϓϦͷ໊લ ࢒Γ࣌ؒΛදࣔ
 σδλϧͬΆ͍ϑΥϯτ ελʔτϘλϯ
    ։࢝ͨ͠Βετοϓʹ͍ͨ͠ ϦηοτϘλϯ ϔομʔ෦ Χ΢ϯτμ΢ϯ෦ Ϙλϯ෦
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ཁૉΛ༻͍ͯ
 ͦΕͧΕϔομʔ Χ΢ϯτμ΢ϯ Ϙλϯ෦෼ Λ࡞͍ͬͯ͘
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ʹ্͕͍ͬͯΔ ͷͰɺ͍ͭͯߦ͔ͳͯ͘େৎ෉Ͱ͢
 ͱ͍͏͔ແཧͰ͢
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.  σβΠϯͷ࣮૷ <body> <div> <div> <h1>ラーメンタイマー</h1> </div> <div> <div> <p id="timer-digits"> 0:00.00 </p> </div> <ul> <div> <button id="button-start">スタート</button> </div> <div> <button id="button-reset">リセット</button> </div> </ul> </div> </div> </body>
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 ϥΠϒϥϦͷछྨ͸ଟذʹΘͨΓɺϢʔβΠϯλϑΣ Πεͷ࣮૷Λॿ͚Δ΋ͷ΋͋Δ
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 K2VFSZ
    6*
    w ࠷΋ϙϐϡϥʔͳ+BWB4DSJQUϥΠϒϥϦͷ6*ϥ ΠϒϥϦ
    w #PPUTUSBQ
    w 5XJUUFSͷσβΠϯΛϕʔεʹ։ൃ
    w .BUFSJBM
    %FTJHO
    w "OESPJE
    ͰఏҊ͞Εͨ৽͍͠σβΠϯ
    w 1PMZNFS
    1SPKFDU
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
    .PCJMF
    6*Λ࢖ͬͯΈΔ w ͍Ζ͍Ζ6*ϥΠϒϥϦ͸͋Γ·͕͢
 ͱΓ͋͑ͣK2VFSZ
    .PCJMF
    6*Λ࢖ͬͯΈ· ͠ΐ͏
    w K2VFSZ
    .PCJMF
    6*Λ࢖͏ͨΊʹඞཁͳ΋ͷ
    w K2VFSZຊମ +BWB4DSJQU
    w K2VFSZ
    .PCJMF
    6* +BWB4DSJQU
    w K2VFSZ
    .PCJMF
    6*
    4UZMFTIFFU
    $44
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
    .PCJMF
    6* w JOEFYIUNMͰͦΕͧΕಡΈࠐΉ <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.mobile.min.js"></script>
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
    .PCJMF
    6*
    ͦͷ w K2VFSZ
    .PCJMF
    6*ʹରͯ͠
 ͦΕͧΕͷEJWཁૉ͕ͲΜͳ໾ׂͷEJWͳͷ͔
 ఻͑Δඞཁ͕͋Δ
    w આ໌͸ׂѪ͠·͕͢ɺEBUBSPMF
    EBUBQPTJUJPO ͳͲͷଐੑΛ࢖͍·͢
    w ৄ͘͠͸K2VFSZ
    .PCJMF
    6*ͷυΩϡϝϯτΛ ݟ·͠ΐ͏
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
    .PCJMF
    6*
    ͦͷ <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>ラーメンタイマー</h1> </div> <div data-role="content"> <div data-theme="a" data-form="ui-body-a" class="ui-body ui-body-a ui-corner-all"> <p id="timer-digits"> 0:00.00 </p> </div> <ul data-role="ui-grid-a"> <div class="ui-block-a"> <button class="ui-btn ui-corner-all" id="button-start">スタート</button> </div> <div class="ui-block-b"> <button class="ui-btn ui-corner-all" id="button-reset">リセット</button> </div> </ul> </div> </div> </body>
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ϑΝΠϧΛ࡞੒ͯ͠ɺಡΈࠐ·ͤΔ
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; } <link rel="stylesheet" href="css/styles.css">
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 ϘλϯΛԡ͢ͱΧ΢ϯτ͕Ϧηοτ͢Δ
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 ΠϕϯτϦεφʔΛ࡞ͬͯɺϘλϯʹରͯ͠ఆ ٛ͢Δ
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();
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 όοΫάϥ΢ϯυͰ΋௨஌Λड͚औΔ͜ͱ͕ग़དྷΔ
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 'JSFGPY
    04ΞϓϦ͚ͩͰͳ͘
 (PPHMF
    $ISPNFͳͲͰ΋ར༻ग़དྷΔ *NBHF
    GSPN
    ۓٸ஍਒଎ใ
    CZ
    &YUFOTJPO
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 'JSFGPY
    04ͷҰ෦ͷػೳ͸Ϣʔβͷಉҙແ͠ʹ ͸ར༻ग़དྷͳ͍Α͏ʹͳ͍ͬͯΔ
    w উखʹ(14ͰҐஔଌఆͱ͔͞ΕͨΒࠔΔ
    w 1PXFSGVM
    'FBUVSFͱ͔ݴ͍·͢
    w ΞϓϦΛΠϯετʔϧͨ͠λΠϛϯάͰͲΜͳ ػೳΛ࢖͏͔໌ࣔతʹڐՄΛٻΊΔ࢓૊Έ
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ͳͲ΋ม ߋͯ͠͠·͍·͠ΐ͏
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": "ラーメンの出来上がりを通知します" } } }
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: "時間だよ" }); }
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 }); }
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 
 Λ࢖͏ͱߦ͑Δ
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();
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 දࣔ͢Δͱ͖͸ϛϦඵΛม׵͠ͳ͍ͱ͍͚ͳ͍
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;
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 TMFOHUI
    Tͷ௕͞
    w TMFOHUI
    
    
    
    
    
    
    w Tͷ௕͕͞ҎԼͷ৔߹͸Λ಄ʹ௥Ճ͢Δ timerDigits.textContent = m + ':' + (s.length > 1 ? '' : '0') + s + "." + (ms.length > 1 ? '' : '0') + ms;
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 ͦΕͧΕͷػೳΛ੾Γସ͑ΔػೳΛަޓʹ࣮ߦͰ͖ΔΑ ͏ΠϕϯτϦεφʔΛఆٛ͢Δ
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 ͱ͍͏ม਺Λఆٛ͢Δ
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); };
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); };
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); } };
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);
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Ͱ࡞੒͢Δ
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" }); }
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);
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ʹ༏ઌॱҐΛ͚࣮ͭͯ૷͍ͯ͠ ͘
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 ͕࣌ؒมߋͰ͖Δ