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
AIで「お客様のことだけを考える」 時間を増やすためには
kosakiteppei
0
280
[ 24/7~ HELP™] QuickBooks® ^^Enterprise Online Help for USA user
hisepiyi
0
140
セーフィー株式会社(Safie Inc.) 会社紹介資料
safie_recruit
6
360k
クリフトンストレングスを用いたチームビルディングワークショップ
chibanba1982
PRO
1
520
LW_brochure_engineer
lincwellhr
0
34k
株式会社TONIQ 会社説明資料
yukitoniq
0
120
AIサービス紹介資料_250331.pdf
babylonzoo
0
2.2k
Feedback in Action
lycorptech_jp
PRO
1
340
エンジニアのための事業貢献入門/A business introduction for engineers
dskst
85
23k
Expedi𝓪®️ USA Contact Numbers: Complete 2-0-2-5 Support Guide
travelhupsupport
0
130
株式会社レコモット会社紹介資料
recomothr
0
9.9k
15 Quick Ways to Connect: How to Reach a Human at QuickBooks Payroll Support
tonotej274
0
130
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Visualization
eitanlees
146
16k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Code Review Best Practice
trishagee
69
19k
Adopting Sorbet at Scale
ufuk
77
9.5k
Designing Experiences People Love
moore
142
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Automating Front-end Workflow
addyosmani
1370
200k
Navigating Team Friction
lara
187
15k
Thoughts on Productivity
jonyablonski
69
4.8k
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