ScrapboxのUIを上書きして簡易投稿フォームを表示したい
なんで?
最低限の機能だけ欲しい時があるから
別にScrapboxでやる必要なくないか?
どうせ必要な情報は後からScrapboxにコピペすることになる
コピペするめんどくささがあると、似たようなUIが外部にあっても書き込まなくなる GitHub
やること
✅️既存のUIを破壊する
下手に破壊するとクラッシュするのでCSSの力に頼るのが無難
(ぶっちゃけクラッシュしてくれた方が楽な説無くはないけど)
クラッシュした後も特定のUserScriptを動作させ続ける方法を模索するのはアリかも?
重要ではないので後回し
✅メッセージ投稿用のUIを作成する
✅DOMの描画と設定
✅CSSの作成(最低限)
✅UIを削除する関数を作成する
メッセージを読み込めるようにする
選択したメッセージを削除できるようにする
選択したメッセージを編集できるようにする
めんどくさい(作業量に対して得られるものが少ない)のでやらないかも ある程度使ってみて、本当に必要かどうかを見極めてから考える
あとでやること
✅別ページへ投稿できるような設定をする
✅デフォルトでフォームにフォーカスするようにする
✅>で始まる行があったら>を削除してから投稿する
✅README.mdの作成
✅textareaをフォーカスしている時にCtrl + Enterで送信可能にする
たぶんやらないこと
デザインをかっこよくする
でもスマホでも見やすくて使いやすくなる程度には工夫する
仕様
UserScriptを実行していない人には、通常通り普通のページが見えるようにする
読み込み速度を高速化するために、「特定のページ」は余計なUserScriptを置いていないプロジェクトに作っておくのが良さそう
投稿フォームにメッセージを入力し「投稿」ボタンを押すと、ページ上部に自動的に挿入する
メッセージごとの区切りがわかりやすいように最初から引用ブロックに入れておくと良いかも
もしくは空行の区切りに引用ブロックを使用するか
こっちの方が編集の手間が少なくなるので、こちらを採用する
↑こんな感じに、区切り線として引用ブロックを使用する
2022-11-28 19:05:52
メッセージの初めに引用ブロックを置いておけば、区切り線としての役割だけではなく、何かしらの情報を表示しておくのにも使えそう
正規表現^>\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}で判別可能
正規表現での判別をするために、行頭の>は許容しない方向で考えた方が良さそう
その場合、^>.*だけで判別可能になる
とりあえず、完成イメージのサンプルを作成しておくか