フロントエンドBlog

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

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

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

筆者と太田良典氏との共著で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により、開発者体験はもとよりユーザー体験も改善されることを強く期待すると同時に、関係者の皆様の尽力に感謝したいと思います。

「Interop 2022」のパーマリンク

今から始めるPWA対応（Web App Manifest編）

UI開発者 橋本

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

「今から始めるPWA対応（Web App Manifest編）」の全文を読む

Sanitizer APIの使い方

UI開発者 加藤

JavaScriptでは、ユーザーが入力した情報、URLに付与されているクエリ、Cookieの情報など外部からの入力をそのままDOMに反映すると、DOMベースのXSS脆弱性を生み出してしまうという問題があります。

これを避けるために、当社内で定義しているフロントエンド・スタイルガイドでは「HTMLをDOMに直接追加しない」というルールを必須項目として立てており、以下の様に定めています。

「Sanitizer APIの使い方」の全文を読む

今から始めるPWA対応（HTML編）

UI開発者 橋本

昨年末に公開した「ミツエーテックラジオ」の#25「誰でも分かるPWA」でお話ししたように、当社のPodcast「ミツエーテックラジオ」をPWA化しました。 PWA化したことで、以下の項目が可能となりました。

  • アプリとしてインストール
  • オンラインで一度訪問したページはキャッシュを利用しオフライン時は文字起こしの閲覧
  • オンライン時も2回目以降訪れた際にキャッシュを利用し表示パフォーマンス向上
  • キャッシュがないページはオフライン時、オフライン用のページを表示

今回から私が取り組んだPWA化の方法について書いていきます。

「今から始めるPWA対応（HTML編）」の全文を読む

W3C Document Process 2021について

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

毎年恒例と言っても過言ではない、今年のW3CのDocument Processの更新についてアナウンスがありました。ちなみに、去年のW3C Document Processの更新についてはLiving Standard機能を取り込むW3C文書プロセスの更新に記載しています。

W3C Process Documentが何物なのかごく簡単におさらいしておきますと、W3Cが勧告（Recommendations）やノート（Notes）と言ったテクニカルレポートを作成するに当たって、どのように作成していくのかを決める文書です。

それでは公式の変更点の記述をもとに簡単に変更点について見ていきたいと思います。

「W3C Document Process 2021について」の全文を読む

オンラインペアプロをスムーズに進めるためのTips

UI開発者 橋本

今月、当社のPodcast「ミツエーテックラジオ」で#21「ミツエーリンクスにおけるペアプロの取り組み」を公開しました。
取り組みの背景や取り組んだ効果などについてお話ししましたが、今回はこのエピソード内に入りきらなかった、オンラインでペアプロをやるうえでのTipsについてご紹介いたします。

※今回ご紹介するTipsは主にエディターとしてVS Codeの使用を前提としています。VS Code以外のエディターをお使いの方も類似機能があればぜひ使ってみてください。

「オンラインペアプロをスムーズに進めるためのTips」の全文を読む
フロントエンドBlog記事一覧