作ったアプリを、
一緒に使える道具にする

作るのは、みんなで使うチェックリスト

たとえば「週末のピクニック」。持ち物を追加して、準備ができたらチェック。別の人が開いた画面にも、その結果が反映されます。買い物やイベント準備にも応用できます。

この作例では、リンクと共有用パスワードを知る全員が、閲覧・追加・完了・削除を行えます。読み取り専用や個人別の権限はありません。まずは非機密の練習データを使ってください。

実際に動かした作例の画面です。モバイル画像はブラウザを390px幅にして撮影しています。

1. AIに作ってもらい、手元で試す

PCのCodexまたはClaude Codeで、空の「blue-checklist」フォルダを開きます。道具の準備は入門記事、初回公開の全体像はAPI公開の記事で確認できます。今回は外部AIを使うため、BlueのAI Build生成枠は使いません。

AIの案内どおりに起動し、「レジャーシートを用意」を追加→完了→解除→削除してみます。さらに3件ほど入れて、リロードやアプリの再起動後にも残ることを確認します。

2. 保存先を確認して、Blueに公開する

ブラウザのlocalStorageだけでは、別の端末へデータは共有されません。この作例はBlue側のSQLiteに保存します。同じアプリを更新しても残る /workspace/dataと、公開時に置き換わるコードを分けることがポイントです。

最初はZIPをコンソールからアップロードしても構いません。AIから公開する場合は、公開の準備とAPIキーの設定を済ませて、次を依頼します。APIキーはチャットや作例のパスワード欄へ入れません。

内容を確認して「公開して」と送ります。公開URLで新しいリストを作り、練習用の項目を入れます。ローカルのDBは送っていないので、手元の項目は自動で移りません。

noindexは検索掲載を避ける設定で、認証ではありません。リストの中身は作例自身のパスワードで保護します。これは小人数の練習用で、パスワード再設定、監査履歴、個人別権限は備えていません。

3. 別のブラウザから、同じリストを使う

1. 「共有リンクをコピー」でリストのURLを取得する。パスワードはリンクに含まれません。
2. 別のブラウザ、プライベートウィンドウ、または別端末で開く。ログイン前に項目が見えないことと、違うパスワードでは開けないことを確認する。
3. 専用パスワードを入力し、同じ項目が見えることを確認する。他のサービスのパスワードを流用しない。
4. 片方でチェックし、もう片方で「最新にする」を押す。表示中は10秒ごとにも更新されます。
5. 完了の解除と削除も相手側へ反映されるか試す。削除は全員に反映され、取り消し機能はありません。

同じ項目を同時に触って「他の端末で変更されました」と出たら、最新の状態を見てから操作します。通信が切れた間の編集は保存できません。オフライン同期は対象外です。

この作例の共有相手を外す機能はありません。個人情報や業務データを扱う前に、個別ログイン・権限・退出/無効化・復旧の設計をAIに依頼し、検証してください。

4. 同じURLのまま更新して、保存を確かめる

リストに3件追加して1件を完了にしたら、画面の小さな改善を依頼します。たとえば「完了した件数」の表示。新規公開ではなく、前回のapp IDへの更新を指定します。

更新後、URLとリストIDが同じで、3件と完了状態が残っていれば成功です。もう片方でも開き、新しい項目を追加して共有を確認しましょう。永続保存はバックアップの代わりではありません。アプリ削除や誤削除からの復旧は別に備える必要があります。

うまくいかないとき

• 再公開すると項目が消える：同じapp IDか、DBが/workspace/dataにあるか、起動時に初期化していないかをAIに確認してもらう。まず書込みを止め、元の保存先とバックアップを確認する。
• 別端末に出ない：リストIDを含む共有URLか、正しいパスワードかを確認。「最新にする」を試す。コードに問題があるときも、パスワードをチャットへ貼らない。
• 起動しない：Pythonとして検出され、PORTで待ち受けているか確認する。index.htmlだけでは保存処理は動かないため、app.pyもZIPの直下へ入れる。
• 操作を続けて一時制限された：1分ほど待って再試行。この作例は1アプリ32リスト、1リスト200項目まで。ログインは12時間で期限切れになる。

Googleの表やメールとの連携が目的なら、Google Sheets連携の記事へ。今回のチェックリストにはGoogleアカウントや外部APIは不要です。