ノート

セカンドブレインを構築する:パーソナルナレッジマネジメントシステム

フリーのプロンプト百科事典 Wikiprompt より

Eyisha Zyer

2026年7月3日

セカンドブレインを構築する:パーソナルナレッジマネジメントシステム ローカルストレージに保存される、ノート、タスク、プロジェクト、および接続を備えた単一ファイルのパーソナルナレッジマネジメントシステムを作成するための包括的なプロンプト。

プロンプト内容保存

🌐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Second Brain · PKM</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } :root { --bg: #f7f8fa; --surface: #ffffff; --text: #1e293b; --muted: #64748b; --border: #e2e8f0; --accent: #4f46e5; --accent-soft: #eef2ff; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); --radius: 16px; } body.dark { --bg: #0f172a; --surface: #1e293b; --text: #e2e8f0; --muted: #94a3b8; --border: #334155; --accent: #818cf8; --accent-soft: #1e1b4b; --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3); } body { background: var(--bg); color: var(--text); transition: background 0.2s, color 0.2s; font-size: 15px; line-height: 1.5; } .app { display: flex; min-height: 100vh; } /* sidebar */ .sidebar { width: 240px; background: var(--surface); border-right: 1px solid var(--border); padding: 1.2rem 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; } .sidebar .logo { font-weight: 700; font-size: 1.3rem; padding: 0.5rem 0.8rem 1.2rem; display: flex; align-items: center; gap: 8px; } .sidebar .logo span { background: var(--accent); color: white; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 1rem; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 0.6rem 0.8rem; border-radius: 10px; cursor: pointer; color: var(--muted); font-weight: 500; transition: 0.1s; } .nav-item:hover { background: var(--accent-soft); color: var(--accent); } .nav-item.active { background: var(--accent); color: white; } .nav-item i { width: 20px; text-align: center; } .sidebar .spacer { flex: 1; } /* main */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 2rem; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar .search { flex: 1; max-width: 400px; background: var(--bg); border: 1px solid var(--border); border-radius: 30px; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 8px; } .topbar .search input { border: none; background: transparent; width: 100%; outline: none; color: var(--text); } .icon-btn { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.4rem 0.8rem; cursor: pointer; color: var(--text); font-size: 0.9rem; display: flex; align-items: center; gap: 6px; } .icon-btn:hover { background: var(--accent-soft); } .content { padding: 2rem; overflow-y: auto; max-height: calc(100vh - 60px); } .view { display: none; animation: fade 0.2s ease; } .view.active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } } /* cards */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); transition: 0.15s; } .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); } .card h3 { font-size: 1.05rem; margin-bottom: 0.3rem; } .card p { color: var(--muted); font-size: 0.85rem; } .badge { display: inline-block; background: var(--accent-soft); color: var(--accent); padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; margin-right: 4px; } .badge.success { background: #d1fae5; color: #065f46; } .badge.warning { background: #fef3c7; color: #92400e; } .badge.danger { background: #fee2e2; color: #991b1b; } .btn { background: var(--accent); color: white; border: none; padding: 0.5rem 1rem; border-radius: 10px; font-weight: 500; cursor: pointer; transition: 0.1s; } .btn:hover { opacity: 0.9; } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-outline:hover { background: var(--bg); } .flex { display: flex; gap: 0.8rem; align-items: center; } .between { justify-content: space-between; } .mt-2 { margin-top: 0.8rem; } .muted { color: var(--muted); font-size: 0.85rem; } .progress { height: 6px; background: var(--border); border-radius: 10px; overflow: hidden; margin: 0.5rem 0; } .progress-bar { height: 100%; background: var(--accent); border-radius: 10px; } /* modal */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; align-items: center; justify-content: center; z-index: 100; } .modal.show { display: flex; } .modal-card { background: var(--surface); border-radius: 20px; padding: 2rem; width: 90%; max-width: 500px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); } .modal-card input, .modal-card textarea, .modal-card select { width: 100%; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); margin-bottom: 0.8rem; } .modal-card label { font-size: 0.8rem; font-weight: 600; color: var(--muted); } /* map */ .map-container { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; min-height: 300px; } .map-node { display: inline-block; background: var(--accent-soft); color: var(--accent); padding: 0.3rem 0.8rem; border-radius: 20px; margin: 0.2rem; font-size: 0.8rem; } /* quick add */ .fab { position: fixed; bottom: 2rem; right: 2rem; background: var(--accent); color: white; width: 56px; height: 56px; border-radius: 30px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(79,70,229,0.4); cursor: pointer; border: none; z-index: 50; } .fab:hover { transform: scale(1.05); } /* misc */ .tag { background: var(--bg); border: 1px solid var(--border); padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.7rem; } .list-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; } .list-item .title { font-weight: 500; } .checkbox { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; } .hidden { display: none; } </style> </head> <body> <div class="app"> <!-- SIDEBAR --> <aside class="sidebar"> <div class="logo"><span>🧠</span> Second Brain</div> <div class="nav-item active" data-view="dashboard"><i>🏠</i> Dashboard</div> <div class="nav-item" data-view="inbox"><i>📥</i> Inbox</div> <div class="nav-item" data-view="notes"><i>📝</i> Notes</div> <div class="nav-item" data-view="projects"><i>📁</i> Projects</div> <div class="nav-item" data-view="tasks"><i>✅</i> Tasks</div> <div class="nav-item" data-view="map"><i>🕸️</i> Map</div> <div class="spacer"></div> <div class="nav-item" data-view="settings"><i>⚙️</i> Settings</div> </aside> <!-- MAIN --> <div class="main"> <div class="topbar"> <div class="search"><span>🔍</span><input id="globalSearch" placeholder="Search notes, tasks, projects..."></div> <button class="icon-btn" id="themeToggle">🌙</button> <button class="icon-btn" id="quickAddBtn">+ Quick add</button> </div> <div class="content" id="contentArea"> <!-- views injected by JS --> </div> </div> </div> <!-- FAB --> <button class="fab" id="fabBtn">+</button> <!-- MODAL --> <div class="modal" id="modal"> <div class="modal-card" id="modalCard"></div> </div> <script> (function(){ // ---------- DATA LAYER ---------- const DEFAULT_DATA = { notes: [ { id: 'n1', title: 'Welcome to your second brain', content: 'Capture everything. Connect ideas. Use tags and projects.', tags: ['meta'], project: 'p1', created: Date.now()-86400000, modified: Date.now()-3600000, history: ['Initial version'] }, { id: 'n2', title: 'Meeting notes', content: 'Discuss Q3 roadmap. Action: design review.', tags: ['work'], project: 'p1', created: Date.now()-172800000, modified: Date.now()-7200000, history: ['v1'] } ], tasks: [ { id: 't1', title: 'Write weekly review', description: 'Reflect on achievements', due: new Date().toISOString().slice(0,10), priority: 'high', project: 'p1', done: false, subtasks: [], recurring: 'weekly' }, { id: 't2', title: 'Read article on PKM', description: 'Take notes', due: new Date(Date.now()+86400000).toISOString().slice(0,10), priority: 'medium', project: 'p1', done: false, subtasks: [], recurring: null } ], projects: [ { id: 'p1', name: 'Personal Knowledge', description: 'Build a second brain system', status: 'active', deadline: '2025-12-31', progress: 40 }, { id: 'p2', name: 'Website revamp', description: 'Redesign portfolio', status: 'on hold', deadline: '2025-06-30', progress: 20 } ], ideas: [ { id: 'i1', content: 'Create a daily journal template', tags: ['journal'], created: Date.now() }, { id: 'i2', content: 'Automate backup with JSON export', tags: ['tech'], created: Date.now()-86400000 } ], activity: [ { text: 'Created note "Welcome"', time: Date.now()-3600000 }, { text: 'Completed task "Write weekly review"', time: Date.now()-7200000 } ] }; let state = JSON.parse(localStorage.getItem('secondBrain')) || DEFAULT_DATA; function saveState() { localStorage.setItem('secondBrain', JSON.stringify(state)); } // ---------- HELPERS ---------- const $ = (sel) => document.querySelector(sel); const $$ = (sel) => document.querySelectorAll(sel); const uid = () => 'id' + Math.random().toString(16).slice(2) + Date.now().toString(16); const fmtDate = (ts) => new Date(ts).toLocaleDateString('en-US', { month:'short', day:'numeric' }); // ---------- VIEW RENDER ---------- const content = $('#contentArea'); let currentView = 'dashboard'; function render() { const views = { dashboard: renderDashboard, inbox: renderInbox, notes: renderNotes, projects: renderProjects, tasks: renderTasks, map: renderMap, settings: renderSettings }; content.innerHTML = views[currentView](); bindEvents(); } // ---------- DASHBOARD ---------- function renderDashboard() { const today = new Date().toISOString().slice(0,10); const todaysTasks = state.tasks.filter(t => t.due === today && !t.done); const recentNotes = [...state.notes].sort((a,b)=>b.modified-a.modified).slice(0,3); const activeProjects = state.projects.filter(p=>p.status==='active'); const doneCount = state.tasks.filter(t=>t.done).length; return ` <h2>Dashboard</h2> <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(200px,1fr));"> <div class="card"><h3>📌 Today</h3><p>${todaysTasks.length} tasks due</p></div> <div class="card"><h3>📝 Notes</h3><p>${state.notes.length} total</p></div> <div class="card"><h3>✅ Done</h3><p>${doneCount} tasks</p></div> <div class="card"><h3>📁 Active</h3><p>${activeProjects.length} projects</p></div> </div> <div class="card mt-2" style="background:var(--accent-soft); border:none;"> <p style="font-weight:600;">💭 What's one thing you want to remember today?</p> <input id="dailyPrompt" class="mt-2" style="width:100%; padding:0.6rem; border-radius:10px; border:1px solid var(--border); background:var(--surface);" placeholder="Write a quick note..."> </div> <div class="flex between mt-2"><h3>Recent notes</h3><button class="btn-outline icon-btn" data-nav="notes">View all</button></div> <div class="grid"> ${recentNotes.map(n=>`<div class="card"><h3>${n.title}</h3><p>${n.content.slice(0,60)}...</p><span class="badge">${n.tags[0]||'note'}</span></div>`).join('')} </div> <h3 class="mt-2">Activity</h3> <div>${state.activity.slice(0,4).map(a=>`<div class="list-item"><span>${a.text}</span><span class="muted">${fmtDate(a.time)}</span></div>`).join('')}</div> `; } // ---------- INBOX ---------- function renderInbox() { return ` <h2>📥 Inbox</h2> <div class="flex between mt-2"><input id="ideaInput" placeholder="Capture a thought..." style="flex:1; padding:0.6rem; border-radius:10px; border:1px solid var(--border); background:var(--surface);"><button class="btn" id="addIdeaBtn">Add</button></div> <div class="mt-2"> ${state.ideas.map(idea=>` <div class="list-item"><span>${idea.content}</span><span class="tag">${idea.tags[0]||'idea'}</span></div> `).join('')} </div> <h3 class="mt-2">Someday</h3> <div class="muted">Move ideas here later (demo)</div> `; } // ---------- NOTES ---------- function renderNotes() { const search = $('#globalSearch')?.value?.toLowerCase() || ''; let notes = state.notes; if (search) notes = notes.filter(n => n.title.toLowerCase().includes(search) || n.content.toLowerCase().includes(search) || n.tags.some(t=>t.includes(search))); return ` <div class="flex between"><h2>📝 Notes</h2><button class="btn" id="newNoteBtn">+ New note</button></div> <div class="grid mt-2"> ${notes.map(n=>` <div class="card" data-note-id="${n.id}"> <h3>${n.title}</h3> <p>${n.content.slice(0,80)}...</p> <div class="mt-2">${n.tags.map(t=>`<span class="badge">${t}</span>`).join('')}</div> <div class="flex between mt-2"><span class="muted">${fmtDate(n.modified)}</span><button class="icon-btn btn-outline" data-export-note="${n.id}">⬇️</button></div> </div> `).join('')} </div> `; } // ---------- PROJECTS ---------- function renderProjects() { return ` <div class="flex between"><h2>📁 Projects</h2><button class="btn" id="newProjectBtn">+ New project</button></div> <div class="grid mt-2"> ${state.projects.map(p=>` <div class="card"> <div class="flex between"><h3>${p.name}</h3><span class="badge ${p.status==='active'?'success':p.status==='on hold'?'warning':'danger'}">${p.status}</span></div> <p>${p.description}</p> <div class="progress"><div class="progress-bar" style="width:${p.progress}%"></div></div> <div class="flex between"><span class="muted">${p.progress}%</span><span class="muted">📅 ${p.deadline}</span></div> </div> `).join('')} </div> `; } // ---------- TASKS ---------- function renderTasks() { const today = new Date().toISOString().slice(0,10); const groups = { 'Today': state.tasks.filter(t=>t.due===today && !t.done), 'This Week': state.tasks.filter(t=>t.due>today && t.due < new Date(Date.now()+7*86400000).toISOString().slice(0,10) && !t.done), 'Later': state.tasks.filter(t=>!t.done && t.due>today), 'Completed': state.tasks.filter(t=>t.done) }; return ` <h2>✅ Tasks</h2> <button class="btn mt-2" id="newTaskBtn">+ Add task</button> ${Object.entries(groups).map(([g, tasks])=>` <h3 class="mt-2">${g}</h3> ${tasks.map(t=>` <div class="list-item"> <div class="flex"><input type="checkbox" class="checkbox" data-task-done="${t.id}" ${t.done?'checked':''}><span class="title">${t.title}</span></div> <div class="flex"><span class="badge ${t.priority==='high'?'danger':t.priority==='medium'?'warning':'success'}">${t.priority}</span><span class="muted">${t.due}</span></div> </div> `).join('')} `).join('')} `; } // ---------- MAP ---------- function renderMap() { const allNodes = [ ...state.notes.map(n=>({type:'note', name:n.title, id:n.id})), ...state.projects.map(p=>({type:'project', name:p.name, id:p.id})), ...state.tasks.map(t=>({type:'task', name:t.title, id:t.id})) ]; return ` <h2>🕸️ Connection Map</h2> <div class="map-container mt-2"> <p class="muted">Visual representation of linked items (demo)</p> <div>${allNodes.map(n=>`<span class="map-node">${n.type}: ${n.name}</span>`).join(' ')}</div> </div> <div class="card mt-2"><h3>Related to</h3><p>Notes linked to projects, tasks to notes, etc.</p></div> `; } // ---------- SETTINGS ---------- function renderSettings() { return ` <h2>⚙️ Settings</h2> <div class="card mt-2"> <label>Primary color</label><input type="color" id="accentColor" value="#4f46e5" style="width:50px; height:40px;"> <div class="flex between mt-2"><span>Dark mode</span><button class="icon-btn" id="themeToggle2">🌙</button></div> <div class="flex between mt-2"><span>Export data</span><button class="btn-outline icon-btn" id="exportBtn">⬇️ JSON</button></div> <div class="flex between mt-2"><span>Import data</span><input type="file" id="importFile" accept=".json" style="display:none;"><button class="btn-outline icon-btn" id="importBtn">⬆️</button></div> </div> `; } // ---------- BIND EVENTS ---------- function bindEvents() { // nav $$('.nav-item').forEach(el=>el.addEventListener('click', (e)=>{ $$('.nav-item').forEach(x=>x.classList.remove('active')); el.classList.add('active'); currentView = el.dataset.view; render(); })); // global search const searchInput = $('#globalSearch'); if (searchInput) searchInput.addEventListener('input', ()=>{ if(currentView==='notes') render(); }); // theme const themeBtn = $('#themeToggle'); if (themeBtn) themeBtn.addEventListener('click', toggleTheme); const themeBtn2 = $('#themeToggle2'); if (themeBtn2) themeBtn2.addEventListener('click', toggleTheme); // quick add const fab = $('#fabBtn'); if (fab) fab.addEventListener('click', ()=>openModal('note')); const quickAdd = $('#quickAddBtn'); if (quickAdd) quickAdd.addEventListener('click', ()=>openModal('note')); // new note const newNote = $('#newNoteBtn'); if (newNote) newNote.addEventListener('click', ()=>openModal('note')); const newTask = $('#newTaskBtn'); if (newTask) newTask.addEventListener('click', ()=>openModal('task')); const newProject = $('#newProjectBtn'); if (newProject) newProject.addEventListener('click', ()=>openModal('project')); // add idea const addIdea = $('#addIdeaBtn'); if (addIdea) addIdea.addEventListener('click', ()=>{ const val = $('#ideaInput').value.trim(); if (val) { state.ideas.push({id:uid(), content:val, tags:['idea'], created:Date.now()}); saveState(); render(); } }); // task done $$('[data-task-done]').forEach(cb=>cb.addEventListener('change', (e)=>{ const id = e.target.dataset.taskDone; const task = state.tasks.find(t=>t.id===id); if (task) { task.done = e.target.checked; saveState(); render(); } })); // export note $$('[data-export-note]').forEach(btn=>btn.addEventListener('click', (e)=>{ const id = e.target.dataset.exportNote; const note = state.notes.find(n=>n.id===id); if (note) { const blob = new Blob([`# ${note.title}\n\n${note.content}`], {type:'text/markdown'}); const a = document.createElement('a'); a.href=URL.createObjectURL(blob); a.download=`${note.title}.md`; a.click(); } })); // export all const exportBtn = $('#exportBtn'); if (exportBtn) exportBtn.addEventListener('click', ()=>{ const blob = new Blob([JSON.stringify(state, null, 2)], {type:'application/json'}); const a = document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='second-brain-backup.json'; a.click(); }); // import const importBtn = $('#importBtn'); if (importBtn) importBtn.addEventListener('click', ()=>$('#importFile').click()); const importFile = $('#importFile'); if (importFile) importFile.addEventListener('change', (e)=>{ const file = e.target.files[0]; if(!file) return; const reader = new FileReader(); reader.onload = (ev)=>{ try{ state = JSON.parse(ev.target.result); saveState(); render(); }catch(err){ alert('Invalid JSON'); } }; reader.readAsText(file); }); // modal close $('#modal')?.addEventListener('click', (e)=>{ if(e.target.id==='modal') closeModal(); }); } // ---------- MODAL ---------- function openModal(type) { const modal = $('#modal'); const card = $('#modalCard'); if (type==='note') { card.innerHTML = ` <h3>New note</h3> <label>Title</label><input id="mTitle" placeholder="Note title"> <label>Content</label><textarea id="mContent" rows="3" placeholder="Write..."></textarea> <label>Tags (comma)</label><input id="mTags" placeholder="tag1, tag2"> <label>Project</label><select id="mProject">${state.projects.map(p=>`<option value="${p.id}">${p.name}</option>`).join('')}</select> <div class="flex between mt-2"><button class="btn-outline" onclick="closeModal()">Cancel</button><button class="btn" id="saveNoteBtn">Save</button></div> `; $('#saveNoteBtn').addEventListener('click', ()=>{ const title = $('#mTitle').value.trim() || 'Untitled'; const content = $('#mContent').value.trim(); const tags = $('#mTags').value.split(',').map(t=>t.trim()).filter(Boolean); const project = $('#mProject').value; state.notes.push({id:uid(), title, content, tags, project, created:Date.now(), modified:Date.now(), history:['v1']}); state.activity.unshift({text:`Created note "${title}"`, time:Date.now()}); saveState(); closeModal(); render(); }); } else if (type==='task') { card.innerHTML = ` <h3>New task</h3> <label>Title</label><input id="mTaskTitle" placeholder="Task"> <label>Due date</label><input type="date" id="mTaskDue"> <label>Priority</label><select id="mTaskPriority"><option>high</option><option>medium</option><option>low</option></select> <div class="flex between mt-2"><button class="btn-outline" onclick="closeModal()">Cancel</button><button class="btn" id="saveTaskBtn">Save</button></div> `; $('#saveTaskBtn').addEventListener('click', ()=>{ const title = $('#mTaskTitle').value.trim() || 'Untitled task'; const due = $('#mTaskDue').value || new Date().toISOString().slice(0,10); const priority = $('#mTaskPriority').value; state.tasks.push({id:uid(), title, description:'', due, priority, project:null, done:false, subtasks:[], recurring:null}); state.activity.unshift({text:`Added task "${title}"`, time:Date.now()}); saveState(); closeModal(); render(); }); } else if (type==='project') { card.innerHTML = ` <h3>New project</h3> <label>Name</label><input id="mProjName" placeholder="Project name"> <label>Description</label><textarea id="mProjDesc" rows="2"></textarea> <label>Deadline</label><input type="date" id="mProjDeadline"> <div class="flex between mt-2"><button class="btn-outline" onclick="closeModal()">Cancel</button><button class="btn" id="saveProjBtn">Save</button></div> `; $('#saveProjBtn').addEventListener('click', ()=>{ const name = $('#mProjName').value.trim() || 'New project'; const desc = $('#mProjDesc').value.trim(); const deadline = $('#mProjDeadline').value || '2025-12-31'; state.projects.push({id:uid(), name, description:desc, status:'active', deadline, progress:0}); saveState(); closeModal(); render(); }); } modal.classList.add('show'); } function closeModal() { $('#modal').classList.remove('show'); } window.closeModal = closeModal; // ---------- THEME ---------- function toggleTheme() { document.body.classList.toggle('dark'); const btn = $('#themeToggle'); if (btn) btn.textContent = document.body.classList.contains('dark') ? '☀️' : '🌙'; } // ---------- INIT ---------- render(); // set theme icon if (document.body.classList.contains('dark')) $('#themeToggle').textContent = '☀️'; })(); </script> </body> </html>

ログインして完全なプロンプトを表示

次で続行:

ログインすると、次に同意したことになります: 利用規約 と プライバシーポリシー

使い方

このプロンプトは coding 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。

最良の結果を得るには、プレースホルダー(角括弧や大文字で示された部分)を具体的な要件に置き換えてください。

参考資料

カテゴリ:coding| twitter| html| css

ノート