検品に用いている主要ブラウザのアップデートについてお知らせします。

Google Chrome 88が安定版になり、デスクトップ版Chromeでバージョン88.0.4324.96がリリースされました（Chrome Releases: Stable Channel Update for Desktop）。

素晴らしいと思ったのが、CSSのaspect-ratioプロパティをサポートした点です。これはボックスに対しアスペクト比、つまり縦横比を指定できるものです。従来、iframe要素を用いて動画をWebページにレスポンシブに埋め込む際、動画の縦横比に応じた余白を生み出すdiv要素を設け、iframe要素はその子要素として縦横をそれぞれ目いっぱい引き伸ばしつつ絶対配置するというテクニックが広く採用されてきました。以下はそのテクニックのサンプルコードです。

<style>
.video{
  width: 100%;
  padding-bottom: 56.25%;  /*動画の縦横比が16:9の場合*/
  height: 0px;
  position: relative;
}
.video_content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
...
<div class="video">
  <iframe class="video_content" ...></iframe>
</div>

aspect-ratioプロパティにより、上記のテクニックでいうdiv.videoが不要となり、以下のサンプルコードで同じレイアウトを実現できます。

<style>
.video_content{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;  /*動画の縦横比が16:9の場合*/
}
</style>
...
<iframe class="video_content" ...></iframe>

AppleのSafariでも実装が進められているようですし、すべてのモダンブラウザでaspect-ratioプロパティがサポートされる日が今から楽しみですね。

このアップデートにはほかにも数多くの修正（セキュリティに関する修正については36件）と改良が含まれています。新たに追加された主要な機能については、New in Chrome 88  |  Web  |  Google Developersがわかりやすいでしょう。また、 DevToolsの変更点はWhat's New In DevTools (Chrome 88)  |  Web  |  Google Developersにまとめられています。

次のメジャーバージョン、Chrome 89のリリースは、Chromium Dashによると2021年3月2日の予定のようです。

検品に用いている主要ブラウザのアップデートについてお知らせします。

デスクトップ版Firefoxのバージョン84.0.2がリリースされました（リリースノート：Firefox 84.0.2, See All New Features, Updates and Fixes）。

このアップデートには、1件のセキュリティに関する修正（影響度は「クリティカル」）が含まれています。

検品に用いている主要ブラウザのアップデートについてお知らせします。

デスクトップ版Chromeのバージョン87.0.4280.141がリリースされました（リリースノート：Chrome Releases: Stable Channel Update for Desktop）。

このアップデートには16件のセキュリティの修正（うち12件は重要度「高」）が含まれています。

この記事はミツエーリンクス Advent Calendar 2020 - Adventarの24日目の記事です。

はじめまして。私は普段、Webサイトの運用をメインにクリエイティブディレクターとして活動しています。

今日はクリスマス前日ですが、通常営業日のためいつも通り業務をしつつ、Webサイト運用上発生するエラーと、それを繰り返さないためのコミュニケーションについて、考えていきたいと思います。

そのエラーは本当に「自分の確認不足」が原因か？

日頃の問題解決や、運用改善、品質向上のために日夜運用ディレクターは頭を悩ませていますが、その中でも一番改善しやすく、またしにくい禅問答のような問題が「コミュニケーション」であると思います。

何かのエラーが起きた際に、社内外のメンバーに「自分の確認不足で」と安易に答えてしまうことはありませんか？

しかしその問題は、本当にあなたの確認不足により起こったことなのでしょうか。

あえて「安易」に、と表現しましたが、重要なのは「確認フローがあったか」「確認を行えば起きなかったか」「確認の工程を増やすことで改善ができるか」まで考えて答えられていたのか否かです。

確認不足は「たられば」が発生しやすく原因とされやすいため「あの時確認をしていれば」と考え、その改善策として「確認の工程を増やす」ケースがあります。しかしそこが原因ではなかった場合、確認の工程が増えたことでかえってエラーが起きる可能性もあります。

検品に用いている主要ブラウザのアップデートについてお知らせします。

デスクトップ版Firefoxのバージョン84.0.1がリリースされました（リリースノート：Firefox 84.0.1, See All New Features, Updates and Fixes）。

このアップデートには、canvas要素の表示に関し、特定のWindowsユーザーがパフォーマンスの低下やちらつきに遭遇していた件など、複数のバグに対する修正が含まれています。セキュリティに関する修正は、含まれていません。

この記事はミツエーリンクス Advent Calendar 2020 - Adventarの20日目の記事です。

こんにちは。新卒1年目の小林です。

突然ですが、「Webスクレイピング」はご存じですか？

Webスクレイピングとは、Webサイトを巡回して情報を取得・解析し、その情報を加工して新たな情報を生成するプログラムのことです。
Webスクレイピングを使えば、Webページの必要な情報だけを習得し、データを格納することができます。

私はWebスクレイピングを知った時から、この技術を使ってWeb制作や制作物の自己チェックに役立つ物を作りたいと思っていました。
Web制作をしていると、Webの品質やアクセシビリティを普段から意識していても、img要素のalt属性やa要素のhref属性が抜けてしまっていたり、繋がらないリンク先を設定してしまっていたりすることがあります。また、ページ数が多くなればなるほどチェック漏れが発生する可能性も高まります。

Webアクセシビリティとは？

前述で、Webの品質やアクセシビリティについて触れましたが、そもそもWebのアクセシビリティとは、簡単にいうと「年齢・身体条件にかかわらず、Web上で提供されている情報に誰もがアクセスでき、利用できること」だと思います。
Webアクセシビリティが注目されている理由としては、スマートフォンなどのさまざまな媒体でインターネットにアクセスできるようになり、インターネットの利用率が増加したことが考えられます。
また、多くの高齢者や障害者のかたがインターネットを利用しています。そのような方たちを含め、多くの人がアクセスしやすい「アクセシブルなWebページ」が求められていると言えます。

どのようにすればアクセシブルなWebページを作成できるのかは、Web技術の標準化を行う非営利団体のW3C（World Wide Web Consortium）が定めるガイドラインWCAG（Web Content Accessibility Guidelines）に記載があります。前述のimg要素のalt属性に関する推奨事項などが記述されています。

この記事はミツエーリンクスAdvent Calendar 2020 - Adventarの19日目の記事です。

当社のWebサイト制作プロセスでは、複数のスタッフでタスクを分担することが一般的です。そのため、納期までのスムーズな業務進行や事故予防の観点から、スタッフ間のコミュニケーションやチームマネジメントの視点が欠かせません。コミュニケーションがスムーズに行われていないと、ヒューマンエラーが生じやすくなるからです。

航空業界では事故予防のためCRM（Crew Resource Management）という概念が重視されているようです。専門スキルとは異なるコミュニケーションやチームマネジメントのスキル（ノンテクニカルスキル）を重く捉え、良好なチームワークを取りながら的確な意思決定を進めて、事故予防につなげるという考え方です。

CRM（Crew Resource Management）の要点

CRMの定義やディテールは年代や運用する企業によって異なるそうですが、小松原明哲著 「ヒューマンエラー 第3版」（丸善出版）では以下のように要点がまとめられていました。Web制作プロセスでも参考になる点が多いと感じています。

コミュニケーション

• 互いに疑問点は声に出す
• あいまいな言い方、指示は避ける
• 相手の発言には必ず反応する
• 気づいたことや操作を始める前には必ず発言し、状況を共有する

チームづくり

• 発言しやすい雰囲気を作る
• 権限を有する者は、適度な権威勾配を保つ
• リーダーシップだけでなくフォロワーシップも重要

状況の正しい認識

• 常に警戒心と全体を見渡す態度を保つ
• 気づいたことを互いに伝える
• 先を予測し、状況の悪化に備える

意思決定

• そのときに得られる多くの情報を活用して判断する
• 有益な情報と不適切な情報を見きわめる
• 判断したことは他のメンバーにも伝える
• 結果は常に振り返る

ストレス管理

• 仕事の優先順位をつける
• 特定の人に業務が集中しないよう作業の配分について常に考える
• ひとりで抱え込まず、限界を感じたらほかの人に伝える

実際の業務に照らしてみると

上記のひとつひとつにコメントを加えていると膨大な量になりますので、実際の業務場面に照らして気づいた点を書いてみます。

まずは情報の共有についてです。たとえば前工程のスケジュール遅延が生じた際、その事実が後工程に伝わらなければ、単純に当初のスケジュールを空費することになってしまいます。遅延が生じたというのはプロジェクト進行上バッドニュースですが、これを躊躇せずチームに共有することで臨機応変な対策を検討できるかもしれません。

次に情報共有のフローについてです。プロジェクト進行中に疑問点や不明点を見つけた場合、それを共有するフローが必要になります。発言のしやすさはプロジェクトごとメンバーごとに異なるでしょう。たとえば定例Mtgの進行を工夫して疑問点にフォーカスする時間を設けたり、タスク管理ツールやチャットツールなどでルールを定めて共有するなど、コミュニケーションが途絶えない仕掛けを意識的につくりだすことがポイントと考えます。

それからコメントの行い方です。私が携わる検品工程では作業者に対して検品結果をフィードバックし、ケアレスミスなどを認めた場合は必要な修正作業をお願いしているのですが、あいまいなコメントで連絡してしまうと問題の箇所や問題点に認識のズレが生じてしまいます。そのため、ミスを認めた箇所、どう間違っているのか、どういった問題を認識したのかを明確にコメントするよう心がけています。

なお、検品時のフィードバックに関しては、ケアレスミスを責めるようなコメントは基本NGと考えています。事実を躊躇なく共有していく関係づくり、という観点で必要な姿勢であると理解をしています。

チームのヒューマンエラー予防は情報共有の動機づけと心理的安全性がカギ

さまざまなコミュニケーションスキルを持ったスタッフが混在する現場では、コミュニケーションを十分意識したマネジメントがヒューマンエラーをうまく予防するポイントであるようです。

上記のCRMの例に倣うと留意するポイントが多岐にわたりますが、個人的には、

• 情報共有を行う動機づけとして、その重要性をメンバーに意識してもらうこと
• 発言に躊躇することが少ない場づくり、心理的安全性の確保

プロジェクトの早期にまずこの2点を押さえられると、相互の状況をより理解しやすくなり、CRMの各項目に沿う形で問題点や抜け漏れに気づきやすい（＝未然に問題を予防できる）業務進行につながるのではと考えています。