AIで作った旅行の持ち物アプリで、用意したものにチェックを付ける。次にページを開いたときも、続きから使えたら便利です。
今回は、日数・天候・チェック状態をブラウザーに保存する機能を、説明用のローカルコピーで確認しました。同じブラウザーでページを再読み込みしても、「2日間・雨」と財布のチェックが残ります。
元の公開デモには保存機能がありませんでした。これは元の仕様です。この記事では、使い方に合わせて機能を追加する例を紹介します。公開デモは変更していません。
まず「何を残すか」を決める
AIへ頼む前に、次回も残したいものを具体的にします。このアプリでは、次の3つです。
- 旅行の日数
- 想定する天候
- チェックを付けた持ち物
持ち物の数量や進捗の表示は、保存した条件とチェックから作り直せます。たとえば日数が3なら下着は3組、財布だけを用意した雨の日のリストなら「1 / 13」と表示します。
最初から端末間の同期まで頼む必要はありません。この例では、同じブラウザーの中に保存する範囲に絞ります。
AIには操作と確認方法を一緒に伝える
依頼するなら、次のように「残すもの」と「残ったことを確認する操作」をまとめると、完成後に確かめやすくなります。
旅行の持ち物アプリの説明用コピーに、保存機能を追加してください。
日数・天候・持ち物のチェック状態を、このブラウザー内に保存します。
日数・天候・チェックを変えるたびに保存し、ページを開いたら復元してください。
チェックを外した状態も保存してください。
保存できない場合は、そのことを画面に表示してください。
ログイン、外部サービス、端末間の同期は追加しません。
元の公開アプリは変更しません。
2日・雨にして財布だけをチェックし、再読み込み後も
「2日間・雨」「財布のチェック」「1 / 13」が残ることを確認してください。
チェック解除後の再読み込みと、同じURLのタブを開き直した場合も確認してください。
「保存機能を付けて」だけでなく、チェックを外す操作も含めるのがポイントです。付けたチェックだけが残って、外したチェックが戻ってしまうと、続きを使うときに困ります。
この例の保存の仕組み
このアプリでは、ブラウザー内の保存領域であるlocalStorageを使っています。保存する内容は、たとえば次のような小さなデータです。
{
"version": 1,
"days": 2,
"weather": "rain",
"checked": ["wallet"]
}
daysは日数、weatherは天候、checkedはチェックした項目です。walletは財布を表すIDです。versionは、保存データの形式を識別する番号です。
動きは「操作したら保存する」「ページを開いたら読み戻す」の2つです。読み戻した条件で持ち物リストを作り、保存していた項目にチェックを付けます。
保存データをそのまま信用せず、日数が1〜7の整数か、天候が晴れか雨か、チェックのIDがこのアプリの項目かも確認する実装になっています。
再読み込みの前後を見比べる
説明用コピーをChromeの通常モードで開き、日数を2、天候を雨にして、財布だけにチェックを付けました。画面には「2日間・雨」と「1 / 13」が表示されています。
再読み込み前。日数を2、天候を雨にして、財布だけにチェックを付けた状態です。右上は「1 / 13」と表示されています。
日数は左の「＋」「−」、天候は左の「雨」、財布は右の先頭行のチェック欄で変更できます。準備したら、同じタブでページを再読み込みします。Macでは⌘+Rで再読み込みできます。
同じタブで再読み込みした後。2日間・雨、財布のチェック、「1 / 13」がそのまま残っています。
2枚は同じ説明用コピーの再読み込み前と後です。見た目が同じなのは、保存した状態を読み戻せたためです。
チェックを外した場合も確かめる
実画面では、次の5項目を確認しました。操作はAIが代行し、架空の旅行条件だけを使っています。
| 操作 | 確認できた表示 |
|---|---|
| 2日・雨にして財布だけをチェック | 2日間・雨、財布のチェック、1 / 13 |
| 同じタブを再読み込み | 条件と財布のチェック、1 / 13が保持 |
| 財布のチェックを外して再読み込み | チェックなし、0 / 13 |
| タブを閉じて同じURLを開き直す | 2日間・雨、チェックなし、0 / 13が保持 |
| 日数を3へ変えて再読み込み | 3日間・雨、下着3組 |
これとは別に、ソースを動かす模擬テスト9群も実施しました。保存データが壊れている場合や保存処理が失敗する場合などを確認しています。
ただし、保存できない条件を実ブラウザー上で作った検証はしていません。保存失敗時の警告を実画面で確認済み、とは言えません。
保存できる範囲を知っておく
今回残せたのは、同じブラウザー内の状態です。別のスマートフォンやパソコンには同期されません。ブラウザーの保存データを削除すると、保存内容も失われます。
また、検証ではhttp://127.0.0.1:8766/を使い続けています。localhostに変えたり、ポート番号を変えたりすると、別の保存先になります。HTMLファイルをダブルクリックして開く方法では、今回の動作を検証していません。
この例の実装には、保存できなかったときに「保存できませんでした。この画面を閉じると変更が失われる場合があります。」と伝える処理があります。保存処理を付けたことと、実際に状態が残ることは別なので、ページを再読み込みして確かめるところまでを、AIへの依頼に含めておくと確認しやすくなります。