M

MLOG

日本語

プログレッシブエンハンスメントと機能検出を用いて、堅牢でアクセシブルなWebアプリケーションを構築する方法を学びましょう。このガイドでは、インクルーシブで将来性のあるWeb体験を創造するためのグローバルな視点、実践的な例、ベストプラクティスを提供します。

プログレッシブエンハンスメントと機能検出：グローバルなユーザーに向けた、回復力の高いWeb体験の構築

絶え間なく進化するインターネットの世界において、Webアプリケーションがアクセシブルで、パフォーマンスが高く、将来性があることを保証することは最も重要です。これを達成するための最も効果的な戦略の一つがプログレッシブエンハンスメントです。これは、ユーザーの環境の能力に基づいて機能強化を追加しつつ、幅広いデバイスやブラウザで動作するコア機能を構築することを重視する設計哲学です。プログレッシブエンハンスメントの重要な要素は機能検出であり、これにより開発者はブラウザが特定の機能をサポートしているかどうかを実装前に判断できます。このアプローチは、特に世界の多様な技術的状況において、一貫したユーザーエクスペリエンスを保証します。

プログレッシブエンハンスメントとは？

プログレッシブエンハンスメントは、堅固でアクセシブルな基盤から始め、ブラウザやデバイスが許す限り高度な機能を追加していくWeb開発戦略です。このアプローチは、デバイス、ブラウザ、インターネット接続に関係なく、すべてのユーザーにとってのコンテンツとコア機能を優先します。これは、Webはどこにいても誰にとっても利用可能で有益であるべきだという考え方を取り入れています。

プログレッシブエンハンスメントの基本原則には以下のものが含まれます：

なぜ機能検出が不可欠なのか

機能検出はプログレッシブエンハンスメントの基礎です。ユーザーエージェント文字列に基づいてユーザーのブラウザを識別するブラウザスニッフィングに頼るのではなく、機能検出はブラウザが*何ができるか*に焦点を当てます。これははるかに信頼性の高いアプローチです。なぜなら：

機能検出の方法

ブラウザの機能を検出するにはいくつかの方法があり、それぞれに長所と短所があります。最も一般的な方法は、JavaScriptを使用して特定の機能やAPIの存在を確認することです。

1. JavaScriptを使用した機能のチェック

この方法は最も一般的で柔軟です。JavaScriptコードを使用して、特定のブラウザ機能が利用可能かどうかを確認します。

例：`fetch` APIのチェック（ネットワークからデータを取得するためのJavaScript）


if ('fetch' in window) {
  // 'fetch' APIがサポートされています。これを使ってデータを読み込みます。
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // データを処理
    })
    .catch(error => {
      // エラーを処理
    });
} else {
  // 'fetch' APIはサポートされていません。XMLHttpRequestのようなフォールバックを使用します。
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // データを処理
    } else {
      // エラーを処理
    }
  };
  xhr.onerror = function() {
    // エラーを処理
  };
  xhr.send();
}

この例では、コードは`window`オブジェクトに`fetch`プロパティが存在するかどうかをチェックします。存在する場合、ブラウザは`fetch` APIをサポートしており、コードはそれを使用できます。それ以外の場合は、フォールバックメカニズム（`XMLHttpRequest`を使用）が実装されます。

例：`classList` APIサポートのチェック


if ('classList' in document.body) {
  // ブラウザはclassListをサポートしています。classListのメソッド（例：add, remove）を使用します。
  document.body.classList.add('has-js');
} else {
  // ブラウザはclassListをサポートしていません。代替手段を使用します。
  // 例：文字列操作でCSSクラスを追加・削除する
  document.body.className += ' has-js';
}

2. CSS機能クエリ（`@supports`）の使用

CSS機能クエリは`@supports`アットルールで示され、ブラウザが特定のCSS機能やプロパティ値をサポートしているかどうかに基づいてCSSルールを適用できます。

例：`@supports`を使用してグリッドレイアウトでレイアウトをスタイリングする


.container {
  display: flex; /* 古いブラウザ用のフォールバック */
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

この例では、`.container`は最初に（広くサポートされている機能である）`flex`レイアウトを使用します。`@supports`ルールは、ブラウザが`display: grid`をサポートしているかどうかをチェックします。サポートしている場合、ルール内のスタイルが適用され、初期のflexレイアウトがグリッドレイアウトで上書きされます。

3. ライブラリとフレームワーク

いくつかのライブラリやフレームワークは、組み込みの機能検出機能や、プロセスを簡素化するユーティリティを提供します。これらは、特定の機能を確認する複雑さを抽象化できます。一般的な例は次のとおりです：

例：Modernizrの使用


<html class="no-js" >
<head>
  <!-- 他のメタタグなど -->
  <script src="modernizr.min.js"></script>
</head>
<body>
  <div class="my-element"></div>
  <script>
    if (Modernizr.borderradius) {
      // border-radiusのスタイルを適用
      document.querySelector('.my-element').style.borderRadius = '10px';
    }
  </script>
</body>
</html>

このシナリオでは、ブラウザが`border-radius`をサポートしている場合、Modernizrは``要素に`borderradius`クラスを追加します。その後、JavaScriptコードがこのクラスをチェックし、対応するスタイルを適用します。

実践例とグローバルな考慮事項

機能検出の実践的な例と、アクセシビリティ、国際化（i18n）、パフォーマンスなどのグローバルな考慮事項を考慮した実装方法を探ってみましょう。

1. レスポンシブ画像

レスポンシブ画像は、ユーザーのデバイスや画面サイズに基づいて最適な画像サイズを提供するために不可欠です。機能検出は、それらを効果的に実装する上で重要な役割を果たします。

例：`srcset`と`sizes`のサポートのチェック

`srcset`と`sizes`は、画像ソースの選択肢に関する情報をブラウザに提供するHTML属性であり、ブラウザが現在のコンテキストに最も適切な画像を選択できるようにします。 


<img
  src="image-fallback.jpg"
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1024w"
  sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
  alt="画像の説明"
>

`srcset`属性は、画像のソースとその幅のリストを指定します。`sizes`属性は、メディアクエリに基づいて画像の意図された表示サイズに関する情報を提供します。

ブラウザが`srcset`と`sizes`をサポートしていない場合、JavaScriptと機能検出を使用して同様の結果を得ることができます。`picturefill`のようなライブラリは、古いブラウザ用のポリフィルを提供します。


if (!('srcset' in document.createElement('img')) || !('sizes' in document.createElement('img'))) {
  // picturefill.jsのようなポリフィルを使用
  // picturefillへのリンク: https://scottjehl.github.io/picturefill/
  console.log('picturefillポリフィルを使用しています');
}

このアプローチにより、すべてのユーザーがブラウザに関係なく最適化された画像を受け取ることができます。

2. Webアニメーション

CSSアニメーションとトランジションはユーザーエクスペリエンスを大幅に向上させることができますが、一部のユーザーにとっては気を散らす原因になったり、問題になったりすることもあります。機能検出を使用すると、適切な場合にのみこれらのアニメーションを提供できます。

例：CSSトランジションとアニメーションのサポートの検出


if (Modernizr.cssanimations && Modernizr.csstransitions) {
  // アニメーションクラスを適用
  document.body.classList.add('animations-enabled');
} else {
  // 静的なUIまたはアニメーションのない、より基本的な体験を使用
  document.body.classList.add('animations-disabled');
}

古いブラウザのユーザーや、ユーザーが動きの低減を希望している場合（`prefers-reduced-motion`メディアクエリ経由）にアニメーションを無効にすることで、よりスムーズで包括的なエクスペリエンスを提供できます。

アニメーションに関するグローバルな考慮事項：一部のユーザーは、前庭障害やアニメーションによって引き起こされる可能性のある他の状態を持っているかもしれないことを考慮してください。常にアニメーションを無効にするオプションを提供してください。ユーザーの`prefers-reduced-motion`設定を尊重してください。

3. フォーム検証

HTML5は、必須フィールド、入力タイプの検証（例：email、number）、カスタムエラーメッセージなど、強力なフォーム検証機能を導入しました。機能検出により、これらの機能を活用しつつ、優雅なフォールバックを提供できます。

例：HTML5フォーム検証サポートのチェック


if ('checkValidity' in document.createElement('input')) {
  // HTML5のフォーム検証を使用。
  // これは組み込みで、JavaScriptは不要です。
} else {
  // JavaScriptベースのフォーム検証を実装。
  // Parsley.jsのようなライブラリが役立ちます：
  // https://parsleyjs.org/
}

これにより、古いブラウザのユーザーでも、たとえJavaScriptを使用して実装されていても、フォーム検証を受けることができます。最終的なセキュリティと堅牢性の層として、サーバーサイドの検証を提供することを検討してください。

フォーム検証に関するグローバルな考慮事項：エラーメッセージがローカライズされ、アクセシブルであることを確認してください。ユーザーの言語で明確で簡潔なエラーメッセージを提供してください。世界中でさまざまな日付と数値の形式がどのように使用されているかを考慮してください。

4. 高度なレイアウト技術（例：CSS Grid）

CSS Grid Layoutは、複雑でレスポンシブなレイアウトを作成するための強力な方法を提供します。ただし、古いブラウザが優雅に処理されるようにすることが重要です。

例：フォールバック付きのCSS Gridの使用


.container {
  display: flex;  /* 古いブラウザ用のフォールバック */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

このコードは、`grid`をサポートしていないブラウザのフォールバックとして`flexbox`を使用します。ブラウザが`grid`をサポートしている場合、レイアウトはグリッドを使用してレンダリングされます。このアプローチは、古いブラウザで優雅にデグレードするレスポンシブなレイアウトを作成します。

レイアウトに関するグローバルな考慮事項：さまざまな画面サイズ、アスペクト比、入力方法（例：タッチスクリーン、キーボードナビゲーション）に合わせて設計します。世界中で使用されているさまざまなデバイスやブラウザでレイアウトをテストしてください。ターゲットオーディエンスにRTLスクリプト（例：アラビア語、ヘブライ語）を読むユーザーが含まれる場合は、右から左（RTL）言語のサポートを検討してください。

機能検出のベストプラクティス

機能検出の効果を最大化するために、これらのベストプラクティスに従ってください：

機能検出におけるアクセシビリティ（a11y）への対応

アクセシビリティはプログレッシブエンハンスメントの重要な要素です。機能検出は、Webサイトが障害を持つユーザーにアクセシブルであることを保証するのに役立ちます。

国際化（i18n）と機能検出

グローバルなWebサイトを構築する際には、i18nを考慮してください。機能検出は、言語固有のコンテンツや振る舞いを容易にすることで、i18nの取り組みに貢献できます。

結論：未来のための構築

プログレッシブエンハンスメントと機能検出は単なる技術的な実践ではありません。これらは、グローバルなオーディエンスのために、インクルーシブで、パフォーマンスが高く、回復力のあるWebエクスペリエンスを作成することを可能にするWeb開発の基本原則です。これらの戦略を取り入れることで、絶えず変化する技術的状況に適応するWebサイトを構築でき、デバイス、ブラウザ、場所に関係なく、すべてのユーザーがコンテンツにアクセスし、エンゲージできるようにします。コア機能に焦点を当て、機能検出を受け入れ、アクセシビリティを優先することで、すべての人にとってより堅牢でユーザーフレンドリーなWebエクスペリエンスが創造されます。

Webが進化し続けるにつれて、プログレッシブエンハンスメントの重要性は増すばかりです。今日これらの実践を採用することで、Webアプリケーションの未来に投資し、グローバルなデジタルエコシステムでの成功を確実なものにすることができます。

実践的な洞察：