Xojoで作るMarkdownエディタ

2017.06.12  投稿者: moongift
XojoMarkdownHTMLViewer

ここ最近の開発者向けドキュメント記法として一般的になってきているMarkdown。世の中には多くのMarkdownエディタが存在します。今回はそんなMarkdownエディタを簡単にXojoで作成する方法を紹介します。

画面について

画面のコントロールはテキストエリアとHTMLViewerになります。テキストエリアで編集し、MarkdownからHTMLに変換した結果をHTMLViewerに反映します。

Markdownの変換について

XojoでMarkdownテキストを解析する方法も考えられますが、すでに世の中にはそういったライブラリは多数ありますので、車輪の再発明は控えます。今回はJavaScriptで変換してくれるShowdownを使います。

HTMLファイルを作成し、その内容を次のようにします。CDN版のShowdownを読み込み、その変換エンジンであるコンバータを準備しておきます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
    <link rel="stylesheet" href="">
  </head>
  <body>
    <div id="preview"></div>
    <script>
      var converter = new showdown.Converter();
    </script>
  </body>
</html>

このファイルをXojoのリソースファイルとして登録しておきます(今回はindexとして登録されました)。

イベントハンドラについて

まずメインウィンドウが開いた時のイベントで、HTMLViewerの中に上記HTMLファイルを読み込みます。

Dim f As FolderItem = GetTemporaryFolderItem

markdownPreview.LoadPage(index, f)

次にテキストエリアの入力内容が変化したらShowdownで変換します。この時ポイントになるのがExecuteJavaScriptです。変換した内容(html)を #preview の中に流し込めば完了です。

Dim markdown as String = Me.Text
Dim javascript as String
javascript = "var html = converter.makeHtml(`"+markdown+"`); "
javascript = javascript + "document.getElementById('preview').innerHTML = html;"
markdownPreview.ExecuteJavaScript(javascript)

たったこれだけのコードでちゃんと動くMarkdownエディタができます。


無理してXojoですべて行うのではなく、既存のライブラリ(Xojoに限らず)を使うことで簡単に目的が達成できるようになります。最近ではWebベースのソフトウェアも増えていますので、こういった応用は様々なところで使えそうです。