WorkflowyからMarkdown形式でエクスポートした内容をCosense形式に変換するUserScript
更新履歴
2025-04-22:修正
見出し(H1, H2)の置換に関するコードを微修正
2025-03-28:修正
深さ11階層以上の階層構造でも再現できるよう修正
2025-03-27:機能追加
取り消し線を再現する機能
Text Color(文字色)やHighlight(文字の背景色)が塗られている部分を太字に置換する機能
見出し(H3)を大きな文字へ置換する機能
階層構造の再現を、深さ10階層まで対応させるよう変更
2024-08-02:公開
機能
[Google](https://www.google.com/)→[Google https://www.google.com/]
[hoge](https://workflowy.com/#/sample)→[hoge https://workflowy.com/#/sample]
文字装飾を再現
Bold: **hoge**→[* hoge]
イタリック:*hoge*→[/ hoge]
取り消し線:~~hoge~~→[- hoge]
タグ用の@を#へ置換(行頭またはスペースの直後に@がある場合のみ) noteは引用形式(> hoge)に置き換わり、項目の本体よりも1階層下げて表示する。 見出しを大きな文字へ置換
H1:# hoge→[**** hoge]
H2:## hoge→[*** hoge]
H3:### hoge→[** hoge]
階層構造を再現
WorkflowyとCosenseで同じ書き方をするものは、Cosenseでも元通りに再現されます。 Inline Code(文字をバッククォート1個ずつで囲んだ状態)
Quote:> hoge
Workflowyにおける以下のものは、再現されません(2025-03-27現在)。
Paragraph(行頭のバレットが見えなくなり、マウスカーソルを合わせればそれが見える状態) Underline(文字の下線)
Completeをした状態(=文字色が薄いグレーになり、取り消し線が付いている状態) Workflowyにアップロードしたファイル(掲載した画像も含む)
導入の仕方
こちらのヘルプに従って、にてUser Scriptを"Enabled"に変更します。 下記のコード(最上部のcode:script.jsの行も含む)を、Cosenseの「自分のページ」に貼り付けてからブラウザをリロードし、ページ上部に表示される"Load new UserScript"をクリックします。それで完了です。 コード
code:script.js
scrapbox.PopupMenu.addButton({
title: 'WF', //"WF"はポップアップするボタンの名前。変更可能。
onClick: text =>{
////ハイパーリンク////
//Hyperlink with linktext
////文字装飾////
//Boldを太字に置換
text=text.split(/\n/).map(line => line.replace(/\*{2}(^*+)\*{2}/g,'$1')).join('\n') //イタリック
text=text.split(/\n/).map(line => line.replace(/\*(^*+)\*/g,'$1')).join('\n') //取り消し線
text=text.split(/\n/).map(line => line.replace(/~{2}(^~+)\~{2}/g,'$1')).join('\n') //文字色、または文字の背景色が塗られている部分を太字に置換
text=text.split(/\n/).map(line => line.replace(/={2}(^=+)\={2}/g,'$1')).join('\n') ////見出しを大きな文字へ置換////
//H1
text=text.split(/\n/).map(line => line.replace(/(^|- )#\s+(^#+)/g,'$1$2')).join('\n') //H2
text=text.split(/\n/).map(line => line.replace(/(^|- )#{2}\s+(^#+)/g,'$1$2')).join('\n') //H3
text=text.split(/\n/).map(line => line.replace(/(^|- )#{3}\s+(^#+)/g,'$1$2')).join('\n') //タグ用の@を#に置換(行頭またはスペースの直後に@があるときのみ)
text=text.split(/\n/).map(line => line.replace(/(^|\s+)@/g,'$1#')).join('\n')
////項目とnoteのインデント個数を調整し、階層構造を再現する////
//行頭から連続している半角スペースn個を(n/2+1)個に置換する
//各項目のマーカー("- ")は除去。
text = text.split(/\n/).map(line => line.replace(/^(\s*)(- )/, (_, spaces) => ' '.repeat(spaces.length / 2 + 1))).join('\n');
//note:引用形式を維持するため、引用符("> ")は消さない
text = text.split(/\n/).map(line => line.replace(/^(\s*)(> )/, (_, spaces) => ' '.repeat(spaces.length / 2 + 1) + '> ')).join('\n');
return text;
}
})
使い方
こちらは、エクスポートするものをWorkflowyの画面で表示している状態です。
https://gyazo.com/c3efa6f6fda480595180718fb72c59c4
エクスポートしたいコンテンツの最上位の項目の行頭にマウスカーソルを合わせ、…のメニューから"Export"を選択。
https://gyazo.com/e68f3a473ceb74a29d4eb202870b5c65
"Export"の画面になります。下段の選択欄で"Markdown"を選んだうえで、コンテンツをクリップボードにコピーします。
https://gyazo.com/14a32fc8daed5def452b7fa57f651750
コピーしたものをCosenseのページにペーストします。
https://gyazo.com/898b698af0e16ebf2de92c901deb1e9c
置換したい範囲をマウスなどで選択して、ポップアップするボタンの中の「WF」クリック。
https://gyazo.com/806933a5249d69397e80566002f0ef4e
Cosense形式に置換されます。
https://gyazo.com/36f2c68f70bb99150b8cfca0a2fba8a5
コードのカスタマイズ
上掲のコードにおいて置換が不要なものがある場合は、該当する行を消すか、もしくはその行頭に//を記入してからブラウザをリロードし、Cosenseのページ上部に表示される"Load new UserScript"をマウスでクリックします。
例えば、「文字色、または文字の背景色が塗られている部分」を太字に置換する必要が無い場合は、次のように//を記入します。
code:script.js
//文字色、または文字の背景色が塗られている部分を太字に置換
//text=text.split(/\n/).map(line => line.replace(/={2}(^=+)\={2}/g,'$1')).join('\n') 関連情報
/icons/hr.icon