D-ZERO社が開発・公開している開発ツール集「d-zero-dev/tools」の中からテスト・確認で便利な機能を２つご紹介します。
@d-zero/print
@d-zero/printは、ウェブサイトのスクリーンショットを撮影するツールです。
校正やチェックなどでページのスクリーンショットが必要なことが多くあります。数ページであればChromeの機能拡張でもかなりスムーズに取得できるとおもいます。最近ではAIを使ったキャプチャツールなども簡単に準備できると思います。しかし、多くのページをブラウザサイズなど条件を変えて取得するのはそれなりに準備が必要です。
このコマンドを使えば、サイズを指定してpngやPDFでキャプチャを作成できます。IDやメモ欄をキャプチャに含めるオプションも用意しています。
主な機能
- Puppeteerを実行してページのスクリーンショットを撮影
- png、pdf、noteの3つの形式で出力可能
- 複数のデバイスサイズでスクリーンショットを撮影可能（7種類のプリセット + カスタム設定）
- レスポンシブデザインの検証に最適
- 複数のURLを並列処理できるため、効率的
使用シーン
- レスポンシブデザインの検証
- ウェブサイトのスクリーンショットアーカイブ
- デザインの比較検証
- ドキュメント作成時のスクリーンショット取得
利用可能なデバイスプリセット
- desktop: 1400px幅
- tablet: 768px幅
- mobile: 375px幅（2倍解像度）
- desktop-hd: 1920px幅
- desktop-compact: 1280px幅（デフォルト）
- mobile-large: 414px幅（3倍解像度）
- mobile-small: 320px幅（2倍解像度）
アウトプット
@d-zero/archaeologist
２つのURLの差分を検証する ためのツールです。Puppeteerを使用してページのスクリーンショットを撮影し、画像差分、HTML差分、テキスト差分を検出します。
本番環境とデモ環境の突き合わせる際に利用することが多いです。
主な機能
- Puppeteerを実行してページのスクリーンショットを撮影
- 複数のデバイスサイズでスクリーンショットを撮影可能（7種類のプリセット + カスタム設定）
- スクリーンショットは画像差分（ビジュアルリグレッション）を検出・出力
- スクリーンショットを比較して、視覚的な差分を検出します。差分がある部分は差分画像に表示されます。
- HTMLの差分検出
- HTMLの構造を比較して、差分を検出します。差分ファイルには、変更された部分がdiff形式で表示されます。
- テキストの差分検出
-
ページから抽出したテキストを比較して、差分を検出します。
-
使用シーン
- 本番環境と開発環境の差分検証
- デプロイ前の確認
- レスポンシブデザインの検証
- 新旧バージョンの比較
利用可能なデバイスプリセット
- desktop: 1400px幅
- tablet: 768px幅
- mobile: 375px幅（2倍解像度）
- desktop-hd: 1920px幅
- desktop-compact: 1280px幅（デフォルト）
- mobile-large: 414px幅（3倍解像度）
- mobile-small: 320px幅（2倍解像度）
アウトプット
比較画像
比較するURLのキャプチャを左右に並べて１つの画像として出力できます。
別々に出力も可能です。
figma などに自動的に並べるスクリプトを別途準備して使っています。
差分検出画像
取得したキャプチャを比較し、差分があるところが赤色で強調されます。
HTML差分
Diff形式で出力されます。
@@ -1042,8 +1029,14 @@
"name": "p",
"content": [
"more plusは、ディーゼロのなかで日々、積み重なったり流れていったりする気づきや試みを、実例をふくめて書き留めていくサイトです。"
]
+ },
+ {
+ "name": "p",
+ "content": [
+ "文字の修正を検知できます。"
+ ]
}
]
}
]
@@ -1111,8 +1104,14 @@
"name": "p",
"content": [
"でも、やっていることは25年変わらず、コツコツと必死に変化し続けることです。技術や環境がどう変わっても、この姿勢だけは一貫しています。"
]
+ },
+ {
+ "name": "p",
+ "content": [
+ "ここも差分があります。"
+ ]
}
]
}
]
テキスト差分
ブラウザでレンダリングされたテキストの差分をDiff形式で出力します。
@@ -28,14 +28,15 @@
more plusについて
more plusは、ディーゼロのなかで日々、積み重なったり流れていったりする気づきや試みを、実例をふくめて書き留めていくサイトです。
+文字の修正を検知できます。
25年変わらない姿勢
ディーゼロは今年25周年を迎えました。
ウェブサイトがあればよかった時代からスタートして、ガラケーやスマートフォンの登場、SNSの台頭など、様々な変化を越えてきました。
でも、やっていることは25年変わらず、コツコツと必死に変化し続けることです。
技術や環境がどう変わっても、この姿勢だけは一貫しています。
-社内で起きていること
+ここも差分があります。
変化し続けるために、社内では多くの情報が共有され、数多くの気づきやトライ、失敗を繰り返しています。
うまくいったことも、うまくいかなかったことも、すべてが次の挑戦につながる材料になります。
スペシャリストからゼネラリスト、業界未経験者まで、様々な属性や世代のスタッフがそれぞれの立場で数多くの挑戦を続けています。
この多様性が、ディーゼロの強みのひとつでもあります。
