デザイナーも確認できる！Chromatic で Storybook を公開する

はじめに

こんにちは kimizuy です。

今回は Chromatic を利用して Storybook をデザイナーなど非エンジニアにも簡単に見られるよう公開する手順を紹介します。

また、特定の IP アドレスでしか共有リンクを閲覧できない制限をかけるといった高度な公開方法もありますが、今回は「GitHub でリポジトリを連携して共有リンクを取得するまで」というスタンダードな方法のご紹介です。

次のような共有リンクを取得します。

https://www.chromatic.com/component?appId=62555aadaf9d91003a0d1469&csfId=pages&buildNumber=1&k=62555b04c2bd8e004a4ea3b0-1200-interactive-true&h=7&b=-1

Storybook を共有し多様な状態の UI コンポーネントを見たり触ってもらうことで、より具体的なフィードバックを迅速に受け取ることができます。

そもそも Chromatic とは

Chromatic automates gathering UI feedback, visual testing, and documentation, so developers can iterate faster with less manual work.
Chromaticは、UIフィードバックの収集、ビジュアルテスト、ドキュメンテーションを自動化し、開発者は手作業を減らし、より速く反復することができます。（DeepL 翻訳）

https://www.chromatic.com/

GitHub のリポジトリと連携することでストーリーの変更を即時反映して共有リンクを生成したり、UI テストを走らせてフィードバックから承認までを一気通貫で行ったりできます。

tldr

これから紹介する手順を箇条書きします。

• Storybook が存在する GitHub リポジトリを Chromatic に追加する
• Chromatic パッケージを追加 & Storybook を公開する
• チュートリアルをスキップする
• 共有 URL を取得する

Chromatic で Storybook を公開する

Storybook が存在する GitHub リポジトリを Chromatic に追加する

まずは Chromatic にサインイン（またはサインアップ）して GitHub のリポジトリを追加し連携します。

Chromatic パッケージを追加 & Storybook を公開する

プロジェクトに Chromatic を追加してターミナルから Storybook を公開しましょう。

yarn add -D chromatic

Chromatic 側で公開用のトークンが自動生成されます。例えば、更新した Storybook を手動で Chromatic 側に反映する場合にも以下のコマンドを叩きます。

npx chromatic --project-token={YOUR_TOKEN}

少し待つと公開が完了します。ローカルにログファイル（build-storybook.log）が生成されるので適宜 .gitignore に追加しておくと良さそうです。

チュートリアルをスキップする

今回は共有 URL を取得する目的があるのでチュートリアルをスキップします。ページ下にある「Go to your project」のリンクを押してスキップしましょう。

ビルド一覧画面に遷移しました。サイドバーの「Library」を押すと公開された Storybook の一覧を見ることができます。

Library > Pages へ移動しましょう。

ページ左上にシェアボタンがあるのでそこから共有リンクを取得しましょう！

おわりに

今回は Storybook に Chromatic の導入して公開する方法をご紹介しました。Chromatic はかなり多機能な印象で、使いこなしていきたいですね。

共有リンクの公開範囲を限定や実践的な UI テストの CI など、すでにやっている方がいらっしゃったらぜひ Twitter などでコメントをお寄せいただけると勉強になります！

以上、お読みいただきありがとうございました。