[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
navigator.clipboard.writeText(text); にせよ document.execCommand('copy');にせよ iPhone や iPad から動かせないことがあった。理由を調べてみた所 navigator.clipboard.writeText fail… | Apple Developer Forums を見つけた。
I found more info here: https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/ It says that the API "must be called within user gesture event handlers like pointerdown or pointerup, and only works for content served in a secure context (e.g. https://)"
（雛訳）https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/の記事を見つけました。これによると "セキュリティ上の事由によりクリップボードの API は HTTPS 等セキュアな接続をした上でタップ等のユーザの直接操作により呼び出されなければ動きません"
ゆとシート2のクリップボード機能がこの関係で iPad や iPhone 上でうまく動かなかった。この処理はクリックに応じてサーバに情報を非同期で取りに行き、得た情報に基づいてクリップボードに挿入するべきテキストを生成する。非同期で情報を取得して呼び出される関数はもはや "タップ等のユーザの直接操作により呼び出され" たものとしては扱われないようだ。
あがいてみたのが https://github.com/yutorize/ytsheet2/pull/30 である。該当のソースコードはこちら。
ClipboardItemを用いることでnavigator.clipboard.write を非同期な処理を挟んでも実行可能とできた。ClipboardItem の中で非同期なやりとりを実施すればいい。
ただ、この記事を書いている時点では Google Chrome @ Windows だとこの処理がうまく動かない……
Google Chrome の拡張機能を作ろうとしたのだが難しい。日本語情報が大体古いのはまだいいのだが、公式の GitHub のリポジトリもちょっと情報が古かったりした。公式の API リファレンスもリンク切れがちょこちょこあったりして泣きそうになる。
まず公式のチュートリアルをやる。拡張機能を実行すると見ているページの背景色が変わる、というシンプルなものである。設定を変更・保存しておく部分も含んだりするのでとりあえずやっとく。
https://github.com/Shunshun94/chromeExtensionに作ったのをちょこちょこ溜めていく。練習とか理解のために作ったものから、実際に使えるものとか。とりあえずはチュートリアルと「特定のサイトにアクセスした場合、背景を赤くする何か」をあげている。
（雛´-`）.｡ｏＯ（#SW25 割と GM 向け、PC を一覧して命中・回避・魔法行使・抵抗等の基準値をバフ付きで一覧にするツール）https://t.co/tOhnj8zmXH
— しゅんしゅんひよこ (@Shunshun94) March 6, 2022
久方ぶりに jQuery に触ったら全然覚えて無くて大変だった。そして、これ多分 vue で作ったほうが8倍楽でしたね
h2 と h3 をとってきて offsetTop でソートし、数字を付け加えるのみ。ついでに id も振っている。動作例
const list = [].concat.apply([], ['h2', 'h3'].map((tag) => {
return Array.from(document.getElementsByTagName(tag)).map((d) => {
return {
dom: d, pos: d.offsetTop, tag: tag
};
});
})).sort((a,b) => {return a.pos - b.pos});
let major = 0;
let minor = 0;
list.forEach((d) => {
const pastText = d.dom.textContent;
if(d.tag === 'h2') {
minor = 0;
major++;
d.dom.textContent = `${major}. ${pastText}`;
}
if(d.tag === 'h3') {
minor++;
d.dom.textContent = `${major}.${minor}. ${pastText}`;
}
d.dom.id = `header_${major}_${minor}`;
});