url-customizerでtweetを展開する際に絵文字が入っているとバグる
scrapbox-url-customizer
色んなものを展開しようとこのサイトのポストで試していたら再現
1つのツイートに動画、画像、GIFを同時に添付できるようになりました
おかしい例( https://twitter.com/discord/status/1702000633421746233 )
Discord(@discord)
🚨 New Desktop Feature: Channel Status
Let the rest of the server know what you're up to in voice so people can join in. <3 Enjoy!
https://pbs.twimg.com/media/F564jbGX0AYZKrg.png
Y
最後の行にYが入っている
これ例としてよくないな...wogikaze.icon
<が展開できていないのも含んでいる
後で調べる
期待する展開
Discord(@discord)
🚨 New Desktop Feature: Channel Status
Let the rest of the server know what you're up to in voice so people can join in. <3 Enjoy!
https://pbs.twimg.com/media/F564jbGX0AYZKrg.png
原因
https://code2svg.vercel.app/svg/L92-104/https://raw.githubusercontent.com/takker99/scrapbox-url-customizer/456c3fcb1bce21e5b73f873d81bfda5089b0c3ae/internal/processTweet.ts#.svg https://github.com/takker99/scrapbox-url-customizer/blob/456c3fcb1bce21e5b73f873d81bfda5089b0c3ae/internal/processTweet.ts#L92
tweet.textはツイートの文章(短縮リンクやハッシュタグを含む)
text.slice()で要素ごとに分割しているが絵文字が含まれると正しく取り出せない
JavaScriptでマルチバイト文字列のsubstringは問題なく動く
JavaScript の正規表現で、改行も含めた全ての文字列マッチがうまくいかない - 猫でもわかるWebプログラミングと副業
code:js
const unicodeSubstring = (str, start, end) => {
const reg = new RegExp(^[\\s\\S]{${start}}([\\s\\S]{0,${end - start}}), 'u')
return str.match(reg)?.1
}
unicodeSubstring(tweet.text,indices0 - offset,tweet.text.length)
誤
before:"🚨 New Desktop Feature: Channel Status\n\nLet the rest of the server know what you're up to in voice so people can join in. &lt;3 Enjoy! "
text:'Y'
正
before:"🚨 New Desktop Feature: Channel Status\n\nLet the rest of the server know what you're up to in voice so people can join in. &lt;3 Enjoy!"
text:''
あっ………………………………………………………………………………………………………………………………………………………takker.icon
取り急ぎ修正しました
unicodeSubstringではなくspread operatorで書記素クラスターごとに分割する方法を取っています
こっちのほうがスマートでGOODwogikaze.icon
ちなみにFull Emoji Modifierの分割には失敗しましたtakker.icon
こんな文字は「しらんがな」です
絵文字の闇すぎるから困ったときに直そう...wogikaze.icon
Discord(@discord)
🚨 New Desktop Feature: Channel Status
Let the rest of the server know what you're up to in voice so people can join in. &lt;3 Enjoy!
https://pbs.twimg.com/media/F564jbGX0AYZKrg.png
場当たり的に追加した/yuyasurarin/url-customizer-script#6505681b5f1e0d000099b8f7
オマケ:<について
html の特殊文字
HTML文字列をアンエスケープ | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website
/yuyasurarin/url-customizer-script#6505681b5f1e0d000099b8f7
便利そうなので取り込みますtakker.icon
https://github.com/takker99/scrapbox-url-customizer/pull/33
旧
BcS114(@YSurarin)
&amp;quot;"""クォーテーション&amp;amp;"&amp;"アンパサンド&amp;lt;"&lt;"小なり&amp;gt;"&gt;"大なり&amp;nbsp;" "空白&amp;copy;"©"コピーライト
テスト
新
BcS114(@YSurarin)
&quot;"""クォーテーション&amp;"&"アンパサンド&lt;"<"小なり&gt;">"大なり&nbsp;" "空白&copy;"©"コピーライト
テスト
テスト
aespa(@aespa_official)
Paris 🍷🥖
#aespa #KARINA #aespaPFW
https://pbs.twimg.com/media/FeOZYI7aAAAsObU.jpg https://pbs.twimg.com/media/FeOZYJAakAAZLHP.jpg
aespa(@aespa_official)
Paris 🍷🥖
#aespa #KARINA #aespaPFW
https://pbs.twimg.com/media/FeOiU7UakAAFWy8.jpg https://video.twimg.com/ext_tw_video/1577282774926778374/pu/pl/u6Ym3TTgqR5gZ82E.m3u8?tag=12&container=fmp4&v=b24#.mp4
https://video.twimg.com/ext_tw_video/1577282774922588160/pu/pl/mCNp6j4WjNav3Zss.m3u8?tag=12&container=fmp4#.mp4 https://pbs.twimg.com/media/FeOiU7VacAARf4W.jpg
動画が表示できなくなってる...
code:js
...tweet.entities.media?.map?.((media) => ({
type: "media",
indices: media.indices,
media: tweet.mediaDetails?.flatMap?.((detail) => detail.url === media.url ? [{
type: detail.type,
//url: new URL(detail.video_info?.variants?.sort?.((a, b) => b.bitrate - a.bitrate)?.0.url ?? detail.media_url_https)
url: new URL(detail.video_info?.variants.filter(variant => variant.bitrate)?.sort?.((a, b) => b.bitrate - a.bitrate)?.0.url ?? detail.media_url_https)
}] : []) ?? []
})) ?? []
これも入れましたtakker.icon
https://github.com/takker99/scrapbox-url-customizer/pull/34
bitrateが0のやつ見つけたけど眠いので今日はやらないwogikaze.icon
https://twitter.com/thibaudz/status/1707733015663653167
https://cdn.syndication.twimg.com/tweet-result?id=1707733015663653167&token=x
variants.filter(variant => variant.content_type.startsWith("video"))でいけそうtakker.icon
オマケ2
メディアがあったときに入る謎の空行
これはメディアの後にテキストがあるのかどうか判定するときにミスっているぽい
https://code2svg.vercel.app/svg/L106/https://raw.githubusercontent.com/takker99/scrapbox-url-customizer/b3dd429d5a43c6f5bd34f8427b63cca181fe301f/internal/processTweet.ts#.svg https://github.com/takker99/scrapbox-url-customizer/blob/b3dd429d5a43c6f5bd34f8427b63cca181fe301f/internal/processTweet.ts#L106C73-L106C73
なんかミスってる気がするので訂正
なんかうまいこと単体テスト入れてPR書いてくれるとうれし～takker.icon
自分はもうおやすみする時間なので
おやすもwogikaze.icon
テストケースの追加方法は#33を参照
snapshot testは
$ deno test --allow-read --allow-write -- -u
で更新できる
生成されたsnapshot通りになるかどうかは
$ deno test --allow-read
で確認できる
修正助かります！yosider.icon