ニコニコ動画のURLからサムネイル画像を貼り付けるUserScript
背景:Scrapboxにニコニコ動画をうめこみたい
使い方
https://gyazo.com/64391a90a7850e8e22bcf034dcbd7ed9
インストール
2つのものをインストールする必要がある
1. nicovideo-thumbnail-proxyをインストールする
2. このscript.jsを自分のページに追加する
code:js
import('/api/code/motoso/ニコニコ動画のURLからサムネイル画像を貼り付けるUserScript/script.js')
このプログラムは何をしているのか
ブラウザ拡張のUserScript(nicovideo-thumbnail-proxy)でニコニコ動画の試聴URLからサムネイル画像URLを取得するAPIを叩いて画像URLを取得する
ScrapboxのUserScriptでページに画像を書き込む
他のサービス
rinsuki/nicothumb2img
課題
https://www.nicovideo.jp/watch/sm41994908 でない
soから始まる動画URLに対応していない
Scrapboxが使っているfont awesomeが5なのでbilibiliのアイコンがでない(2025-03-01時点)
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css
https://gyazo.com/064611f83f57050b3e1cabb59eb6b9e8
6なら出る
開発
✅ニコニコのURLからサムネイル画像を貼り付けるUserScriptを作る
/programming-notes/url-info-proxyのような感じでlambdaを消せるかも?
変更履歴
2025-03-19 so始まりにも対応
2022/8/20 nm始まりの動画にも対応
2022/5/4 02:10 タイトルも表示するようにした
code:script.js
import { insertText } from "/api/code/customize/scrapbox-insert-text/script.js"
cosense.PageMenu.addMenu({
title: "ニコニコ動画を埋め込む",
// font awesomeにniconivoがないのでビリビリで我慢。cosenseがfont awesome 6にアプデしたら切り替える
// icon: "fab fa-bilibili",
image: "https://i.gyazo.com/3de7600c073e31bf6d4d7240f2fc3f4a.png",
onClick: async () => {
if (!window.get_nicovideo_thumbnail) {
alert("UserScriptが入ってなさそうです?")
window.open("https://scrapbox.io/motoso/nicovideo-thumbnail-proxy", "blank")
return
}
const rawURL = prompt("視聴ページのURLを入力してください").trim()
if (rawURL === null) return;
// 最低限のチェック
const m = rawURL.match(/nicovideo.jp\/watch\/((sm|nm|so)\d+)/)
if (!m) {
alert("無効な形式のURLです")
return
}
try {
const res = await window.get_nicovideo_thumbnail(rawURL);
if (res.status !== 200) {
alert("URL fetch failed(!=200)")
return
}
const thumbnailUrl = res.response.thumbnailUrl;
const title = res.response.title;
insertText({ text: [${rawURL} ${thumbnailUrl}#.png]\n ${title} })
} catch (e) {
console.error(e)
alert("画像URLの取得に失敗しました")
return
}
}
})