PWAでお絵描きアプリを作った話

for PWA night vol.48

Transcript

1. !"#$ %&'()*+, -./0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A BC D E FG B HIJ
2. !"#$%&'()*+,-./0 1234 5678559:;< =>?@AB ଉࢠ ࡀ ɺΠϠΠϠظਅͬ੝Γͷ່ ࡀ ͷࣇͷ෕਌ɻ γϯάϧϘʔυίϯϐϡʔλʔͰαʔόʔߏஙͨ͠ΓGSFFGPOU࡞੒ɺ࡞ۂɺ FTQͳͲͰ*P5ɺ%ϓϦϯλʴిࢠ޻࡞Ͱ͜Ͳ΋ͷΦϞνϟΛ࡞ͬͨΓ ৭ʑͯ͠·͢ɻ ༮ஓԂͷΠϕϯτͷ౎߹Ͱ཈͑ͯ·͕͢ɺීஈ͸੺΍ࢵ৭ͷϞώΧϯͰ׆ ಈͯ͠·͢ɻ ೥݄̎ʹͰ͖ͨגࣜձࣾ#SFXVTͰ$50తͳԿ͔Λ΍͍ͬͯ·͢ɻ !CMBDL@USFF LVSPLLZ !LVSPLLZ
3. !"#$%&'()*+,-./0 (.12 ࡢ೥ͷՆٳΈͷ͜ͱʜ ૆฼ͷॳຍɺࡀ൒ ౰࣌ ͷ່͕ੜޙҰ౓΋۝भͷ࣮Ոʹؼͬͯͳ͍͜ͱ ͳͲΛ౿·͑߅ݪݕࠪΛ͠ؼল͍ͯ͠ΔඈߦػͷதͰࣄ݅͸͓͖·ͨ͠ɻ ࡀ ౰࣌ ͷଉࢠ͕ %&1(3/45678(/4 ͱݴ͍͸͡Ί·ͨ͠ɻʢଉࢠ͸਺ࣈΛॻ͘ͷʹϋϚͬͯ·ͨ͠ɻʣ ଉࢠ ࣗը૾
4. ΩλΩλʂଉࢠΑ*5෕ͪΌΜΛͳΊΔͳʂ !"#$%&'()*+,-./0 123456789%:;;<=>7=?@6<ABCD2E $FG,HIJKLFCMNO$PDQR S-32TUV 7W:XHIYKLFCMZ[3\ ]^_`a
5. !"#$% ΩλΩλʂଉࢠΑ*5෕ͪΌΜΛͳΊΔͳʂ &'()*+,-./012345 6789:;<=>*?@@ABC<BDE;AFGHI7J )KL1MNOPQKHRST)UIVW X287YZ[ しかし <\?]MN^PQKHR_`8a
6. !"#$%&' ()*+,-./0$123456
7. !"#$%&' ʢࡀࣇʹ༗ྉͷΞϓϦ͸ϨΠϠʔͱ͔͋ͬͯ6*తʹ΋ߴػೳ͗͢ΔͷͰ͢ʣ ϑϦʔͷΞϓϦʹଟ͍ ΦϑϥΠϯͰਅͬനʹͳΔ ޿ࠂදࣔྖҬʂ ()*+,-./0$123456
8. !"#$ %&'()*+,-./01234
9. !"#$ %%&'()*+ ,-"./0 123456789:;<=>?@
10. !"#$ %%&'()*+ ,-"./0 123/456".78/9 :;<=5>?@ABCDEFGH
11. !"#$ %%&'()*+ ,-"./0 123/456".78/9 :;<,-"./0 =>?@5AB;CDEFGHIJ
12. !"#$ %%&'()*+ ,-"./0 123/456".78/9 :;<,-"./0 123/456".78/9 =>?@5AB;CDEFGHIJ
13. !"#$ %%&'()*+ ,-"./0 123/456".78/9 :;<,-"./0 123/456".78/9 :;<,-=>../0 ?@AB5CD;EFGHIJKL
14. !"#$%&'()*+,-./012% 3456 77 89:;<= >)4?@A BCD@E(F4?GH@I JKL>)4?@A BCD@E(F4?GH@I JKL>)*M??@A BCD@I N7,OPQRS?TUDV
15. !"#$%&'( )*+)*,-./&01234 56789:;<=>?@AB2C ່
16. !"#$%&'( )*+)*,-./&01234 -.+56$788$-9:;<=>?@AB C01DE3 =FGCHIJKLMNOP92Q ່
17. !"#$%&'( )*+)*,-./&01234 -.+56$788$-9:;<=>?@AB C01DE3 -9:FGHI$JK+CLD3MJN ;OPQR.SD3B =TUCGVWLOPQXY92Z ່
18. !"#$%&'( )*+)*,-./&01234 -.+56$788$-9:;<=>?@AB C01DE3 -9:FGHI$JK+CLD3MJN ;OPQR.SD3B TUM =VWCGXYLOPQZ[92\ ່
19. !"#$%&'( )*+)*,-./&01234 -.+56$788$-9:;<=>?@AB C01DE3 -9:FGHI$JK+CLD3MJN ;OPQR.SD3B TUM )*+)*N =VWCGXYLOPQZ[92\ ່ ່
20. !"#$%&'()*+,-./012% 345,6789 :;<:;=>?@7A%BCD >?<EF,GHH,>IJKLMNOPQR SA%TUC >IJV(WX,YZ<S[TC\Y] K^_`a?bTCR cd\ :;<:;] eYGfUTCG ່ ່
21. !"#$ %&'()*+,-./012/3 45 67-89:;<=>?@A&BC
22. !"#$ %&'()*+,-./012/3 45 %&'678&9:;<=>?@A BC-DEFGHIJKLM&NO
23. !"#$ %&'()*+,-./012/3 45 %&'678&9:;<=>?@A B&CDEFGH CI;BJ=CKD LLGMNJ? OP-QRSTUVWXYM&Z[
24. !"#$%&'()*+,-./012345678 239: ;</=>?@ABCDEFGDH IJ ;</KLM<NOP1Q7RST U<VWXYZ[ V\PU]QV^W __Z`a]R U]QRTXbcOPAR[
25. !"#$!% &'()*+,-./01 23456/' 789:;$!<=> ?@A%2345B)C7DEFG
26. !"#$%&'()*+,-./01 234/56789$:,;<=>
27. !"#$%&'()*+,-./01 18"ք۾ʹ͸͍ͳ͍ͱࢥ͍·͕͢ɺϚϧνϓϥοτϑΥʔϜͱฉ͍ͯ 'MVUUFSͩͷ3FBDU/BUJWFͩͷ6OJUZɺ3VTUͳͲ͕಄ʹු͔Μͩํʜ 234/56789$:,;<=>
28. !"#$%&'()*+,-./01 18"ք۾ʹ͸͍ͳ͍ͱࢥ͍·͕͢ɺϚϧνϓϥοτϑΥʔϜͱฉ͍ͯ 'MVUUFSͩͷ3FBDU/BUJWFͩͷ6OJUZɺ3VTUͳͲ͕಄ʹු͔Μͩํʜ 23/456789:; <=>?@A/:; BCD/2EFGH$I,JKLM
29. !"#$%&'()*+,-./ ͜Ͳ΋͸ɺ(PPHMF΍"QQMFͷ৹ࠪ࣌ؒ·ͯ͠CVJME࣌ؒͳΜͯؔ܎ͳ͍Μ Ͱ͢ɺ଴ͬͯ͘Ε·ͤΜɻ ʰ΄͍͠ʱͬͯݴͬͨΒεάͳ͍ͱμϝͳΜͰ͢ɻ ਌ͷ໨ઢͰ͚͢ͲɺωΠςΟϒͱ͔ඇωΠςΟϒͱ͔ίʔυ͕Ԛ͍ͱ͔ ؔ܎ͳ͍ΜͰ͢ɻ 01234567(89:;<=>
30. !"#$%&'()*+,-./ ͜Ͳ΋͸ɺ(PPHMF΍"QQMFͷ৹ࠪ࣌ؒ·ͯ͠CVJME࣌ؒͳΜͯؔ܎ͳ͍Μ Ͱ͢ɺ଴ͬͯ͘Ε·ͤΜɻ ʰ΄͍͠ʱͬͯݴͬͨΒεάͳ͍ͱμϝͳΜͰ͢ɻ ਌ͷ໨ઢͰ͚͢ͲɺωΠςΟϒͱ͔ඇωΠςΟϒͱ͔ίʔυ͕Ԛ͍ͱ͔ ؔ܎ͳ͍ΜͰ͢ɻ ɾ޿ࠂ͕ͳͯ͘ɺ͋Δఔ౓ͷ͜ͱ͕Ͱ͖Δɻ ɾ͍ͭ๞͖Δ͔෼͔Βͳ͍෺ͷͨΊʹԁग़͢ͷ͸੯͍͠ʂ ɾλϒϨοτͰ΋εϚϗͰʰϙΠͬʂʱͱεάʹॻ͚Δ͜ͱʂ ɾ෼Ͱ΋෼Ͱ΋ɺ੩Իͳۭ͕ؒੜ·ΕΔ͜ͱɻ 超⼤事 01234567(89:;<=>
31. !"#$%&'()*+,-./0 ฐࣾ #SFXVT ͸׬શϦϞʔτϫʔΫͷձࣾͰ͢ɻΦϯϥΠϯͷϛʔςΟ ϯάπʔϧͱͯ͠(PPHMF
    .FFUΛ࢖༻͍ͯ͠·͢ɻ ·ͨखܰʹϥΠϒ഑৴͕Ͱ͖Δ"MJWFͱ͍͏πʔϧΛ։ൃ͍ͯ͠·͢ɻ ͦͷΦϯϥΠϯϛʔςΟϯάதʰը໘γΣΞதʹϝϞॻ͖͍ͨ͠ͳ͊ʱ ͱࢥͬͯ೥݄ʹʰ΀ΕͥΜͯΜ͠ΐΜʱͱ͍͏(PPHMF
    $ISPNF ͷ֦ுػೳΛϦϦʔεͨ͠ͷͰ͕͢ɺϩʔΧϧʹͦͷ+BWB4DSJQUͷίʔυ ͕͋ͬͨͷͰͦΕΛྲྀ༻͠·ͨ͠ɻ 123.456789:&;<=>
32. !"#$%&'()!"*+, લड़͠·͕ͨ͠ɺ͜ͱͷൃ୺͸ඈߦػͷதͳͷͰ׬શΦϑϥΠϯ؀ڥͰ͢ɻ 1$Λ৽ௐͨ͠ͷ΋͋ΓOQN
    ZBSO
    UZQFTDSJQU
    TBTT ࢖͑·ͤΜʜ -./*012+3456789:
33. !"#$%&'()!"*+, લड़͠·͕ͨ͠ɺ͜ͱͷൃ୺͸ඈߦػͷதͳͷͰ׬શΦϑϥΠϯ؀ڥͰ͢ɻ 1$Λ৽ௐͨ͠ͷ΋͋ΓOQN
    ZBSO
    UZQFTDSJQU
    TBTT ࢖͑·ͤΜʜ ͦΕͰ΋։ൃͰ͖Δͷ͕ -./*012+3456789:
34. !"#$%&'()!"*+, લड़͠·͕ͨ͠ɺ͜ͱͷൃ୺͸ඈߦػͷதͳͷͰ׬શΦϑϥΠϯ؀ڥͰ͢ɻ 1$Λ৽ௐͨ͠ͷ΋͋ΓOQN
    ZBSO
    UZQFTDSJQU
    TBTT ࢖͑·ͤΜʜ ͦΕͰ΋։ൃͰ͖Δͷ͕ -./ 01 *2 -./*345+6789:;<=
35. !"#$%&'"()* ෼ͰͰ͖ͨͱ͸ݴ͑ϓϩτλΠϓɺΫΦϦςΟΛ͋Δఔ౓·Ͱ্͛Δ ͷʹ͸ͦΕͳΓʹۤ࿑͠·͢ɻ ඈߦػ಺Ͱͷ࡞੒ޙɺ࣮Ոʹؼলͯ͠΋վྑ͠·ͨ͠ɻ ݸਓ։ൃͷΑ͍఺͸ͣͬͱ։ൃ͠ଓ͚ΒΕΔ͜ͱͰ͕͢ଥڠ΋ඞཁͰ͢ɻ ࣍ทΑΓ)5.-ͩͱ໰୊ͳ͔͕ͬͨ18"ʹ͚ͨ࣌ͩ͠ʹى͜Γۤ࿑ͨ͠ ఺ͱଥڠͨ͠఺Λͭͣͭ঺հ͠·͢ɻ ʢଞʹ΋5JQT͕͋ΔͷͰ͕࣌ؒ͢ͷ౎߹΋͋ΔͷͰৄࡉ͸2JJUBʹهࡌ͍ͯ͠·͢ɻʣ ༨ஊͰ່͕͕͢Ұ൪ؾʹೖͬͨػೳ͸ϝχϡʔදࣔɾඇද͕ࣔ੾ΓସΘΔ 6*ͷ෦෼Ͱͨ͠ɻ +,-./0123456789:
36. !"#$%& 18"ʹͳΔͱIUNMDBOWBT͕ಈ͔ͳ͍ ը૾อଘػೳͱͯ͠IUNMDBOWBTΛ࢖͍ͬͯͨΜͰ͕͢ɺ͜Ε͕18"ʹ ͳΔͱਖ਼ৗʹಈ࡞͠·ͤΜͰͨ͠ɻ ௨৴पΓͰ৭ʑ໰୊͕͋ΔΜͩΖ͏ͳ͊ͱਪଌ͍ͯ͠·͢ɻ ৄ͘͠ϩδ οΫݟͯ·ͤΜ͕ɺଟ෼Ұ୴+4Ͱ֘౰ͷ63-ͷDTT΍ΒؚΉ΋ͷΛ%-͠ ͯͦΕΛݟ͑ͳ͍EPNʹల։ͯ͠DBOWBT͔Βը૾Խͯ͠Δͦͷ௨৴෦෼ ͕͏·͍͔͘ͳ͍ͷͰ͸ʁ Ͱɺ݁ہDBOWBTΛෳ਺༻ҙͯͦ͠ΕΛNFSHFͱ͍͏͔KPJO ͢ΔΑ͏ͳ ϩδοΫʹ͠·ͨ͠ɻ '()*+,-./01234$5
37. !"#$%& "OESPJEͷΈ18"Ͱը໘αΠζ͕औಘͰ͖ͳ͍ ͓ֆඳ͖ػೳ͸DBOWBTͱ͍͏ػೳΛ࢖࣮ͬͯ૷͍ͯ͠·͕͢ɺDBOWBTͷ ੑ্࣭ɺը໘ҰഋͷඳըྖҬΛ࣋ͭҝʹ͸)5.-ཁૉͷXJEUIͱIFJHIUͰ ࢦఆ͠ͳ͚Ε͹ͳΓ·ͤΜɻ DTTͰ͸͓͔͘͠ͳΔ ͜ΕΛ௨ৗͷϒϥ΢βͷΈ࢖༻͢Δ)5.-൛Ͱ͸+4ͰCPEZͷPOMPBE࣌ʹ มߋ͢ΔΑ͏ʹ͍ͯͨ͠ͷͰ͕͢ɺ"OESPJEͷ18"Ͱىಈ͢Δͱɺඳը ྖҬ͕ ͙Β͍ͳͬͯ͠·ͬͯ࢖͍෺ʹͳΓ·ͤΜͰͨ͠ɻ ৭ʑࢼͯ͠ΈͨΜͰ͕͢ɺ໘౗ͩͬͨͷͰ"OESPJEͷ৔߹͸Nඵܦͬ ͔ͯΒऔಘ͢ΔϩδοΫʹมߋ͠·ͨ͠ɻ '()*+,-./01234$5
38. !"#$%&'()*+,-./0 123/45 3FUJOBରԠ J1IPOFͳͲʹݟΒΕΔ3FUJOBσΟεϓϨΠΛ͸͡Ί࠷ۙͷλϒϨοτ΍ εϚʔτϑΥϯ͸෺ཧతͳղ૾౓ͱ࿦ཧతͳղ૾౓͕ഒҎ্ҧ͍·͢ɻ ຊདྷͰ͋Ε͹ɺ֤୺຤ͷEQJʹԠͯ͡DBOWBTͷXJEUIɺIFJHIUΛഒͳͲʹ ͯ͠DTT౳Ͱʹ͢Δͷ͕ৗ౟۟Ͱ͢ɻ ͨͩɺ࣮ࡍʹ։ൃ͍ͯ͠Δ࣌શ͘಄ʹͳ͘ɺ͔ͳΓऴ൫ʹͳͬͯʮ͋ɺ δϟΪͬͯΔΘʜʯͱͳͬͨͷͰ͕͢ɺ͜ͷ࣌఺Ͱݴ͍ग़ͬ͠΃ͷଉࢠ͕ ຬ଍ͯ͠࢖͍ͬͯͨඇྗͳ"OESPJE୺຤ͩͱΧΫͭ͘༧ײ͕ͨ͠ͷͰݟ ૹΓ·ͨ͠ɻ
39. !"#$%& 6OEP3FEP༻ʹσʔλΛQBUIԽ͢Δ ࠓճ͸6OEP3FEPػೳͷͨΊʹDBOWBTͷόΠφϦ৘ใΛUP%BUB63-Խ ͨ͠΋ͷΛMPDBM4UPSBHFʹ഑ྻͰಥͬࠐΉͱ͍͏ແཧ໼ཧͳ࣮૷ʹ͠·͠ ͨɻ ཤྺ৘ใ͕ංେԽ͢Δͱॏ͘ͳͬͨΓ͢Δ΋ͷ͋ΔͷͰɺ͜Ͳ΋͕ࣗ༝ؾ ··ʹ࢖͏΋ͷͱͯ͠͸ඍົͳ࣮૷Ͱ͢ɻ ຊདྷͰ͋Ε͹'BCSJDKTͳͲΛ࢖ͬͯQBUIԽͨ͠࠲ඪσʔλΛ࣋ͭͷ͕Α ͍ͱࢥ͍·͕͢ɺ։ൃ౰࣌ඈߦػͷதͰ࢖͑ͳ͔ͬͨͷͰɺͦͷ··ʹ͠ ͪΌ͍·ͨ͠ʜ '()*+,-./01234$5
40. !"# 8"4.ͱ͔5ZQF4DSJQUͱ͔5VSCPQBDLͱ͔໨·͙Δ͍͠8FCGSPOUք۾ Ͱ͕͢ɺࣗ෼ͷΞΠσΟΞΛ؆୯ʹɺTBTT΍NJOJGZؚΊͨCVJME΋ͳ͠ʹ ࠷଎ͰϚϧνϓϥοτϑΥʔϜͰܗʹͰ͖Δ18"͸ϓϩτλΠϓʹݶΒ ͣχʔζ͸͋Δͱࢥ͍·͢ɻ ΋ͪΖΜۀ຿ɾϏδωεͰ࢖༻͢Δ৔߹ʹ͸৭ʑͳ͜ͱΛߟྀ͠ͳ͚Ε͹ ͳΒͳ͍ͱࢥ͍·͢͠ϋϚΓॴ͸͋Γ·͕͢ϋϚΓॴ͸ͲΜͳݴޠͰ΋ϑ ϨʔϜϫʔΫͰ΋։ൃʹ͸෇͖෺Ͱ͢ɻ ݸਓతʹ͸࡞Δָ͠͞Λ๨Εͣʹ͜Ε͔Β΋18"Λͭͷબ୒ࢶͱͯ͠࢖ ༻͍͖͍ͯͨ͠ͱࢥ͍·͢ɻ ʢ#SFXVTͰ͸ͦΜͳ΋ͷͮ͘Γ͕޷͖ͳํΛืू͍ͯ͠·͢ˡએ఻ʣ ࣮ࡍͷ੍࡞෺͸େਓ൛ɺ͜Ͳ΋൛Λ࡞͍ͬͯ·͢ɻ ؾʹͳͬͨํ͸ΞΫηεͯ͠Έ͍ͯͩ͘͞ɻ $%&'()*+,-./0123
41. !"#$%&'() ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ *+),-./012345678