UWP アプリ用の設計ツールキットとサンプル - UWP app developer | Microsoft Docsこのブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。
Storybook for vue.js ドキュメント 日本語翻訳 - Qiita
Storybook を Vue.js で使っていきたいので、必要な箇所を翻訳します。 Introduction Storybook is a UI development environment for your UI components. With it, you can visualize different states of your UI components and develop them interactively. Storybook は UI Component のための開発環境です。これによって様々な状態の UI Component を視覚化し、インタラクティブな開発を可能にします。 Storybook runs outside of your app. So you can develop UI components in isolation without wo
[Storybook] UI Component 管理ツールの紹介 | DevelopersIO
はじめに オハコンバンニチハ、モバイルアプリサービス部の清田です。 UI Component 管理ツールの Storybook がメジャーバージョンアップし バージョン5 になりましたー！パチパチ。 今回は、Storybook の魅力と導入についてご紹介できればと思います。 Storybookとは？ Storybookは、UI Component 管理・開発環境を提供するオープンソースのツールです。 主な用途としては以下な感じです。 デザインスタイルガイド、 コンポーネントの挙動確認、 UIコンポーネント仕様、画面仕様の確認など Webフロントエンド界隈で主要なフレームワークに対応しているので、ご利用できる範囲も広い印象です。 React Vue Angular そして、サンフランシスコに拠点を置く、Chroma Software 社がツールの主な運営のもと、 世界中の有志のコントリビュー
![[Storybook] UI Component 管理ツールの紹介 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/28c1315af3a17dd8fca75dfa52adec1424ee1a04/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F04%2Fba62c3e58340a68260ce48cf7bd43830.png)
Vue.jsほぼ初心者だけのチームで既存サービスのリニューアルをやってみて得られた知見 - エムスリーテックブログ
こんにちは、エンジニアリンググループの福林 (@fukubaya) です。 2019年3月に僕たちのチームが担当するスマートフォンサイトをリニューアルしました。 リニューアルに際して、せっかくなので新しい技術やフレームワークを採用したいということで、詳しいメンバーはいませんでしたがVue.jsでリニューアルすることにしました*1。 本記事では、Vue.jsがほぼ初心者だけのチームでVue.js製プロジェクトをリリースするまでに得られた知見をまとめます。 すでにバリバリ使いこなしている方には物足りないと思いますが、これからVue.jsを始める方の参考になれば幸いです。 黒部宇奈月温泉駅は富山県黒部市にある北陸新幹線の駅。本文には特に関係ありません。 サービスの概要 開発環境 プロジェクトの管理はVue CLIで Chromeの機能拡張 Vue.js devtoolsは必須 バンドルサイズの確
次世代の管理画面を作るフロントエンドの取り組み - BASEプロダクトチームブログ
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン
Vue.js＋Vuex＋TypeScriptのWebフロントエンド開発現場を前向きに改善した話 - ZOZO TECH BLOG
こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネントクラス 使用例 解決策 テンプレート コンポーネントクラス 使用例テンプレート 使用例コンポーネントクラス コンポーネントカタログで汎用化を促す コード テンプレート（atoms.vue） コンポーネントクラス（atoms.vue） サンプル その2: Vuexをシンプルにする Sta
Storybookの可能性を見せびらかしたい
本当は登壇時にこのgifを思う存分に見せびらかしたかったのですが、無念の時間切れです。この記事は実はこのgifを見せびらかすためだけの場である可能性がなくもないです。 さて話を戻して、このgifでどういうことが起きているのかざっと分かってもらえたでしょうか。要点としてはこのあたりです。 Storybook上で動いている画面まるごと表示している画面遷移ができるどれも見れば分かるし何がそんなにすごいのかと思われるかもしれませんが、私のような一部界隈の人間には、実はこれはとても感動的なことなのです。 Storybook上で動いている何よりも重要なのはこの点です。アプリケーションとしてのバックエンドはRailsですが、このgifで見ているものは全てStorybook上で動いています。つまり、Railsは起動する必要がありません。 これが何を意味しているかというと、フロントエンドはRailsから完全
デザイナーだけで作りはじめたデザインシステムにまつわる失敗 2018 - Qiita
デザイナーだけでは実装面に配慮したコンポーネント設計やデザインが難しかった 2018年1月。私たちはデザイナー2名でデザインシステムを作りはじめ、下記のような流れでデザインしていきました。 ① 各社が公表するデザインシステムやスタイルガイドの事例研究 ② Atomic Design などコンポーネント指向をインプット ③ プロダクトを構成するコンポーネントを収集・分類し、俯瞰的に観察する（Interface Inventory） ④ Interface Inventory で分類を元に、コンポーネントをリデザインする ⑤ スタイルガイドの実装（ここはコーダーさんに依頼） デザインが終わり、「いざ実装するぞ」という段階で、デザインに対してたくさんのフォードバックがあり、実装が足踏みしてしまう場面がありました。もちろんデザインについてフィードバックがあることは想定していたことですが、デザインと
Vue CLI と Storybookでスタイルガイドを作成しよう ｜ Tips Note by TAM
サイトの規模やスケジュールに応じてスタイルガイドを作成した方が効率良く進められるケースもあるかと思います。スタイルガイドを作成するメリットにはデザインの統一、テストや運用の効率化などが挙げられます。 とくにスタイルガイドを用いてプロジェクトに関わるメンバー（ディレクター、エンジニア、デザイナー）間の認識を共通化することはプロジェクト進行において非常に重要な意味を持ちます。 スタイルガイドとは、デザインする前の要素やグラフィック、デザイナーやエンジニアが従うべきルールなどを集めたものです。スタイルガイドがあれば、バラバラのWebサイトの部品に一貫性を持たせて、最終的に一体感のある体験を作り出すことができます。 引用：Webデザインのスタイルガイドの作り方 ただし、スタイルガイド導入にはメリット、デメリットがあります。導入するべきプロジェクトなのかは見極めが必要になります。 質の高いスタイルガ
これからVueを勉強しようと思っている人への道しるべ（勉強方法）を書く - Qiita
フロントエンドに興味があって、Vueをやってみたい...!という人、きっと多いかと思います。（きっと、きっとね） ただ、どうやってVueを勉強し始めればいいのかわからない、という人もまた多いはず。Javascript自体あんまり触ったことないし...って人もいると思います。 そこで、これからVueを新たに勉強する人向けに、何を、どの順番で勉強すればいいのかの道しるべ的なものを書いていきます。 対象読者はこんな感じ。 ・RubyやPHPはよく書くけど、Javascriptあんまよくわからない ・jQueryチョット書ける ぜひ参考にしてもらえると幸いです。 ※もちろん、以下に書く方法が最良というわけではないので、参考程度に考えてくださいね。 ES6の記法を知る PHPやRubyを書けるなら、Javascript自体の勉強はそんなに大変ではありません。一部の独特の挙動を除けば、すんなり理解でき
Storybookについて簡潔にまとめる(part2)。 - Qiita
Storybookのストーリーを実装する 前回の記事でもありましたが、Storybookを導入するにあたって追加されるディレクトリはsrc/storiesと.storybookです。これらを編集することでStorybookは編集されます。今回はサンプルとして、exampleというコンポーネントを元にストーリーを実装していきます。src/stories/example.stories.jsを作成しましょう。 ※ストーリーを実装するにあたって、ファイル名の末尾に.storiesをつけましょう（必須）。 //Storybookのapiを読み込む import { storiesOf } from '@storybook/vue' //対象のコンポーネントを読み込む import Example from '../components/example.vue' //storiesOfで登録 sto
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://wix-style-react.now.sh/?selectedKind=Components&selectedStory=Button&full=0&addons=0&stories=1&panelRight=0&activeTab=Description
https://wix-style-react.now.sh/?selectedKind=3.%20Inputs&selectedStory=3.1%20Text%20Input&full=0&addons=0&stories=1&panelRight=0
https://github.com/search?q=Storybook%E3%80%80Vue
Storybookでコンポーネントカタログを作る
DMM動画サービスの問題を解決しようとしている話（コンポーネント編） - DMM inside
Component Encyclopedia | Storybook
http://www.life-is-bitter.com/entry/designguideline_start
An Introduction To Storybook
Storybook