/shokai/ページの見出しを作るUserScript

generated at 10/17/2024, 4:28:16 AM
ページの見出しを作るUserScript

ページ内のタイトルっぽい行のリストを作るUserScriptを作った
このページから作られた見出しが、Page Menuに表示される
HerokuでSocket.IOをやっていくのようなプレゼン資料の場合


簡単版
こんな感じで書ける
simple.jsscrapbox.PageMenu.addMenu({
  title: 'シンプル見出し',
  image: 'https://gyazo.com/bc38721e0980f2188f1c831754ac8da4/raw',
  onClick: function () {
    scrapbox.PageMenu('シンプル見出し').removeAllItems()
    for (let line of scrapbox.Page.lines) {
      if (!line.section.start) continue
      scrapbox.PageMenu('シンプル見出し').addItem({
        title: line.text,
        onClick: () => location.hash = line.id
      })
    }
  }
})
 addMenu の onClick で見出しを再生成する為に、毎回 removeAllItems で消す


Scrapbox記法をいい感じに表示する版
工夫したところ
行データ内のカッコを除去する
アイコン記法があったら見出しに使う

インストール
最新のChromeなら
自分のページの code:script.js に
 import '/api/code/shokai/ページの見出しを作るUserScript/script.js' 
を書いて、ブラウザリロード

もしくは
これをまるごと自分のページの code:script.js にコピペしてから、ブラウザリロード
script.js(function () {
  cosense.PageMenu.addMenu({
    title: '見出し',
    icon: 'fas fa-list',
    onClick: () => {
      cosense.PageMenu('見出し').removeAllItems()
      for (let line of cosense.Page.lines) {
        if (!line.section.start) continue
        const image = line.nodes && getIconUrl(line.nodes)
        const noIcon = !!image
        const title = line.nodes ? renderPlainText(line.nodes, {noIcon}) : line.text
        const onClick = () => location.hash = line.id
        cosense.PageMenu('見出し').addItem({title, image, onClick})
      }
    }
  })
    
  function renderPlainText (node, options) {
    if (node instanceof Array) return node.map(node => renderPlainText(node, options)).join('')
    if (typeof node === 'string') return node
    switch (node.type) {
      case 'icon':
      case 'strong-icon':
        return options.noIcon ? ' ' : node.unit.page
    }
    return renderPlainText(node.children, options)
  }
  
  function getIconUrl (node) {
    if (/icon/.test(node.type)) {
      return `/api/pages/${node.unit.project || cosense.Project.name}/${node.unit.page}/icon`
    }
    if (node instanceof Array) {
      return node.map(getIconUrl).find(img => img)
    }
    if (node.children) return getIconUrl(node.children)
    return null
  }
})()