この記事はGoogle翻訳の結果を編集したものです。

クリップボードAPIは現在のブラウザーで十分にサポートされていますが、古いブラウザーでアプリケーションを使用している少数の人々がまだいると予想される場合があります。

また、アプリケーションへのアクセスに時々問題が発生することも想定しておく必要があります。たとえば、断続的なネットワーク接続またはCDNの可用性により、JavaScriptの一部またはすべてが読み込まれない可能性があります。

古いブラウザーのサポートは無駄だと片付けたり、ネットワークの問題を更新後に解決する一時的な不具合として片付けたりするのは魅力的です。しかし、多くの場合でこの種の問題に対して適切に回復力のある機能を構築することは自明のことです。

プログレッシブエンハンスメントとして一般に知られているこの回復力のあるアプローチは基本的な機能がHTMLとCSSで実装され、基盤となるテクノロジーがブラウザーでサポートされている場合、その基本エクスペリエンスへの段階的なアップグレードがCSSとJavaScriptで段階的にレイヤー化されるようなWebインターフェイスを提供する方法です。

PINフィールドの漸進的な強化

ブラウザーでサポートされていない限りコピーボタンが表示されないように、PINフィールドを段階的に強化する方法を見てみましょう。そうすれば、機能しないボタンを誰かに見せることを避けることができます。

まず、CSSでコピーボタンを非表示にします。次にStimulusコントローラーでクリップボードAPIのサポートを機能テストします。APIがサポートされている場合はコントローラー要素にクラス名を追加してボタンを表示します。

data-controller属性を持つdiv要素にdata-clipboard-supported-class="clipboard--supported"を追加することから始めます。

<div data-controller="clipboard" data-clipboard-supported-class="clipboard--supported">

次にボタン要素にclass="clipboard-button"を追加します。

<button data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</button>

次に以下のスタイルをpublic/main.cssに追加します。

.clipboard-button {
  display: none;
}

.clipboard--supported .clipboard-button {
  display: initial;
}

まず、コントローラー内にdata-clipboard-supported-class属性を静的クラスとして追加します。

static classes = [ "supported" ]

これにより、HTML内の特定のCSSクラスを制御できるようになるため、コントローラーはさまざまなCSSアプローチにさらに簡単に適応できるようになります。このように追加された特定のクラスにはthis.supportedClassを介してアクセスできます。

次にクリップボードAPIがサポートされているかどうかをテストし、コントローラーの要素にクラス名を追加するconnect()メソッドをコントローラーに追加します。

connect() {
  if ("clipboard" in navigator) {
    this.element.classList.add(this.supportedClass);
  }
}

このメソッドはコントローラーのクラス本体のどこにでも配置できます。

必要に応じてブラウザーでJavaScriptを無効にし、ページを再読み込みしてコピーボタンが表示されていないことを確認します。

PINフィールドを徐々に拡張しました。コピーボタンのベースライン状態は非表示で、JavaScriptがクリップボードAPIのサポートを検出した場合にのみ表示されます。

まとめと次のステップ

この章ではクリップボードコントローラーを緩やかに変更して、古いブラウザーや劣化したネットワーク状態に耐えられるようにしました。

次にStimulusコントローラーが状態を管理する方法について学習します。