Porterっぽい編集バーを生やすUserScript
https://gyazo.com/e0e4f35b1cb5924c52094a30941c4d23
https://scrapbox.io/files/626fca432d99fd0023a22c96.mp4
Porter for Scrapboxみたく画面下部に編集バーを生やすUserScript
latest: /takker/Porterっぽい編集バーを生やすUserScript@1.0.0
導入方法(簡単版)
1. このリンクを踏んでコードを取得する
2. 自分のページのscript.jsに貼り付ける
ボタンの説明
ほぼ/porterapp/ツールボタン (Tool buttons)と同じ
最後のカーソルボタンは、モバイル版Scrapboxでキャレットを外してみたいの機能と同じ
カーソル (scrapbox)の付け外しがtoggleされる
導入方法(カスタム)
1. このリンクを踏んでコードを取得し、適当なページに貼り付ける
([/A/porter]のmod.jsに貼り付けたとする)
2. ↓のように書いてボタンを追加する
code:js
import { addButton } from "../../A/porter/mod.js";
const insertText = (text) => {
const cursor = document.getElementById("text-input");
cursor.focus();
cursor.value = text;
const event = new InputEvent("input", { bubbles: true });
cursor.dispatchEvent(event);
};
addButton({
display: "T",
onClick: () => {
const now = new Date();
const year = now.getFullYear();
const month = ${now.getMonth() + 1}.padStart("0", 2);
const date = ${now.getDate()}.padStart("0", 2);
insertText(${year}-${month}-${date});
},
});
addButton({
display: ({ selection }) => selection.hasSingleLineSelection() ? "link" : "",
onClick: ({ selection }) => {
if (!selection.hasSingleLineSelection()) return;
insertText(selection.getSelectedText());
},
});
// ほしい数だけ書く
使ったみた。便利!!!!meganii.icon
インデントを直接操作できる
行ごとではなくブロックごとに操作できるの便利Mijinko_SD.icon*3
PCで言うAlt+方向キーと同等の機能
切り取り・コピーも楽
よかったですtakker.icon
常時編集バーがあると、アプリを閉じるときに誤作動（切り取り、ペースト）しそうなのがちょっと怖いmeganii.icon
開閉ボタン作ってなかったtakker.icon
Android版Porterとして使えるかな？takker.icon
天才かな？Mijinko_SD.iconyosider.icon
すごすぎる
スマホの縦画面だと1ボタン分はみ出してしまうので、ちょっと改変してペーストボタン(clipboard)を削除した
ここらへん、ちゃんと収めようと思ったらCSSのGridとかが適してるのかな
スクロールできればいいかなtakker.icon
max-width: 80vw; overflow: auto;
うまくいったかも
script更新しておきました
2行にすると邪魔くさいのでやる気はしないけれど
特にキャレットを簡単に外せるのがありがたいMijinko_SD.icon
/forum-jp/スマートフォンで、キャレットが画面外にある場合、横スワイプによるキャレットの移動を無効にしてほしいを解決できる
kuuote.iconさんの成果を使わせていただいているtakker.icon
過去の資産の積み重ねでできている
iPadのSafariだとビルドでエラーが起きてコードが表示できなかった＞＜基素.icon
これに限らないと思うけど
どんなbuild errorが出ましたか?takker.icon
iOSだとボタンを押すごとにIMEが出てきてしまうので連続して操作できない。Androidだとできているってことなんだろうなぁ基素.icon
これAndroidでも発生したので、少しevent周りを調整して直しましたtakker.icon
/takker/Porterっぽい編集バーを生やすUserScript@0.1.0#627e0db71280f00000001a4a00
その上でiOSで依然同じ問題が発生するとしたら、さらにもう一工夫する必要があるということかな
.status-bar.left > divではなく、上流の.app辺りにlistenerを生やす
document.getElementsByClassName("app")[0].addEventListener("click", (e) => { if(!e.target.matches(".status-bar.left > div")) return;/*...*/}, { capture: true });みたいなコードを使えばいいかな
Event.stopPropagation()を使う
これでも十分そう
だめみたい
2022/5/6 17:05:37 Androidですが、まだ発生していますyosider.icon
えっそんなーtakker.icon
やっぱstopPropagetion()入れないとだめかな？
Androidでブラウザの間の実装の違いがあって起こる？基素.icon
最新版/takker/Porterっぽい編集バーを生やすUserScript@1.0.0 でstopPropagation()しましたtakker.icon
試してみてください
iOS出ちゃいました基素.icon
押すたびにIMEの出し入れが起きますか？takker.icon
ボタンを押す→IMEが閉じる→IMEが開く→……
https://scrapbox.io/files/627e50f1429e3e002307eb23.MOV#.mp4
iPhoneからアップしたらこうなった基素.icon
どうやって動画を出してるんですか基素.icon
scrapboxのparseの正規表現が、拡張子MOVを動画URLとして認識していなかったようですtakker.icon
末尾に#.mp4を付けて動画扱いにしたら読み込まれました
なるほど基素.icon
録画ありがとうございますtakker.icon
これ通信ステータス部分自体が仮想キーボードの下に隠れてしまっていますね
この現象自体はこちらでもときどき起きます
画面回転させたりスワイプしてみたりして再描画させると治る
そんなの嘘でしょ・・・何故なんですか・・・(ボ並感)takker.icon
Android 12 & Chrome 101 & GBoardなのですが、やはり出ます。。yosider.icon
どんな挙動か録画できますか？takker.icon
https://scrapbox.io/files/627e4b80429e3e002307ba88.mp4https://scrapbox.io/files/627e4d1d07f012001d5e262a.mp4yosider.icon
情報があまりない気もしますが、左右の矢印ボタンを押してます
録画ありがとうございますtakker.icon
うわーtakker.icon
原因が検討つかない……
ほかにやってほしい操作があったら言って下さい
大丈夫ですtakker.icon
コード中の"click"を"touchstart"に書き換えて実行してみてもらえますか？
clickより前のイベントで伝播を止めればいけるかも？
これでもだめだったらPorterっぽい編集バーを生やすUserScript#627497021280f00000fb4955で実装し直します
いっその事上部にstatus barを設置するのもありか？
nav barの下辺りに表示する
書き換えると良い感じになりました！yosider.icon
IMEが閉じた状態でボタンを押すとIMEが開くが、IMEが開いた状態でボタンを押してもIMEが閉じなくなった（＋操作が反映されるようになった）感じ
/icons/感謝.icon
IMEが閉じている状態で押すと操作が反映されてIMEが開き、IMEが開いている状態で押すと操作が反映されずにIMEが閉じるみたいyosider.icon
カーソルが外れる操作のlistenerが優先されている？takker.icon
Porterっぽい編集バーを生やすUserScript#627497021280f00000fb4955を使うしかなさそう？
IMEのせいかな、と思ってAQUOS Sense 4 & Android 12 & Chrome 101 & GBoardでやってみましたが、再現できませんでしたtakker.icon
再現できた
アウトライン編集以外のボタンを押すとキーボードが閉じる
閉じないときもある
アウトライン編集だとなぜかボタンを押しても閉じない
yosider.iconさんの結果と合わせると、takker.iconの環境でアウトライン編集のボタンを押してもキーボードが閉じない挙動のほうが異常っぽい？
Mijinko_SD.iconさんのスマホだとどうなんだろう
同様に矢印ボタンを押した時にキーボードが出ましたが、最新版を試していないので…Mijinko_SD.icon
undoボタンとかでは出ないっぽいですね
個人的に追加したアイコンを表示するボタンは逆にキーボードが閉じてしまっていたので、takeCursor().focusを入れて強制的に表示するようにした
バーを横にスクロールできないyosider.icon
takker.iconさんのようにIMEを透過させて横向きで使えばいい？
Mijinko_SD.iconさんのように2段にすればいい？
キャレットが表示されていない状態でも操作できてしまうのが意外な挙動だったyosider.icon
キャレットが表示されていないときは操作できないようにするといいかも
画面下からスワイプしてホーム画面に戻るタイプの機種だと、このバーに誤タッチして誤って切り取りとかしてしまうことがあるyosider.icon
後で改造してscrapboxのタイムスタンプを入れるボタンを追加するのもアリかなーと思ったMijinko_SD.icon
ただ、これだと画面からはみ出すので、スクロールではなく自動的に二段にする仕組みも作ってみたいところ
Grid(CSS)で実装できるのかな
flexでもいける？
スクロールだとなにか不便がありましたか？takker.icon
あ、ごめんなさいMijinko_SD.icon
まだ試してないです…
二段にした方が一覧性やアクセスのしやすさが向上するかなーって思ったので
アクセスはしやすそうtakker.icon
なるほどtakker.icon
あそうだ。ひとつ不便があったtakker.icon
スクロールとアプリの切り替えジェスチャーとが干渉する
タイムスタンプを入れるボタンを追加した
本家を使ったのではなく自分で勝手にソースコードを改造して入れたものだから、ここに書いたら紛らわしい気がしたMijinko_SD.icon
https://gyazo.com/821b995466808c4a69f41013534681ba
アイコンを探すのがめんどくさくてTをそのまま入れた