Porterっぽい編集バーを生やすUserScript
導入方法(簡単版)
1. このリンクを踏んでコードを取得する
2. 自分のページの
script.js に貼り付けるボタンの説明
最後のカーソルボタンは、モバイル版Scrapboxでキャレットを外してみたいの機能と同じ
カーソル (scrapbox)の付け外しがtoggleされる
導入方法(カスタム)
1. このリンクを踏んでコードを取得し、適当なページに貼り付ける
(
[/A/porter] の mod.js に貼り付けたとする)2. ↓のように書いてボタンを追加する
jsimport { 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());
},
});
// ほしい数だけ書く使ったみた。便利!!!!
インデントを直接操作できる
行ごとではなくブロックごとに操作できるの便利
PCで言うAlt+方向キーと同等の機能
切り取り・コピーも楽
よかったです
常時編集バーがあると、アプリを閉じるときに誤作動（切り取り、ペースト）しそうなのがちょっと怖い
開閉ボタン作ってなかった
Android版Porterとして使えるかな？
天才かな？
すごすぎる
スマホの縦画面だと1ボタン分はみ出してしまうので、ちょっと改変してペーストボタン(clipboard)を削除した
ここらへん、ちゃんと収めようと思ったらCSSのGridとかが適してるのかな
スクロールできればいいかな
max-width: 80vw; overflow: auto; うまくいったかも
script更新しておきました
2行にすると邪魔くさいのでやる気はしないけれど
特にキャレットを簡単に外せるのがありがたい
過去の資産の積み重ねでできている
iPadのSafariだとビルドでエラーが起きてコードが表示できなかった＞＜
これに限らないと思うけど
どんなbuild errorが出ましたか?
iOSだとボタンを押すごとにIMEが出てきてしまうので連続して操作できない。Androidだとできているってことなんだろうなぁ
これAndroidでも発生したので、少しevent周りを調整して直しました
その上で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 }); みたいなコードを使えばいいかなこれでも十分そう
だめみたい
2022/5/6 17:05:37 Androidですが、まだ発生しています
えっそんなー
やっぱstopPropagetion()入れないとだめかな？
Androidでブラウザの間の実装の違いがあって起こる？
試してみてください
iOS出ちゃいました
押すたびにIMEの出し入れが起きますか？
ボタンを押す→IMEが閉じる→IMEが開く→……
iPhoneからアップしたらこうなった
どうやって動画を出してるんですか
scrapboxのparseの正規表現が、拡張子MOVを動画URLとして認識していなかったようです
末尾に
#.mp4 を付けて動画扱いにしたら読み込まれましたなるほど
録画ありがとうございます
これ通信ステータス部分自体が仮想キーボードの下に隠れてしまっていますね
この現象自体はこちらでもときどき起きます
画面回転させたりスワイプしてみたりして再描画させると治る
そんなの嘘でしょ・・・何故なんですか・・・(ボ並感)
Android 12 & Chrome 101 & GBoardなのですが、やはり出ます。。
どんな挙動か録画できますか？
https://scrapbox.io/files/627e4b80429e3e002307ba88.mp4https://scrapbox.io/files/627e4d1d07f012001d5e262a.mp4
情報があまりない気もしますが、左右の矢印ボタンを押してます
録画ありがとうございます
うわー
原因が検討つかない……
ほかにやってほしい操作があったら言って下さい
大丈夫です
コード中の
"click" を "touchstart" に書き換えて実行してみてもらえますか？ click より前のイベントで伝播を止めればいけるかも？これでもだめだったらPorterっぽい編集バーを生やすUserScript#627497021280f00000fb4955で実装し直します
いっその事上部にstatus barを設置するのもありか？
nav barの下辺りに表示する
書き換えると良い感じになりました！
IMEが閉じた状態でボタンを押すとIMEが開くが、IMEが開いた状態でボタンを押してもIMEが閉じなくなった（＋操作が反映されるようになった）感じ
IMEが閉じている状態で押すと操作が反映されてIMEが開き、IMEが開いている状態で押すと操作が反映されずにIMEが閉じるみたい
カーソルが外れる操作のlistenerが優先されている？
IMEのせいかな、と思ってAQUOS Sense 4 & Android 12 & Chrome 101 & GBoardでやってみましたが、再現できませんでした
再現できた
アウトライン編集以外のボタンを押すとキーボードが閉じる
閉じないときもある
アウトライン編集だとなぜかボタンを押しても閉じない
同様に矢印ボタンを押した時にキーボードが出ましたが、最新版を試していないので…
undoボタンとかでは出ないっぽいですね
個人的に追加したアイコンを表示するボタンは逆にキーボードが閉じてしまっていたので、
takeCursor().focus を入れて強制的に表示するようにしたバーを横にスクロールできない
キャレットが表示されていない状態でも操作できてしまうのが意外な挙動だった
キャレットが表示されていないときは操作できないようにするといいかも
画面下からスワイプしてホーム画面に戻るタイプの機種だと、このバーに誤タッチして誤って切り取りとかしてしまうことがある
後で改造してscrapboxのタイムスタンプを入れるボタンを追加するのもアリかなーと思った
ただ、これだと画面からはみ出すので、スクロールではなく自動的に二段にする仕組みも作ってみたいところ
Grid(CSS)で実装できるのかな
flexでもいける？
スクロールだとなにか不便がありましたか？
あ、ごめんなさい
まだ試してないです…
二段にした方が一覧性やアクセスのしやすさが向上するかなーって思ったので
アクセスはしやすそう
なるほど
あそうだ。ひとつ不便があった
スクロールとアプリの切り替えジェスチャーとが干渉する
タイムスタンプを入れるボタンを追加した
本家を使ったのではなく自分で勝手にソースコードを改造して入れたものだから、ここに書いたら紛らわしい気がした
アイコンを探すのがめんどくさくて
T をそのまま入れた