【画像付】最速でデザイナーにレビュー依頼する

5663 ワード
nuxt.js storybook Netlify GitHub Vue.js GitHub テキストリンク

はじめに

自社でVueを触るタイミングで、フロントエンドエンジニアからStorybookを教えてもらいました。
結果、一手間加えるとデザイナーとのレビューが圧倒的に楽になったので、今回はそこを書きます。

Storybookとは？

  • StorybookはUIの開発ツール
  • ReactやVueにて利用可能
  • コーディングしたコンポーネントの挙動等を確認
  • 細かい単位で分割してコーディングしていくのに適している。と感じた
    • 具体的にはAtomic Designが適している。と感じた

こまってたこと

  • 自社ではWebViewを用いたアプリを作っていたりします。もちろん、基本的にデモはアプリ上で行っています。
  • ちょっとしたデザインレビューするのにもデモアプリに配布するのは効率が悪い...
  • けどデザイナーに開発環境を構築してもらうのも悪い...
  • PushしたらStorybookを自動デプロイするようにして、URL連携してみてもらえたら最高じゃないか？

やりたいこと

開発の流れイメージ

  1. デザイナーからデザインファイルをもらう
  2. コーディング
  3. レビュー依頼（URL）
  4. レビュー完了したらデモアプリに配布して、デモ会に持っていく

利用する構成イメージ

  1. コーディング後、ブランチにPush
  2. Netlifyが自動的にStorybookをデプロイ
  3. デザイナーにPR投げたり、URLを連絡したりしてレビュー依頼する

やったこと

storybookの導入

以下に詳細な手順を記載してありますのでこちらで導入
https://qiita.com/vengavengavnega/items/566a6beed89ec86c55fa

buildコマンドの追加

package.json(抜粋)
"scripts": {
  "build-storybook": "build-storybook -s public"
},

Netlifyの設定

アカウント作成

今回はGithubアカウントで作成しました。
画面の手順に従って完了です。

新しいサイトの設定をする

New Site from Gitから、新しいサイトの作成画面へいきます。

画像の通り、対象のブランチと、Buildの設定を入力します。

デプロイの完了を確認する

画像の通りStep1がYour site is deployed ✔️となっていればデプロイ完了です。
ちなみに、以降のステップはカスタムドメインを設定するなど記載がありますが、ただのレビュー用であれば不要なので問題ありません。

サブドメイン（URL）をわかりやすい名前に変更する

デフォルトだと、サブドメインが自動生成された文字列になっていて分かりにくいかと思いますので変更します。

⚙ Domain settingを押下してドメイン設定画面へ

Custom domainsにデフォルトの設定が存在するので、Options->Edit site nameを押下して名前を変更します。

いい感じの名前を入力してSaveします。

TOPの表示も変更されていますね！

GithubのPRにも自動的にURLがリンクされています

ちゃんとアクセスできますね！

(おまけ)SlackにPRの通知が行くように設定

SlackとGitHubを連携してissueコメントやプルリク通知をチャンネルに流す方法（2020年版）

こちらの記事を参考に、PR生成時にSlackに通知が飛ぶようにすれば完璧ですね！
ノータイムでレビュー依頼ができます。

参考