offline-memo
offlineでも動くメモ帳
https://takker99.github.io/offline-memo/index.html
https://github.com/takker99/offline-memo
目的
登山中などのoffline環境でもメモしたい
実装
0.3.0
UI
Preactの導入
戻るボタンをまともに動かす
データ保存
FIle System Access APIでdiskに保存できるようにもする
0.2.0
https://github.com/takker99/offline-memo/pull/3
offlineの実現
ServiceWorkerを使う
PWAの導入
アイコンを用意しなくては
絵文字ジェネレーター使えばいいや
128x128だと小さすぎ。144x144が必要
megamojiのフォントは今回はあわない
絵文字ジェネレーターで作ったアイコンを、favicon generatorで増やした
様々なファビコンを一括生成。favicon generator
18:32:36 調整中
残りの警告
情報が追加されたPWAインストールUIが使えない
要はscreenshotを入れろとのこと
面倒だからいいやtakker.icon
18:36:21 minimal-uiでinstallしてみた
https://gyazo.com/f6ffbed601efe131dec4200f9da515f5
戻るボタンなど、最低限のボタンが残される
ただ、現状ではHistory APIにまともに対応していないので、戻るボタンを押しても戻らない
19:08:42 navigation preloadがエラーを吐いているので、一旦削除した
19:12:20 大体確かめられたので、リリースする
0.1.0
https://github.com/takker99/offline-memo/pull/1
hosting
GitHub Pagesを使う
Github PagesをGithub Actionsでdeployする
https://github.com/takker99/offline-memo/pull/2
見様見真似で作って、なんとかなった
permission (GitHub Actions)などを、記事ではなくdefaultを参考に厳しくしておいた
UI
とりあえず<textarea>を置くだけにする
タイトルでメモを識別する
文章の1行目をタイトルにする
URL parameterにくっついてた文字列をタイトルにする
空のときはUntitledにする
重複したときは末尾に_\d+をつける
Newボタンを押すと新しいメモが生まれる
ページ下部に今まで作ったメモのタイトルを出す
-wbkit-line-clampで一部のみ表示する
2024-03-10 16:48:19 とりあえず書くとこまで
https://gyazo.com/5bd9c82f7ee46e7c775c2b226712bd70
History.pushState()を使って、タイトルとURLを同期する
https://gyazo.com/0646cf1b1da654c6b11cf927c9594857
バグ
別のタブで編集した内容が、リアルタイムに同期されない
18:55:56 URL parameterを使ってしまうと、全く別のリソースとしてserverに飛んでしまうことに今更気付いた
?以降にタイトルがついたままのURLに直接アクセスしようとすると404 not foundになる
これは致命的なミスだ
URLで識別するのを辞めるっきゃ無いかー
応急処置として、URL Fragmentを使うようにしよう
/ではなくindex.htmlにアクセスすればうまく動く
?に戻した
#2024-03-10 15:45:23