【HTA】【jQuery】【Marked】Markdown版ローカルWiki(v1.5再構成版)

VBA・Officeカテゴリを表すパンダのイラスト VBA・Office

はじめに

この記事では、HTML Application (HTA) と jQuery、Markdownパーサーである Marked.js を組み合わせて、ローカル環境で動作するシンプルなMarkdown版ローカルWiki(v1.5相当)の作り方と使い方を解説します。

旧ブログ等で配布されていたZIPファイルが現在入手困難となっているため、本記事の仕様を基に、現代のブラウザコンポーネント(MSHTML/IEモード依存のHTA環境)でも動作する再構成コードを掲載しています。

想定環境・前提条件

  • OS: Windows 10 / 11 (htaファイルを実行可能な環境)
  • エンジン: MSHTML (Internet Explorer 11互換モード)
  • 依存ライブラリ: jQuery, Marked.js (CDNまたはローカル配置)

最小の実行例と完全なコード

以下のコードをメモ帳などに貼り付け、拡張子を .hta (例: local_wiki.hta)として保存してください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Markdown Local Wiki v1.5</title>
  <hta:application id="oWiki" applicationname="MarkdownLocalWiki" border="thick" caption="yes" maximizebutton="yes" minimizebutton="yes" showintaskbar="yes" singleinstance="yes" version="1.5" windowstate="normal">
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    #content { margin-top: 20px; padding: 15px; border: 1px solid #ccc; background: #f9f9f9; }
  </style>
</head>
<body>
  

Markdown Local Wiki

<p>Markdownファイルを読み込むか、テキストを入力してください。</p> <textarea id="source" rows="10" style="width:100%;"># Hello World - ローカルファイルパスやネットワークパス(\\server\share)のリンクテスト - <http://example.com> - [リンクテキスト](http://example.com) - C:\\path\\to\\file.txt</textarea> <br><button id="renderBtn">レンダリング</button> <div id="content"></div> <script> $(function() { $('#renderBtn').click(function() { var markdownText = $('#source').val(); // Marked.jsによる変換 var htmlOutput = marked.parse(markdownText); // ファイルパス・ネットワークパスの自動リンク補助処理 // Windowsローカルパス (C:\...) や 共有パス (\\...) の安全なハンドリング htmlOutput = htmlOutput.replace(/(^|[^\="\'])(.:\\[^\s<>]+)/g, '$1<a href="file://$2">$2</a>'); htmlOutput = htmlOutput.replace(/(^|[^\="\'])(\\\+\S+)/g, '$1<a href="file://$2">$2</a>'); $('#content').html(htmlOutput); }); }); </script> </body> </html>

使い方・実行手順

  1. 上記のコードを wiki.hta というファイル名で保存します。
  2. ファイルをダブルクリックして実行します。
  3. テキストエリアにMarkdown形式の文章を入力し、「レンダリング」ボタンを押すと、下部のプレビューエリアにHTMLとして反映されます。

コードの要点と仕様補足

  • ファイルパスの自動リンク処理: フルオートでの誤爆を防ぐため、< > でくくられた記述や通常のMarkdownリンク []() に加え、正規表現を用いて C:\ などのWindowsローカルパスや \\ で始まるファイルサーバーのパスを安全に検出してリンク化するように調整しています。
  • 依存関係: オフライン環境で使用する場合は、jQueryおよびMarked.jsのスクリプトファイルをローカルにダウンロードしてパスを書き換えてください。

制約とセキュリティ上の注意

  • HTAは内部的にInternet Explorerコンポーネントを利用するため、最新のWeb標準とは挙動が異なる場合があります。
  • ローカル環境で任意のスクリプトを実行可能な権限を持つため、信頼できるファイルのみを読み込んでください。

この記事の更新履歴

この記事は、生成AIを活用した自動レビュー・更新フローにより内容を見直し、必要な修正を反映しています。

2026年9月29日

  • 削除リンク切れとなっていた古いZIPファイルへのダウンロードリンクを削除しました。
  • 追加HTA環境で動作するMarkdownローカルWikiの完全なHTML/JavaScript実装コードと使い方を追加しました。

文書情報

記事タイトル
【HTA】【jQuery】【Marked】Markdown版ローカルWiki(v1.5再構成版)
作成日
更新日
Source URL
https://papanda925.com/?p=647

ライセンス: 本記事のうち、当サイトが権利を有する本文・自作図表は、特記なき限り CC BY 4.0 で利用できます。生成AIを活用して作成・編集した内容を含みます。コードについて、別途ライセンス表示またはリンク先GitHubリポジトリのライセンスがある場合は、その条件を優先します。引用・第三者資料・画像・商標等は本ライセンスの対象外です。 利用ポリシー

タイトルとURLをコピーしました