Greasy Fork is available in English.
Pixivの作品ページにタグありのブックマーク機能を追加します
当前为
// ==UserScript==
// @name Pixiv tag bookmark
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Pixivの作品ページにタグありのブックマーク機能を追加します
// @author y_kahou
// @match https://www.pixiv.net/*
// @grant GM_setValue
// @grant GM_getValue
// @noframes
// @require http://greasyfork.icu/scripts/419955-y-method/code/y_method.js?version=890440
// ==/UserScript==
const __CSS__ = `
:root {
--bookmarked-color: rgb(255, 64, 96);
--checked-color: #5596e6;
}
.selectable:hover {
background-color: rgb(50, 73, 90);
color: white;
cursor: pointer;
}
.selectable.selected {
background-color: rgb(85, 150, 230);
color: white;
}
/* 自分用タグ */
#mytag ul {
list-style: none;
padding: 0;
margin: 0 0 5px 0;
max-width: 600px;
overflow: hidden;
transition: 300ms ease-in-out;
}
#mytag li {
display: inline-block;
margin-right: 5px;
line-height: 1.5;
}
#mytag span {
padding: 2px;
user-select: none;
}
.o0, .o10 {
color: rgb(103, 164, 209);
}
.o30, .o50, .o100 {
color: rgb(132, 162, 183);
font-weight: bold;
}
.o30 { font-size: 16px; }
.o50 { font-size: 18px; }
.o100 { font-size: 22px; }
/* ブクマボタン */
#tb-submit {
display: block;
background: none;
outline: none;
border: solid 1.5px var(--checked-color);
border-radius: 4px;
cursor: pointer;
transition: 500ms;
}
#tb-submit::before {
content: '選択したタグでお気に入り';
display: inline-block;
position: relative;
transform: translateY(40%);
color: var(--checked-color);
}
#tb-submit.already {
border-color: var(--bookmarked-color);
}
#tb-submit.already::before {
content: 'お気に入りタグを編集';
color: var(--bookmarked-color);
}
#tb-submit.already path {
fill: #dfdfdf;
}
#tb-submit.already path {
fill: var(--bookmarked-color);
}
/* タグテキスト */
#tb-text {
width: 92%;
height: 1.5em;
text-indent: 0.5em;
margin-bottom: 5px;
background-color: white;
border: solid 1px gray;
}
#tb-cnt {
margin-left: 5px;
}
#tb-cnt:after {
content: '/10';
}
`;
(function() {
'use strict';
addStyle('tagbookmark', __CSS__);
let canonical = document.querySelector('link[rel="canonical"]')
if (canonical) {
// ページロード時に作品ページだった場合
// link[rel="canonical"]は削除されず使い回されるので
// 上記を対象に監視する
new MutationObserver(addMytag)
.observe(canonical, { attributes: true })
}
else {
// 作品ページ以外から始まった場合
// link[rel="canonical"]は毎回削除追加されるので
// headを監視しlink[rel="canonical"]の追加を検知する
new MutationObserver(async (records) => {
for (let record of records) {
for (let node of record.addedNodes) {
if (node.tagName == 'LINK' && node.getAttribute('rel') == 'canonical') {
addMytag()
return
}
}
}
})
.observe(document.head, { childList: true })
}
})();
async function addMytag() {
// イラスト 作品ページ以外は終了
if (!location.pathname.match(/artworks\/\d+$/)) {
// 小説 && !location.pathname.match(/\/novel\/show\.php$/)
return
}
// footer取得
let footer = (await repeatGetElements('figcaption footer'))[0]
// ブクマ済みならタグとか取得
let already = document.querySelector('a[href^="/bookmark_add.php"]')
let detail = !already ? null : await request.getArtworkData(already.href)
let existTag = function(tag) {
if (detail) return detail.tags.find(e => e == tag) != null
return false
}
// 既存タグに機能追加
for (let tag of footer.querySelectorAll('li a')) {
tag.classList.add('selectable')
tag.classList.toggle('selected', existTag(tag.textContent))
tag.addEventListener('click', listener.tag)
}
// wrap作成
let wrap = document.querySelector('#tb-wrap')
if (wrap) wrap.outerHTML = ''
wrap = document.createElement('div')
wrap.id = 'tb-wrap'
// 自分用タグ
let mytag = document.createElement('div')
mytag.id = 'mytag'
mytag.innerHTML = `<label><input type="checkbox" onchange="this.parentNode.nextElementSibling.classList.toggle('show', this.checked)"><span>自分用タグ</span></label>`
let ul = document.createElement('ul')
let tags = await request.getMyTags()
for (let tag in tags) {
let c = 'o0'
if (tags[tag] >= 10) c = 'o10'
if (tags[tag] >= 30) c = 'o30'
if (tags[tag] >= 50) c = 'o50'
if (tags[tag] >= 100) c = 'o100'
c += existTag(tag) ? ' selected' : ''
let li = document.createElement('li')
li.innerHTML = `<span class="selectable ${c}">${tag}</span>`
li.querySelector('span').addEventListener('click', listener.tag)
li.dataset.cnt = tags[tag]
ul.appendChild(li)
}
if (tags == null || tags.length == 0) {
ul.innerHTML = 'ブックマークタグがありません'
}
mytag.appendChild(ul)
// 高さ取得してスタイル化
let style = document.querySelector('#tagbookmark-ul')
if (style) style.outerHTML = ''
document.body.appendChild(mytag)
const mytagHeight = mytag.clientHeight
document.body.removeChild(mytag)
addStyle('tagbookmark-ul', `#mytag ul { height: 0; } #mytag ul.show { height: ${mytagHeight}px }`)
wrap.appendChild(mytag)
// 登録用text
let tagText = document.createElement('input')
tagText.id = 'tb-text'
tagText.placeholder = '登録タグ'
tagText.value = detail ? detail.tags.join(' ') : ''
tagText.addEventListener('keyup', listener.text)
wrap.appendChild(tagText)
// タグ数
let tagCnt = document.createElement('span')
tagCnt.id = 'tb-cnt'
tagCnt.textContent = '1'
wrap.appendChild(tagCnt)
// ブックマークボタン作成
let tbm = document.createElement('button')
tbm.id = 'tb-submit'
if (already) {
tbm.className = 'already'
tbm.appendChild(already.querySelector('svg').cloneNode(true))
} else {
tbm.appendChild(document.querySelector('.gtm-main-bookmark svg').cloneNode(true))
}
tbm.addEventListener('click', listener.bookmark)
wrap.appendChild(tbm)
// footer下に追加
footer.parentNode.insertBefore(wrap, footer.nextElementSibling)
setTagcnt()
}
function setTagcnt() {
let cnt = 0
let text = document.querySelector('#tb-text').value
if (text) cnt = text.replace(' ', ' ').split(' ').filter(t => t != '').length
let cntText = document.querySelector('#tb-cnt')
cntText.textContent = cnt
cntText.style.color = cnt > 10 ? 'red' : ''
}
const listener = {
tag: function(e) {
if (e.ctrlKey) return
e.preventDefault()
let tag = e.target.textContent
let text = document.querySelector('#tb-text');
// 自分AND同じ名前のタグをtoggle
[...document.querySelectorAll('.selectable')]
.filter(e => e.textContent == tag)
.forEach(e => e.classList.toggle('selected'))
// テキストへの変換(toggle)
if (e.target.classList.contains('selected')) {
text.value += (text.value ? ' ' : '') + e.target.textContent
} else {
text.value = text.value.replace(' ', ' ').split(' ').filter(t => t != e.target.textContent).join(' ')
}
setTagcnt()
},
text: function(e) {
// テキスト変更でタグの選択も変更
for (let tag of document.querySelectorAll('.selectable')) {
let match = false
for (let text of e.target.value.replace(' ', ' ').split(' ')) {
if (text == tag.textContent) {
match = true
break
}
}
tag.classList.toggle('selected', match)
}
setTagcnt()
},
bookmark: async function(e) {
let url = document.querySelector('link[rel="canonical"]').getAttribute('href')
let work_id = url.match(/artworks\/(\d+)$/)[1]
let tags = document.querySelector('#tb-text').value.replace(' ', ' ').split(' ')
let comment = ''
let hide = 0
let token = await request.getToken(url)
request.addBookmark('illusts', work_id, comment, tags, hide, token)
.then(data => {
// 成功
let btn = document.querySelector('#tb-submit')
if (!btn.classList.contains('already')) {
btn.classList.add('already')
} else {
// 何度も連続でクリックされないように
alert('タグを編集しました')
}
})
.catch(error => {
// 失敗
console.error(error)
alert('ブックマークに失敗しました')
})
}
}
const request = {
getToken: async function(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => response.text())
.then(data => {
let result = data.match(/token":"(\w+)"/)
if (!result) reject(null)
else resolve(result[1])
})
})
},
getMyTags: async function(marge = true) {
// pixiv側の変数 dataLayer[0].user_id
console.log('pixiv側の変数 user_id: ' + dataLayer[0].user_id);
return new Promise((resolve, reject) => {
fetch(`https://www.pixiv.net/ajax/user/${dataLayer[0].user_id}/illusts/bookmark/tags`)
.then(response => response.text())
.then(data => {
let json = JSON.parse(data)
let tags = json.body
let ret = {}
for (let tag of tags.public) {
ret[tag.tag] = tag.cnt
}
if (marge)
for (let tag of tags.private) {
if (tag.tag in ret)
ret[tag.tag] += tag.cnt;
else ret[tag.tag] = tag.cnt;
}
resolve(ret)
})
})
},
addBookmark: async function(type, work_id, comment, tags, hide, token) {
let body = {
comment: comment,
tags: tags,
restrict: (hide ? 1 : 0),
}
body[type == 'illusts' ? 'illust_id' : 'novel_id'] = work_id
return new Promise((resolve, reject) => {
fetch(`https://www.pixiv.net/ajax/${type}/bookmarks/add`, {
method: 'POST',
credentials: 'same-origin',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
'x-csrf-token': token,
},
body: JSON.stringify(body)
})
.then(response => response.json())
.then(data => {
if (data.error) reject(data)
else resolve(data)
})
})
},
getArtworkData: async function(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => response.text())
.then(text => {
let html = new DOMParser().parseFromString(text, "text/html")
let detail = html.querySelector('.bookmark-detail-unit form')
resolve({
comment: detail.comment.value,
tags: detail.tag.value.split(' '),
hide: detail.restrict.value
})
})
})
}
}