Gyazo Viewer Page Menu
page menuからGyazoを開くと違って、Scrapboxから離れずに直接画像のURLを取得することができる
使うにはGyazoのAccess Tokenが必要
mobileからは使用できない
使い方
2. 以下を自分のページに貼り付ける
jsimport {GYAZO_ACCESS_TOKEN} from '/api/code/your-private-project/GYAZO_ACCESS_TOKEN/auth.js';
import {addGyazoMenu} from '/api/code/customize/Gyazo_Viewer_Page_Menu/script.js';
addGyazoMenu({GYAZO_ACCESS_TOKEN, imageNum: 10}); GYAZO_ACCESS_TOKEN に1.で取得したAccess Tokenを入れるAccess Tokenは外部に漏れるとまずいので、private projectのコードブロックに貼り付けて、そこから読み込むことを推奨する
private projectのコードブロックなら、参加しているuser以外読み込むことができない
your-private-project には自分のprivate projectの名前を入れるyour-private-project/GYAZO_ACCESS_TOKEN/auth.jsexport const GYAZO_ACCESS_TOKEN = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX; imageNum に表示する画像の最大数を入れるscript.jsconst id = 'Gyazo Viewer';
export function addGyazoMenu({GYAZO_ACCESS_TOKEN, imageNum, theme = 'light'} = {}) {
scrapbox.PageMenu.addMenu({
title: id,
image: 'https://i.gyazo.com/503a911fea542532aa5aba0a88eb7b60.png',
onClick: () => loadGyazoImages({GYAZO_ACCESS_TOKEN, imageNum, theme}),
});
}
async function loadGyazoImages({GYAZO_ACCESS_TOKEN, imageNum, theme}) {
let timer = null;
try {
const promise = fetch(`https://api.gyazo.com/api/images?access_token=${GYAZO_ACCESS_TOKEN}&per_page=${imageNum}`);
// 読み込みに時間がかかるようであれば、読み込み中の表示を出す
timer = setTimeout(() => {
scrapbox.PageMenu(id).addItem({
title: 'Loading...',
image: `https://img.icons8.com/ios/180/${theme === 'dark' ? 'FFFFFF/' : ''}loading.png`,
onClick: () => {},
})},
100);
const res = await promise;
const images = await res.json();
clearTimeout(timer);
scrapbox.PageMenu(id).removeAllItems();
images.filter(image => image.image_id !== '')
.forEach(image =>
scrapbox.PageMenu(id).addItem({
title: image.metadata.title ?? 'Untitled',
image: image.url,
onClick: () => navigator?.clipboard?.writeText?.(image.permalink_url),
})
);
} catch(e) {
clearTimeout(timer);
scrapbox.PageMenu(id).removeAllItems();
scrapbox.PageMenu(id).addItem({
title: 'Failed to load the image list.',
image: `https://i.gyazo.com/9fb0ce04c8ce55890f1388e21f36dccc.png`,
onClick: () => {},
});
console.log('Failed to load the image list. %o',e);
}
}