優れたアプリの新しいパターン

クリップボード パターン、ファイル パターン、アプリ パターンなど、素晴らしいアプリ向けの新しいパターンのコレクションをご覧ください。

次世代の動画編集アプリ、中毒性のあるワードゲーム、将来のオンライン ソーシャル ネットワーキング アプリなど、何を構築する場合でも、いくつかの基本的な構成要素が必要になります。

  • 動画編集アプリでは、編集した動画を保存できる可能性があります。
  • ゲームの進行状況を友だちと共有できるようにする。
  • オンライン ソーシャル ネットワーク アプリでは、ユーザーが投稿に画像を貼り付けできる可能性が高いでしょう。

これらは、このようなパターンのほんの一例にすぎません。ただし、これらすべてに共通する点は、実現するための普遍的な方法がないことです。

共有の進捗状況

たとえば、すべてのブラウザが Web Share API を実装しているわけではないため、Twitter の Web Intents やクリップボードへのコピーなど、別のアプローチにフォールバックしなければならない場合があります。これは、Web Share API が実装されていない Wordle で選択されたアプローチです。ふう、この問題はギリギリで解きました。

Wordle 471 6/6

⬛⬛⬛⬛🟨
🟩⬛⬛⬛🟨
🟩🟩🟩⬛⬛
🟩🟩🟩⬛⬛
🟩🟩🟩🟩⬛
🟩🟩🟩🟩🟩

ファイルの保存

保存に関しては、File System Access API を使用するのが一般的です。これにより FileSystemFileHandle が生成され、真の保存、編集、保存フローを実装できます。次善の策は、従来の <a download> にフォールバックすることです。これもユーザーがデータを保存できるようにしますが、ダウンロードのたびに新しいファイルが作成されるという欠点があります。そのため、my-video.mp4my-video (1).mp4my-video (2).mp4 などのファイルが作成されます。

画像の貼り付け

導入例を締めくくるために、すべてのブラウザがウェブアプリへの画像の貼り付けをサポートしているわけではないため、ドラッグ&ドロップ API を使用するか、ファイル選択ツールを表示することをおすすめします。これは 非同期クリップボード API ほどエレガントではありませんが、少なくとも機能します。

新しいパターン

新しいパターン セクションは次のとおりです。

クリップボード パターン

さまざまなもののコピーや貼り付けなど、システム クリップボードに関連するすべてのものに関するクリップボード パターン

ファイル パターン

ファイルとディレクトリに関連するすべての操作(保存、開く、ドラッグ&ドロップ、受信、共有)のファイル パターン

ウェブアプリのパターン

アプリのショートカットの提供、バックグラウンドでのデータの定期的な同期、アプリバッジの表示など、高度なアプリ機能に関するすべてのウェブアプリ パターン

フィードバック

これらのパターンが優れたアプリの開発に役立てば幸いです。フィードバックをお待ちしております。 フィードバックは、@ChromiumDev にツイートするか、問題を報告することで送信できます。どちらの場合も、@tomayac にタグを付けてください。

謝辞

パターンの確認と編集にご協力いただいた Joe Medley 様に感謝いたします。Pete LePageEwa GasperowiczRachel AndrewKen PascalMatthias Rohmer の技術面と組織面でのサポートと励ましに感謝します。個々のパターンの作成者である Harry Theodoulou 氏、Tony Conway 氏、Palances Liao 氏、Cecilia Cong 氏、François Beaufort 氏、Joe Medley 氏の協力なしでは、このパターン プロジェクト全体を完成させることはできませんでした。