The 12 Factor Design System

デザインシステムについての知見が溜まってきたので、The 12 Factor App のパロディで The 12 Factor Design System というものを考えてみました。 元ネタのThe 12 Factor AppはモダンなWebアプリケーションとしてあるべき姿を12のベストプラクティスにまと…

「Design Systems」輪読会まとめ

はじめに WEBサイトのページを効率よく開発したり、ブランド毀損なく拡張していくためには、 そのページで使われているパーツ(ボタンや、色、フォントなど)を繰り返し使い回せるように管理しておくことが重要です。 ただ、その繰り返して使うパーツをどの…

フロントエンドエンジニアからはじめるデザインシステム

フロントエンドエンジニアの立場から「デザインシステム」をつくることができたので、その作成プロセスとできたデザインシステムをご紹介します。 「デザインシステム」とは あるプロダクトのデザインに関するルールを定義し、そのルールに則ってプロダクト…

Atomic Designの実装例 〜Atomic Designを使ったコンポーネント指向のUI開発:Q〜

本稿は(序)(破)(Q)のシリーズの3番目の記事になります。 本稿では前回(破)で説明したAtomic Designを導入する際に工夫した点をふまえた実装例をJSフレームワークを使用する場合と使用しない場合の2つの場合について紹介します。 シリーズ(序)では…

DevLOVE「Atomic Design ~堅牢で使いやすいUIを効率良く設計する〜」の参加レポ

2018-06-29 DevLOVE「Atomic Design ~堅牢で使いやすいUIを効率良く設計する〜」の参加レポートです。 著者の五藤さんご本人から書籍「Atomic Design ~堅牢で使いやすいUIを効率良く設計する〜」の解説と本には載っていないお話を聞けるイベントでした。 d…

Atomic Designの導入に際して工夫したこと 〜Atomic Designを使ったコンポーネント指向のUI開発:破〜

本稿は(序)(破)(Q)のシリーズの2番目の記事(破)になります。 シリーズ(序)ではAtomic Designの概要 を、 シリーズ(Q)ではAtomic Designの実装例を説明していますので、そちらをご覧ください。 Atomic Design(アトミックデザイン)とは、UI(画…

Atomic Designとは 〜Atomic Designを使ったコンポーネント指向のUI開発:序〜

はじめに UI(画面)コンポーネントを切り出したいときにどういう粒度で切り出したらいいか迷う時があります。 適切な粒度で切り出しておかないと、位置を組み替えたりデザインを修正したい場合に、使い勝手が悪くて作り直しになってしまうからです。 メンテ…

サイトの描画スピードをGoogle PageSpeed Insights APIを使って計測し、Kibanaで可視化する

概要 サイトのリファクタリング前後でページスピードがどれくらい改善されたかを調べるために、 Google PageSpeed Insights APIを使って計測し、さらにKibanaで可視化してみました。 使用技術 embulk Google PageSpeed Insights API elasticsearch 5 kibana …

Dockerコンテナ上にElasticsearchとKibanaの環境をつくる

概要 Dockerのお勉強として、Dockerを利用して、ElasticsearchとKibanaの環境をつくって見たいと思います。 また、複数のコンテナを扱うため、docker-composeを使用してみます。 Dockerの環境構築は下で記事でまとめました。 ugap.hatenablog.com 環境 Docke…

Vagrant + AnsibleでDocker環境をつくる

概要 Vagrant + Ansibleのお勉強です。 Macをコントロールマシンとして、Vagrantを使ってVirtualBox上にDockerインストール済みのCentOS7をセットアップします。 また、CentOS上のDocker以外の部分のプロビジョニングをAnsibleを使って構築します。 環境 Vag…