Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。

新しいビューポートの単位(sv*、lv*、dv*)

UI開発者 佐竹

ミツエーリンクスでは全社的にInterop 2022の重点分野について調査をしています。

今回はその中から「新しいビューポートの単位」について紹介します。

応答性を示す新しい指標「INP」

UI開発者 佐竹

ユーザーの直帰率や離脱率とパフォーマンスの関係から、コンテンツを表示する速度や応答性(ページがユーザー入力に応答する速度)がいかに重要であるかは、既によく知られるようになってきています。
ではコンテンツを表示する速度や応答性を上げるにはどうしたらいいでしょう。
結論から述べるとパフォーマンスを客観的な指標に基づいて正確かつ定量的に測定し、そこから課題を見つけて解決することが必要になります。

inert属性の使いどころ

UI開発者 加藤

inert属性はある要素とその要素のサブツリーに含まれる全ての要素を不活性にするための属性です。不活性とは簡単に言えば「クリックできない」「フォーカスできない」「選択できない」「編集できない」状態を指します。

サステナブルWebデザインに関するガイドライン策定の動き

取締役 木達

サステナブルWebデザインについては、これまで何度かコラムで触れてきました:

  1. サステナブルWebデザイン(2020年1月21日)
  2. 加速するSDGsへの取り組みとWebデザイン(2020年10月30日)
  3. グレート・リセットの先を見据えて(2020年12月18日)
  4. DX&SXの時代(2021年6月25日)
  5. サステナビリティ経営時代のWeb品質(2022年2月25日)

また、この考え方に関して昨年2月に出版された書籍、『Sustainable Web Design』をミツエーテックラジオ#11「サステナブルWebデザイン」でご紹介もしています。

そんなサステナブルWebデザインを取り扱うW3CのCommunity Group、Sustainable Web Design Community Groupでは、これまであまり活発にやり取りがなされてこなかったのですが、先月から気になる動きが見られます。4月19日付けで公開された記事、Sustainability Recommendations Interest/Working Groupにおいて将来、サステナブルWebデザインに特化したWorking GroupないしInterest Groupを組織する可能性が示唆されたのです。

上述のとおり、私はこの話題をしばらく前から追ってきましたので、その種の活動に興味がある旨コメントしていたのですが、5月20日付けで公開されたDraft Charter for Interest/Working Group: Please Contributeにおいては、実際の組織化に向けたDraft Charterが提示されました。その内容をめぐり、目下Google Docs上でやり取りが進められています。

Webアクセシビリティの分野でいうWCAGのようなガイドラインを、サステナブルWebデザインに関して策定することは、果たして可能なのでしょうか。私の認識する限り、サステナブルWebデザインでは表示パフォーマンスやアクセシビリティ、ユーザビリティ、ファインダビリティなど、複数の品質がサステナビリティ観点から複合的に求められるため、策定するとなればその内容は多岐にわたる(従い個々の項目の掘り下げ方は浅い)ガイドラインになるのではと予想しています。

いずれにしてもこのガイドライン策定の動き、個人的に大変興味深く思っていますし、また可能な限り私自身、活動に参加させていただくつもりです。順調に進めば、9月12〜16日にハイブリッドで開催予定のTPAC 2022を契機に策定がスタートするかもしれません。

HTML解体新書と出版記念イベントのご案内

アクセシビリティ・エンジニア 中村(直)

筆者と太田良典氏との共著でHTML解体新書 仕様から紐解く本格入門と題した書籍を来月にボーンデジタル様から出版する運びとなりました。

Interop 2022

取締役 木達

ロシアのウクライナ侵攻により発表を延期していたそうですが、Interop 2022について、参加各社から一斉に発表がありました。

Interop 2022とは、Webブラウザの相互運用性を高める取り組みで、Compat 2021の後継にあたります。この取り組みにより、より多くのブラウザにおける意図した通りの表示・動作を、単一の実装で実現しやすくなります。その進捗は、特定の計算方法に基づき点数化のうえ、ダッシュボードで公開されます。相互運用性が不十分であり、なおかつWeb開発者の側で対応ニーズが高いとされたCompat 2021の5つの重点分野、すなわち

  • aspect-ratioプロパティ
  • CSS Flexbox
  • CSS Grid Layout
  • position: sticky
  • CSS transforms

に加えて、新たに以下の10の重点分野にフォーカスして取り組むとのことです。

  • カスケードレイヤー
  • 色空間と関数
  • CSSコンテインメント(containプロパティ)
  • <dialog>要素
  • フォームコントロール
  • スクロール
  • サブグリッド
  • タイポグラフィとエンコーディング
  • 新しいビューポート単位
  • Web Compat

また上記に加え、ビューポートの測定などについての調査も、並行して実施されるとのことです。

Webの相互運用性の向上は、標準仕様それ単体では実現し得ず、それを実装する側と共に車の両輪として機能し、かつ相互に高め合うなかで実現されるものだと私は思います。このInterop 2022により、開発者体験はもとよりユーザー体験も改善されることを強く期待すると同時に、関係者の皆様の尽力に感謝したいと思います。

今から始めるPWA対応(Web App Manifest編)

UI開発者 橋本

当記事では今から始めるPWA対応の第2弾としてPWA化に必要なWeb App Manifestについて説明します。
前回の今から始めるPWA対応(HTML編)をご覧になっていない方はぜひそちらからご覧ください。