【レビュー】小説作成ソフトで論理的に物語を構成 - オープンソースソフト「StorYBook」 (1) StorYBookの概要とインストール | パソコン | マイコミジャーナル

2009/02/24 355 users 辻褄 時系列 マイコミジャーナル インストール ケータイ小説

筋の練られた小説を読んだり、ドラマを見たりして感心させられることも多いだろう。中には、自分でも小説を書きたいと思う人もいるかもしれない。また、ケータイ小説への投稿も流行っている。そんな小説作りに最適かもしれないソフトが、オープンソースで開発され、提供されている「StorYBook」である。「StorYBook」では、登場人物や舞台を設定し、時系列で物語を構成する。そのため、後になってから「辻褄が合... 続きを読む

いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）

2023/10/20 326 users 観点 Next.js 新規サービス PoC Jest

免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookな... 続きを読む

Reactアプリケーションのテスト戦略

2022/06/03 257 users Reactアプリケーション テスト戦略 フロントエンド 種類

Reactアプリケーションのテスト戦略について ・フロントエンドのテストの種類 ・トレードオフ ・所属しているチーム / プロダクトの状況 ・テスト戦略 ・Storybookを使ったこれからのテストへ 続きを読む

Storybookを書くだけでリグレッションテストが 実行される世界へようこそ

2023/10/21 122 users リグレッションテスト 世界

Shizuoka.js #7 続きを読む

2018年 スタートアップでSSRにVue.jsを導入してWebサービスを開発した際の知見 - Qiita

2018/04/15 114 users jQuery Qiita Vuex SSR 知見

私がWebサービスのバージョンアップでVue.js導入することになり、取り組んでる内容についてWEBエンジニア向けに簡単に解説する記事です。 例えば jQueryのUIプラグインを沢山使ってるサーバーフレームワーク で Vue.js、Vuex、Storybook を導入する際にどうすれば良いのか？などの ノウハウについて 記述します。 はじめに サーバーフレームワークのテンプレートへの組み込みが今... 続きを読む

仕事を効率化するデプロイツールを作った - 技術探し

2018/08/27 81 users デプロイツール github.com CSS 静的ファイル

仕事の開発環境改善のために欲しかったので金曜日からコツコツ作っていたアプリケーションを紹介します。 github.com 目的 CIが走るとstorybookやフロントエンドの成果物などの静的ファイルを自動的にアップロードして、PRでのレビューコストを下げるのが目的です。 PRでのレビュー時にCSSの変更などローカルに落として... 続きを読む

[Next.js]フロントテストのコストはStorybookで削減出来る

2023/02/14 79 users 出力 フロントエンド Next.js テスト コスト

１．フロントテストと Storybook の活用 フロントテストのどこにコストがかかるのか バックエンドのテストはシンプルな入力と出力が多いので、テスト作成は比較的簡単です。一方、フロントエンドのテストは UI イベントや動的な要素も含まれ、複数の出力があるため、テスト作成はより複雑になります。これにより、テスト... 続きを読む

Pull RequestごとにStorybookがビルドされたら最高じゃね？ - Studio Andy

2018/04/07 77 users pull request Pull Requestごと

2018 - 04 - 08 Pull RequestごとにStorybookがビルドされたら最高じゃね？ Vue.js Storybook Heroku merpayでは積極的にStorybookを活用してコードと見た目の両方の観点でレビューを行なっていますが、Pull Requestが飛んでくるたびに該当ブランチをpullしてローカルでStorybookを起動するのが大変という運用上の問題を抱... 続きを読む

Storybook による UI & Unit Testing のススメ - Mercari Engineering Blog

2018/12/19 76 users React フロントエ メルカリ フロントエンド構築 ススメ

Mercari Advent Calendar 2018 19 日目です。 担当ははメルカリ JP フロントエンドチームの @nekobato がお送りします。 メルカリ フロントエンドチームでは主に React を利用してフロントエンド構築を行っており、 その中のWeb Rearchitecture では Storybook による UI Testing に取り組んでいます。 今回はフロントエ... 続きを読む

Storybookの実力をフル活用するChromatic

2024/02/21 60 users Chromatic 実力

ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット https://trident-qa.connpass.com/event/308664/ X https://twitter.com/__sakito__ 続きを読む

GitHub Actions のみで、actions/cache も使わない最軽量の VRT

2023/12/24 57 users アプリケーショ Actions VRT Cache デプロイ先

Web アプリケーション開発での VRT 導入は、ちゃんと運用するとなると以下のような多くの検討事項を伴います。 Storybook のストーリーベースで比較するか？それとも実アプリケーションの URL ベースで比較するか？ CI 上でアプリケーションをビルドして dev server を立ち上げるか、それともデプロイ先のアプリケーショ... 続きを読む

2行でwebpack.config.jsで補完を効かせる方法 - Qiita

2019/08/05 57 users Webpack Qiita TypeScript 補完 前提

まず前提として、webpack.config.jsそのものをTypeScriptで書くことができる。公式ドキュメントにも記載があり、ts化自体は数分で終わる。しかし、このwebpack.config.jsをStoryBookの設定から参照するなど他のツールから読まれるときにTypeScriptだと不都合な場合がある。そのようなときに、この方法を使うと1分もかか... 続きを読む

Storybook+AtomicDesignでデザイナーが開発に参加した話 | Nagisaのすゝめ

2018/03/06 53 users Nagisa Atoms organisms デザイナー 浜田

はじめに こんにちは、デザイナーの浜田です。 マンガZERO のWebリニューアルを担当することになり、AtomicDesignに則ってSketchでデザイン制作をしました。 そして今回デザイナーがAtomicDesignで言う Atoms/Molecules/Organisms あたりのHTML/CSSを書いてみようという話になり、 Storybook が導入されることになりました。 本記事では... 続きを読む

Nuxt, ElementUI, Storybook 構成のVueプロジェクトの始め方 - Qiita

2018/11/19 50 users Qiita Nuxt howdy39 ソース 手順

Nuxt, ElementUI, Storybook 構成で始めようとしたときに、StorybookにElementUIを適用させるのにちょっと手こずったので手順を残しておきます。 最終的なソースです。 howdy39/nuxt-storybook-element-boilerplate: Nuxt, Storybook, ElementUI, Boilerplate Nuxtプロジェクトを elment-ui で作成 続きを読む

腐らないUIテストのためのStorybook + Storyshots / #react_kyoto v0.3.0 - Speaker Deck

2019/07/19 42 users まさかり メンション Speaker Deck UIテスト

React.kyoto v0.3.0 ( https://react-kyoto.connpass.com/event/137847/ )でStorybookとStoryshotsを使ったコンポーネントのUIテストについて話しました。 質問・不備・マサカリ等はTwitterにてメンションつけてもらえると嬉しいです。 Twitter: https://twitter.com/shisama_ 続きを読む

FOLIOの画像回帰テストの裏側 – Yosuke Kurami – Medium

2018/12/23 41 users Folio medium Yosuke Kurami 通り

これは FOLIO アドベントカレンダー2018 の23日目の記事です。 さて、昨日の@minodiskの記事でも触れられている通り、FOLIOのWebフロントエンドではStorybookを中心に据えた画像回帰テストを実践しています。 この記事では、FOLIOに画像回帰テストを導入するためにやってきた取り組みについて書いていきます。 大まかな... 続きを読む

SVGスプライトアイコンの作り方・使い方 - 一休.com Developers Blog

2018/12/02 38 users アドベントカレンダー SVGスプライト qiita.com

この記事は一休.com アドベントカレンダー 2018の2日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でフロントエンドの開発を行っています。 今回は、最近一休.comに導入した、SVGスプライトによるアイコンの作り方・使い方について紹介します。 StorybookのSVGスプライトアイコン一覧 アイコンの一般的な使い方 ア... 続きを読む

Storybook 腐らせない

2023/12/09 33 users コンポーネント 単体 アプリケーション ツール 現代

この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 8日目の記事です。 現代のWebフロントエンド開発において、コンポーネントの効率的な管理と可視化が求められる中、Storybookは開発者にとって欠かせないツールとなっています。Storybookは、コンポーネントをアプリケーションから隔離して単体で表示できるツール... 続きを読む

[Storybook] UI Component 管理ツールの紹介 ｜ DevelopersIO

2019/04/17 29 users DevelopersIO メジャーバージョン 導入 魅力 提供

はじめに オハコンバンニチハ、モバイルアプリサービス部の清田です。 UIコンポーネント開発ツールの Storybook がメジャーバージョンアップし バージョン5 になりましたー！パチパチ。 今回は、Storybook の魅力と導入についてご紹介できればと思います。 Storybookとは？ Storybookは、UIコンポーネント開発環境を提供... 続きを読む

Puppeteerを使ったStorybookの自動スクリーンショット撮影用のアドオンを作った - wadackel.me

2017/08/28 29 users addon React wadackel puppeteer

Puppeteerを使ったStorybookの自動スクリーンショット撮影用のアドオンを作った Published August 26, 2017 javascript 先日、 Storybook のストーリーを、 Puppeteer を使って自動でスクリーンショットを撮影する Addon を作りました。まだ React のサポートのみだったり、API がまだ不十分だったりしますが、簡単に使い方と仕... 続きを読む

Storybookの便利なaddon機能のご紹介 | スペースマーケットブログ

2018/06/06 24 users コンポーネント フロントエンドエンジニア 全話 土日

こんにちは、最近バチェラーseason1を見始めたら止まらなくなり気づいたら土日をフルに使って全話見終えていました、フロントエンドエンジニアの荒田です。 スペースマーケットではスタイリングされたコンポーネントを確認するためにStorybookを導入しています。 (Storybookについては以前書いた 記事 をご参照ください) 今回はそのStorybookの便利なaddon機能について紹介したいと... 続きを読む

Storybook First な開発のススメ

2021/03/05 22 users 開発 アプリケーションコード コンポーネント アンチパターン

Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離でき... 続きを読む

Github Actions で Storybook をお手軽に共有するやつ作ってみた - BASE開発チームブログ

2019/12/08 20 users リポジトリ base 右京 GitHub Actions 実装

この記事はBASE Advent Calendar 2019の8日目の記事です。 devblog.thebase.in エンジニアの右京です！ みなさん！Storybook は使っていますか？BASE ではUIコンポーネントの社内展開はもちろん、日々の業務の中でもサンプルの実装を共有したりするために Storybook が使われています。BASEではこれを「特定のリポジトリ... 続きを読む

Storybook を自作して「フロントエンドビルドが遅い問題」に立ち向かう - 一休.com Developers Blog

2018/12/10 19 users 遅い問題 一休.com Developers Blog

この記事は一休.comアドベントカレンダー2018の10日目です。 qiita.com こんにちは。レストラン事業部の所澤です。 WEBアプリケーションエンジニアとしてフロント/サーバー問わず機能開発を行っています。 今回は一休.com レストランの旧アプリケーションのフロントエンド開発環境改善についてお話します。 ※ この記事の... 続きを読む

storybook-chrome-screenshotとzisuiとStorycapと - Yosuke Kurami - Medium

2019/10/20 18 users Storycap medium reg-suit CLI 引数

Photo by Filiberto Santillán from unsplash.com先日、Storycap というCLIを公開しました。 Storybookの各storyをキャプチャして画像化するだけのツールです。主として、reg-suit のようなツールと組み合わせ、画像回帰テスト環境を構築することを目的としています。 使い方はとてもシンプルで、CLIの引数としてStorybo... 続きを読む