最終投稿日：2026年06月29日
Markdown（手作りメニュー）
手作りのメリット
開発環境にPythonを入れるのも無理、客先にサーバを立てるのも、PCにXAMPPを入れてもらうのも無理そう。
そんな場合は、お客様へこう言って下さい。
『お願いですから、ブラウザにプラグイン[Markdown Viewer Enhanced]だけ入れて下さい。』と、 そしてオリジナルBookを手作りしましょう。
そんな場合は、お客様へこう言って下さい。
『お願いですから、ブラウザにプラグイン[Markdown Viewer Enhanced]だけ入れて下さい。』と、 そしてオリジナルBookを手作りしましょう。
実装
○ ディレクトリ構造
[myBook]
+----- [index.html]
+----- [README.md]
+----- [hoge.md]
+----- [foos/]
+----- [foo.md]
完全手作りなので、命名規則なんてものはありません。
+----- [index.html]
+----- [README.md]
+----- [hoge.md]
+----- [foos/]
+----- [foo.md]
完全手作りなので、命名規則なんてものはありません。
○ index.html
強引ポイント
この方法が唯一、ローカル（file://）環境で整理されたmdファイルを管理する方法かも。
リンクを叩くと、新たな子画面がPOPする仕様です。
ただし、強引に親画面のサイズに合わせて一見左右２画面に見えます。
ターゲット名も固定なので、子画面が増殖する事もありません。
<!DOCTYPE html>
<html>
<body>
<h3>目次</h3>
<ul>
<li><a href="#" onclick="openWin('README.md')">トップ</a></li>
<li><a href="#" onclick="openWin('hoge.md')">第1章</a></li>
📁画面定義書
<ul>
<li><a href="#" onclick="openWin('./foos/foo.md')">詳細設計</a></li>
</ul>
</ul>
<script>
function openWin(file) {
const left = window.screenX + 300;
const top = window.screenY;
const width = window.outerWidth - 300;
const height = window.innerHeight + 50;
window.open(
file,
"main_md",
`left=${left},top=${top},width=${width},height=${height}`
);
}
</script>
</body>
</html>