TileCloudの裏側

和歌山のITコミュニティ Wacker での発表資料です。

Transcript

1. 5JMF$MPVEͷཪଆ
   2019/05/19
   Takayuki Miyauchi
   

   View Slide

2. 5JMF$MPVEͱ͸ʁ
   ΢ΣϒαΠτ΍ΞϓϦʹ૊ΈࠐΉͨΊͷ஍ਤͷϗεςΟϯάαʔϏεɻ
   ஍ਤαʔϏεͰ͸ͳ͍ͷͰɺಠࣗʹҐஔ৘ใ΍$PPLJFͳͲͷݸਓ৘ใΛѻ͍·ͤΜɻ
   ѻ͏ͷ͸஍ਤ༻ͷʮλΠϧʯͱͦΕΛදࣔ͢ΔͨΊͷ"1*ɻ
   

   View Slide

3. ݱࡏ͸·ͩϓϥΠϕʔτϕʔλͰ͢ɻɻɻ
   ݄̓ॳ०ʹϩʔϯν͢Δ༧ఆͰ͢ɻ
   

   View Slide

4. ΢Σϒ஍ਤͷ࢓૊Έ
   

   View Slide

5. ϝϧΧτϧਤ๏
   ஍ٿّΛYϐΫηϧͷਖ਼ํܗͰ෼ׂɻ
   ζʔϜϨϕϧ্͕͕ͭΔͨͼʹ෼ׂ͞Ε͍ͯ͘ɻ
   ਖ਼ํܗͷը૾͕ฒͿ͜ͱ͔ΒʮλΠϧʯͱݺ͹ΕΔɻ
   ʢ͜ͷը૾͸஍ཧӃ஍ਤΛ࢖༻͍ͯ͠·͢ɻʣ
   

   View Slide

6. ϥελʔλΠϧͱ

   ϕΫτϧλΠϧ
   

   View Slide

7. ϥελʔλΠϧ
   w ஍ਤ༻ͷը૾ʹ1/(·ͨ͸+1&(ϑΥʔϚοτ͕࢖༻͞Ε
   ͍ͯΔɻ
   w αʔόʔαΠυͰը૾Λಈతʹੜ੒͢Δඞཁ͕͋Δɻ
   

   View Slide

8. ϕΫτϧλΠϧ
   w +40/ΛόΠφϦʹͨ͠੩తͳϑΝΠϧϑΥʔϚοτɻ
   w ΫϥΠΞϯταΠυͰ8FC(-Λ࢖༻ͯ͠ϨϯμϦϯάɻ
   

   View Slide

9. 5JMF$MPVE͸ϕΫτϧλΠϧ
   w දݱྗ͕๛͔Ͱ͖Ε͍ɻϢʔβʔʹΑΔσβΠϯͷΧελ
   ϚΠζ͕ൺֱత؆୯ɻ
   w σʔλྔ͕͍ܰɻ
   w ͻͱͭͻͱͭͷ஍෺͕࣋ͭΦϒδΣΫτʹ+BWB4DSJQU͔
   ΒΞΫηε͢Δ͜ͱ͕Մೳɻ
   w ΫϥΠΞϯταΠυͷෛՙ͕ߴΊɻ
   w ϒϥ΢βґଘͱͷઓ͍ɻɻɻ
   

   View Slide

10. ࢓༷
    

    View Slide

11. σʔλ
    w /BUVSBM&BSUI
    w 0QFO4USFFU.BQ
    w ͦͷଞ
    ϕΫτϧλΠϧͷ৔߹ɺઙ͍ζʔϜϨϕϧͰ͸04.ͷσʔλ͸ϙΠϯτͷ਺͕ଟ͗ͯ͢

    ϨϯμϦϯάʹۃ୺ʹ͕͔͔࣌ؒͬͯ͠·͏ͨΊɺద౓ʹলུ͞Εͨσʔλ͕ඞཁɻ
    

    View Slide

12. class="tilecloud"
    data-lat="35.65810422222222"
    data-lng="139.74135747222223"
    data-zoom="9"
    data-gesture-handling="off"
    data-geolocate-control="on"
    >೔ຊܦҢ౓ݪ఺
    Embed API
    w .BQCPY(-+4ʹޓ׵
    w ೔ຊޠ΁ͷϩʔΧϥΠθʔγϣϯ
    w ࠃࡍԽ΁ͷରԠ
    w )5.-͚ͩͰ஍ਤͷઃஔˍΧελϚΠζ͕Մೳɻ
    

    View Slide

13. Πϯϑϥ
    

    View Slide

14. w λΠϧ
    w $MPVE'SPOU-BNCEB!&EHF4
    w &NCFE"1* +BWB4DSJQU"1*
    
    w "1*(BUFXBZ-BNCEB%ZOBNP%#
    w μογϡϘʔυ
    w "1*(BUFXBZ-BNCEB%ZOBNP%#
    w ϑϩϯτΤϯυʹ͸/FUMJGZ
    Serverless
    

    View Slide

15. ެࣜαΠτ΍ϒϩάɺυΩϡϝϯταΠτ͸/FUMJGZ΍
    (JU)VC1BHFTΛ࢖༻ɻ
    Netlify
    

    View Slide

16. $JSDMF$*Λར༻ͯ͠ɺ֤छ"1*ɺλΠϧͷ഑৴ɺ
    +BWB4DSJQU"1*ͳͲͷςετΛఆظతʹ࣮ߦɻ
    CircleCI
    

    View Slide

17. ՝୊
    

    View Slide

18. w ϫʔΫϑϩʔͷվળͰλΠϧͷαΠζΛ൒෼͙Β͍ʹͰ͖
    Δ͜ͱ͕Θ͔ͬͯ͠·ͬͨɻɻɻ
    w ϨϯμϦϯά଎౓Λ΋ͬͱ଎͍ͨ͘͠ɻ
    w JO-Oɻ͍Ζ͍ΖδϨϯϚɻ
    ΋ͬͱ଎͘
    ๲େͳσʔλྔΛऔΓѻ͏ͨΊଐਓੑ͕ߴ͘ͳΓ͕ͪɻ
    ͍Ζ͍ΖͳϨΠϠʔͰͷࣗಈԽ͕ͱͯ΋ॏཁɻ
    

    View Slide

19. w (FP+40/Λ࡞੒͠ެ։ɺڞ༗Ͱ͖ΔΑ͏ʹ͍ͨ͠ɻ
    w ελΠϧͷΤσΟλʔ͕΄͍͠ɻ(FP+40/ͱಉ༷ʹϢʔ
    βʔؒͰڞ༗Ͱ͖ΔΑ͏ʹ͍ͨ͠ɻ
    μογϡϘʔυ
    

    View Slide

20. w ओͳίετ͸సૹྉۚɻ
    w αʔόʔϨεͳͷͰݻఆίετ͸΄ͱΜͲͳ͍ɻ
    w ҙ֎ͱେ͖͍ͷ͸9999ɻ
    ίετ
    

    View Slide

21. 0QFO4PVSDJOH
    

    View Slide

22. w 5JMF$MPVEͷ+BWB4DSJQU"1*͸ΦʔϓϯιʔεͰެ։͠
    ͍ͯ·͢ɻ
    Embed API
    

    View Slide

23. w .BQCPY(-+4༻ͷϓϥάΠϯͳͲɺ݅ͷϓϩδΣΫ
    τΛެ։தɻ
    github.com/tilecloud
    

    View Slide

24. ࢼͯ͠ΈΑ͏
    

    View Slide

25. w :063"1*,&:͸ɺςετ༻ͷ"1*ΩʔͰ͢ɻ
    w ϩʔΧϧ؀ڥ͓ΑͼQMBZDPEFJPͰڐՄ͍ͯ͠·͢ɻ
    YOUR-API-KEY
    

    View Slide

26. EPDTUJMFDMPVEJP
    

    View Slide