Spindle UIのつくりかた / Spindle UI: From Concept to Creation

Transcript

1. Spindle UIのつくりかた 原 一成 2023年8月30日 Encraft #6
2. You can become a Spindler today
3. コンポーネントをつくる前に Spindle UIとは？ 要件定義とスタイリング Design Docを書く 00 01 02 03 CONTENTS 実装する 04 公開する 05 FAQ 06
4. 00 コンポーネントをつくる前に
5. デザインシステムSpindle(スピンドル)は ”Amebaらしさ”を一貫して届けるための 仕組みです。
9. 01 Spindle UIとは？
10. Spindle UIはSpindleに内包されたUIライ ブラリの総称です。 Amebaらしさを一貫して表現するための 必要十分なComponent郡で、その全てが Amebaのブランド指針に準拠します。
12. Spindle UIの Design Doc 見てみましょう
13. 目指すこと 各Webアプリケーションで再作成する必 要のない小さな単位のコンポーネントを 作成し、ライブラリとして配信すること を目指します。
14. 目指さないこと このコンポーネントだけでWebアプリ ケーションを作れるような、大きなライ ブラリを提供することを目指していませ ん。
15. 概要 Amebaの開発での利用実績を踏まえ、以下の点を考慮してライブラ リを提供します。 • Reactコンポーネントの提供: Amebaで最も利用されているUIライブラリの Reactで作られたミニマムなコンポーネントを提供します • スタイルが定義されたCSSの提供: UIライブラリを使用しないLPなどのプ ロジェクトにCSSで表現できる範囲の振る舞いを提供します • UIコンポーネントカタログ中心の開発: 作られたコンポーネントはすぐ にテストされ、表示を確認します • 管理されたファイルサイズ: 共通処理が集まるため、大きくなりがちなUIラ イブラリのファイルサイズが規定を超さないようにします
16. You are all set!
18. エラー コンポーネント 欲しいっ！ Modal つ〜くろ
19. 02 要件定義とスタイリング
20. やるよっ
24. 03 Design Docを書く
25. Design Docにはコードだけでは 読み取れないコンポーネントが 作られた背景や設計のポイント を記載します。 また、レビューを通じて不明点 や考慮できていない箇所を洗い 出す役割も兼ねています。 仕様書ではないので完璧に記述 する必要はありません！
26. はみ出した時 は折り返す？ スクロール？ Variant つくりま しょう
27. 概要・背景 パンくずリストは、Webサイトのページ階層をリス ト化して表示し、現在地を示すコンポーネントで す。Webサイトを訪れたユーザーが、サイト内のど このページを閲覧しているのか把握するために配置 します。現在地を把握することでWebサイトの構造 を理解しやすくなるため、アクセシビリティやSEO の観点でも効果的です。
28. スクリーンショット
29. デザイントークン • Surface Secondary (背景色) • Text Accent Primary (リンク色) • Text Low Emphasis (現在地テキスト色） • Object Low Emphasis (矢印の色) • Focus Clarity (フォーカスリングの色)
30. プロパティ type Props { children?: React.ReactNode; variant?: 'standard' | 'emphasized'; wrap?: 'wrap'; // 画面幅に入り切らなくなったタイミングで折り返して表示します }
31. 使用例 <BreadcrumbList> <BreadcrumbItem href="/top">Top</BreadcrumbItem> <BreadcrumbItem href="/team">Team</BreadcrumbItem> <BreadcrumbItem href="/about" current>Amebaとは　　 </BreadcrumbItem> </BreadcrumbList>
32. <BreadcrumbItem> を使わず、直接 <a> 要素も使用 できます。各種フレームワークで定義された <Link> も同様に指定できます。その際には、現在地となるa 要素にaria-current属性を付与してください。 <BreadcrumbList> <Link href="/top">Top</Link> <a aria-current="page">Amebaとは</a> </BreadcrumbList>
33. アクセシビリティ
34. • テキストサイズを拡大縮小できる[MUST] ◦ 画面を200%拡大・文字サイズを2倍に変更して も、情報が欠落しない ▪ Wrapオプション指定時は、適切に文字が折り 返される ▪ その他は、横スクロールで全てのテキストを 表示できる
35. • 現在位置を確認できる[SHOULD] ◦ 現在位置は aria-current="page" を付与している • HTMLの要素や属性を正しい役割で使用する[MUST] ◦ パンくずリストのnav要素に aria-label="パンくずリス ト"、現在位置には aria-current="page" を付与してい る ◦ スクリーンリーダーでも機能落ちがなく、読み上げが過 不足なく行われている
36. Spindle 使っていれば アクセシブル
37. 04 開発する
38. yarn generate Powered by ジェネレート
39. cd packages/spindle-ui yarn generate
40. cd packages/spindle-ui yarn generate ? Please select a document. (Use arrow keys) ❯ component ? Please select the output destination directory. (Use arrow keys or type to search) ❯ src/ ? Please enter a component name. Breadcrumb
41. cd packages/spindle-ui yarn generate ? Please select a document. (Use arrow keys) ❯ component ? Please select the output destination directory. (Use arrow keys or type to search) ❯ src/ ? Please enter a component name. Breadcrumb 🐶 Generated 7 files! ✔ src/Breadcrumb/index.ts ✔ src/Breadcrumb/Breadcrumb.tsx ✔ src/Breadcrumb/Breadcrumb.css ✔ src/Breadcrumb/Breadcrumb.stories.mdx ✔ src/Breadcrumb/Breadcrumb.test.mdx ✔ src/index.ts ✔ src/index.css
42. /* src/Breadcrumb/Breadcrumb.tsx */ import React from 'react'; type Props = {}; const BLOCK_NAME = 'spui-Breadcrumb'; export const Breadcrumb: React.FC<Props> = ({}) => { return ( <div className={BLOCK_NAME}></div> ); };
43. /* src/Breadcrumb/Breadcrumb.tsx */ import React from 'react'; type Props = { variant: 'standard' | 'emphasized' }; const BLOCK_NAME = 'spui-Breadcrumb'; export const Breadcrumb: React.FC<Props> = ({ variant = 'standard' }) => { return ( <nav aria-label="パンくずリスト" className={`${BLOCK_NAME} ${BLOCK_NAME}--${variant}`}} >{...}</nav> ); };
44. /* src/Breadcrumb/Breadcrumb.tsx */ import React from 'react'; type Props = { variant: 'standard' | 'emphasized' }; const BLOCK_NAME = 'spui-Breadcrumb'; export const Breadcrumb: React.FC<Props> = ({ variant = 'standard' }) => { return ( <nav aria-label="パンくずリスト" className={`${BLOCK_NAME} ${BLOCK_NAME}--${variant}`}} >{...}</nav> ); };
45. /* src/Breadcrumb/Breadcrumb.css */ .spui-Breadcrumb { }
46. /* src/Breadcrumb/Breadcrumb.css */ .spui-Breadcrumb { overflow: auto hidden; } .spui-Breadcrumb--wrap { overflow: hidden; } … .spui-Breadcrumb--emphasized { background-color: var(--color-surface-secondary); } … .spui-Breadcrumb a:not([aria-current]) { color: var(--color-text-accent-primary); font-weight: bold; } .spui-Breadcrumb a[aria-current] { color: var(--color-text-low-emphasis); font-weight: normal; } デザイントークンは spindle-tokens.css で定義されています
47. /* src/Button/Button.css */ :root { --Button--contained-backgroundColor: var(--color-surface-accent-primary); --Button--contained-color: var(--color-text-high-emphasis-inverse); --Button--contained-onActive-backgroundColor: var(--primary-green-100); --Button--contained-onHover-backgroundColor: var(--primary-green-100); }
48. # Breadcrumb <Meta title="Breadcrumb" component={Breadcrumb} /> ## Variant ### Standard <Preview withSource="open"> <Story name="Standard"> <BreadcrumbList variant="standard"> <BreadcrumbItem href="#" current>Amebaとは</BreadcrumbItem> </Button> </Story> </Preview> Standard Variantはタップエリアを確保する目的でテキストに余白が指定されています。ページ内での左端 を揃えたい場合には、個別に余白を指定しBreadcrumb要素の位置を調整してください。 Storyは Docs, VRT用途 でも使います
49. 見た目に関わる 色や形、レイアウト をテストします
50. import React from 'react'; import { render, screen } from '@testing-library/react'; import { BreadcrumbList, BreadcrumbItem } from './Breadcrumb; describe('<Breadcrumb />', () => { test('having aria attributes', async () => { render( <BreadcrumbList> <BreadcrumbItem href="/about" current>Amebaとは</BreadcrumbItem> </BreadcrumbList> ); expect(screen.getByRole('navigation').getAttribute('aria-label')).toEqual( 'パンくずリスト', ); }); }); できるだけ 自動的に テストします
51. もし作り途中に気になることが出てきたら、設計フェーズに戻り確認します 設計 実装 ですね 変えましょう！ もしかして... 実現できない!?
52. git commit -m “feat(spindle-ui): create Breadcrumb component”
53. 05 公開する
54. git switch -c release/minor git push origin release/minor CONTRIBUTING.md
55. One more thing
57. Congratulations, you are a Spindler!
58. 06 FAQ
59. Q: 取り組みでよかったことは？ ブランドを一貫して届けるための仕組み にしたことで、職種を超えたコラボレー ションが生まれ続けました。
60. Q: Spindle UIでこだわったことは？ • 単体で機能するコンポーネント集 • プロダクトで使われるための構成 • Web標準的なアプローチ
61. Q: Spindleはなぜ公開しているのですか • ブランディングを目的にしているから • 誰でもアクセスしやすいから • 品質をあげたいから • 採用目的...
62. Q: 帽子...アレ(Spindle)ですか？ ふふふ、Suzuri です (suzuri.jp/ameba-spindle)
63. @AmebaSpindle
64. 株式会社サイバーエージェント Tech Lead / Web Developer 原 一成 Hara Kazunari @herablog @herablog お疲れ様 でした