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

})

日付書式 control+tで日付を入力

code:script.js

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

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

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

scrapbox.TimeStamp.addFormat("]M月D日[")

scrapbox.TimeStamp.addFormat("YYYY-MM-DD")

scrapbox.TimeStamp.addFormat("YYYYMMDD")

scrapbox.TimeStamp.addFormat("]YYYYMMDD[")

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

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);

}

});

全角半角変換などをする「format」メニュ

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')

})

音声入力

code:script.js

(() => {

if (!webkitSpeechRecognition) return

const isMobile = () => /mobile/i.test(navigator.userAgent)

const writeText = text => {

console.log('writeText', text)

document.querySelector('.text-input').focus()

document.execCommand('insertText', null, text)

}

const recognition = new webkitSpeechRecognition()

if (!isMobile()) recognition.continuous = true

recognition.onresult = (e) => {

const result = e.resultse.results.length - 1

const item = result0

writeText(item.transcript + '\n')

}

let enable = false

scrapbox.PageMenu.addMenu({

title: 'speech input',

image: 'https://gyazo.com/6bf5e32e41ac980fa35334d9030ff962/thumb/48'

})

scrapbox.PageMenu('speech input').addItem({

title: () => (enable ? 'Stop' : 'Start') + ' speech input',

onClick: () => {

if (!enable) recognition.start()

else recognition.stop()

if (!isMobile()) enable = !enable

}

})

})()

Gyazoに飛ぶメニュウの追加

code:script.js

scrapbox.PageMenu.addMenu(

{title:"Gyazo",

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

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

})

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)

}

})

Enterキーで新規ページ作成

code:script.js

$('body').on('keydown',function(e){ // Enterキーで新規ページ作成

if(e.target.tagName != "TEXTAREA" && e.target.tagName != "INPUT"){

if(e.key == 'Enter'){

var project = location.href.split('/')3;

location.href = /${project}/new;

}

});

$('.btn.btn-default').on('click',function(){

var s = $('.form-control').val();

if(s == ''){

var project = location.href.split('/')3;

location.href = /${project}/new;

}

});