Help us understand the problem. What is going on with this article?

Jupyter Notebookのようなもの(あくまで個人の感想です)をメモ帳・ブラウザ・gitで実現する

More than 1 year has passed since last update.

アプリをインストールせずに、オフラインでMarkdownをhtmlに変換してみる

前回、 上記記事を書きましたが、これを発展させて Jupyter Notebook のような、プログラムを実行しながら可視化してノートを書けるものを作りました。

リポジトリからhtmlとjsファイルをダウンロードしてローカルで実行する形式ですが、デモサイトを以下に用意しています。
すぐに確認したい方はどうぞ。
サイト内のドロップダウンリストから「JS Notebook (Markdown)」を選択して、「👀View」ボタンをクリックしてください。
https://shellyln.github.io/menneu/playground.html

※デモサイトでは、ユーザー入力のJavaScriptは実行されないようになっています。

実行イメージ

Untitled1.png
Untitled2.png
(中略)
Untitled3.png
Untitled4.png

編集イメージ

タイトルにメモ帳と書きましたが、流石に見辛いのでMeryを使用しました。
(メモ帳でも無理ではないです、知らんけど)

記法について

基本はマークダウンですが、%%%( ... )でLispのスクリプトを展開します。
また、Lispのスクリプト内では、LSXの記法により、DOMツリーが表現できます。
LSXの名前からお察しかもしれませんが、これはJSXの代替記法となっており、標準のhtmlタグ以外に、コンポーネントを処理できます。
下のイメージ内のMathChartNotebookJsLispがコンポーネントです。

  • 注意: LSXが有効なのは %%%( ... ) のブロック内です。
    コードブロックのLisp(%%%(Notebook """Lisp ... """))では利用できません。

Untitled5.png
Untitled6.png

※ 実物のコードはリポジトリ、またはデモサイトから参照ください。

マークダウンのコードブロックをJsLispで囲むことで、コードを実行したうえでhtml化します。

%%%(Notebook """Js@{(module "foo")}
```javascript
const x = 12345;

module.exports = function() {
    return x;
}

return x;
&#96;&#96;&#96;   <--- バッククォート × 3 です
""")

上記のコードブロックは、Jsの属性として module: "foo" が渡されています。
このブロックで、CommonJS形式でエクスポートした値・関数などは、他のブロックから require('foo') でインポートできます。
Lispブロックでも同様にインポート・エクスポートの記述ができます。
さらに JavaScript間、Lisp間だけでなく、両者の間で相互のインポート・エクスポートが可能です。

エクスポートされた値は、コードブロック外のLispコードでもrequireが可能となっています。
この機能を使用して、コードブロック内の結果を表やグラフとして可視化しています。

保存

gitリポジトリにコミットすれば、履歴管理も完璧です。

長所

  • ダウンロードして、メモ帳で開くだけなので編集が手軽。
  • 所詮テキストでしかないので、コピペが楽。

欠点

  • 所詮テキストでしかないので、実行結果をキャッシュしておけない。
    htmlを開くたびに再計算されるので、もし、非常に長時間掛かる処理があると無理がある。
  • 可視化の方法が、今のところChart.jsのグラフとMarkdown・htmlの表しかない。
  • コードブロック内のコードはデバッグできない。

追記 (20118/10/7)

各Markdownエディタの lisp ハイライト対応があまりに酷いので、 コードブロックの言語に js と書くことができるようにしました。
VSCodeではなぜか、割ときれいにハイライトされます。(Bracketsではいまいち)
混乱するのでお勧めはしません。

%%%(Notebook """Lisp@{(module "boo")}
```js                          <--- Lispのブロックですが、ここに「lisp」ではなく「js」と書けます
($concat "abc" "def")

($defun fac (n)
    ($if (== n 0)
        1
        (* n ($self (- n 1))) ) )

($defun multipy (x y)
    (* x y) )

(multipy 4 (fac 3))
&#96;&#96;&#96;                <--- バッククォート × 3 です。
""")

CDNから利用できるようになりました (2018/10/16更新)

以下のhtmlでリポジトリからファイルをダウンロードせずにお試しできます。

Notebook.html
<!DOCTYPE html><head><meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.0"></script>
</head><body><script type="text/markdown">

# JS Notebook

%%%(script (@ (src "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML") (crossorigin "anonymous") (async)))
</script>
<script src="https://cdn.jsdelivr.net/npm/menneu-md-notebook@0.0.2/articles/js/notebook.js"></script>
<script src="https://cdn.jsdelivr.net/npm/menneu-md-notebook@0.0.2/articles/js/menneu.min.js" onload="start({title: 'My Notebook 1'})"></script>
</body>
shellyln
GitHub: https://github.com/shellyln NPM: https://www.npmjs.com/~shellyln blog: https://shellyln.hatenablog.com/
https://shellyln.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away