メモ帳マニュアル

Transcript

1. 手書き＋テキストメモ帳 PWA Marp 形式 README 1
2. このアプリについて このPWA は、 手書きとテキストを自由に重ねて書ける タグで整理・検索できる 黒ベース＆サイバーなデザイン オフライン対応 どの端末でも最大限広い描画エリア 保存・削除・新規作成などはハンバーガーメニューから直感操作 保存時は「保存しました」と明確なフィードバック を特徴とした、完全自作のWeb メモ帳アプリです。 2
3. 使い方（基本） 1. アプリを開く スマホ・PC どちらでもOK 。PWA としてホーム画面追加も可能。 2. 新規メモ作成 メニューから「新規メモ作成」を選択。 3. 手書き・テキスト・タグを自由に追加 手書き：そのまま描画エリアに描く テキスト：ボタン→ 描画エリアの好きな場所をタップして入力 タグ：下部の入力欄からカンマ区切りで追加 4. 保存 編集画面の「保存」ボタンで保存。1 秒間「保存しました」と表示。 5. 一覧・再編集・削除 メニューから「メモ一覧」→ リストから選択で再編集や削除も可能。 3
4. 要件・特徴 手書きとテキストを同じエリアに自由配置 タグ付け・タグ検索 黒ベース＆サイバーな配色 レスポンシブデザインで最大描画エリア PWA （オフライン対応・ホーム画面追加可） 保存時に日時を自動付与・一覧にも表示 保存・削除など全ての操作に明確なフィードバック エラーハンドリング徹底 4
5. ファイル構成 / ├── index.html ├── style.css ├── app.js ├── manifest.json └── sw.js 5
6. 開発・実装の工夫 手書き内容が消えないようCanvas 内容を常に維持 テキスト追加は「好きな場所をタップ」で直感配置 保存・削除・一覧・新規作成は全てメニューから操作 エラー時はアラートとconsole 出力で徹底サポート 保存時は1 秒間トースト表示でフィードバック 保存データには自動で保存日時を付与 6
7. コードの特徴 IndexedDB によるローカル保存（オフラインでも安心） Promise/async-await で非同期処理を確実に制御 try-catch で全エラーを捕捉し、ユーザーに明確な通知 Canvas とtextarea の重ね合わせで手書き× テキスト両立 レスポンシブ対応でスマホ・PC どちらも快適 7
8. よくある質問 Q. 手書きやテキストはどこでも好きな場所に書けますか？ A. 「テキスト追加」→ 描画エリアをタップで、その場所にテキストボックスを配置できます。 Q. 保存したメモはどこで見られますか？ A. メニューの「メモ一覧」から、保存日時付きでリスト表示されます。 Q. オフラインでも使えますか？ A. はい、PWA なのでネットがなくても全機能が使えます。 8
9. インストール・実行方法 1. すべてのファイルを同じフォルダに配置 2. index.html をブラウザで開く 3. スマホなら「ホーム画面に追加」でアプリのように使えます 9
10. カスタマイズ・拡張例 メモのエクスポート/ インポート機能追加 テキストの色やフォント変更 クラウド同期やユーザー認証 保存時のサムネイル自動生成 10
11. まとめ 自分だけの理想のメモ帳をPWA で実現 手書きもテキストも、タグも、保存も、すべて直感的 エラーにも強く、誰でも安心して使える設計 11
12. お問い合わせ・フィードバック ご質問・ご要望・不具合報告などは、お気軽にどうぞ！ 12