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
株式会社kubellパートナー 会社説明資料 (MINAGINE事業版)
kubell_partner
2
600
20250701_UPDATER_companysummary
updater_pr
0
82k
【全ポジション共通】㈱エグゼクション/会社紹介資料
exe_recruit
1
1.3k
株式会社ファンコミュニケーションズ|会社説明資料 / Company Deck
fancomi_career
0
1.1k
イオングローバルSCM株式会社 会社概要
agscm
0
150
特別講義 理系のための法学入門
seko_shuhei
2
2.4k
Top 07 Ways to connect QuickBooks Payroll Support Number
qbpayroll1
0
190
Sales Marker Culture Book(English)
salesmarker
PRO
2
5.5k
なぜ転職しても「このままでいいのか」が消えないのか_キャリアの価値観レポート2025
thosoya
1
270
第9回 情シス転職ミートアップ - わたしのミッションとLayerXに決めた理由
shimosyan
0
460
DMM.com アルファ室採用案内資料
dmmcom2025
0
550
三菱商事ロジスティクス_コンサルティング事業紹介
mclogi
0
450
Featured
See All Featured
Done Done
chrislema
184
16k
Gamification - CAS2011
davidbonilla
81
5.4k
Site-Speed That Sticks
csswizardry
10
700
For a Future-Friendly Web
brad_frost
179
9.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Docker and Python
trallard
45
3.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
We Have a Design System, Now What?
morganepeng
53
7.7k
Automating Front-end Workflow
addyosmani
1370
200k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building Applications with DynamoDB
mza
95
6.5k
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