← 一覧へ

やってみようメモに文字を打って、手を止めてみてください

通知・フィードバックマイナー(知る人ぞ知る)

自動保存表示

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 で自作