Tweet
Tweet

Slide 1

Slide 1 text

Enjoy the Web Kazunari Hara @herablog Dec 3, 2022 at PWA Night CONFERENCE 2022

Slide 2

Slide 2 text

PWA Night CONFERENCE is BACK!

Slide 3

Slide 3 text

Do you ♥ the Web?

Slide 4

Slide 4 text

どのようにWeb開発を楽しみ、続けていくか？

Slide 5

Slide 5 text

どのように 私が Web開発を楽しみ、続けていくか？

Slide 6

Slide 6 text

対比いただき、なにかきっかけ や参考になれば幸いです！

Slide 7

Slide 7 text

原 一成 HARA Kazunari @herablog テックリード、Web Developer 長期プロダクト運用 新規開発 CyberAgent Developer Experts 趣味: Twitter, Cat, F1, Football

Slide 8

Slide 8 text

I ♥ the Web

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

https://www.sony.jp/products/Consumer/PCOM/PCV-R73K/index.html

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

マークアップ for モバイル、IE ● HTML ● CSS

Slide 13

Slide 13 text

HTML5 Web Application のつくりかた ● Amebaピグのモバイル版 ● AI to Canvas ● Single Page Application ● パフォーマンスチューニング https://ameblo.jp/ca-1pixel/entry-11009598050.html

Slide 14

Slide 14 text

HTML5 Web Application のつくりかた ● Amebaピグのモバイル版 ● AI to Canvas ● Single Page Application ● パフォーマンスチューニング https://ameblo.jp/ca-1pixel/entry-11009598050.html

Slide 15

Slide 15 text

HTML5 Web Application のつくりかた ● Amebaピグのモバイル版 ● AI to Canvas ● Single Page Application ● パフォーマンスチューニング https://ameblo.jp/ca-1pixel/entry-11009598050.html

Slide 16

Slide 16 text

Ameba Platform ● Node.js https://www.slideshare.net/herablog/ameba-22035207

Slide 17

Slide 17 text

テックリードとして 大事にしていること

Slide 18

Slide 18 text

What Is Front-End?

Slide 19

Slide 19 text

https://bit.ly/3HZ5K7j

Slide 20

Slide 20 text

https://bit.ly/3HZ5K7j

Slide 21

Slide 21 text

https://bit.ly/3HZ5K7j

Slide 22

Slide 22 text

https://bit.ly/3HZ5K7j

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Portofolio Like Strategy 変化を前提とした ポートフォリオ的な戦略

Slide 25

Slide 25 text

いち開発者として大事と思うこと

Slide 26

Slide 26 text

変化を前提とし た個人スキル ● フレームワークを使い作れる ● フレームワークに依存しないスキ ルをつける ● コラボレーションできる

Slide 27

Slide 27 text

テックリードとして大事と思うこと

Slide 28

Slide 28 text

Portofolio Like Strategy 変化を前提とした ポートフォリオ的な技術戦略

Slide 29

Slide 29 text

Portofolio Like Strategy 変化を前提とした ポートフォリオ的な技術戦略 Stable Challenge Transition

Slide 30

Slide 30 text

Amebaブログ フル刷新 (2016) ● トラディッショナルな構成がボト ルネックに ● ハイリターンの見込みあり ● チャレンジしつつ標準化 https://developers.cyberagent.co.jp/blog/archives/636/

Slide 31

Slide 31 text

https://developers.cyberagent.co.jp/blog/archives/636/ Amebaブログ フル刷新 (2016) ● Isomorphic (Universal) ● Lazy Load ● HTML Server Cache

Slide 32

Slide 32 text

https://developers.cyberagent.co.jp/blog/archives/636/ Amebaブログ フル刷新 (2016) ● Isomorphic (Universal) ● Lazy Load ● HTML Server Cache

Slide 33

Slide 33 text

https://developers.cyberagent.co.jp/blog/archives/636/ Amebaブログ フル刷新 (2016) ● リスクを下げるため、人気 のあるライブラリを利用 ● React, Redux, Expressなど

Slide 34

Slide 34 text

AmebaNews システム改善 (2021) ● Amebaブログの構成を踏襲 ● ハイリターンは見込みにくい ● 管理しやすい構成に変更 https://speakerdeck.com/keiya01/ririsukara5nian-webhurontoendonojing-nian-lie-hua-toxiang-kihe-u

Slide 35

Slide 35 text

AmebaNews システム改善 (2021) ● モバイル・デスクトップ統合 ● Isomorphic, AMP to MPA https://speakerdeck.com/keiya01/ririsukara5nian-webhurontoendonojing-nian-lie-hua-toxiang-kihe-u

Slide 36

Slide 36 text

AmebaNews システム改善 (2021) ● SPA vs MPA ● Page Per Session, Largest Contentful Paintを比較 https://speakerdeck.com/keiya01/ririsukara5nian-webhurontoendonojing-nian-lie-hua-toxiang-kihe-u

Slide 37

Slide 37 text

AmebaNews システム改善 (2021) ● Client-Side Scriptsを削減 https://speakerdeck.com/keiya01/ririsukara5nian-webhurontoendonojing-nian-lie-hua-toxiang-kihe-u

Slide 38

Slide 38 text

こえのブログ 新規開発 (2019) ● 新規開発 ● 作りきり寄り ● 意図的なチャレンジ https://speakerdeck.com/herablog/pwa-night-vol-dot-4

Slide 39

Slide 39 text

● The PWA ● Web Components ● WebAssembly こえのブログ 新規開発 (2019) https://speakerdeck.com/herablog/pwa-night-vol-dot-4

Slide 40

Slide 40 text

● The PWA ● Web Components ● WebAssembly こえのブログ 新規開発 (2019) https://speakerdeck.com/herablog/pwa-night-vol-dot-4

Slide 41

Slide 41 text

● The PWA ● Web Components ● WebAssembly こえのブログ 新規開発 (2019) https://speakerdeck.com/herablog/pwa-night-vol-dot-4

Slide 42

Slide 42 text

Now 今取り組んでいること

Slide 43

Slide 43 text

生産性の向上 ⇒ システム化 ⇒ 人がやらなくていいことを任せる

Slide 44

Slide 44 text

CMSの利用

Slide 45

Slide 45 text

感じていた課題 うまく分業できず 余分なコミュニケーション発生 システムの重複、老朽化 サイト内の文言を変更したい場合 変更お願いします 編集者 デザイナー 反映しました！ エンジニア 確認お願いします 確認しました！ デプロイします

Slide 46

Slide 46 text

感じていた課題 うまく分業できず 余分なコミュニケーション発生 システムの重複、老朽化 サイト内の文言を変更したい場合 変更します！ 編集者 CMSポチッ

Slide 47

Slide 47 text

CMSでページを量産 with News Campaign Site

Slide 48

Slide 48 text

function Profile ({ name: '', thumbnail: {} }) {} function Heading ({ text: '', level: '' }) {} function RichText ({ html: '' }) {} function Picture ({ url: '', width: 640 }) {} デザイナー エンジニア 編集者

Slide 49

Slide 49 text

CMSの利用でリードタイムが改善 -7 days 構成案 流入設計 オリエン ページデザイン バナー作成 実装 テスト 公開

Slide 50

Slide 50 text

CMSでページを量産

Slide 51

Slide 51 text

デザインシステム

Slide 52

Slide 52 text

感じていた課題 UIがバラバラ 毎回作成 何がより「正しい」かわからない

Slide 53

Slide 53 text

感じていた課題 UIがバラバラ 毎回作成 何がより「正しい」かわからない ボタン追加！ 微妙に違うかも？ おっと確認します 正式ボタン is... デザイナー エンジニア デザイナー

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

ブランドを体現す るための デザインシステム ⬇コスト(考慮・コミュニケーション) やリスク(ミス・不具合) ⬆一貫性 https://spindle.ameba.design/

Slide 56

Slide 56 text

Spindle UI ● ミニマルなReactコンポーネント ● スタイルが定義されたCSS ● 拡張性 < 一貫性 https://github.com/openameba/spindle/tree/main/packages/spindle-ui @openameba/spindle-ui

Slide 57

Slide 57 text

デザインシステム https://spindle.ameba.design/

Slide 58

Slide 58 text

WEB+DB PRESS vol.127 フロントエンド羅針盤 ── Web体験向上へのアプ ローチ 【最終回】品質の優れたプロダクトを継続的に提供 ……チームで使えるデザインシステムを作る https://gihyo.jp/magazine/wdpress/archive/2022/vol127

Slide 59

Slide 59 text

専門性を高める取り組み

Slide 60

Slide 60 text

専門性を高める スキル取得 ⇒ 個人メリット 知識伝承 ⇒ 組織メリット プロダクト品質反映 ⇒ 事業メリット

Slide 61

Slide 61 text

“Yatteiki” ● 業界で使えるスキルを習得 ● Accessibility, Performance, Productivity ● 3ヶ月ごとに共有会開催

Slide 62

Slide 62 text

Ameba Accessibility Guidelines ● WCAG 2.1を簡易的に説明 ● DO/DON’T 実装を記載 ● 継続的にアップデート https://a11y-guidelines.ameba.design/

Slide 63

Slide 63 text

Amebaブログが レベルAに適合 ● a11y gudelinesを起点に ● 実装を改善 ● テスト https://www.cyberagent.co.jp/techinfo/news/detail/id=28260

Slide 64

Slide 64 text

レイアウトシフ ト改善 ● CWVのCLSを改善 ● ログを収集・分析 ● 実装を改善

Slide 65

Slide 65 text

レイアウトシフ ト改善 ● CWVのCLSを改善 ● ログを収集・分析 ● 実装を改善

Slide 66

Slide 66 text

デプロイの しやすさを整備 ● ワークフローの移行・改善 ● プレビュー環境の整備

Slide 67

Slide 67 text

Future 気になる技術 (Web App方面)

Slide 68

Slide 68 text

Instant & Seamless Navigations 快適なナビゲーション https://twitter.com/addyosmani/status/1592907811968626688?t=HEsIvVaW_fF7j8YrbotXhA

Slide 69

Slide 69 text

Instant & Seamless Navigations 快適なナビゲーション https://twitter.com/dannymoerkerke/status/1597187172783693824

Slide 70

Slide 70 text

View Transitions 実装例 (2022年12月) https://developer.chrome.com/docs/web-platform/view-transitions/

Slide 71

Slide 71 text

“Advanced” Web Apps - Storage - Sensors - WASM などなど

Slide 72

Slide 72 text

Project Fugu API Showcase AdvancedなWebアプリ https://developer.chrome.com/blog/fugu-showcase/

Slide 73

Slide 73 text

Project Fugu API Showcase AdvancedなWebアプリ https://developer.chrome.com/blog/fugu-showcase/

Slide 74

Slide 74 text

Project Fugu API Showcase AdvancedなWebアプリ https://www.youtube.com/watch?v=O_0UIOo5eBA

Slide 75

Slide 75 text

Project Fugu API Showcase AdvancedなWebアプリ https://developer.chrome.com/blog/fugu-showcase/

Slide 76

Slide 76 text

Project Fugu API Showcase AdvancedなWebアプリ https://docs.google.com/forms/d/e/1FAIpQLScNd1rClbmFWh6FcMmjUNrwg9RLz8Jk4BkHz_-EOpmkVd_-9g/viewform

Slide 77

Slide 77 text

Web UI ● Open UI ● Dark Mode ● CSS などなど https://open-ui.org/

Slide 78

Slide 78 text

CSS ● Container Queries ● Cascade Layers ● Viewport Units ● :has() などなど https://coliss.com/articles/build-websites/operation/css/css-in-2022-new-features.html

Slide 79

Slide 79 text

おわりに

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

https://twitter.com/t_wada/status/1451433290552905735

Slide 82

Slide 82 text

Enjoy the Web!