Slide 1
Slide 1 text
'044(5PLZP$PSFEBZ
UJMFTFSWFSHMͰ࢝ΊΔ.BQCPY
7FDUPS5JMF৴
5BSP.BUTV[BXB !TNFMMNBO
(FPSFQVCMJD
04(FPࡒஂຊࢧ෦0QFO4USFFU.BQ
'PVOEBUJPO+BQBOຊ6/*9Ϣʔβձ
Slide 2
Slide 2 text
ࣗݾհ
w(FPSFQVCMDγχΞσϕϩούʔ
wϓϩάϥϚͰ͢
wλΠϧٕज़͕͖Ͱ͢
wλΠϧࡾܑఋͷҰຯ
w৭ʑॴଐͯ͠·͢
w04(FPࡒஂຊࢧ෦
w04.'+
wຊ6/*9Ϣʔβձ
w.P[JMMB$PNNVOJUZJO+BQBO
wϒϨΠΫίΞΫϥελ
Slide 3
Slide 3 text
ٕज़ झຯؚΉ
w λΠϧٕज़ ϕΫλλΠϧɺϥελλΠϧɺήʔϜλΠϧ
w 0QFO4USFFU.BQ .BQQJOH
σʔλղੳπʔϧͳͲ
w 1SPHSBNNJOH 3VCZ+BWBTDSJQU 3FBDU/BUJWF
1ZUIPO
w #SPXTFS
w 6/*9-JOVY%PDLFSFUDʜ
w *O%FTJHO /FX
Slide 4
Slide 4 text
(FPSFQVCMJD
w ཧܥͷ࠷ޙͷࡆͱ͔ݴΘΕͯΔมͳձࣾ
w ٕज़ऀத৺Ͱ͍Ζ͍Ζͬͯ·͢
w λΠϧͷίϯαϧ։ൃ
w εϚϗΞϓϦαʔόͷ։ൃ
w QH3PVUJOHͷ։ൃϧʔςΟϯάٕज़Λݩʹͨ͠ί
ϯαϧͱ͔։ൃ
w ͓ࣄ͍ͩ͘͞
Slide 5
Slide 5 text
ࠓͷ͓
w UJMFTFSWFSHMٴͼ.BQCPY(-ͷ֓ཁ
w .BQCPY7FDUPS5JMFTͷ৴ͷͨΊͷઃఆ
w ·ͱΊ
Slide 6
Slide 6 text
UJMFTFSWFSHMٴͼ
.BQCPY(-ͷ֓ཁ
Slide 7
Slide 7 text
w .BQCPY(-FDPTZTUFNʹରԠͨ͠ϑΝΠϧٴͼ3BTUFS
5JMF 1/(ը૾
ͷ৴Λߦ͏αʔό
w ̍ͭͷαʔόͰ7FDUPS3BTUFSͷ৴͕Մೳ
w ,MPLBO5FDIOPMPHJFT͕ఏڙͯ͠Δ
Slide 8
Slide 8 text
ͪΐ͍ͱσϞ
Slide 9
Slide 9 text
w .BQCPY7FDUPS5JMF
w .BQCPY(-4UZMF
w 'POU
w 4QSJUF*NBHF
.BQCPY(-FDPTZTUFN
3BTUFS*NBHF
Slide 10
Slide 10 text
.BQCPY(-FDPTZTUFN
w .BQCPY4UZMF4QFDJpDBUJPO ҎԼ.BQCPY(-4UZMF
ٴͼ.BQCPY7FDUPS5JMF4QFDJpDBUJPO ҎԼ.BQCPY
7FDUPS5JMF
Λར༻ͨ͠ਤදࣔϥΠϒϥϦ܊
w .BQCPY(-/BUJWF0QFO(-Λ࣮ͬͨ $
w .BQCPY(-+48FC(-Λ࣮ͬͨ +BWB4DSJQU
Slide 11
Slide 11 text
IUUQTHJUIVCDPNNBQCPYNBQCPYHMOBUJWF
Slide 12
Slide 12 text
.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λΠϧ͑Δ
Slide 13
Slide 13 text
੩తͳ৴
w .BQCPY(-Ͱར༻͢Δཁૉͷ͏ͪɺϑΥϯτҎ֎શͯ
੩తͳ৴͕Մೳ
w ෳϑΥϯτΛࢦఆ͍ͯ͠Δ߹ʹಈతͳ৴͕ඞཁ
w .BQCPY(-4UZMFͰ̍ͭͷϑΥϯτΛࢦఆ͢Δ߹
UJMFTFSWFSHMΛ͏ඞཁ͕ͳ͍
Slide 14
Slide 14 text
'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
Slide 15
Slide 15 text
UJMFTFSWFSHMͷϝϦοτ
w .BQCPY(-ʹར༻͢ΔશͯͷϑΝΠϧͷϗεςΟϯά͕
Մೳ
w NCUJMFTͷϝλσʔλ͔Β5JMF+40/ͷࣗಈੜ
w 'POUͷΫΤϦͷରԠ
w ϗεςΟϯά͍ͯ͠Δ.BQCPY(-4UZMFϑΝΠϧ͔Β
3BTUFSը૾ΛϨϯμϦϯάͯ͠ग़ྗ͕Մೳ
w UJMFTFSWFSHM.BQCPY(-Λแ͍ͯ͠Δ
Slide 16
Slide 16 text
UJMFTFSWFSHMͷϝϦοτ
w .BQCPY(-4UZMFΛڞ༗Ͱ͖ΔͨΊɺUJMFTFSWFSHM͔Β
ಉ͡ελΠϧͷ7FDUPS.BQ3BTUFS.BQΛఏڙՄೳ
w ྫ͋͠ΘͤͷଜͩΕͰφϏ εϚʔτϑΥϯΞϓϦ
ͷ࣮
w ཧը໘ٴͼJ04 8FCWJFX
.BQCPY(-+4
w "OESPJE 8FCWJFX
-FBqFUKT
Slide 17
Slide 17 text
.BQCPY7FDUPS5JMFT
ͷ৴ͷͨΊͷઃఆ
Slide 18
Slide 18 text
ඞཁͳͷҎԼͷͷ
w UJMFTFSWFSHMͷDPOpHϑΝΠϧ
w .BQCPY7FDUPS5JMFΛ.#5JMFTܗࣜʹͨ͠ͷ
w .BQCPY(-4UZMF
w ϑΥϯτΛ1SPUPDPM#V⒎FSܗࣜʹͨ͠ͷ
w 4QSJUFը૾
Slide 19
Slide 19 text
UJMFTFSWFSHMͷDPOpH
w UJMFTFSWFSHMͰىಈͨ͠σΟϨΫτϦʹDPOpHKTPOͱ
͍͏ϑΝΠϧ͕͋ΔͱࣗಈతʹಡΈࠐΉ
w DΦϓγϣϯͰࢦఆՄೳ
w DPOpHKTPOͰ֤ϑΝΠϧͷҐஔɺ3BTUFSը૾ͷઃఆɺ
.BQCPY7FDUPS5JMFͷઃఆ.BQCPY(-4UZMFͷࢦఆ
Λهड़͢Δ
Slide 20
Slide 20 text
ྫ
{
"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"
}
}
}
Slide 21
Slide 21 text
.CUJMFT
w 0QFO.BQ5JMFTUJQQFDBOPFͳͲͰ࡞͢Δ
w 0QFO.BQ5JMFTࡢͷϋϯζΦϯࢿྉΛࢀߟ
w IUUQTHPPHMX[T
w UJQQFDBOPF.BQCPY͕࡞͍ͯ͠Δ(FP+40/ͳͲ
Λ.BQCPY7FDUPS5JMFʹม͢Δπʔϧ
w IUUQTHJUIVCDPNNBQCPYUJQQFDBOPF
w NCUJMFTϑΝΠϧDPOpHͷEBUBͰࢀরΛهड़͢Δ
Slide 22
Slide 22 text
.BQCPY(-4UZMF
w .BQVUOJLͰ࡞͢Δ
w IUUQNBQVUOJLDPN
w .BQCPY4UVEJPͰͰ͖Δ͔͠Εͳ͍͕ະݕূ
w ༻πʔϧͳΜͰʜ
w ग़ྗͨ͠+40/Λগ͠खΛՃ͑Δඞཁ͕͋Δ ޙड़
w .754UZMFSΒͳ͔ͬͨʜPS[
Slide 23
Slide 23 text
ϑΥϯτ
w HFOGPOUHMΛͬͯ5SVF5ZQF'POUͳͲΛ1SPUPDPM
#V⒎FSܗࣜʹม͢Δ
w IUUQTHJUIVCDPNTBCBTHFOGPOUHM
w PQFONBQUJMFTGPOUTͷHFOFSBUFTIΛࢀরʹ͢Δͱྑ
͍
w IUUQTHJUIVCDPNPQFONBQUJMFTGPOUTCMPC
NBTUFSHFOFSBUFTI
Slide 24
Slide 24 text
ϑΥϯτ
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
Slide 25
Slide 25 text
4QSJUFը૾
IUUQTHJUIVCDPNPQFONBQUJMFTPTNCSJHIUHMTUZMFCMPCHIQBHFT
TQSJUFYQOH
w ͍ΘΏΔ$444QSJUFΈ͍ͨͳͭ
w 4QSJUFը૾ +40/ͷίϯϑΟάͷΈ߹ΘͤͰ໊લ
ղܾΛ͢Δ
w TQSJUFQOHͱTQSJUFKTPOͱ͍͏෩ʹಉ໊͡લͰ༻ҙ
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
.BQCPY(-4UZMFͷஔ
w .BQCPY(-4UZMFͷ+40/ϑΝΠϧΛUJMFTFSWFSHMʹ
ஔ͢Δ࣌ҎԼͷ̏ͭΛมߋ͢Δ
w TPVSDFTͷVSMΛ5JMF+40/ͷҐஔΛlNCUJMFT\JE^l
ͱ͢Δ
w TQSJUFͷࢀরΛϑΝΠϧ໊ͷlKTPOzΛൈ͍ͨͷʹ
͢Δ
w HMZQITΛ\GPOUTUBDL^\SBOHF^QCGʹมߋ͢Δ
Slide 28
Slide 28 text
͋ͱىಈ
w EPDLFSͷڥ͕͋ΕEPDLFSSVOͰྑ͍
w EPDLFSSVOJUSNW QXE
EBUBQ
LMPLBOUFDIUJMFTFSWFSHM
w EPDLFSDPNQPTFͰΔͱ͍Ζ͍ΖͰ͖Δ
Slide 29
Slide 29 text
৴ͷͨΊʹ
w EPDLFSDPNQPTFͰ$16ίΞUJMFTFSWFSHMΛىಈͯ͠ɺ
ϥελͷΞΫηεWBSOJTIDBDIFΛ͔·͢ͱ͍͏ख͕Φ
εεϝ
w OHJOYͰৼΓ͚Λ͢Δ
w 44-ΞΫηε͕ඞཁͳΒ9'PSXBSEFE1SPUPϔομΛ
IUUQTʹ͓ͯ͘͠
Slide 30
Slide 30 text
UJMFTFSWFSHM
UJMFTFSWFSHM
UJMFTFSWFSHM
UJMFTFSWFSHM
WBSOJTIDBDIF
1PSU
1PSU
1PSU
1PSU
1PSU
Slide 31
Slide 31 text
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;
}
Slide 32
Slide 32 text
EPDLFSDPNQPTF
w EPDLFSDPNQPTFZNMͷαϯϓϧHJTUʹ͓͍ͯ·͢
w IUUQTHJTUHJUIVCDPNTNFMMNBO
FFGBDDFFGBCGBB
w DPOpHKTPOΛ࡞ͬͨΒҎԼͷίϚϯυҰൃͰىಈ
w EPDLFSDPNQPTFVQE
w ؆୯Ͱ͢Ͷʂ
Slide 33
Slide 33 text
·ͱΊ
Slide 34
Slide 34 text
w ϑΥϯτͷGBJMCBDLʹରԠ͢ΔʹUJMFTFSWFSHM͕ඞཁ
w ৴͍ͨ͠ͷʹ߹ΘͤͯUJMFTFSWFSHMΛ͏͔Ͳ͏͔
Λݕ౼͠·͠ΐ͏
w 1PTU(*4͔Β45@"4.75Λͬͯग़͢ํ๏͋ΔΑʂ
w ϥελը૾ϨϯμϦϯάʹίετ͕͔͔ΔͷͰԿ͔͠Β
Ωϟογϡ͠·͠ΐ͏