Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
hatena-engineer-seminar-10
Search
tkzwtks
May 23, 2018
0
2.3k
hatena-engineer-seminar-10
Hatena Engineer Seminar #10 でお話した資料です
tkzwtks
May 23, 2018
Tweet
Share
More Decks by tkzwtks
See All by tkzwtks
ちょっぴりDiveDeepするAWSの時間 AWS Dev Day 2023 Tokyo 延長戦 実践データ移行 〜はてなダイアリーや魔法のiらんどの事例と共に〜
tkzwtks
0
89
はてなスターにおける静的ファイル配信の話
tkzwtks
0
88
YAPC::Kyoto 2023 LT Perlブートキャンプご紹介
tkzwtks
0
1.1k
Hatena Engineer Seminar #14 魔法のiらんど データ移行編 〜新旧システム間のデータマイグレーション時に我々が考えること〜 / hatena-engineer-seminer-number-14-data-migration
tkzwtks
0
1.6k
レガシーシステムからのデータマイグレーションあれこれ
tkzwtks
4
1.6k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Producing Creativity
orderedlist
PRO
340
39k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Designing with Data
zakiwarfel
96
5k
The Language of Interfaces
destraynor
151
23k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Scaling GitHub
holman
458
140k
Designing for humans not robots
tammielis
247
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Transcript
ͯͳͱ WebϚϯΨαʔϏεͷ าΈ Hatena Engineer Seminar #10 id:tkzwtks ʢ୍ᖒ ਸʣ
ࣗݾհ id:tkzwtks ୍ᖒ ਸ • 201611݄ೖࣾ • ୲αʔϏε • ϚϯΨαʔϏεશൠ
• ΧΫϤϜʢKADOKAWA༷ʣ
ຊ͓͢͠Δ͜ͱ
ຊ͓͢͠Δ͜ͱ • ͯͳͰ։ൃɾఏڙ͍ͯ͠ΔϚϯΨϏϡʔϫʔ ʮGigaViewerʯΛத৺ͱͨ͠ɺͯͳͱWebϚϯΨαʔϏε ͷาΈ • ͯͳͰWebϚϯΨαʔϏεΛ࡞Δ࣌ʹɺΤϯδχΞͱͯ͠ ߟ͍͑ͯΔ͜ͱ
GigaViewerͱ
GigaViewerͱ • ͯͳͰ։ൃͨ͠ɺWebαΠτͰͷ ϚϯΨӾཡʹಛԽ͠ɺϢʔβʔ͕շ దʹϚϯΨ࡞Λָ͠ΉͨΊͷػೳ Λඋ͑ͨϚϯΨϏϡʔϫɺίϯς ϯπొฤཧ༻ͷཧը໘ͳ ͲؚΊͨWebϚϯΨ৴αʔϏε • Viewerͱ͍͏໊લ͕ͩϚϯΨΛಡ
ΉϏϡʔϫʔ͚ͩΛࢦ͍ͯ͠ΔΘ ͚Ͱͳ͍
ࢦ͍ͯ͠Δͷ
GigaViewer͕ࢦ͍ͯ͠Δͷ • ͱʹ͔͘շదʹWebϚϯΨΛָ͠ΊΔΑ͏ͳϏϡʔϫʔͷ։ ൃ • ॎಡΈɾGIFΞχϝʔγϣϯը૾ɺWebϚϯΨͳΒͰ ͷ৽͍͠දݱରԠ • αʔϏεఏڙऀͷӡ༻ίετݮ •
গ͠Ͱӡ༻࡞ۀָ͕ʹͳΔΑ͏ʹ • ϚωλΠζ
GigaViewerҎલ • 20149݄ • গδϟϯϓϧʔΩʔʢݱʮδϟϯϓϧʔΩʔʂʯʣ • 20159݄ • ͋ͨ͠ͷϠϯάδϟϯϓ •
20163݄ • ͱͳΓͷϠϯάδϟϯϓ Ϗϡʔϫʔఏڙ
δϟϯϓʴ Web൛ ϦχϡʔΞϧ 20171݄
δϟϯϓʴWeb൛ϦχϡʔΞϧ • ࠷ॳͷGigaViewerಋೖࣄྫ • δϟϯϓϧʔΩʔʂ / ͋ͨ͠ͷϠϯάδϟϯϓͰಘͨݟ ΛݩʹɺGigaViewerΛ։ൃ • ͦΕ·ͰͷWeb൛ΛϦχϡʔΞϧ
• ϚϯΨΛಡΈʹ͖͍ͯΔී௨ͷϢʔβʔ͚ͷػೳ͚ͩͰ ͳ͘ɺʮWebϚϯΨαʔϏεΛӡӦ͢ΔͨΊʹඞཁͳ ΈʯΛ։ൃ
δϟϯϓʴWeb൛ϦχϡʔΞϧ • ͯͳʹɺϚϯΨ৴४උͷʑͷӡ༻ʹؔ͢Δࣝ ΄ͱΜͲͳ͔ͬͨ • ӡ༻͍͍͍ͯͨͩͯ͠Δձࣾͷํʑͱࡉ͔͘ίϛϡχέ ʔγϣϯΛऔΔ • GigaViewerͰʮδϟϯϓʴWeb൛ʯΛӡ༻ՄೳʹͰ͖Δ Α͏ͳػೳΛ࣮͍ͯ͘͠
δϟϯϓʴWeb൛ϦχϡʔΞϧ • ࡞ͬͨͷ·ͣ৮͍ͬͯͨͩ͘ • ʮͪ͜Β͕ఆ͍ͯ͠ͳ͍ΘΕํʯΛग़ͯ͠Β͏ͨΊ • গͮͭ͠ϑΟʔυόοΫΛ͖ɺվળ͢Δͱ͍͏͜ͱΛ܁ Γฦ͢ • ࠷ॳ͔Βᘳͳঢ়ଶʹ͢ΔͷͰͳ͘ɺঃʑʹվળ͍ͯ͘͠
δϟϯϓʴWeb൛ϦχϡʔΞϧ • ͯͳͰ͜Ε·Ͱओʹ͖ͬͯͨUGCαʔϏεͰͳ͘ɺ ʮެࣜͷWebϚϯΨαʔϏεʯ • αΠτΦʔϓϯͱಉ࣌ʹେྔͷίϯςϯπΛ४උ͢Δඞཁ ͕͋ͬͨ • ϦϦʔεલɺ४උͭͭ͠طଘͷαΠτͱฒߦӡ༻
δϟϯϓʴWeb൛ϦχϡʔΞϧ • ެࣜαΠτͳͷͰɺࣦഊͰ͖ͳ͍ۓுײ͕͋ͬͨ • ۓுײָ͕͋ͬͨ͠Έ͋ͬͨ • δϟϯϓʴWebͷϦχϡʔΞϧͰʮެࣜͷWebϚϯΨαʔϏ εΛӡӦ্͍ͯ͘͠Ͱඞཁͳ͜ͱʯͷݟΛͨΊ͍ͯ͘
ͱͳΓͷ Ϡϯάδϟϯϓ ϦχϡʔΞϧ 201710݄
ͱͳΓͷϠϯάδϟϯϓϦχϡʔΞϧ • GigaViewerͷ2ྫͷ࠾༻ • ΞϓϦέʔγϣϯΛϚϧνςφϯτԽ • gifը૾ͷೖߘʹରԠ • δϟϯϓʴͰͷݟΛͱʹӡ༻πʔϧΛվྑ •
मਖ਼ࣗମδϟϯϓʴʹؐݩ͞ΕΔΑ͏ͳܗʹ • ӡ༻͍͍͍ͯͨͩͯ͠ΔํʑͷཁΛฉ͍͍ͯ͘
ϚΨδϯϙέοτ Web൛ ϦχϡʔΞϧ 201710݄
ϚΨϙέWebϦχϡʔΞϧ • 3ྫͷ࠾༻ • ΞϓϦέʔγϣϯͷϚϧνςφϯτԽʹΑΓɺૉૣ͘ϦϦʔ εޭ • ʮ࿈ࡌҰཡϖʔδʯɺ͜Ε·Ͱʹ࣮͖ͯͨ͠ػೳʢࢿ ࢈ʣΛར༻Մೳ
ϚϧνςφϯτܕΞʔΩςΫνϟಋೖ • ҰͭͷΞϓϦέʔγϣϯͰɺෳͷαΠτΛαʔϏεͰ͖Δ Α͏ʹ • ෳαΠτͰɺҰͭͷDBΛڞ༗ • ϚϯΨը૾ࣗମαΠτຖʹཧ • ։ൃॳݕ౼͍͕ͯͨ͠ɺ࠷ॳݟૹ͍ͬͯͨ
ϚϧνςφϯτܕΞʔΩςΫνϟಋೖ • ෳͷαΠτΛҰͭͷΞϓϦέʔγϣϯ্Ͱӡ༻Ͱ͖ΔΑ͏ ʹͯ͠ɺͰ͖Δ͚ͩૉૣ͘αʔϏε͕։࢝Ͱ͖ΔΑ͏ʹ͢Δ • ҰॠͰαΠτΛ૿ͤΔͱ͍͏͜ͱͰͳ͘ɺΛݮ ͢Δɺͱ͍͏ҙຯ
ϚϧνςφϯτܕΞʔΩςΫνϟಋೖ • ػೳΛՃͰଞͷαΠτͰར༻͢Δ͜ͱ͕ՄೳʹͳΔ • ࿈ࡌҰཡ / Ӿཡཤྺอ࣋ / ϒϩάύʔπ •
αΠτ͝ͱͷΧελϚΠζՄೳ • ͱͳΓͷϠϯάδϟϯϓͷʮίϚετϦʔϜʯʢτοϓϖ ʔδ্෦ͷϚϯΨͷίϚ෦ʣͷΑ͏ͳઐ༻ͷػೳͷ࣮
ίϛοΫDAYS ϦϦʔε 20182݄
ίϛοΫDAYS • 4ྫͷ࠾༻ • ʮແྉͷWebϚϯΨʯ͚ͩͰͳ͘ɺ༗ྉϚϯΨ૿͑ͨͨ ΊɺϚϯΨΛചΔͨΊͷػೳΛՃ͍ͯ͘͠ • ϢʔβʔΞΧϯτ / ϙΠϯτͰͷϚϯΨߪೖ
/ ܾࡁ etc... • ࣮͖͢ػೳ͕Ұؾʹ૿͑Δ
ϚΠΫϩαʔϏε vs ϞϊϦγοΫ খ͞ͳαʔϏεͱͯ͠৽نػೳΛ࣮͍͖ͯ͠ɺଞͷαΠτͰ ͑ΔΑ͏ʹͰ͖ΔΑ͍ͷͰͳ͍͔ʁ • খ͞ͳαʔϏεͱͯ͠࡞͓͚ͬͯϝϯς͍͢͠ͷͰʁ
ϚΠΫϩαʔϏε vs ϞϊϦγοΫ ݁ہݟૹͬͨ • ࠓޙͦ͏͍͏αΠτ͕ଞʹग़ͯ͘Δ͔Ͳ͏͔Θ͔Βͳ ͍ɺ ະདྷͷ͜ͱΘ͔Βͳ͍ • ࠷ॳ͔Βׂ͢ΔΑΓɺϞϊϦγοΫʹ࣮ͭͭ͠ɺޙ͔Β
গׂͮͭ͢͠Δ΄͏ׂ͕͍͢͠ʢͣʣ
ίϛοΫDAYS • ʮίϛοΫDAYSͰͷϢʔεέʔεʯͷΈʹϑΥʔΧεͯ͠ඞ ཁͳػೳΛׂ͠ɺ࣮͍ͯ͘͠ • ଞͷαΠτͰ͏ࣄʹͳͬͨ߹ʹ͏Ұݟ͢ɺͱ ͍͏લఏ • ͦΕҎ֎ࠓ·ͰͰطʹ࣮ࡁΈͩͬͨͷΛར༻ •
νʔϜͱܾͯ͠ࡁؔ࿈ػೳॳΊͯͷઓ͕ͩͬͨɺ༧ఆ ௨ΓϦϦʔεͰ͖ͨ
͘Β͛όϯν ϦχϡʔΞϧ 20184݄
͘Β͛όϯν • 5ྫͷ࠾༻ • ৽ػೳՃͭͭ͠ɺ1ϲ݄ఔͰϦϦʔεͰ͖ͨ • ͜Ε·Ͱͷࢿ࢈Λར༻Մೳ • ΛͰ͖Δ͚ͩݮΒͯ͠ૉૣ͘ϦϦʔε
ٕज़తʹͲ͏͍͏ઓུΛͱ͖͔ͬͯͨ 1ΛৼΓฦͬͯΈΔ • ඞཁͳػೳΛগͮͭ͠૿͍ͯ͘͠ • ະདྷͷ͜ͱ૾Ͱ͖ͳ͍ • ඞཁͷແͦ͞͏ͳ࡞ΓࠐΈ͠ͳ͍ • ୯७ʹʮࠓ͜ΕΒͳ͍ʯΈ͍ͨʹఘΊΔ
• Ͱ͖Δ͚ͩૉૣ͘ɺ࣮֬ʹϦϦʔε͢Δ
ٕज़తʹͲ͏͍͏ઓུΛͱ͖͔ͬͯͨ • ৽ػೳΛ૿͢ʁ or طଘͷͷ͕͑Δʁ • मਖ਼͢ΕଞͷαΠτͰར༻ՄೳͳΒमਖ਼͢Δͷ͕ૣ͍ • ϞϊϦγοΫ /
ϚϧνςφϯτͳΞʔΩςΫνϟ • ݱ࣌Ͱ͏·͍͍ͬͯ͘Δ • ػೳΛԣల։͍͢͠ͷͰɺଘࡏ͢ΔػೳΛར༻Ͱ͖Ε ΛݮΒͭͭ͠αΠτΛΦʔϓϯՄೳ
WebϚϯΨαʔϏεΛ࡞Δ࣌ʹҰ؏͠ ͯߟ͍͑ͯΔ͜ͱ • ʮ͓٬༷Λࣗͨͪͷٕज़Ͱॿ͚ΔʯʮҰॹʹαʔϏεΛ࡞ ͍ͬͯ͘ʯͱ͍͏ؾ࣋ͪ • slackΛར༻ͯ͠ίϛϡχέʔγϣϯີʹ͢Δ • େྔͷίϯςϯπͷΠϯϙʔτɺӡ༻ͰͷࠔΓࣄΛαϙ ʔτ
• ίϯςϯπΛͱʹ͔͘େࣄʹ͢Δ
WebϚϯΨαʔϏεΛ࡞Δ࣌ʹҰ؏͠ ͯߟ͍͑ͯΔ͜ͱ • ࣗͨͪͷઓߟ͑Δ • ৽͍͜͠ͱʹઓͯ͠ɺ͕ࣗͨͪͰ͖Δ͜ͱΛ૿͢ • ৽͍͠ઓʹ͍͓ͭͯ٬༷ʹఏҊ͢Δ
GigaViewerΛগͮͭ͠ ਐา͍͖ͤͯ͞ɺWebϚ ϯΨαʔϏεΛ͞Βʹൃ ల͍͖ͤͯ͞·͢