やってみようメモに文字を打って、手を止めてみてください
通知・フィードバックマイナー(知る人ぞ知る)
自動保存表示
Autosave Indicator
文字を打つのをやめると「保存中…」から「保存しました ✓」に変わり、保存ボタンを押さなくても残る。
別名オートセーブ保存中…表示保存ステータス下書き自動保存
どこで使われている?
- よく見かける場所
- Googleドキュメント、Notion、メモアプリ
- 使うとよい場面
- 書いている内容を、保存し忘れて失わないようにしたいとき
- 避けたい場面
- 保存のタイミングを自分で決めたい書類(確定ボタンも用意する)
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「自動保存表示(Autosave Indicator)」を実装してください。 動き:入力が止まってから約1秒たったら自動で保存を始め、画面上部に「保存中…」と表示する。保存が終わったら「保存しました ✓」と時刻を表示する。保存に失敗したら赤字で知らせて再試行する。 使う部品:入力が止まったら保存(デバウンス)して状態を表示
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | 入力が止まったら保存(デバウンス)して状態を表示 |
|---|---|
| iPhoneアプリなら | onChange + 少し待ってから保存して自作 |
| Androidアプリなら | snapshotFlow + debounce で自作 |
| Flutterなら | Timer で少し待ってから保存して自作 |
| React Nativeなら | lodash の debounce で自作 |