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
ピクシブのデザインシステム「Charcoal」アイコンライブラリをつくる
Search
mimo
September 29, 2023
0
720
ピクシブのデザインシステム「Charcoal」アイコンライブラリをつくる
mimo
September 29, 2023
Tweet
Share
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Designing with Data
zakiwarfel
96
5k
YesSQL, Process and Tooling at Scale
rocio
166
14k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Leading Effective Engineering Teams 2024
addyosmani
3
300
What's in a price? How to price your products and services
michaelherold
239
11k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Transcript
pixiv.inc ピクシブのデザインシステム「Charcoal」 アイコンライブラリを つくる @mi2_okmt
Profile mimo フロントエンドエンジニア 2022年 新卒入社 CTO室デザインシステム部 兼 クリエイター事業部 FACTORY部 初音ミクが好き
DJする趣味がある
しゃべること • Charcoalとは? • charcoal-ui/iconsとは? • charcoal-ui/iconsをつくる • SVGのimportについて
とは?
とは? • pixivをはじめ、様々なプロダクトが利用 • web / iOS / Android それぞれに対応した実装がある
• 2022年7月からはデザインシステム部が開発してる ◦ DEV MEETUP(2020) のときはタスクフォースだった ◦ 部外からもドカドカPRをくれるのでレビューしてる ピクシブのデザインシステム「Charcoal」
• 10個のパッケージを持つweb実装のモノレポ • @charcoal-ui/styled, /tailwind-config, /react …などなど • 今回は @charcoal-ui/icons
について話します web実装 pixiv/charcoal とは?
@charcoal-ui/icons
@charcoal-ui/icons • Web Componentsとして実装 ◦ 他フレームワークへの依存なしで利用可能 ◦ Charcoalの他パッケージへの依存もほとんどない • SVGファイルを独自アイコンとして登録できる
Charcoalのアイコンライブラリ
@charcoal-ui/icons 1. yarn add @charcoal-ui/icons 2. import ‘@charcoal-ui/icons’ 3. <pixiv-icon
name=”16/Smile”> 簡単 3ステップ クイックスタート!
@charcoal-ui/icons パッケージの構造 Figma SVG stringをexportする JSのパッケージ @charcoal-ui/icon-files .cjs SVGを Custom
Elementsにする @charcoal-ui/icons jsでimport @charcoal-ui /icons-cli
@charcoal-ui/icons • Figma APIからSVGとしてアイコンを取得 • fill属性を currentcolor に置き換える • SVGをstringでexportするファイルをつくる
• /icon-files に差分があれば commit して PR をつくる Figmaのアイコンを取ってくる icons-cli
@charcoal-ui/icons • icons-cli によって作られる.cjsファイルのパッケージ • export default '<svg … だけがたくさん
• どうしてこうなったのかはあとで話します SVGタグをstringで返す icon-files
@charcoal-ui/icons • icon-filesに依存 SVG文字列をCustom Elementsにする • 指定されたSVGファイルをアイコンにする ◦ icon-files にないアイコンを使いたい需要に対応
◦ PixivIcon.extend() Custom Elementsをつくる icons
どうして Web Components?
どうしてWeb Components? • 2021年2月としては珍しい技術選択 • ピクシブに求められる要件がいくつかあった @charcoal-ui/iconsはWeb Components
どうしてWeb Components? • プロダクトごとに異なるフレームワーク ◦ Smarty ERB React Vue …
• 導入がスムーズに行えること • SSRできる • 検討したがボツになったものを具体的に紹介します ピクシブでの要件
@charcoal-ui/icons ボツ案
@charcoal-ui/icons ボツ案 1. Reactでつくる 2. icon font 3. SVGR ボツ案一覧
4. SVGのuseタグ 5. Lit HTML
@charcoal-ui/icons ボツ案 × Reactでしか使えない ピクシブにはVueプロダクトもある (BOOTH pixivのSP版 …など) × ReactプロダクトでもReactだけを使うとは限らない
局所的にSmartyやERBをなこともある 1. Reactでつくる
@charcoal-ui/icons ボツ案 × フォントをつくるのがめんどくさい × font familyの上書きで変な文字が出る × スクリーンリーダーやa11yに弱い <i>タグなどを本来と異なる用途で使うため
2. icon font
@charcoal-ui/icons ボツ案 SVGR: SVGをimportするとReactコンポーネントになるもの × inline SVGになって、HTMLが巨大になるおそれ JSXからのimportでHTMLが巨大になるリスクが指摘されていた × React前提になる
3. SVGRのようなアプローチ
@charcoal-ui/icons ボツ案 id のついているSVG要素を useタグで呼び出せる × どうやってアイコンファイルを配信するか不明 SVGアイコン全部入りファイルを読み込ませる必要がありそう × ロード時間や維持管理が厳しそう
4. SVGのuseタグ
@charcoal-ui/icons ボツ案 Web Componentsが作れる薄めなライブラリ ✓ いったん採用した × SSR対応のとき、Lit HTMLが嫌な実装だったので結局やめた 5.
Lit HTML
@charcoal-ui/icons ボツ案 × 内部でDOM APIをめっちゃさわる × SSRができない nodeでimportするとクラッシュした × lit-labs/ssr
があったが嫌な実装だった globalThisにDOM APIを生やすような感じ ここがいい感じだったら採用していたかもしれない... 5. Lit HTML
そして Web Components へ
そして Web Components へ ✓ 使うアイコンだけ読み込ませられる ✓ 特定のフレームワークに依存させることなく実装できる ✓ 無理のない実装方法である
ion-icon も Web Componentsだった SVGファイルをDOMにレンダリング
そして Web Components へ • 当時「Vue 3でWeb Components対応」と言われていた • SSR対応のCustom
Elementsの参考に実装 • globalThis に頼った箇所がひとつだけ残った ◦ HTMLElementsがSSRでundefinedになるのを回避させる部分 SSRでも動くコードで実装
できあがった @charcoal-ui/icons
できあがった @charcoal-ui/icons 👍 dependenciesがたった2つになった DOMPurifyとwarningsのみ 👍 最新でも、レガシーでも、CSRでも、SSRでも使える tailwindもstyledもReactもVueもいらない! 👍 社内プロダクトへの導入がスムーズだった
良かったこと
できあがった @charcoal-ui/icons 🥳< 属人化していて更新しづらくて不幸になってました。 ツールでサポートされたので属人性も手間もなくなり、 工数削減だけでなく参入もしやすくなりました。 喜びの声
🤔 PixivIcon.extends() を使うときはバンドラの設定が必要 独自アイコンを使うなら各自でバンドラを設定してね! 🤔 a11yが不十分 もし対応不可能なことがあるとマズい 🤔 レイアウトシフトが起こりやすい ドキュメントにリセットCSSを載せてるだけなのでパッケージに含めたい...
残された課題・デメリット できあがった @charcoal-ui/icons
SVGのimport
SVGのimport おさらい Figma SVG stringをexportする JSのパッケージ @charcoal-ui/icon-files .cjs SVGを Custom
Elementsにする @charcoal-ui/icons jsでimport @charcoal-ui /icons-cli
SVGのimport おさらい Figma SVG stringをexport するJSのパッケージ @charcoal-ui/icon-files .cjs SVGを Custom
Elementsにする @charcoal-ui/icons jsでimport @charcoal-ui /icons-cli
SVGのimport • 最近はwebpack以外のバンドラが増えた ◦ vite swc Parcel … • /icons
は webpack 環境下でしか動かなかった • 社内から webpack 以外でも動いてほしいとの要望が来た webpackが必須だった /icons v1.x.x
SVGのimport • 「.jsではないものを相対パスで読み込む」に差が出やすい なぜ webpack でしか動かなかったのか const { default: filepath
} = await import( `../svg/${encodeURIComponent(size)}/ ${encodeURIComponent(name)}.svg` ) • jsに従って文字列を扱えば解決するのでは?
SVGのimport • CIでやることを追加 ◦ icons-cli で SVGを取ってきてSVGファイルをつくる ◦ + SVGファイル
→ string を export する .cjs ファイル ◦ + 保存する場所を /icon-files に変更 ◦ つくったファイルをまとめてcommit v2.x.x から増えた /icon-files
SVGのimport • アイコンの import する処理を分離 ◦ SVG string 用の関数を用意 ◦
独自アイコン用に dynamic import する処理も残す ▪ PixivIcon.extends()にバンドラ設定が必要なのはこのため /icons の SVG import 改修
SVGのimport // v1.x.x const { default: filepath } = await
import( `../svg/${encodeURIComponent(size)}/ ${encodeURIComponent(name)}.svg` ) // v2.x.x import charcoalIconFiles from ‘@charcoal-ui/icon-files’ get importIconFile() { return charcoalIconFiles[this._name] }
今後の話
今後の話 • webpack以外でも使えることを確認すべき • 依存ライブラリのバージョンアップの影響もうける ◦ /icons だけは依存ライブラリの影響は少ない ◦ 他パッケージは
peer dependenciesが多い ▪ /react /tailwind-config /styled … 動作環境、依存ライブラリはどんどん変わる
今後の話 • /icons は a11y やパフォーマンスの課題を抱えている • Charcoalは品質をあげるステップに入った ◦ より安定、よりハイパフォーマンスであるべき
• Charcoalのぜんぶで頑張っている最中 • キリがないのであとでとっ捕まえて聞いてください デザイナーやiOSエンジニアも捕えておきます
宣伝 • Charcoalのセッションは他にもあります! ◦ SUB STAGE: cilvia「BOOTHにおけるCharcoal実践活用術」 現場で実際に行われているテーマのカスタムなどの話が聞けそうです ◦ SUB
STAGE: ああうえ「Charcoalをモバイルアプリで使う」 CharcoalのiOS開発メンバーの発表です • 懇親会パートでmimoはDJをします