Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ピクシブのデザインシステム「Charcoal」アイコンライブラリをつくる

mimo
September 29, 2023
680

 ピクシブのデザインシステム「Charcoal」アイコンライブラリをつくる

mimo

September 29, 2023
Tweet

Transcript

  1. とは? • pixivをはじめ、様々なプロダクトが利用 • web / iOS / Android それぞれに対応した実装がある

    • 2022年7月からはデザインシステム部が開発してる ◦ DEV MEETUP(2020) のときはタスクフォースだった ◦ 部外からもドカドカPRをくれるのでレビューしてる ピクシブのデザインシステム「Charcoal」
  2. @charcoal-ui/icons 1. yarn add @charcoal-ui/icons 2. import ‘@charcoal-ui/icons’ 3. <pixiv-icon

    name=”16/Smile”> 簡単 3ステップ クイックスタート!
  3. @charcoal-ui/icons • Figma APIからSVGとしてアイコンを取得 • fill属性を currentcolor に置き換える • SVGをstringでexportするファイルをつくる

    • /icon-files に差分があれば commit して PR をつくる Figmaのアイコンを取ってくる icons-cli
  4. @charcoal-ui/icons • icons-cli によって作られる.cjsファイルのパッケージ • export default '<svg … だけがたくさん

    • どうしてこうなったのかはあとで話します SVGタグをstringで返す icon-files
  5. どうしてWeb Components? • プロダクトごとに異なるフレームワーク ◦ Smarty ERB React Vue …

    • 導入がスムーズに行えること • SSRできる • 検討したがボツになったものを具体的に紹介します ピクシブでの要件
  6. @charcoal-ui/icons ボツ案 × 内部でDOM APIをめっちゃさわる × SSRができない nodeでimportするとクラッシュした × lit-labs/ssr

    があったが嫌な実装だった globalThisにDOM APIを生やすような感じ ここがいい感じだったら採用していたかもしれない... 5. Lit HTML
  7. そして Web Components へ • 当時「Vue 3でWeb Components対応」と言われていた • SSR対応のCustom

    Elementsの参考に実装 • globalThis に頼った箇所がひとつだけ残った ◦ HTMLElementsがSSRでundefinedになるのを回避させる部分 SSRでも動くコードで実装
  8. SVGのimport • 最近はwebpack以外のバンドラが増えた ◦ vite swc Parcel … • /icons

    は webpack 環境下でしか動かなかった • 社内から webpack 以外でも動いてほしいとの要望が来た webpackが必須だった /icons v1.x.x
  9. SVGのimport • 「.jsではないものを相対パスで読み込む」に差が出やすい なぜ webpack でしか動かなかったのか const { default: filepath

    } = await import( `../svg/${encodeURIComponent(size)}/ ${encodeURIComponent(name)}.svg` ) • jsに従って文字列を扱えば解決するのでは?
  10. SVGのimport • CIでやることを追加 ◦ icons-cli で SVGを取ってきてSVGファイルをつくる ◦ + SVGファイル

    → string を export する .cjs ファイル ◦ + 保存する場所を /icon-files に変更 ◦ つくったファイルをまとめてcommit v2.x.x から増えた /icon-files
  11. SVGのimport • アイコンの import する処理を分離 ◦ SVG string 用の関数を用意 ◦

    独自アイコン用に dynamic import する処理も残す ▪ PixivIcon.extends()にバンドラ設定が必要なのはこのため /icons の SVG import 改修
  12. 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] }
  13. 今後の話 • /icons は a11y やパフォーマンスの課題を抱えている • Charcoalは品質をあげるステップに入った ◦ より安定、よりハイパフォーマンスであるべき

    • Charcoalのぜんぶで頑張っている最中 • キリがないのであとでとっ捕まえて聞いてください デザイナーやiOSエンジニアも捕えておきます
  14. 宣伝 • Charcoalのセッションは他にもあります! ◦ SUB STAGE: cilvia「BOOTHにおけるCharcoal実践活用術」 現場で実際に行われているテーマのカスタムなどの話が聞けそうです ◦ SUB

    STAGE: ああうえ「Charcoalをモバイルアプリで使う」 CharcoalのiOS開発メンバーの発表です • 懇親会パートでmimoはDJをします