はてなブックマーク

はじめに 過去このブログでは Visual Regression Testing（以降 VRT）に関連した記事をいくつか書いてきました。 Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った - wadackel.me reg-viz のリブランディングをした - wadackel.me reg-cli の Report UI をリニューアルした - wadackel.me Storybook と reg-suit で気軽にはじめる Visual Regression Testing - wadackel.me 関連ツールへのコントリビュートから始まり、現在業務でも活用しています。業務で扱うプロジェクトでは、検証対象となるケースが約 2,500 程度になっていて、実行時間に不満が出るようになりました。 今年の 1 月頃にその不満を解消するため高

はじめに タイトルにもある通り、最近 Web アクセシビリティ (以下アクセシビリティ) の検証ツールを作っています。この記事では作るにあたったモチベーションや、現時点での機能、今後の展望についてまとめます。 モチベーション アクセシビリティを評価しようとすると Lighthouse にも付随する axe のようなツールを用いることが多いと思います。axe は WCAG 2.0 や WCAG 2.1 に則った数多くのルールを持ち、アクセシビリティに関する問題発見を支援してくれます。Lighthouse 以外では、axe をモジュールとして使えることはもちろん、Chrome の Extension などからも実行可能で、ユースケースに合わせた柔軟な利用ができます。 ただ、検証精度はどうかというと少し物足りなさを感じる部分があります。例えば以下のような例です。 <div role="butto

はじめに 技術評論社さんが偶数月 24 日に発売している WEB+DB PRESS に TypeScript の特集を寄稿しました。特集のタイトルは「小さく始めて，大きく改善 実戦投入 TypeScript」で、2020 年 6 月 24 日に発売されます。 タイトルから察せるとおり、これから TypeScript を学び始める方が想定読者となっています。 WEB+DB PRESS Vol.117 この記事では特集の紹介と、執筆の振り返りを書いてみたいと思います。 特集内容 3 つある特集の 1 つです。 概要、章構成 肝心の特集内容ですが、WEB+DB PRESS Vol.117 のページにある紹介文を引用します。 TypeScript は，JavaScript に型が付いたプログラミング言語です。型の恩恵は絶大で，型をもとに，プログラムが不正な振る舞いをしないことを保証できます。また，

はじめに 最近 Google Cloud Platform の Cloud Run が GA となったのが話題に上がりました。また gcloud コマンドを GitHub Actions 上で簡単に扱うための GoogleCloudPlatform/github-actions もリリースされました。これまで使われることの多かった actions/gcloud は deprecated となりアーカイブされています。 これらのサービス、ツールを使うことでかなり簡単に Docker コンテナを動かす環境を構築できます。そのユースケースの一つとして、実際に僕が携わっているプロジェクトでレビューコスト低減のために行っている、Pull Request (以下 PR) 単位で独立したプレビュー環境を起動する方法についてメモがてらブログにまとめようと思います。 前提 以下のようなアプリケーション、プロ

はじめに 僕は普段エディタに Neovim を使っているのですが、ここ数年は onedark という colorscheme を使っていました。特に不便もなく、かっこいいなぁと思っていたのですが、しばらく使っていたため飽きがきてしまい、それならば自分が最高だと思える colorscheme を自作しようと思い、Neovim / Vim 向けの colorscheme を作りました。 この記事では作ったものの紹介、及び実装についての工夫について書いてみたいと思います。 作ったもの wadackel/vim-dogrun https://github.com/wadackel/vim-dogrun dogrun という名前の colorscheme です。名前はかなり適当です。(愛犬と戯れながら名前を考えている際、ドッグラン行きたいねーと思ったのでこの名前…) dogrun は紫をベースにした

はじめに 11 月の頭に Visual regression testing のツールを提供する Organization である reg-viz 全体のブランディングを心機一転しました。 この対応をする少し前の 9 月後半に reg-cli の Report UI は刷新 していましたが、その変更に次ぐ形でのリリースです。 いざリブランディングをしようと決意して、実際に着手するまでは以前の記事と同様なので割愛します。 思いの外時間の掛かってしまったタスクでしたが、せっかくリリースまで漕ぎつけたので、変更内容や過程について軽く記事にしておきたいと思います。 背景 そもそもの発端は Report UI の改修 Quramy さんに相談したら、ついでにロゴも変えちゃっていいですよ！という流れに ロゴを変えるなら全体のリブランディングをしたいですね〜 若干記憶が曖昧ですが、おおよそこのくらいの軽

はじめに 少し前に業務で実装した A/B Testing の実装について、チームメンバー用にドキュメントを書いたのですが、Optimize の導入を考えている社内外の開発者の参考になればと思ったため雑にブログにまとめます。 僕が業務で携わっている WinTicket というサービスでは CDN に Fastly を使用しており、その環境下でキャッシュ可能な Google Optimize (以降 Optimize) を使った A/B Testing の仕組みと、この仕組を採用することによって発生する制約について記載します。 この記事で記載する内容は Optimize のガイドで紹介されている Server-side Experiments の内容とほとんど同じです。まずはガイドを読んで外観を掴んでいただけると良いかと思います。 また Optimize 自体の概要については公式ドキュメントや

はじめに reg-cli は Visual Regression Testing のためのツールです。この reg-cli は reg-suit で使われています。reg-cli および reg-suit については以下の記事を参照ください。 コンポーネント/単体テスト単位での visual regression テストを行うためのツールを作った話し 1 日 10 万枚の画像を検証するためにやったこと Storybook + zisui + reg-suit な visual testing を構築する Storybook と reg-suit で気軽にはじめる Visual Regression Testing 僕自身、仕事でもお世話になっている1 ツールなのですが、もっと見やすく、もっと使いやすくしたいなぁーと思っていたタイミングで、reg-suit の作者である Quramy さんと

はじめに 気になってはいたけど、特に触ることなく過ごしていた React Hooks なのですが、最近少しずつですが仕事でも趣味でも導入を始めました。 最近 Lazy Image 的な実装をすることがあったので、React Hooks で置き換えてみようと思い、練習がてら IntersectionObserver を簡単に扱うための Custom Hook を作ってみました。 作ったもの use-intersection というライブラリを作成しました。以下リポジトリです。 use-intersection https://github.com/cats-oss/use-intersection npm にパッケージとして公開しているため、

はじめに タイトルにある通り、scaffdog という scaffolding のためのツールを作りました。Node.js で書いています。 scaffdog https://github.com/cats-oss/scaffdog スカーフを巻いた犬がロゴ… Markdown で記載されたテンプレートに従ってファイルを生成するものとなっています。 具体的には次のようなテンプレートです。 --- name: 'component' description: 'Generate standard React component.' message: 'Please enter component name.' root: 'src' output: '**/*' ignore: [] --- # `{{ input | pascal }}/index.js` ```javascript ex

はじめに 最近 Rust に興味が湧いて少しずつ触ってみています。学習用に何かガッツリと取り組める題材が欲しいなぁと思い、Writing An Interpreter In Go という本にある Monkey というプログラミング言語の Go 実装を Rust で書き直す、ということをやってみました。 そして、Rust で書き直しただけでは少し物足りない感じがしたので、先の本には登場していない要素として Formatter 及び、wasm32-unknown-unknown をターゲットに Wasm へコンパイルしブラウザで動作させるところまで実装しました。 ちなみに Writing An Interpreter In Go は、既に様々な方が読まれているような有名な本なので特別紹介はしませんが、かなりの良書なので「読んだことない！」という方は是非読んでみると面白いかもしれません。 『Wr

はじめに 普段 Markdown に限らず、文書やコードを書く時、ほとんどの場合 Vim を使っています。Markdown はそのままの書式で十分に見やすいと感じますが、リポジトリのドキュメントを書いたりするような場合にプレビューが出来ると、実際の表示がどんな感じになるか確認しながら書き進められるため便利です。 僕は Vim で Markdown のプレビューを行うために Previm を使用しています。必要な機能が実装されており、Markdown のプレビュー用途なら別ライブラリへの依存もないため導入がしやすく気に入っています。 kannokanno/previm 最近までほとんどデフォルトの設定で使用していたのですが、大きめの画像を表示させた際に画像がコンテンツ部分からはみ出してしまう点が少し気になっていました。 Previm では CSS の変更がサポートされているので該当部分だけさ

去年の振り返りを書いた記事でサイバーエージェントに入社することを書きました。そこから実際に働き始めてもう少しで半年経ちます。 そんなタイミングで、弊チームリーダーの@ahomuさんがエンジニア採用に関する発表をされていて、採用後のフォローについて大きく共感出来たという点と、半年という一つの区切りで振り返りとか感想とか、雑感みたいなものを書いてみたいと思います。 今日のショートトークに使ったスライド出しておきますね #cybozumeetup キラ★キラしないエンジニャー採用 https://t.co/S4jmzCQBWh — あほむ｜副業転職 Offers の overflow (@ahomu) May 22, 2018 はじめに 以降記載する内容については、あくまで個人的観測範囲で感じているものになります。全ての部署、チーム、職種に関する内容ではありません。中途入社した、いちエンジニアの

はじめに タイトルにある通り、git-chglog という Go 製の CHANGELOG ジェネレータを作りました。 git-chglog/git-chglog https://github.com/git-chglog/git-chglog Git を使用したコミットとタグからなる情報を元に CHANGELOG を作成するためのツールです。 まだまともなサンプルが用意出来ていないのですが、以下は Angular のリポジトリで試しに作ってみたイメージです。 2018/02/20 時点の Angular のコミット数がおよそ 9600 程度で、生成までの時間が 2.5〜3.5s なので、まぁストレスなく使えるレベルの速度かなと思います。 僕が普段仕事としている Web Front-End 界隈では、conventional-changelog というツールが存在し、恐らく最も使われていま

約半年前に「Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った」という記事を書きました。この時 storybook-chrome-screenshot というアドオンを作って公開した紹介でした。 当初は React のみのサポートだったのですが継続的に手を加えていて、最近 Angular と Vue.js へのサポートが完了したり、機能的にも大分実用的になってきました。 そこで今回は、storybook-chrome-screenshot と reg-viz/reg-suit を使って Visual Regression Testing (視覚回帰テスト) を導入して、ありがたみを感じるところまでを書いていきたいと思います。 だらだら書いていたら思っていたよりも長くなってしまったので、各種ツールのセットアップ だけで充分という方は読み飛ばして

先日、Storybook のストーリーを、Puppeteer を使って自動でスクリーンショットを撮影する Addon を作りました。まだ React のサポートのみだったり、API がまだ不十分だったりしますが、簡単に使い方と仕組みについて紹介していきたいと思います。 はじめに まず、Puppeteer が何者かという点は、以下の記事が大変参考になるため、ここでは触れません。 —headless 時代の本命？ Chrome を Node.js から操作するライブラリ puppeteer について - Qiita 今回作った Addon は、上記 Puppeeer を使って、任意のストーリーのスクリーンショットを取るためのものになります。 スクリーンショットを取るためのモチベーションは色々と考えられますが、ここでは開発時に使用している既存のストーリーを活用して、最小限の労力で Visual

以前に CLI で SVG を React Components へ変換する方法 を記事に書きました。数が多いものなら一気に変換したいのですが、ちょっとしたデモサイトのロゴや、少量のアイコン追加など、CLI で変換する為の環境準備をするより気軽に使いたい場合は、ブラウザ上でさくっと変換出来た方が使い勝手が良さそうです。 という訳で、ちょっと前に作った React の Form ライブラリ のお試しを兼ねて、良い意味で雑に使える変換ツールを作ってみました。 作ったもの SVG to JSX with GUI https://wadackel.github.io/svg-to-jsx-with-gui/ よくある 2 ペインエディター風味です。 コードは以下のリポジトリに。 wadackel/svg-to-jsx-with-gui https://github.com/wadackel/svg

2017 年。React のフォームに消耗しました。 いくつか良さそうなフォームライブラリはありますが、個人的に満足のいくものが無かったので、とあるプロジェクトで実装したものをベースにしてライブラリにまとめました。 作ったもの react-drip-form という、HoC ベースで React のフォームコンポーネントを構築するライブラリを作りました。元となるコードを書いている時、「さくっとフォームの実装を済ませてゆっくりコーヒーでも飲みてぇ…」という気持ちがかなり高まってたので、コーヒーを連想させる名前にしてみました。 wadackel/react-drip-form https://github.com/wadackel/react-drip-form ドキュメントのページでは、Create React App を使った Quick Start もあるので、さくっと試すことが出来ると

「ブレイクポイント毎にカラム間の余白を変えられるグリッドシステムってなかなか無いな」と思いたち、lime-grid.css という Flexbox ベースの CSS グリッドシステムを公開しました。 lime-grid.css https://wadackel.github.io/lime-grid.css/ 以降、作った背景や使い方、カスタマイズの方法について書いていきたいと思います。 背景 CSS のグリッドシステムは既にかなりの数のフレームワークが公開されています。グリッドシステムに沿ったデザインをコーディングしていく際は、その中から適切に選んだものを使う、という方も多いと思います。 しかし、一般的に使われているものの多くはカラム間の余白 (gutter width) が固定値で、以下の様なデザインの要件によっては使いづらいことも。 デスクトップ = 40px タブレット = 30p

最近、年度末の忙しさにかまけてインプット+アウトプットが殆ど出来ていませんでした。 リハビリがてら、書きたいと思いつつ中々書く機会が無かった Go を使い、GitHub の Pull Request をローカルに Checkout する為の CLI ツールを作ってみました。 作ったもの wadackel/git-prout: Checkout pull request locally with Golang. インストール macOS の場合は Homebrew を使ってインストール可能です。

今年の 7 月にcreate-react-appがリリースされ、僕の観測範囲内ではかなり話題となりました。 昨晩、React コンポーネントの素振りを目的として初めて使ってみたのですが、なかなか便利だったので、素振り+GitHub Pages へデプロイするまでの作業メモです。 前提 あくまでcreate-react-appを Web アプリの開発用途としてではなく、React コンポーネントの素振りを目的として使います。そのため、詳しい使い方については触れません。 詳しい使い方については以下が参考になるかなと思います。 create-react-app Facebook 公式の create-react-app コマンドを使って React.js アプリを爆速で作成する - Qiita また、公式のドキュメントには GitHub Pages へのデプロイの他に Heroku なんかも記載

この記事は Vim (その 2) Advent Calendar 2016 の 9 日目の記事です。 Vim に関する記事 + Advent Calendar 初投稿です。よろしくお願いします。 昨年末、仕事が凄く詰まっている時期に突然 Vim を使い始めて、丁度 1 年が経とうとしています。 それまではターミナルを開くのも、Gulp や npm scripts を走らせるときくらいで、それ程使用頻度としては高くありませんでした。 しかし、Vim と出会ってからは一変、黒い画面の中に篭もるようになりました。 そうなってくると Vim でなんでも完結させたい 欲が出てきました。 皆さん、メモの管理はどうしてますか? Vim で作業中、さくっとメモ書きを残しておきたいことがあります。例を挙げると、 備忘録を残しながら作業したい コードの設計を文書化して思案したい TODO の管理 突如ポエムを

ここ最近はずっと、前の記事で書いた Web サービスをコツコツ作り進めています。その中で、よくある Pinterest っぽいレイアウトを使いたかったのですが、既存の React コンポーネントがやりたいこととマッチしなかったので ReactStackGrid というコンポーネントを作りました。 リポジトリは以下です。 wadackel/react-stack-grid https://github.com/wadackel/react-stack-grid DEMO 実際の動作は GitHub Pages から確認できます。 https://wadackel.github.io/react-stack-grid/ 単純な<div>を使った矩形と、画像を入れ込んだサンプルとなっています。幾つかのアニメーション用のプリセットもあるので是非試してみてください。 手持ちの iPhone6s でも

現在趣味で Web サービスを作っています。今年の 4 月末くらいから準備をし始めていたので、かれこれ 4 ヶ月くらい開発を進めています。一人きりの開発+完成したとしても実際に使ってくれる人がどのくらいいるか分からないという状況ですが、なんだかんだ楽しみながら作業できています。 まだ完成もしていないので、こんな事を書くのは的外れのような気がしますが、やる気の枯渇を防ぐために自分なりに気をつけていること+やっていることを書き出しました。既に色々な方が書いているような内容なのであまり目新しいものでは無いかもしれません、あくまでも僕なりの内容となっています。 自分が使いたいものを作る 凄い基本的なことですが、凄く大事なことのように思います。今作っているのが、主に Web サイトのデザインをアーカイブしておくための(Pinterest みたいな)サービスなのですが、少し前から欲しい欲しいと思ってい

公開されている React コンポーネントのテストコードを見てみると、enzymeを使ってテストしているものを結構見かけます。enzyme はReact 公式でも押しているっぽいので、積極的に使っていきたいです。 Note: Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components’ output. If you’re deciding on a unit testing library, it’s worth checking out: http://airbnb.io/enzyme/ 日本語の紹介記事では@syossan27さんの記事が参考になりました。 React のテストを Enz

Google の提唱するMaterial Designチックな Spinner を、React コンポーネント化して公開しました。 リポジトリは以下です。 wadackel/react-md-spinner https://github.com/wadackel/react-md-spinner デモ React MD Spinner - DEMO https://wadackel.github.io/react-md-spinner/ 実際の動きは以下の様にカラフルな円形がくるくる回る感じになっています。 手持ちの iPhone6s で確認している限り、スマートフォンでも必要充分スムーズに動作しています。 使い方 react-md-spinnerの特長として、material-uiの様にインラインスタイルのみで構成されるため、インストールしたら CSS どうしようみたいに悩まずにすぐ使い