md-memo — Markdown メモ帳

概要

md-memo は、ブラウザ上で完結する Markdown メモ帳です。
インストールやサーバー構築は一切不要で、index.html を開くだけですぐに使い始められます。

• Markdown のリアルタイムプレビュー
• フォルダツリーによるメモ管理
• ドラッグ＆ドロップでノート / フォルダを自由に整理
• Markdown / PDF へのエクスポート
• 8 種類のエディタテーマ & 6 種類のプレビューテーマ
• Google Analytics / Google AdSense への対応
• データはブラウザの localStorage に自動保存

使い方

1. index.html をブラウザで開く
2. サイドバーの + ボタンからメモ / フォルダを作成
3. 左ペインで Markdown を書くと、右ペインにリアルタイムプレビューが表示される
4. メモは自動保存される（400ms デバウンス）

機能一覧

エディタ

機能	説明
Markdown 編集	GFM 対応（改行・テーブル・タスクリスト等）
リアルタイムプレビュー	入力と同時に HTML に変換して表示
スプリットペイン	エディタとプレビューの比率をドラッグで調整可能
レイアウト切替	横並び / 縦並びをツールバーから切替
ツールバー	太字・斜体・見出し・コード etc. をワンクリック挿入
スマートリスト	Enter でリストを自動継続、空行で解除
ショートカット	Ctrl+B (太字), Ctrl+I (斜体), Ctrl+K (リンク), Ctrl+S (エクスポート)
ステータスバー	文字数・行数・単語数をリアルタイム表示

メモ管理

機能	説明
フォルダツリー	ネスト可能なフォルダ構造でメモを整理
インライン編集	ノード名をクリックしてその場でリネーム
ドラッグ & ドロップ	メモやフォルダをドラッグで移動・並び替え
右クリックメニュー	フォルダ内に新規作成・リネーム・削除
自動保存	編集内容は localStorage に自動保存される
復元	リロード後もアクティブなメモ・サイドバーの状態を保持

エクスポート

形式	方法
Markdown (.md)	ツールバーのエクスポートボタン or Ctrl+S
PDF	html2canvas + jsPDF でプレビューを PDF 出力（改ページ自動処理）

テーマ

• エディタテーマ（8）: Cyberpunk, Dracula, Monokai, Nord, GitHub Dark, Solarized Light, Tokyo Night, Ayu Mirage
• プレビューテーマ（6）: GitHub, GitHub Dark, Cyberpunk, Dracula, Nord, Simple

技術スタック

項目	内容
言語	HTML5 / CSS3 / JavaScript (Vanilla)
Markdown パーサー	marked.js
シンタックスハイライト	highlight.js
PDF 生成	jsPDF + html2canvas
データ保存	ブラウザ localStorage
ビルドツール	不要（すべて .min.js を同梱）

設定ファイル（config.js）

Google Analytics と Google AdSense を利用する場合、config_sample.js を config.js にコピーして編集してください。
config.js は .gitignore に含まれており、git管理対象外です。

config_sample.js の内容

window.APP_CONFIG = {
  ads: {
    /** Google AdSense パブリッシャーID（ca-pub-XXXXXXXXXXXXXXXX の数値部分） */
    publisherId: '0000000000000000',

    /** ヘッダー下の広告 */
    header: {
      enabled: true,       // ヘッダー広告を表示するかどうか
      slot: '0000000000',  // Google AdSense スロットID
      format: 'auto',      // 広告フォーマット（auto, horizontal, vertical, rectangle）
      responsive: true,    // レスポンシブにするか
    },

    /** サイドバー内の広告 */
    sidebar: {
      enabled: true,       // サイドバーア広告を表示するかどうか
      slot: '0000000000',  // Google AdSense スロットID
      format: 'rectangle', // 広告フォーマット
      responsive: true,    // レスポンシブにするか
    },
  },

  analytics: {
    enabled: false,              // Google Analytics を有効にするかどうか
    measurementId: 'G-XXXXXXXXXX', // Google Analytics 測定ID
  },
};

設定項目の説明

セクション	項目	説明
ads.publisherId	Google AdSense パブリッシャーID	ca-pub-XXXXXXXXXXXXXXXX の数値部分のみ記入
ads.header.enabled	ヘッダー広告の表示切替	true で表示、false で非表示
ads.header.slot	ヘッダー広告のスロットID	AdSense の広告ユニットから取得
ads.header.format	ヘッダー広告のフォーマット	auto / horizontal / vertical / rectangle
ads.sidebar.enabled	サイドバー広告の表示切替	true で表示、false で非表示
ads.sidebar.slot	サイドバー広告のスロットID	AdSense の広告ユニットから取得
ads.sidebar.format	サイドバー広告のフォーマット	rectangle（正方形）推奨
analytics.enabled	Google Analytics の表示切替	true で有効
analytics.measurementId	Google Analytics 測定ID	G-XXXXXXXXXX 形式