クリップボード パターン、ファイル パターン、アプリパターンなど、優れたアプリのための新しいパターンの素晴らしいコレクションをぜひお試しください。
次世代の動画編集アプリ、中毒性のある単語ゲーム、将来のオンライン ソーシャル ネットワーク アプリなど、何を構築する場合でも、いくつかの基本的な構成要素が必要であることに常に気づくでしょう。
- おそらく動画編集アプリでは、編集した動画を保存できます。
- ゲームで、ユーザーがゲームの進行状況を友だちと共有できるようにする場合があります。
- オンラインのソーシャル ネットワーク アプリでは、ユーザーが投稿に画像を貼り付けることができる可能性が高くなります。
これらのパターンを実現する普遍的な方法はない
これらは、そのようなパターンのほんの一例にすぎず、他にもたくさんあります。しかし、これらすべてに共通点が 1 つあります。それは、それらを実現する普遍的な方法がないということです。
共有の進行状況
たとえば、すべてのブラウザが Web Share API を実装しているとは限らないため、場合によっては、別のアプローチ（Twitter のウェブ インテントなど）へのフォールバックや、クリップボードへのコピー（Web Share API が実装されていない場合は Wordle で選択されるアプローチ）へのフォールバックが必要になります。うーん、これしか買えませんでした:
Wordle 471 6/6
⬛⬛⬛⬛🟨
🟩⬛⬛⬛🟨
🟩🟩🟩⬛⬛
🟩🟩🟩⬛⬛
🟩🟩🟩🟩⬛
🟩🟩🟩🟩🟩
ファイルを保存しています
保存に関しては、File System Access API を使用するのが定番のアプローチです。この場合、FileSystemFileHandle を使用して、真の保存、編集、保存のフローを実装できます。次の最善策は、従来の <a download> にフォールバックすることです。同様に、ユーザーはデータを保存できますが、ダウンロードのたびに新しいファイルを作成するという欠点があるため、最終的に my-video.mp4、my-video (1).mp4、my-video (2).mp4 などになります。
画像の貼り付け
最後に、ウェブアプリへの画像の貼り付けをサポートしていないブラウザもあるため、Drag and Drop API やファイル選択ツールの表示をフォールバックできます。これは、Async Clipboard API ほど洗練されていないものの、少なくとも機能します。
新しいパターン
以上を踏まえて、新しいパターンのセクションは次のとおりです。
クリップボードのパターン
クリップボード パターン: さまざまなコピーと貼り付けなど、システムのクリップボードに関連するもの。
ファイルのパターン
ファイル パターン。保存、開く、ドラッグ&ドロップ、受信、共有など、ファイルやディレクトリに関するあらゆるものに対応します。
ウェブアプリのパターン
アプリのショートカットの提供、バックグラウンドでのデータの定期的な同期、アプリバッジの表示など、高度なアプリ機能に関するすべてを対象としたウェブアプリ パターン。
フィードバック
これらのパターンが素晴らしいアプリの作成に役立つことを願っています。皆様からのフィードバックをお待ちしております。フィードバックは、@ChromiumDev 宛てにツイートするか、問題を報告してください。いずれの場合も、確実に表示されるように @tomayac をタグ付けします。
謝辞
パターンのレビューと編集に協力してくれた Joe Medley に感謝します。Pete LePage、Ewa Gasperowicz、Rachel Andrew、Ken Pascal、Matthias Rohmer のあらゆる技術的サポートと組織的サポートと、この実現への励みに感謝します。パターン プロジェクト全体は、個々のパターンの作成者（Harry Theodoulou、Tony Conway、Palances Liao、Cecilia Cong、François Beaufort、Joe Medley）の協力がなければ実現できませんでした。