Cosenseを読書ノートとして使うときのちょっとした工夫

Evernoteは同期の問題で断念

NotionやObsidianはなんだかきっちり、かっちり使わないといけないという謎の強迫観念があるので読書ノートとしては使わなくなった

読書ノート用のCosenseプロジェウトに設定しているちょっとした工夫をまとめてみる

https://gyazo.com/e957fec97713e0a3a691ba4289aa31ce

表示を縦長にして、書影が綺麗に表示されるようにするのがポイント

本が増えると賑やかになって楽しい

楽しいのが大事

自作フィルターボタンで、本のページと自分のメモを区別する

https://gyazo.com/695f3938997613ae405833c404e4f18c

本が増えて賑やかになるのは楽しいのだけど、自分が書いたメモが埋もれてしまうので、フィルタできるようにしている

Web Clip的なものも「B: ページタイトル」でページを作っているので、除外している

https://gyazo.com/e3759c3854c9e87e8d076701795cf195

『How to Make Sense of Any Mess』の例

ページタイトルに同じ書名の文字列が羅列しないのでビジーにならず、スッキリする

見た目大事

ITILの例

https://gyazo.com/107d876dd66a110eda6e50238d879e44

https://gyazo.com/7f8a16f99df29348f0be833d641cb8b8

見た目大事

table:infoboxの例

生誕 その人物が「生まれた日付」の日付情報だけ抜き出せ。日付以外の情報（例えば生まれた場所）は不要。「生誕」と「死没」は、「~」や「-」といった区切り文字で区切られている。その場合、区切り文字で区切られた前の日付を「生誕」とせよ。ページ内容から判断できない場合は空白のままとせよ。

死没 その人物が「死んだ日付」の日付情報だけ抜き出せ。日付以外の情報（例えば都道府県）は不要。「生誕」と「死没」は、「~」や「-」といった区切り文字で区切られている。その場合、区切り文字で区切られた後の日付を「死没」と判断せよ。ページ内容から判断できない場合は空白のままとせよ。

年齢 「生誕」と「今年」（「死没」）の項目からその人物の年齢を計算せよ。死没している場合、「没」を末尾に追加せよ（例えば「50歳没」などの表記）。計算できない場合は空白とせよ。

何をした人？ ページタイトルだけではなく、どのような人物か、どんな仕事をしたかを記述せよ。

今年 今年は「2025年」です。ページ内容に関わらず、「2025年」とせよ。

https://gyazo.com/b5006d6a620f7eded952c7b73a10bda1

infoboxは既定で非表示にして、表示したいときだけ表示ボタンを押す

https://gyazo.com/cd872cb6699352215d0049ad93dca535

https://gyazo.com/e66986c1d4123035a7ddc482e197cf24

見直す確率が高くなり、参照することも増えた

なんでメモを取ったのか一言あるとさらに見返しやすい

with ChatGPT

code:script.js

// ▼▼▼ 設定箇所: ここに対応したい接頭語とCSSクラス名を追加・編集します ▼▼▼

const PREFIX_CONFIG = [

{ prefix: 'ITIL:', className: 'icon-itil' },

{ prefix: 'Azure:', className: 'icon-azure' },

{ prefix: 'AWS:', className: 'icon-aws' },

// { prefix: 'GCP:', className: 'icon-gcp' },

];

const PROCESSED_ATTRIBUTE = 'data-prefix-icon-processed';

const DEBOUNCE_DELAY = 100; // 処理を遅延させる時間 (ミリ秒)

/**

* 指定されたDOMノード（またはその子孫）内の未処理リンクをアイコン化する関数

*/

const processNode = (targetNode) => {

if (targetNode.nodeType !== Node.ELEMENT_NODE) return;

links.forEach(link => {

const text = link.textContent.trim();

for (const config of PREFIX_CONFIG) {

if (text.startsWith(config.prefix)) {

const prefixLength = config.prefix.length;

const childSpans = link.children;

if (childSpans.length >= prefixLength) {

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

}

const iconSpan = document.createElement('span');

iconSpan.className = config.className;

link.prepend(iconSpan);

link.setAttribute(PROCESSED_ATTRIBUTE, 'true');

break;

}

}

}

// 切り出した書籍名に非表示用のクラス付加

const match = text.match(/\|\s『.+?』$/);

if (match) {

const startIndex = match.index;

const chars = link.querySelectorAll('span.char-index');

for (let i = startIndex; i < endIndex && i < chars.length; i++) {

}

link.setAttribute(PROCESSED_ATTRIBUTE, 'true');

}

});

};

// --- 実行と監視のロジック (デバウンス版) ---

// 1. ページ初期読み込み時に、ページ全体を対象として一度実行

processNode(document.body);

// 2. DOMの変更を監視するための MutationObserver

let debounceTimer = null;

const observer = new MutationObserver(() => {

// 既にタイマーがセットされていれば、それをキャンセル

clearTimeout(debounceTimer);

// 新しいタイマーをセット。指定時間後に処理を一度だけ実行する

debounceTimer = setTimeout(() => {

processNode(document.body);

}, DEBOUNCE_DELAY);

});

// 監視を開始

observer.observe(document.body, {

childList: true,

subtree: true

});

code:style.css

/* 『で始まるページタイトルは書籍ページとする */

position: absolute;

padding: 10px;

top: 0;

bottom: 0;

left: 0;

}

color: transparent;

}

width: auto;

height: 100%;

margin: 10px auto;

}

/* 顔写真が切れないようにする*/

width: auto;

height: 100%;

margin: 10px auto;

}

.line span.text:has(.modal-image) {

text-align: center;

}

/* infobox非表示*/

.page-sidebar { display: none; }

.page-column:has(.page-sidebar) {

grid-template-columns: minmax(200px, 960px) min-content;

grid-template-areas: "page menu"

}

/* 1. 【共通】接頭語のテキストを非表示にするルール */

.page-link .prefix-char-hidden {

display: none;

}

/* 2. 【共通】すべてのアイコンに適用する基本スタイル */

content: '';

display: inline-block;

width: 16px;

height: 16px;

background-image: var(--icon-image);

background-size: contain;

background-repeat: no-repeat;

background-position: center;

margin-right: 4px;

vertical-align: middle;

}

/* 3. 【個別】各アイコンに画像URLを変数として定義 */

/* ::beforeではなく、span本体に定義するのがポイント */

.page-link span.icon-itil {

}

.page-link span.icon-azure {

}

.page-link span.icon-aws {

}

infobox 表示/非表示ボタン

code:script.js

scrapbox.PageMenu.addMenu({

title: "Infobox",

onClick: () => {

const selector = document.querySelector('#disable-user-css');

if (selector) {

selector.remove();

} else {

const style = document.createElement('style');

style.id = 'disable-user-css'; // 任意のIDを設定して、後で削除しやすくする

style.innerHTML = `

.page-sidebar { display: block !important; }

.page-column:has(.page-sidebar) {

grid-template-columns: minmax(200px, 3fr) minmax(170px, 1fr) min-content !important;

grid-template-areas: "page sidebar menu" !important;

}

`;

document.head.appendChild(style);

}

}});

カスタムフィルタ

code:style.css

.custom-page-filter.tool-btn .fas { color: var(--tool-light-color)}

code:script.js

function createCustomFilterButton() {

const div = document.createElement('div');

div.className = 'custom-page-filter';

const a = document.createElement('a');

a.className = 'custom-page-filter tool-btn';

a.setAttribute('role', 'button');

a.setAttribute('tabindex', '0');

a.setAttribute('id', 'customFilterButton');

const span = document.createElement('span');

span.className = 'fas fa-filter';

a.appendChild(span);

div.appendChild(a);

return div;

}

function handleFilterButtonClick() {

const style = document.getElementById("bfilter");

if (style) {

style.remove();

} else {

document.head.insertAdjacentHTML(

"beforeend",

`<style id="bfilter">

</style>`

);

document.getElementById("customFilterButton").classList.add("filtered");

}

console.log('hide');

}

function setupCustomFilter() {

const targetNode = document.querySelector('.quick-launch > .flex-box');

if (!targetNode) {

console.warn("Target element '.quick-launch > .flex-box' not found.");

return;

}

if (!document.getElementById('customFilterButton')) {

targetNode.appendChild(createCustomFilterButton());

const button = document.getElementById("customFilterButton");

button.addEventListener('click', handleFilterButtonClick);

}

}

setupCustomFilter();

document.addEventListener('DOMContentLoaded', setupCustomFilter);

window.scrapbox.addListener("layout:changed", setupCustomFilter);