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
230
メモ帳マニュアル
Takahiro
June 11, 2025
Tweet
Share
Other Decks in Business
See All in Business
LW_brochure_engineer
lincwellhr
0
34k
会社概要_DataLabs
datalabs
0
200
株式会社FinT 事業紹介資料_2025/07~
fint_recruit
0
180
Nstock 採用資料 / We are hiring
nstock
29
310k
[2025年度] 株式会社ROUTE06 (ルートシックス) 会社紹介
route06
3
1.2k
Top 07 Ways to connect QuickBooks Payroll Support Number
qbpayroll1
0
200
Q1 2025 Earnings release
cmbtech
PRO
0
270
プロダクトエンジニアの世界観について語る
r5ni4
0
160
株式会社いつも 採用ピッチ資料
itsumo365
0
190
イオングローバルSCM株式会社 会社概要
agscm
0
990
【DearOne】Dear Newest Member
hrm
2
11k
計画と曖昧さ
mosa_siru
9
5.1k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Become a Pro
speakerdeck
PRO
29
5.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
390
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
It's Worth the Effort
3n
185
28k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Rails Girls Zürich Keynote
gr2m
95
14k
A designer walks into a library…
pauljervisheath
207
24k
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