コピーコードスニペットボタンの構築方法とそれが重要な理由

2025年から私は手根管症候群を患っています。痛みを和らげるために、私はコーディング、Web ブラウジング、コンピューター作業に自分の声を使うことを実験しました。それは簡単なことではありませんし、直接体験しない限り、テクノロジーが移動に問題を抱える人々にとってどれほど敵対的なものであるかを理解するのは困難です。私を知っている人なら誰でも、私が常にアクセシブルなウェブとアクセシブルな実践を強力に支持していることを知っていますが、手の動きが制限されるという経験はこれが初めてでしたし、それがユーザーの最小限の努力で解決されるとは思いもしませんでした。任務の重要性を達成する。

音声コマンドを使用してコードのブロックを強調表示してコピーするのは非常に難しく、少なくとも今の私には不可能です (本当に不可能であるか、実際に手を動かさずに Web ブラウジングとコーディングを行う方法をまだ見つけていないだけです)。コンピューターには多くの頭脳が必要です）。したがって、コードについて書くとき、特に読者がコードをコピーして貼り付けるチュートリアルを作成するときは、手の動きが制限されている人でもワンクリックでコードをコピーできる方法を提供することが絶対に必要です。

手根管症候群になる前は、コードをコピーするボタンは不要だと思っていました。しかし、私は間違っていました。そこで、私の最初の音声ベースのコーディング作業の 1 つは、ブログ投稿内のすべてのコード スニペットに「コードをコピー」ボタンを追加することでした。私は音声コーディングの旅について別のブログ投稿に取り組んでいますが、興味があれば、私が使用しているツールは VSCode の Talon と Cursorless です。コンピュータ上ですべてを音声で行う方法を学び直すのは、学習曲線が急峻でしたが、プロセス全体で苦痛がいくらか取り除かれました。はい、このブログ記事は可能な限り音声で書きました。

私のコピー スニペット ボタン ソリューションは、JavaScript テンプレート エンジンを使用して、イレブンティ プロジェクトの純粋な HTML、CSS、および JavaScript で作成されました (したがって、中括弧を使用した文字列補間が使用されます)。

HTML (および HTML を構築するための予備的な JavaScript)

コードに関するブログ投稿では、1 ページに複数のコード ブロック スニペットが含まれる場合があります。したがって、コピーする正しいコンテンツを見つけるために、各コード ブロックに一意の ID を割り当てる必要があります。外部ライブラリを使用するなど、任意の方法で一意の ID を生成できますが、これはビルド時に各スニペットに対して行うことです。

function makeId(length) {
  let result = "";
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  const charactersLength = characters.length;
  let counter = 0;
  while (counter < length) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
    counter += 1;
  }
  return result;
}

書式設定され、構文が強調表示されたコード ブロックには、書式設定と強調表示を強化するための追加の HTML クラスと CSS クラスが含まれることを考えると、コピー ボタンが元のコード コンテンツのみをクリップボードにコピーするようにする必要があります。私の解決策は、JavaScript で簡単に取得できるように、元のコード文字列をメタ タグに保存することでした (冗長な HTML タグを削除するのではなく、それでも HTML スニペットから HTML タグを削除したくありません!)。また、コード (JavaScript コードなど) がページ上で実行されないように、生のコード文字列をメタ タグに保存するときに「encodeURIComponent」を使用する必要もあります。このメタ タグは、私のブログ投稿内のすべてのコード ブロックの隣にあります。

<meta data-code-id="${thisCodeID}" data-code-to-copy="${encodeURIComponent(codeSnippet)}"></meta>

次に、コードブロックまたはコードブロックの横にあるボタンを追加して、以前に作成した一意の識別子を引用します。また、ボタンテキストの横に小さなクリップボードSVGアイコンを追加することを選択します。省略されたボタンを選択してアイコンのみを使用する場合は、「Aria-Label」を使用して、ボタンに理解できる補助テクノロジー（スクリーンリーダーなど）があることを確認してください（「コードフラグメント」など）。

コピー

cssスタイル

自分のブログ投稿でこのコピーボタンのスタイルを設定する方法は指定しませんが、各コードブロックの右上隅に絶対に配置することを選択します。フォーカス、アクティビティを含め、ボタンに焦点を合わせて、マウスを読んでブログ記事を読んだり、キーボードや音声ナビゲーションを使用したりして要素をクリックして、どの要素が現在フォーカス状態にあり、クリックされているかを明確に知ることができることを確認してください。

javaScriptコード

最後に、JavaScriptを使用してページ上の各コピーボタンを見つけ、次のイベントリスナーを各ボタンに追加します。このコードは、ボタンから元のコードフラグメントの一意の識別子を取得し、関連するメタドマークを見つけ、メタマーカーに保存された元のコードをクリップボードにコピーします。元のコードフラグメントが元のフォームにコピーされていることを確認してください。

このソリューションは、お気に入りのフロントエンドフレームワークに転送できます。一時的な障害は誰にも起こるかもしれません。

以上がコピーコードスニペットボタンの構築方法とそれが重要な理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。