Markdownをインタラクティブにしてみた

はじめに

• Google Chromeで動作確認しています。
• 他のWebブラウザでは動作確認していませんが、おそらく動きます。
• IEではおそらく動きません。

モチベーション

脱ExcelのためにMarkdownを使うという話はよく聞きますが、
自分は、Excelの代わりとしてMarkdownを使うには力不足だなと感じていました。
なぜなら、Excelの一番の利点である数式が使えません。

なので、Excelの数式と同じくらい簡単に、
Markdownで簡単な数式が使えるようにならないかなと思って作ってみました。

ソースコード

以下で公開しています(READMEもないですが。。。)

使い方

試すのがめんどくさい人はGIF動画を見れば雰囲気はわかると思います。

ブックマークレット

以下のJavaScriptをブックマークレット作成スクリプトなどを使って、
ブックマークレットとして保存してください。

javascript:(function(){var script = document.createElement('script');script.type = 'text/javascript';script.src = 'https://dist.ikemo3.com/interactive-markdown/bundle.js?' + new Date().getTime();document.getElementsByTagName('head')[0].appendChild(script);})();

デモ

このページに対して、ブックマークレットを使ってください。

• x: {{< variable name="x" >}}
• y: {{< variable name="y" >}}
• x * y = {{ xy }}

params

variables:
    x:
        value: 3
        type: number
    y:
        value: 4
        type: number
computed:
    xy:
        value: return this.x * this.y;

何をやっているか

• Vue.jsを使っています。
• code fence paramsをYAMLとして解釈して、variablesをデータ、computedを算出プロパティとして定義しています。
  • {{``<と >``}}で囲むことで、入力フォームが定義できます¹。
  • computedには、JavaScript式が書けます。
• evalを使うのはどうかと思ったので、Vue.jsはCSP版、自前でevalしている箇所はnotevilに置き換えました。

何ができるか

原理的にはどのサービスでも動作可能可能です。
このスクリプトはesa.ioにも対応しています。

Hugoで作った個人サイトにも組み込んでいます。
Hugoでは、code fenceの代わりにYAML Front Matterを使って、
テンプレートでVue.jsに渡す変数を定義しています。

デモでは触れていませんが、Moment.jsと、sprintf.jsを組み込んでいます。

おわりに

個人でちまちまと作っているものですが、
スクリプトにするほど定型化されていない、手順書を書くのにちょうどよいです。

1. Hugoのshortcodeと同じ書式です。 ↩