検品業務の紹介や、Web環境の変化に関する情報（ブラウザのアップデートなど）を中心に、Webコンテンツの品質についての話題を提供します。
Google Chrome 79が安定版に
検品に用いている主要ブラウザのアップデートについてお知らせします。
Google Chrome 79が安定版になり、デスクトップ版Chromeでバージョン79.0.3945.79がリリースされました（Chrome Releases: Stable Channel Update for Desktop）。
個人的に嬉しく思ったのが、CSSのprefers-color-schemeやprefers-reduced-motionプロパティの値を変更した状態をDevToolsでエミュレートできるようになったことです。前者については、ちょうど本日公開されたフロントエンドBlogの記事「ダークモードでブラックサンタクロースを召喚してみた」でも触れられていますが、ダークモード対応の普及を一層後押しするかもしれません。
またインストールしたPWAのアイコンが、Android 8.0で導入されたアダプティブアイコンに対応させることができるようになった点も注目です。アイコンのデザイン上、必要な部分が切り取られてしまわないよう注意する必要がありますが、マスクの適用によるさまざまなアイコン形状を実現できるようになりました。詳細はMaskable Icons: Android Adaptive Icons for Your PWA | CSS-Tricksをご覧ください。
このアップデートには他にも数多くの修正（セキュリティに関する修正については51件）と改良が含まれています。新たに追加された主要な機能については、New in Chrome 79がわかりやすいでしょう。また、DevToolsの変更点はWhat's New In DevTools (Chrome 79)にまとめられています。
Firefox 71.0がリリース
デスクトップ版Firefoxのバージョン71.0がリリースされました（リリースノート：Firefox 71.0, See All New Features, Updates and Fixes）。
本バージョンではCSS Grid Layout Module Level 2のsubgridや、段組みレイアウトにおけるcolumn-spanプロパティのサポートが魅力的ですが、img要素のwidth/height属性が内部的にaspect-ratioプロパティにマッピングされた点が個人的に気になりました。レスポンシブWebデザインを採用したページ上で、以下のようにビューポートに応じ表示サイズが柔軟に変わるスタイルシートの適用された画像があったとします。
img {
max-width: 100%;
height: auto;
}従来、このスタイルはwidth/height属性の情報を上書きするため、画像がダウンロードされるまでは高さが0に設定されてしまい、結果としてダウンロード後にページレイアウトに変化をもたらす原因となっていました。今回のマッピングにより、何らかの理由で画像のダウンロードに時間がかかったとしても、完了するまでのあいだ適切なアスペクト比の余白がプレースホルダーとして確保され、ユーザーのストレスを軽減することが期待できます。詳細はMapping the width and height attributes of media container elements to their aspect-ratioをご覧ください。
ほかにも数々の機能追加、バグ修正、セキュリティ修正（重要度高：6件、重要度中：5件）が含まれていますが、上記の点を含め、開発者向けにはFirefox 71 for Developers - Mozilla | MDN、それにFirefox 71 サイト互換性情報 | Firefox サイト互換性情報が参考になるでしょう。
次のメジャーバージョンアップ、Firefox 72のリリースは、Firefox Release Calendar - MozillaWikiによると2020年1月7日の予定のようです。Firefox 72 Beta と Developer Edition が公開されました | Firefox サイト互換性情報にあるように、プッシュ通知周りの仕様変更には要注意でしょう。
「層別」について
層別という言葉は、Web制作の現場ではあまり使われない言葉かもしれません。今回はこの品質管理の用語を取り上げてみたいと思います。
層別とは
層別とは、統計的品質管理の基本に位置付けられるQC7つ道具の1つで、業務上得られたデータをグループ分けすることを指しています。
一般的には、原料、機械、ひと、時間などの要素に注目してグループ分けすることによって、製造プロセスのどこに品質低下の要因があるかを見つけることが目的になります。この考え方自体は、層別という用語で理解していなくてもなじみやすいものかもしれません。
では、Web制作の検品プロセスで発見するさまざまな問題について、具体的にどうやって層別化に取り組むのか。そこで戸惑うことになりました。
出来合いのメソッドは期待できない
品質管理の書籍などでは概念的な説明を読むことができます。しかし、どう層別化すると妥当なのか、具体的な考え方や手順はなかなか目にすることができませんでした。おそらくですが、取り扱う製品や業務プロセスごとに生じる問題は相当にユニークであるため、特定のメソッドを使いまわすことが難しいためと推察しています。
そうすると、どうデータを取りどう層別化するかは自分たちで工夫することが必要になってきます。
有効な層別化に必要なこと
こうしたユニークな分析を可能にするためには、少なくとも取り組むスタッフに該当業務に関する理解と経験が不可欠と考えました。業務プロセスについて原則を理解するのにとどまらず、さまざまな例外を経験していることで初めて、具体的な業務の仕分けが可能になるものと思います。
直接業務に携わっていないスタッフの場合、分析対象のデータの意味をひとつひとつ追うことから始めなければならず、まとまった分析までに時間を要してしまうはずです。理想の層別化された状態をイメージし、逆算してどうデータを残していくのか、という考え方も重要と思いましたが、この逆算にも分析当事者に経験のストックを要します。
自己分析的な視点が望ましいと感じ始めた一方、そのためには自分たちの業務内容をうまく言語化していくスキルも必要になります。言語化されない経験は暗黙的に各自の理解にとどまってしまい、客観的なデータの取り扱いには結び付きにくいはずです。
層別は品質管理部スタッフ全員で
そこで先日、層別に必要となる「業務内容をうまく言語化していくスキル」を伸ばしていくために、部内でブレーンストーミングを実施してみました。
「もし検品に関する現行の社内ルールがなくなったら」というテーマで、普段の業務がどのように滞るのか、どのようなリスクがあるか、反対にメリットはないか、など思いつくまま意見を出してもらいました。自分たちが普段取り組んでいることの言語化ですね。
その後、出た意見を全員で層別化してみました。やはりといいますか、全員で戸惑う時間が生じました。現在、品質管理部に配属されて間もないスタッフもいますので取り組み自体にハードルの高さも感じていましたが、程なくいくつかキーになる意見が出てざっくりとしたグループ分けができました。
1件1件の検品はユニーク、かつ部門スタッフで分担して取り組んでいますので、スタッフ全員、問題点を見つけ出す着眼点をもつことが理想と考えています。その意味で、エクササイズとしてはよい手応えが得られました。
引き続き層別化＝問題抽出へ取り組む
日々のWebページ検品業務からどういった問題を抽出し、業務上の問題解消につなげるか。データの層別化にたけていくことの要旨はここにあると理解しているところです。今後は具体的な業務データを用いての分析に取り組んでいこうと思っています。
Chrome 78.0.3904.108がリリース
検品に用いている主要ブラウザのアップデートについてお知らせします。
デスクトップ版Chromeのバージョン78.0.3904.108がリリースされました（リリースノート：Chrome Releases: Stable Channel Update for Desktop）。
このアップデートには5件のセキュリティの修正が含まれています。
Firefox 70.0.1がリリース
検品に用いている主要ブラウザのアップデートについてお知らせします。
デスクトップ版Firefoxのバージョン70.0.1がリリースされました（リリースノート：Firefox 70.0.1, See All New Features, Updates and Fixes）。
macOS環境においてタイトルバーを表示するよう設定していた際、フルスクリーン表示時にタブバーと重なり合って表示されていた問題など、複数のバグに対する修正が含まれています。