tweet-card-upload-3
後方互換性
code:script.js
const style = document.createElement("style");
style.innerText = @import "https://scrapbox.io/api/code/ci7lus/tweet2image-upload/style.css";;
document.body.appendChild(style);
scrapbox.PageMenu.addMenu({
title: "embed-tweet",
image: "/assets/img/logo.png",
onClick: async () => {
if (!window.get_tweet_card) {
alert("UserScriptが入ってなさそうです？");
return;
}
const text = prompt("ツイートのURLを入力してください");
if (text === null) return;
const gyazoClientId =
"e2bd725244baa768eb100126fa2cd85910445778a25ba7ef1328608750b070d5";
const m = text.match(/twitter.com\/(.+)\/status\/(\d+)/);
if (!m) {
alert("無効な形式のURLです");
return;
}
let imageData;
// 進捗表示エリア
const progressArea = document.createElement("div");
progressArea.style =
"position: fixed; top: 0; right: 0; margin: 1rem; padding: 1rem; background: #FFF; color: 000; z-index: 9999;"; progressArea.innerText = "ツイートの画像を取得中...";
document.body.appendChild(progressArea);
try {
const req = await window.get_tweet_card(
${tweetcard}/${m[2]}.jpg
);
if (req.status !== 200) {
alert("Image fetch failed(!=200)");
return;
}
imageData = await new Promise((res, rej) => {
const reader = new FileReader();
reader.onerror = rej;
reader.onload = () => {
res(reader.result);
};
reader.readAsDataURL(req.response);
});
} catch (e) {
console.error(e);
alert("ツイート画像の取得に失敗しました");
document.body.removeChild(progressArea);
return;
}
const tweetUrl = https://twitter.com/${m[1]}/status/${m[2]};
// upload to gyazo
try {
progressArea.innerText = "Gyazoにアップロードしています…";
const formData = new FormData();
formData.append("client_id", gyazoClientId);
formData.append("referer_url", tweetUrl);
formData.append("image_url", imageData);
const easyAuth = await fetch(
https://upload.gyazo.com/api/upload/easy_auth,
{
method: "POST",
mode: "cors",
credentials: "include",
body: formData,
}
);
const uploadResult = await easyAuth.json();
const getImage = await fetch(uploadResult.get_image_url, {
mode: "cors",
credentials: "include",
});
progressArea.innerText = "done!";
console.log(${tweetUrl} -> ${getImage.url});
try {
const line = document.getElementById("L" + scrapbox.Page.lines0.id); const lastChar = $(line).find('spanclass^="c-"').last().get(0); mimicClick(line.id, line.offsetWidth, lastChar.offsetTop + 10);
const textarea = document.getElementById("text-input");
textarea.value = [${getImage.url} ${tweetUrl}];
const event = document.createEvent("Event");
event.initEvent("input", true, true);
textarea.dispatchEvent(event);
mimicClick(line.id, line.offsetWidth, lastChar.offsetTop + 10);
} catch (e) {
alert(
"貼り付けに失敗しました…（GyazoのURLはコンソールに表示されています）"
);
}
} catch (e) {
console.error(e);
alert("アップロードに失敗しました…");
} finally {
document.body.removeChild(progressArea);
}
},
});
const mimicClick = (targetId, left, top) => {
const genEvent = (type) => {
const event = document.createEvent("MouseEvents");
event.initMouseEvent(
type,
true,
true,
window,
1,
0,
0,
left,
top,
false,
false,
false,
false,
0,
null
);
return event;
};
const elm = document.getElementById(targetId);
elm.dispatchEvent(genEvent("mousedown"));
elm.dispatchEvent(genEvent("mouseup"));
elm.dispatchEvent(genEvent("click"));
};