HTMLファイ部という職能のはなし - bonfire frontend #1

Transcript

1. HTMLファイ部という 職能のはなし ໘ന๏ਓΧϠοΫ HTMLϑΝΠ෦Ϧʔμʔ ౻ᖒ৳ / @fnobi
2. 自己紹介 • ౻ᖒ৳ / @fnobi • ໘ന๏ਓΧϠοΫ डୗࣄۀ෦ • HTMLϑΝΠ෦ʢWebϑϩϯτνʔϜʣ Ϧʔμʔ
3. [1] 面白法人カヤック 受託事業部
4. 「どれだけバズるか」 ܝ͍͛ͯΔςʔϚ
5. όζίϯςϯπΛಘҙ෼໺ͱ͍ͯ͠Δ
6. →「バズ」の変容
7. ↓2016/4/1 ↓2017/4/1
8. →「バズ」の変容 •ͨͩόζΛૂ͏͚ͩͳΒɺSNS౤ߘ༻ͷը૾ Λͭͬͨ͘Γɺهࣄॻ͍ͨ΄͏͕ૣ͍ͯ҆͘ •ೝ஌ΛͶΒ͏όζͰαΠτ੍࡞ͯ͠΋͠ΐ͏ ͕ͳ͍ •࣮ࡍΧϠοΫͰ΋ɺಈը΍SNS౤ߘͷ࢓ࣄ͕ ૿͑ͨ
9. →時代の変化 •HTMLϑΝΠ෦ɺഇ෦…ʁ
10. →「バズ」の変容 WebαΠτΛ௨ͯ͠ɺ
 Ϣʔβʔͷײ৘Λ༳͞ͿΔΑ͏ͳɺ
 ࢗ͞Δମݧɾ৽͍͠ମݧΛ
 ͭ͘Δͱ͍͏͜ͱʹಛԽɻ
11. ΦϦδφϧίϯςϯπͷ
 ϑΝϯ৺ཧΛ༳͞ͿΔ
 ΋ͷͩͬͨΓ ؆୯Ͱɺ͔ͭ೤தͰ͖ ΔήʔϜମݧͩͬͨΓ
12. [2] HTMLファイ部の アプローチ
13. •受託事業部 •ディレクター •プロデューサー •プランナー •プロジェクトマネージャー •デザイナー •エンジニア •サーバーサイド •HTMLファイ部 •オルタナティ部（その他）
14. HTMLファイ部 • डୗࣄۀ෦ͰWebϑϩϯτΛ୲౰͢ΔνʔϜ • σβΠφʔνʔϜ͕ίʔσΟϯάˠʮME՝ʯˠʮHTML ϑΝΠ෦ʯͱঃʑʹઐ໳Խ͍ͯͬͨ͠ • ࠓߋHTML5Λਪͯ͠΋࣌୅஗Εײ͕͋ΔͷͰɺ࠷ۙ͸ ʮWebϑϩϯτܳਓʯͬͯࣗশ͍ͯ͠Δ
15. HTMLファイ部 Webϑϩϯτܳਓ = Webフロントで新しい体験を つくるエキスパート
16. 事例紹介
17. 事例紹介 Webフロント x 3Dグラフィック(WebGL) https://www.kayac.com/service/client/1557
18. 事例紹介 Webフロント x マイク入力（getUserMedia） https://www.kayac.com/service/client/1579
19. 事例紹介 Webフロント x AfterEffect (lottie-web) https://www.kayac.com/service/client/1529
20. アプローチ • Web(HTML5)ͰͰ͖Δ͜ͱ͕ɺεϖοΫతɾAPIతʹ޿ ͕͍ͬͯΔ࠷தͳͷͰɺผͷ෼໺Ͱ࢖ΘΕ͍ͯͨख๏Λ Ҿͬுͬͯ͘Δͱͦͷ··৽͍͠ମݧΛͭ͘Γ΍͍͢ɻ
21. その他やっていること
22. その他やっていること (1) 研究室のような部内ユニット
23. •HTMLファイ部 •プランナー・PM専攻 •演出（動画）専攻 •Web以外専攻（Unity・機械学習） 20ਓ΄Ͳ͍ΔνʔϜϝϯόʔΛײ৺ྖҬͰ3ͭʹ෼Խɾ ͦΕͧΕͷΞϯςφΛਂΊ͍ͯΔ
24. その他やっていること (2) プランナーに 殴り込みに行く会
25. •受託事業部 •ディレクター •プロデューサー •プランナー •プロジェクトマネージャー •デザイナー •エンジニア •サーバーサイド •HTMLファイ部 •オルタナティ部（その他） ݄ʹҰ౓ɺ࢖͍͍ٕͨज़Λ ϓϥϯφʔશһͷલͰ ௚઀ϓϨθϯΛ͢Δ
26. ࣮ࡍ٬ઌͰఏҊʹߦࣾ͘һͱWebϑϩϯτͷ࠷લઢΛ
 ڞ༗ɾ࢓ࣄͱͯ͠׆༻Ͱ͖ΔՄೳੑΛߴΊΔɻ
27. まとめ • ୯ͳΔόζͷͨΊʹWebαΠτΛ࡞Δͷ͸͍·΍ίεύ ͕ѱ͍ɻೝ஌Ͱ͸ͳ͘ମݧ·Ͱࢗ͞Δ΋ͷΛ࡞Βͳ͍ͱ ҙຯ͕ͳ͍ɻ • WebͰͲΜͳମݧΛͭ͘Δ͜ͱ͕Ͱ͖Δͷ͔ɺͱ͍͏఺ʹ ͍ͪ͹Μৄ͍͠ͷ͸ΤϯδχΞࣗ਎ɻݚڀɾఏҊ͢Δମ੍ Λͭ͘Δ͜ͱͰɺݟͨ͜ͱ͕ͳ͍ମݧΛͭ͘ΕΔՄೳੑ͕ ্͕Δ͠ɺΤϯδχΞࣗ਎΋ָ͍͠ɻ
28. ありがとう ございました！！！