shio - shiology.org✨

onClick: () => window.open(https://twitter.com/intent/tweet?url=${encodeURIComponent(location.href)}&text=${encodeURIComponent(window.scrapbox.Page.title)})

})

文字数カウントメニュ

code:script.js

scrapbox.PageMenu.addItem({

title: () => {

if (!scrapbox.Page.lines) return

const chars = scrapbox.Page.lines.map(line => line.text.length).reduce((a,b) => a + b)

const words = scrapbox.Page.lines.map(line => line.text.split(/\s+/).length).reduce((a,b) => a + b)

return ${chars}文字 ${words}単語 ${scrapbox.Page.lines.length}行

onClick: () => null

})

選択範囲 tweet popup

code:script.js

scrapbox.PopupMenu.addButton({

title: 'Tweet',

onClick: text => {

const lines = text

.split(/\r\n/)

.map(line => line.replace(/[\\]/g, '').replace(/^\s+/, ''))

lines.push(location.href)

const url = https://twitter.com/intent/tweet?&text=${encodeURIComponent(lines.join('\n'))}

const width = 550

const height = 420

const option = width=${width},height=${height},left=${(window.innerWidth - width) / 2},top=${(window.innerHeight - height) / 2},scrollbars=yes,resizable=yes,toolbar=no,location=yes

window.open(url, '_blank', option)

}

})

文字カウントポップアップ

code:script.js

scrapbox.PopupMenu.addButton({

title: function (text) {

const chars = text.replace(/\r\n/g, '').length

const words = text.trim().split(/\r\n\s+/).length

return ${chars}c ${words}w

onClick: () => null

})

日付書式

code:script.js

// Formats: https://momentjs.com/

scrapbox.TimeStamp.addFormat("]YYYY/MM/DD[ HH:mm:ss")

scrapbox.TimeStamp.addFormat("]YYYY/MM/DD[")

選択範囲に引用符をつける

code:script.js

scrapbox.PopupMenu.addButton({

title: 'quote',

onClick: text => text.split(/\n/).map(line => > ${line}).join('\n')

})

/shokai/行頭に引用符を付けるUserScript

見える文字数カウンター/scrasobox/見える文字数カウンター

code:script.js

const __appliedProject__ = scrapbox.Project.name

const __charCounterSetup__ = setInterval(function() {

// ページが準備できるのを待ちたいので、スクリプトがロードされてから3秒くらいしたら処理開始↓↓

if (document.getElementById('editor') && scrapbox.Page.lines)

clearInterval(__charCounterSetup__)

else

return // ページの準備ができてないときはまた3秒待つ

// 下準備

const $id = id => document.getElementById(id)

const $query = q => document.querySelector(q)

const fmt = n => new Intl.NumberFormat('en-US').format(n).padStart(6)

// 文字数カウンター表示用のエレメントを作ってく

const linesText = $query('.lines').innerText.trim()

const chars = linesText.split(/\s+/).join('').length

var counterWrapper = document.createElement('div')

counterWrapper.id = '__charCounter__'

counterWrapper.innerHTML = <span>${fmt(chars)} chars</span> +

'<pre id="__charCounterPopup__" style="opacity:0"></pre>'

$id('editor').appendChild(counterWrapper)

const counter = $query('#__charCounter__ span')

const popup = $id('__charCounterPopup__')

// 文字数カウンターにマウスカーソルを乗せたときに詳細をポップアップする

counter.addEventListener('mouseover',

function() {

const linesText = $query('.lines').innerText.trim()

const chars = linesText.split(/\s+/).join('').length

const words = linesText.split(/\s+/).length

popup.innerHTML = ${fmt(chars)} chars\n +

${fmt(words)} words\n +

${fmt(scrapbox.Page.lines.length)} lines

popup.style.opacity = 1

})

// 文字数カウンターからマウスカーソルが離れたら詳細ポップアップを見えなくする

counter.addEventListener('mouseout', function() { popup.style.opacity = 0 })

// 文字数のみを数え直す関数

const updateCounter = function() {

if ($query('.presentation')

|| scrapbox.Project.name !== __appliedProject__) {

// プレゼンモードになってたり、よそのプロジェクトを表示してたら文字数カウンターを非表示にする

counterWrapper.style.display = 'none'

} else if (scrapbox.Page.lines) {

// ここで数え直ししてます

const linesText = $query('.lines').innerText.trim()

const chars = linesText.split(/\s+/).join('').length

counter.innerText = ${fmt(chars)} chars

counterWrapper.style.display = 'block'

}

// 数え直すタイミングは、テキスト入力時とペースト時

$id('text-input').addEventListener('input', updateCounter)

$id('text-input').addEventListener('paste', updateCounter)

// 何もしなくても3秒ごとに数え直す

setInterval(updateCounter, 3000)

}, 3000)

選択文字列をプロジェクト内で検索ポップアップ

code:script.js

// 選択された文字列をScrapboxプロジェクト内で検索する

// Scapbox検索ボックスを使ったときと同じ結果ページを開く

scrapbox.PopupMenu.addButton({

title: 'SB内検索',

onClick: function (text) {

var projectName = 'shio';

window.open('https://scrapbox.io/'+ projectName +'/search/page?q=' + text);

}

});

Gyazoに飛ぶメニュウの追加

code:script.js

scrapbox.PageMenu.addMenu(

{title:"Gyazo",

image:"https://gyazo.com/apple-touch-icon.png",

onClick:function(){location="https://gyazo.com"}

})

全角半角変換メニュ

1. 箇条書きの先頭を全てTabに置き換える

2. 文中の全角・半角空白を取り除く

3. 文字化けを修正する (今回はでのをでのに直す)

4. 全角英数字を半角英数字に置き換える

5. 全角括弧を半角括弧に置き換える

6. 括弧で囲まれた前後に空白を入れる

7. コードブロック記法の前後に空白を入れる

code:script.js

scrapbox.PopupMenu.addButton({

title: 'format',

onClick: text => text.split('\n').map(function(line) {

return line.replace(/^\s*/g, s => s.replace(/\s/g, '\t'))

.replace(/ 　/g, '')

.replace(/ぁ-ん|ァ-ヴ゙/g, s => String.fromCharCode(s.charCodeAt(0) + 1))

.replace(/Ａ-Ｚａ-ｚ０-９/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0))

.replace('（', '(')

.replace('）', ')')

.replace(/\S\(/g, s => s.charAt(0) + ()

.replace(/\)\S/g, s => ') ' + s.charAt(1))

.replace(/\S.*/g, s => s.charAt(0) + ' ' + s.slice(1))

.replace(/.*\S/g, s => s.slice(0, -1) + ' ' + s.slice(-1))

}).join('\n')

})

箇条書きナンバリング

code:script.js

scrapbox.PopupMenu.addButton({

title: 'No.',

onClick: text => text.split(/\n/).map((line, index) => ${index+1}. ${line}).join('\n')

})

Zen Mode /scrasobox/禅モード (Zen mode)

code:script.js

scrapbox.PageMenu.addItem({

title: 'Zen mode',

onClick: (e) => {

var bg = 'white' // ここにお好きな背景色を入れてね（テーマの背景が黒なら black で）

var style = document.getElementById('__zen__')

if (style) { style.remove(); e.currentTarget.innerText = 'Zen mode'; return }

else e.currentTarget.innerText = String.fromCharCode(0x02713) + ' Zen mode'

var css = body, .page { background-color:${bg} !important; background-image:none !important } +

'.navbar:not(:hover), .line .telomere:not(:hover), .col-page-side:not(:hover) { opacity:0 }'

style = document.createElement('style')

style.setAttribute('id', '__zen__')

style.appendChild(document.createTextNode(css))

document.head.appendChild(style)

}

})

emoji selector - yutaro

code:script.js

const Asearch = (function() {

var INITPAT, INITSTATE, MAXCHAR;

INITPAT = 0x80000000;

MAXCHAR = 0x100;

INITSTATE = INITPAT, 0, 0, 0;

Asearch.prototype.isupper = function(c) {

return (c >= 0x41) && (c <= 0x5a);

};

Asearch.prototype.islower = function(c) {

return (c >= 0x61) && (c <= 0x7a);

};

Asearch.prototype.tolower = function(c) {

if (this.isupper(c)) {

return c + 0x20;

} else {

return c;

}

};

Asearch.prototype.toupper = function(c) {

if (this.islower(c)) {

return c - 0x20;

} else {

return c;

}

};

function Asearch(source) {

var c, i, j, len, mask, ref, ref1;

this.source = source;

this.shiftpat = [];

this.epsilon = 0;

this.acceptpat = 0;

mask = INITPAT;

for (c = i = 0, ref = MAXCHAR; 0 <= ref ? i < ref : i > ref; c = 0 <= ref ? ++i : --i) {

this.shiftpatc = 0;

}

ref1 = this.unpack(this.source);

for (j = 0, len = ref1.length; j < len; j++) {

c = ref1j;

if (c === 0x20) {

this.epsilon |= mask;

} else {

this.shiftpatc |= mask;

this.shiftpatthis.toupper(c) |= mask;

this.shiftpatthis.tolower(c) |= mask;

mask >>>= 1;

}

this.acceptpat = mask;

return this;

}

Asearch.prototype.state = function(state, str) {

var c, i, i0, i1, i2, i3, len, mask, ref;

if (state == null) {

state = INITSTATE;

}

if (str == null) {

str = '';

}

i0 = state0;

i1 = state1;

i2 = state2;

i3 = state3;

ref = this.unpack(str);

for (i = 0, len = ref.length; i < len; i++) {

c = refi;

mask = this.shiftpatc;

i3 = (i3 & this.epsilon) | ((i3 & mask) >>> 1) | (i2 >>> 1) | i2;

i2 = (i2 & this.epsilon) | ((i2 & mask) >>> 1) | (i1 >>> 1) | i1;

i1 = (i1 & this.epsilon) | ((i1 & mask) >>> 1) | (i0 >>> 1) | i0;

i0 = (i0 & this.epsilon) | ((i0 & mask) >>> 1);

i1 |= i0 >>> 1;

i2 |= i1 >>> 1;

i3 |= i2 >>> 1;

}

return i0, i1, i2, i3;

};

Asearch.prototype.match = function(str, ambig) {

var s;

if (ambig == null) {

ambig = 0;

}

s = this.state(INITSTATE, str);

if (!(ambig < INITSTATE.length)) {

ambig = INITSTATE.length - 1;

}

return (sambig & this.acceptpat) !== 0;

};

Asearch.prototype.unpack = function(str) {

var bytes, c, code, i, len, ref;

bytes = [];

ref = str.split('');

for (i = 0, len = ref.length; i < len; i++) {

c = refi;

code = c.charCodeAt(0);

if (code > 0xFF) {

bytes.push((code & 0xFF00) >>> 8);

}

bytes.push(code & 0xFF);

}

return bytes;

};

return Asearch;

})();

const projectName = scrapbox.Project.name;

let emojis = [];

const box = $('<div>').addClass('form-group').css("position", "absolute");

const container = $('<div>').addClass('dropdown');

box.append(container);

let items = $('<ul>').addClass('dropdown-menu');

container.append(items);

$('#editor').append(box);

fetch(/api/pages/${projectName}?limit=10000, { credentials: 'same-origin'})

.then( res => res.text())

.then( text => {

const data = JSON.parse( text );

const pages = data.pages;

pages.filter( page => (page.image !== null && page.title.match(/^\w\s\-\++$/)))

.forEach( page => {

emojis.push({

name: page.title,

path: page.title,

icon: /api/pages/${projectName}/${page.title}/icon,

})

scrapbox.PageMenu.addMenu({

title: 'emoji',

image: 'https://gyazo.com/d57fea8a143650375af1c8bba1fc1370/raw'

})

scrapbox.PageMenu('emoji').addItem({

title: "load emojis from /emoji",

onClick: () => {

fetch('/api/pages/emoji?limit=10000')

.then( res => res.text())

.then( text => {

const data = JSON.parse( text );

const pages = data.pages;

pages.filter( page => (page.image !== null && page.title.match(/^\w\s\-\++$/)))

.forEach( page => {

for( let emoji of emojis ) {

if( emoji.name === page.title )return;

}

emojis.push({

name: page.title,

path: '/emoji/' + page.title,

icon: /api/pages/emoji/${page.title}/icon,

})

}

})

// TODO: 様々な文字列が来る場合を考慮する

const taberareloo = ( word, list ) => {

const targetWord = word.replace(':', '');

const regStr = targetWord.split('').reduce( (pre, cur) => pre + cur + '.*' ).replace('+', '\\+');

const reg = RegExp(regStr,'i');

return list.filter( item => item.name.match(reg));

}

const asearched = ( word, list ) => {

const targetWord = word.replace(':', '');

const a = new Asearch( targetWord );

const limitCount = Math.floor( targetWord.length/ 4 ) + 1;

let result = [];

for(let i = 0; i <= limitCount; i++){

let matched = list.filter( item => a.match( item.name, i));

let notExisted = matched.filter( item => {

for( let r of result){

if(r.name === item.name){

return false;

}

return true;

})

result = ...result, ...notExisted;

}

return result;

}

const fizzSearch = ( word, list ) => {

const a = asearched( word, list );

const b = taberareloo( word, list );

const c = b.filter( item => {

for( let r of a ){

if( r.name == item.name){

return false;

}

return true;

})

return ...a, ...c;

}

let stack = "";

const editor = $('#editor');

const open = () => container.addClass("open");

const close = () => {

stack = "";

container.removeClass("open");

}

const replaceText = (text, cursor, emojiPath) => {

cursor.focus();

setTimeout(()=>{

for(let i = 0; i < text.length; i++){

var ke1 = document.createEvent("Events");

ke1.initEvent("keydown", true, true);

ke1.keyCode = ke1.which = 8; // Backspace

cursor.dispatchEvent(ke1);

}

document.execCommand('insertText',null, [${emojiPath}.icon] );

close();

}, 50)

}

editor.keydown( e => {

const key = e.key;

if(key === undefined ) return;

if( stack === "" && key !== ":"){

close();

return

};

if( key === ':' && stack.length !== 0){

let name = stack.replace(':', '');

for(let emoji of emojis){

if( emoji.name === name ){

let cursor = $('#text-input')0;

replaceText(stack + ":", cursor, emoji.path);

return;

}

close()

return;

}

const cursor = $('#text-input')0;

if( key.match(/^\w\s\-\:\+$/) ){

stack += e.key;

let focused = $(':focus');

if(focused.is(items.find('li > a'))){

cursor.focus();

}

if( stack.length === 2 ){

if( key === " " ){

stack = "";

return;

}

open();

}

switch(key){

case 'Backspace':

stack = stack.slice(0, stack.length - 1);

if(stack.length === 0){

close();

return;

}

break;

case 'ArrowUp':

let focusedUp = $(':focus');

if( focusedUp.is(items.find('li > a').eq(0)) ){

e.stopPropagation();

cursor.focus();

}else if( !focusedUp.is(items.find('li > a')) ){

close();

return;

}

break;

case 'ArrowDown':

let focusedDown = $(':focus');

if( !focusedDown.is(items.find('li > a'))) {

e.stopPropagation();

e.preventDefault();

items.find("li > a").eq(0).focus();

}

break;

case 'Escape':

case 'ArrowLeft':

case 'ArrowRight':

case 'Home':

case 'End':

case 'PageUp':

case 'PageDown':

close();

break;

case 'Enter':

if( stack.length === 1 ){

close();

break;

}

let focused = $(':focus');

if(!focused.is(items.find('li > a'))){

e.stopPropagation();

e.preventDefault();

items.find('li > a').eq(0).click();

}

break;

}

if( stack.length <= 1 || !key.match(/^\w\s\:\-\+$|Backspace/)) return;

const matchedEmoji = fizzSearch(stack, emojis)

if( matchedEmoji.length === 0){

close();

return;

}

const newItems = $('<ul>').addClass('dropdown-menu');

matchedEmoji.forEach( ( emoji, index) => {

if( index > 30 ) return;

const li = $('<li>').addClass('dropdown-item');

const a = $('<a>').attr("tabindex", "0");

const img = $('<img>').attr("src", emoji.icon)

.addClass("icon").css({ height: "17px", float: "left"});

const nameTag = $('<div>').text(" :" + emoji.name + ":");

a.append(img);

a.append(nameTag);

li.append(a);

newItems.append(li);

a.on('click', () => {

cursor.focus();

replaceText(stack, cursor, emoji.path);

})

a.on('keypress', ev => {

if(ev.key === "Enter"){

ev.preventDefault();

ev.stopPropagation();

replaceText(stack, cursor, emoji.path);

}

})

items.replaceWith(newItems);

items = newItems;

let css = {};

cursor.style.cssText.split(';').filter( text => text !== '' )

.forEach( text => {

const props = text.split(':').map( text => text.replace(' ', '').replace('px', ''));

css[props0] = props1;

});

box.css({

top: ${parseInt(css.top) + parseInt(css.height) + 3}px,

left: ${css.left}px,

});

})

「過去のこの日」機能 - Scrapboxカスタマイズコレクション

code:script.js

// const sortMode = 'periodic' // 等間隔

const sortMode = 'log' // 間隔反復法

let visibleRankNum = 15; // log以外では無視される

let projectPages;

scrapbox.PageMenu.addMenu({

title: 'Scrapbox Sort',

image: 'https://gyazo.com/11140c8b35b407c5d490a94ec6f2528f/raw',

onClick: () => {

scrapbox.PageMenu('Scrapbox Sort').addItem({ title: 'Please wait...', image: null, onClick: () => null })

if (!projectPages) {

let xhr = new XMLHttpRequest()

xhr.open('GET', /api/pages/${scrapbox.Project.name}?limit=10000)

xhr.onload = (e) => {

let projectPages = JSON.parse(xhr.responseText).pages

const now = Date.now()

const day = 60 * 60 * 24 * 1000

const year = day * 365

let perodicArray = []

let intervals = 7 * day, 15 * day, 30 * day, 60 * day, 120 * day, 180 * day, 365 * day

projectPages.forEach((page, index, pages) => {

let diff = now - page'updated' * 1000

if (sortMode == 'log') {

page'score' = diff > 10 * day ? (Math.log(diff / (10 * day)) / Math.log(2)) % 1 : year

page'ago' = Math.floor(diff / day)

} else { // periodic

for (let i = 0; i < intervals.length; i++) {

if (day < intervalsi - diff && intervalsi - diff < 2 * day) {

page'score' = intervalsi

page'ago' = intervalsi / day

break

}

})

projectPages = projectPages.filter(page => page'score' && page'ago')

projectPages.sort((page1, page2) => (sortMode == 'log' ? page1'score' - page2'score' : page2'score' - page1'score'))

scrapbox.PageMenu('Scrapbox Sort').removeAllItems()

if (sortMode != 'log') visibleRankNum = projectPages.length

for (let i = 0; i < visibleRankNum; i++) {

let page = projectPagesi

scrapbox.PageMenu('Scrapbox Sort').addItem({

title: (${('000'+page['ago']).slice(-3)}日前)　${page['title']},

image: null,

onClick: () => { window.open(/${scrapbox.Project.name}/${encodeURIComponent(page['title'])}) }

})

}

xhr.send(null)

} else {

if (sortMode != 'log') visibleRankNum = projectPages.length

scrapbox.PageMenu('Scrapbox Sort').removeAllItems()

for (let i = 0; i < visibleRankNum; i++) {

let page = projectPagesi

scrapbox.PageMenu('Scrapbox Sort').addItem({

title: (${('000'+page['ago']).slice(-3)}日前)　${page['title']},

image: null,

onClick: () => { window.open(/${scrapbox.Project.name}/${encodeURIComponent(page['title'])}) }

})

}

})

強調記法からページの見出しを作るUserScript - Scrapbox研究会主に/progfay-pub/簡単見出しがベース。

code:script.js

scrapbox.PageMenu.addMenu({

title: '見出し',

image: 'https://gyazo.com/da0408108eda84e56a587630be5e4524/raw',

onClick: () => {

scrapbox.PageMenu('見出し').removeAllItems()

for (let line of scrapbox.Page.lines) {

if (!line.section.start) continue

if (!line.text.startsWith("[* ") && !line.text.startsWith("[** ") && !line.text.startsWith("[*** ")) continue

if (!line.nodes) continue

const image = ""

const noIcon = false

// hogeとhogeは先頭をインデントする。

const marginLeft = line.text.startsWith("[* ") ? "　・" : ""

const marginLeft2 = line.text.startsWith("[** ") ? "●" : ""

const title = marginLeft + marginLeft2 + renderPlainText(line.nodes)

const onClick = () => location.hash = line.id

scrapbox.PageMenu('見出し').addItem({ title, image, onClick })

}

})

function renderPlainText(node) {

if (node instanceof Array) return node.map(node => renderPlainText(node)).join('')

if (typeof node === 'string') return node

switch (node.type) {

case 'icon':

case 'strong-icon':

return node.unit.page

}

return renderPlainText(node.children)

}

function getIconUrl(node) {

if (/icon/.test(node.type)) {

return /api/pages/${node.unit.project||scrapbox.Project.name}/${node.unit.page}/icon

}

if (node instanceof Array) {

return node.map(getIconUrl).find(img => img)

}

return null

}

#UserScript