FOSS4G Tokyo 2017 Core-day: tileserver-glで始めるMapbox Vector Tile 配信

https://www.osgeo.jp/events/foss4g-2017/foss4g-2017-tokyo/foss4g-2017-tokyo-coreday#jirei1-2
これのやつ

Transcript

1. '044(5PLZP$PSFEBZ
   UJMFTFSWFSHMͰ࢝ΊΔ.BQCPY
   7FDUPS5JMF഑৴
   5BSP.BUTV[BXB !TNFMMNBO
   
   (FPSFQVCMJD
   04(FPࡒஂ೔ຊࢧ෦0QFO4USFFU.BQ
   'PVOEBUJPO+BQBO೔ຊ6/*9Ϣʔβձ
   

   View Slide

2. ࣗݾ঺հ
   w(FPSFQVCMDγχΞσϕϩούʔ
   wϓϩάϥϚͰ͢
   wλΠϧٕज़͕޷͖Ͱ͢
   wλΠϧࡾܑఋͷҰຯ
   w৭ʑॴଐͯ͠·͢
   w04(FPࡒஂ೔ຊࢧ෦
   w04.'+
   w೔ຊ6/*9Ϣʔβձ
   w.P[JMMB$PNNVOJUZJO+BQBO
   wϒϨΠΫίΞΫϥελ
   

   View Slide

3. ٕज़ झຯؚΉ
   
   w λΠϧٕज़ ϕΫλλΠϧɺϥελλΠϧɺήʔϜλΠϧ
   
   w 0QFO4USFFU.BQ .BQQJOH σʔλղੳπʔϧͳͲ
   
   w 1SPHSBNNJOH 3VCZ+BWBTDSJQU 3FBDU/BUJWF
   
   1ZUIPO
   
   w #SPXTFS
   w 6/*9-JOVY%PDLFSFUDʜ
   w *O%FTJHO/FX
   

   View Slide

4. (FPSFQVCMJD
   w ஍ཧܥͷ࠷ޙͷࡆͱ͔ݴΘΕͯΔมͳձࣾ
   w ٕज़ऀத৺Ͱ͍Ζ͍Ζ΍ͬͯ·͢
   w λΠϧͷίϯαϧ΍։ൃ
   w εϚϗΞϓϦ΍αʔόͷ։ൃ
   w QH3PVUJOHͷ։ൃ΍ϧʔςΟϯάٕज़Λݩʹͨ͠ί
   ϯαϧͱ͔։ൃ
   w ͓࢓ࣄ͍ͩ͘͞
   

   View Slide

5. ࠓ೔ͷ͓୊
   w UJMFTFSWFSHMٴͼ.BQCPY(-ͷ֓ཁ
   w .BQCPY7FDUPS5JMFTͷ഑৴ͷͨΊͷઃఆ
   w ·ͱΊ
   

   View Slide

6. UJMFTFSWFSHMٴͼ
   .BQCPY(-ͷ֓ཁ
   

   View Slide

7. w .BQCPY(-FDPTZTUFNʹରԠͨ͠ϑΝΠϧٴͼ3BTUFS
   5JMF 1/(ը૾
   ͷ഑৴Λߦ͏αʔό
   w ̍ͭͷαʔόͰ7FDUPS3BTUFSͷ഑৴͕Մೳ
   w ,MPLBO5FDIOPMPHJFT͕ఏڙͯ͠Δ
   

   View Slide

8. ͪΐ͍ͱσϞ
   

   View Slide

9. w .BQCPY7FDUPS5JMF
   w .BQCPY(-4UZMF
   w 'POU
   w 4QSJUF*NBHF
   .BQCPY(-FDPTZTUFN
   3BTUFS*NBHF
   

   View Slide

10. .BQCPY(-FDPTZTUFN
    w .BQCPY4UZMF4QFDJpDBUJPO ҎԼ.BQCPY(-4UZMF
    
    ٴͼ.BQCPY7FDUPS5JMF4QFDJpDBUJPO ҎԼ.BQCPY
    7FDUPS5JMF
    Λར༻ͨ͠஍ਤදࣔϥΠϒϥϦ܊
    w .BQCPY(-/BUJWF0QFO(-Λ࢖࣮ͬͨ૷ $
    
    w .BQCPY(-+48FC(-Λ࢖࣮ͬͨ૷ +BWB4DSJQU
    
    

    View Slide

11. IUUQTHJUIVCDPNNBQCPYNBQCPYHMOBUJWF
    

    View Slide

12. .BQCPY(-
    w .BQCPY(-Ͱ͸ҎԼͷཁૉΛ͋Θͤͯදࣔ͢Δ
    w .BQCPY(-4UZMF +40/ϑΝΠϧ
    
    w 5JMF+40/ +40/ϑΝΠϧ
    
    w .BQCPY7FDUPS5JMF 1SPUPDPM#V⒎FSܗࣜ
    
    w ϑΥϯτ 1SPUPDPM#V⒎FSܗࣜ
    
    w 4QSJUFը૾ 1/(ϑΝΠϧ
    
    w ଞʹ΋(FP+40/ͱ͔3BTUFSλΠϧ΋࢖͑Δ
    

    View Slide

13. ੩తͳ഑৴
    w .BQCPY(-Ͱར༻͢Δཁૉͷ͏ͪɺϑΥϯτҎ֎͸શͯ
    ੩తͳ഑৴͕Մೳ
    w ෳ਺ϑΥϯτΛࢦఆ͍ͯ͠Δ৔߹ʹಈతͳ഑৴͕ඞཁ
    w .BQCPY(-4UZMFͰ̍ͭͷϑΥϯτΛࢦఆ͢Δ৔߹
    ͸UJMFTFSWFSHMΛ࢖͏ඞཁ͕ͳ͍
    

    View Slide

14. 'POUΫΤϦ
    w .BQCPY(-4UZMFͰ͸ෳ਺ͷϑΥϯτΛࢦఆͰ͖Δ͕ɺ
    ϦΫΤετ͕̍ͭʹ·ͱ·Δ
    w ྫhttp://localhost:18888/
    Klokantech%20Noto%20Sans%20Regular,Klokantech%20Noto%20
    Sans%20CJK%20Regular/36096-36351.pbf
    w ্هͰ͸,MPLBOUFDI/PUP4BOT3FHVMBSͱ
    ,MPLBOUFDI/PUP4BOT$+,3FHVMBSΛࢀর
    w ӳޠϑΥϯτͱ$+,ϑΥϯτΛࠞͥΔ࣌ʹӳޠϑΥ
    ϯτΛ༏ઌ͢Δͱ͍͏࢓૊ΈGBJMCBDL
    

    View Slide

15. UJMFTFSWFSHMͷϝϦοτ
    
    w .BQCPY(-ʹར༻͢ΔશͯͷϑΝΠϧͷϗεςΟϯά͕
    Մೳ
    w NCUJMFTͷϝλσʔλ͔Β5JMF+40/ͷࣗಈੜ੒
    w 'POUͷΫΤϦ΁ͷରԠ
    w ϗεςΟϯά͍ͯ͠Δ.BQCPY(-4UZMFϑΝΠϧ͔Β
    3BTUFSը૾ΛϨϯμϦϯάͯ͠ग़ྗ͕Մೳ
    w UJMFTFSWFSHM͸.BQCPY(-Λ಺แ͍ͯ͠Δ
    

    View Slide

16. UJMFTFSWFSHMͷϝϦοτ
    
    w .BQCPY(-4UZMFΛڞ༗Ͱ͖ΔͨΊɺUJMFTFSWFSHM͔Β
    ಉ͡ελΠϧͷ7FDUPS.BQ3BTUFS.BQΛఏڙՄೳ
    w ྫ͋͠ΘͤͷଜͩΕͰ΋φϏ εϚʔτϑΥϯΞϓϦ
    
    ͷ࣮૷
    w ؅ཧը໘ٴͼJ04 8FCWJFX
    .BQCPY(-+4
    w "OESPJE 8FCWJFX
    -FBqFUKT
    

    View Slide

17. .BQCPY7FDUPS5JMFT
    ͷ഑৴ͷͨΊͷઃఆ
    

    View Slide

18. ඞཁͳ΋ͷ͸ҎԼͷ΋ͷ
    w UJMFTFSWFSHMͷDPOpHϑΝΠϧ
    w .BQCPY7FDUPS5JMFΛ.#5JMFTܗࣜʹͨ͠΋ͷ
    w .BQCPY(-4UZMF
    w ϑΥϯτΛ1SPUPDPM#V⒎FSܗࣜʹͨ͠΋ͷ
    w 4QSJUFը૾
    

    View Slide

19. UJMFTFSWFSHMͷDPOpH
    w UJMFTFSWFSHMͰ͸ىಈͨ͠σΟϨΫτϦʹDPOpHKTPOͱ
    ͍͏ϑΝΠϧ͕͋ΔͱࣗಈతʹಡΈࠐΉ
    w DΦϓγϣϯͰ΋ࢦఆՄೳ
    w DPOpHKTPOͰ͸֤ϑΝΠϧͷҐஔɺ3BTUFSը૾ͷઃఆɺ
    .BQCPY7FDUPS5JMFͷઃఆ΍.BQCPY(-4UZMFͷࢦఆ
    Λهड़͢Δ
    

    View Slide

20. ྫ
    {
    "options": {
    "paths": {
    "root": "",
    "fonts": "fonts",
    "sprites": "sprites",
    "styles": "styles",
    "mbtiles": ""
    },
    "formatQuality": {
    "jpeg": 80,
    "webp": 90,
    "pngQuantization": false,
    "png": 90
    },
    "maxSize": 2048,
    "pbfAlias": "pbf",
    "serveAllFonts": false
    },
    "styles": {
    "kobe": {
    "style": "kobe.json",
    "tilejson": {
    }
    }
    },
    "data": {
    "japan-vector": {
    "mbtiles": "japan.mbtiles"
    }
    }
    }
    

    View Slide

21. .CUJMFT
    w 0QFO.BQ5JMFT΍UJQQFDBOPFͳͲͰ࡞੒͢Δ
    w 0QFO.BQ5JMFT͸ࡢ೔ͷϋϯζΦϯࢿྉΛࢀߟ
    w IUUQTHPPHMX[T
    w UJQQFDBOPF͸.BQCPY͕࡞੒͍ͯ͠Δ(FP+40/ͳͲ
    Λ.BQCPY7FDUPS5JMFʹม׵͢Δπʔϧ
    w IUUQTHJUIVCDPNNBQCPYUJQQFDBOPF
    w NCUJMFTϑΝΠϧ͸DPOpHͷEBUBͰࢀরΛهड़͢Δ
    

    View Slide

22. .BQCPY(-4UZMF
    w .BQVUOJLͰ࡞੒͢Δ
    w IUUQNBQVUOJLDPN
    w .BQCPY4UVEJPͰ΋Ͱ͖Δ͔΋͠Εͳ͍͕ະݕূ
    w ঎༻πʔϧͳΜͰʜ
    w ग़ྗͨ͠+40/Λগ͠खΛՃ͑Δඞཁ͕͋Δ ޙड़
    
    w .754UZMFS஌Βͳ͔ͬͨʜPS[
    

    View Slide

23. ϑΥϯτ
    
    w HFOGPOUHMΛ࢖ͬͯ5SVF5ZQF'POUͳͲΛ1SPUPDPM
    #V⒎FSܗࣜʹม׵͢Δ
    w IUUQTHJUIVCDPNTBCBTHFOGPOUHM
    w PQFONBQUJMFTGPOUTͷHFOFSBUFTIΛࢀরʹ͢Δͱྑ
    ͍
    w IUUQTHJUIVCDPNPQFONBQUJMFTGPOUTCMPC
    NBTUFSHFOFSBUFTI
    

    View Slide

24. ϑΥϯτ
    
    w ࣗ෼Ͱ࡞Δͷ͕໘౗ͳΒHJUIVC͔Β͖࣋ͬͯͯ͠·͏
    w ྫIUUQTHJUIVCDPNTNFMMNBOGPOUT
    w .ϑΥϯτͳͲΛ࢖͑ΔΑ͏ʹͯ͠ΔϨϙδτϦ
    git clone https://github.com/smellman/fonts.git fonts
    cd fonts
    git checkout -b gh-pages origin/gh-pages
    rm -fr .git
    

    View Slide

25. 4QSJUFը૾
    
    IUUQTHJUIVCDPNPQFONBQUJMFTPTNCSJHIUHMTUZMFCMPCHIQBHFT
    TQSJUFYQOH
    w ͍ΘΏΔ$444QSJUFΈ͍ͨͳ΍ͭ
    w 4QSJUFը૾+40/ͷίϯϑΟάͷ૊Έ߹ΘͤͰ໊લ
    ղܾΛ͢Δ
    w TQSJUFQOHͱTQSJUFKTPOͱ͍͏෩ʹಉ໊͡લͰ༻ҙ
    

    View Slide

26. 4QSJUFը૾
    
    w ࡞੒͸TQSJUF[FSPٴͼTQSJUF[FSPDMJͰߦ͏
    w IUUQTHJUIVCDPNNBQCPYTQSJUF[FSP
    w IUUQTHJUIVCDPNNBQCPYTQSJUF[FSPDMJ
    w TQSJUF[FSPDMJͷҾ਺͸ग़ྗೖྗͷॱͳͷͰ஫ҙ
    npm install -g @mapbox/spritezero-cli
    mkdir sprite
    cd sprite
    spritezero sprite ~/hogehoge/icons
    spritezero sprite@2x ~/hogehoge/icons
    

    View Slide

27. .BQCPY(-4UZMFͷ഑ஔ
    w .BQCPY(-4UZMFͷ+40/ϑΝΠϧΛUJMFTFSWFSHMʹ഑
    ஔ͢Δ࣌͸ҎԼͷ̏ͭΛมߋ͢Δ
    w TPVSDFTͷVSMΛ5JMF+40/ͷҐஔΛlNCUJMFT\JE^l
    ͱ͢Δ
    w TQSJUFͷࢀরΛϑΝΠϧ໊ͷlKTPOzΛൈ͍ͨ΋ͷʹ
    ͢Δ
    w HMZQITΛ\GPOUTUBDL^\SBOHF^QCGʹมߋ͢Δ
    

    View Slide

28. ͋ͱ͸ىಈ
    w EPDLFSͷ؀ڥ͕͋Ε͹EPDLFSSVOͰྑ͍
    w EPDLFSSVOJUSNW QXE
    EBUBQ
    LMPLBOUFDIUJMFTFSWFSHM
    w EPDLFSDPNQPTFͰ΍Δͱ͍Ζ͍ΖͰ͖Δ
    

    View Slide

29. ഑৴ͷͨΊʹ
    w EPDLFSDPNQPTFͰ$16ίΞ෼UJMFTFSWFSHMΛىಈͯ͠ɺ
    ϥελͷΞΫηε΁WBSOJTIDBDIFΛ͔·͢ͱ͍͏ख͕Φ
    εεϝ
    w OHJOYͰৼΓ෼͚Λ͢Δ
    w 44-ΞΫηε͕ඞཁͳΒ9'PSXBSEFE1SPUPϔομΛ
    IUUQTʹ͓ͯ͘͠
    

    View Slide

30. UJMFTFSWFSHM
    UJMFTFSWFSHM
    UJMFTFSWFSHM
    UJMFTFSWFSHM
    WBSOJTIDBDIF
    1PSU
    1PSU
    1PSU
    1PSU
    1PSU
    

    View Slide

31. OHJOYͷྫ
    location / {
    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://localhost:8080;
    }
    location ~ ^/.*\.png {
    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://localhost:6081;
    }
    

    View Slide

32. EPDLFSDPNQPTF
    w EPDLFSDPNQPTFZNMͷαϯϓϧ͸HJTUʹ͓͍ͯ·͢
    w IUUQTHJTUHJUIVCDPNTNFMMNBO
    FFGBDDFFGBCGBB
    w DPOpHKTPOΛ࡞ͬͨΒҎԼͷίϚϯυҰൃͰىಈ
    w EPDLFSDPNQPTFVQE
    w ؆୯Ͱ͢Ͷʂ
    

    View Slide

33. ·ͱΊ
    

    View Slide

34. w ϑΥϯτͷGBJMCBDLʹରԠ͢Δʹ͸UJMFTFSWFSHM͕ඞཁ
    w ഑৴͍ͨ͠΋ͷʹ߹ΘͤͯUJMFTFSWFSHMΛ࢖͏͔Ͳ͏͔
    Λݕ౼͠·͠ΐ͏
    w 1PTU(*4͔Β45@"4.75Λ࢖ͬͯग़͢ํ๏΋͋ΔΑʂ
    w ϥελը૾͸ϨϯμϦϯάʹίετ͕͔͔ΔͷͰԿ͔͠Β
    Ωϟογϡ͠·͠ΐ͏
    

    View Slide