方法：Web上のクリップボードにコピーする
このプログレッシブウェブアプリでコードスニペットを含む多くのコードガイドや記事を書くので、ユーザーが必要とする次のタスクをカバーすることが不可欠です。
- コードの優れた読みやすさ
- カプセル化されたコードをコピーするためのシンプルで明確なアクション
これが、有用なコード例に必要な結論です。しかし、私はそれを改善できますか？
エンゲージメントの向上
アプリのクリップボードへのコピー機能をレベルアップするために、楽しいユーザーエクスペリエンス（UX）にはエンゲージメントを促進するという優れた副作用があるため、コピーボタンのクリックをより楽しくする方法を考えました。
私は次のことを思いつきました。ユーザーがクリップボードにコピーするたびにアプリがチャットのように「応答」した場合はどうなりますか？経験は即座により個人的なものになるでしょう。傲慢で卑劣な言葉を使って、提供されたメッセージも彼らに独特の性格を持っています。
最終結果を見てみましょう。
I'm a code example, sort of.
Click on the button in the bottom right corner to copy.
ご覧のとおり、階層は上から下に向かっています。
- ウィンドウコントロールを使用したネイティブウィンドウの模倣
- コンテンツ
- アクション（執筆時点では、クリップボードへのコピーのみ）
実装
ユーザーがコードをクリップボードにコピーするたびに、事前定義されたテキストスニペットの配列からランダムに選択されたものが短時間表示されます。ランダムピックは、コード例ごとに生成されます。複雑さを軽減するために、テキストは記事の範囲内で一意であることが保証されていません。それでも、b / cから選択する文字列は非常に多く、衝突の可能性は低くなります。
そしてそれはそれについてです！クリップボードへのコピーアクションのためのこの小さなUX拡張機能が気に入っていただければ幸いです。おそらく、自分のアプリでのUXの変更にも影響を与えたのかもしれません。
- Tom
