Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
メモ帳マニュアル
Search
Takahiro
June 11, 2025
Business
0
220
メモ帳マニュアル
Takahiro
June 11, 2025
Tweet
Share
Other Decks in Business
See All in Business
jinjer recruiting pitch
jinjer_official
0
74k
Management Workflow
dskst
2
360
株式会社ジグザグ_新規投資家向け資料_2025年7月.pdf
zig_zag
0
540
クリフトンストレングスを用いたチームビルディングワークショップ
chibanba1982
PRO
1
190
タケウチグループRecruit
takeuchigroup
0
6.9k
Things - Company Deck
things2109
0
1.1k
なぜ転職しても「このままでいいのか」が消えないのか_キャリアの価値観レポート2025
thosoya
1
240
Gemini CLI ハンズアウト
mickey_kubo
3
440
株式会社ボスコ・テクノロジーズ 採用ピッチ資料
boscotechrecruit
0
530
株式会社クラダシ_中期経営計画(2025年6月期‐2027年6月期)
kuradashi
0
200
【DearOne】Dear Newest Member
hrm
2
10k
【全ポジション共通】㈱エグゼクション/会社紹介資料
exe_recruit
1
1.3k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Language of Interfaces
destraynor
158
25k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Bash Introduction
62gerente
613
210k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Producing Creativity
orderedlist
PRO
346
40k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Agile that works and the tools we love
rasmusluckow
329
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Six Lessons from altMBA
skipperchong
28
3.9k
Transcript
手書き+テキストメモ帳 PWA Marp 形式 README 1
このアプリについて このPWA は、 手書きとテキストを自由に重ねて書ける タグで整理・検索できる 黒ベース&サイバーなデザイン オフライン対応 どの端末でも最大限広い描画エリア 保存・削除・新規作成などはハンバーガーメニューから直感操作 保存時は「保存しました」と明確なフィードバック
を特徴とした、完全自作のWeb メモ帳アプリです。 2
使い方(基本) 1. アプリを開く スマホ・PC どちらでもOK 。PWA としてホーム画面追加も可能。 2. 新規メモ作成 メニューから「新規メモ作成」を選択。
3. 手書き・テキスト・タグを自由に追加 手書き:そのまま描画エリアに描く テキスト:ボタン→ 描画エリアの好きな場所をタップして入力 タグ:下部の入力欄からカンマ区切りで追加 4. 保存 編集画面の「保存」ボタンで保存。1 秒間「保存しました」と表示。 5. 一覧・再編集・削除 メニューから「メモ一覧」→ リストから選択で再編集や削除も可能。 3
要件・特徴 手書きとテキストを同じエリアに自由配置 タグ付け・タグ検索 黒ベース&サイバーな配色 レスポンシブデザインで最大描画エリア PWA (オフライン対応・ホーム画面追加可) 保存時に日時を自動付与・一覧にも表示 保存・削除など全ての操作に明確なフィードバック エラーハンドリング徹底
4
ファイル構成 / ├── index.html ├── style.css ├── app.js ├── manifest.json
└── sw.js 5
開発・実装の工夫 手書き内容が消えないようCanvas 内容を常に維持 テキスト追加は「好きな場所をタップ」で直感配置 保存・削除・一覧・新規作成は全てメニューから操作 エラー時はアラートとconsole 出力で徹底サポート 保存時は1 秒間トースト表示でフィードバック 保存データには自動で保存日時を付与
6
コードの特徴 IndexedDB によるローカル保存(オフラインでも安心) Promise/async-await で非同期処理を確実に制御 try-catch で全エラーを捕捉し、ユーザーに明確な通知 Canvas とtextarea の重ね合わせで手書き×
テキスト両立 レスポンシブ対応でスマホ・PC どちらも快適 7
よくある質問 Q. 手書きやテキストはどこでも好きな場所に書けますか? A. 「テキスト追加」→ 描画エリアをタップで、その場所にテキストボックスを配置できます。 Q. 保存したメモはどこで見られますか? A. メニューの「メモ一覧」から、保存日時付きでリスト表示されます。
Q. オフラインでも使えますか? A. はい、PWA なのでネットがなくても全機能が使えます。 8
インストール・実行方法 1. すべてのファイルを同じフォルダに配置 2. index.html をブラウザで開く 3. スマホなら「ホーム画面に追加」でアプリのように使えます 9
カスタマイズ・拡張例 メモのエクスポート/ インポート機能追加 テキストの色やフォント変更 クラウド同期やユーザー認証 保存時のサムネイル自動生成 10
まとめ 自分だけの理想のメモ帳をPWA で実現 手書きもテキストも、タグも、保存も、すべて直感的 エラーにも強く、誰でも安心して使える設計 11
お問い合わせ・フィードバック ご質問・ご要望・不具合報告などは、お気軽にどうぞ! 12