7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-01

はじめに

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

Storybookとは?

storybook-intro-animation.gif

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

こまってたこと

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

やりたいこと

開発の流れイメージ

image.png

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

利用する構成イメージ

image.png

  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の設定

アカウント作成

image.png

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

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

image.png

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

image.png

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

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

image.png

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

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

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

image.png

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

image.png

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

image.png

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

Overview___demo-for-designer.png

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

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

image.png

ちゃんとアクセスできますね!:thumbsup:

image.png

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

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

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

参考

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?