リアクティブHTMLノートブック

 (maxbo.me)
1 ポイント 投稿者 GN⁺ 2024-11-19 | 1件のコメント | WhatsAppで共有

  • レスポンシブHTMLノートブック

    • HTMLを科学出版プラットフォームとして活用することの重要性を強調している。
    • HTMLファイルをデータ探索、分析、可視化、出版のすべての段階で使用できる可能性を示している。
    • 既存のさまざまなツールやプラットフォームを使い分ける代わりに、HTMLを通じて統合されたワークフローを提供できる。

  • セル

    • CSSクラス echo を使って、スタイル要素やスクリプト要素をインラインで表示する方法を説明している。
    • contenteditable 属性を使って基本的なコードエディタを作成する。
    • スクリプトが blur イベントで再評価されるように設定する。

  • Observableライブラリとランタイム

    • Observable標準ライブラリとランタイムをインポートし、window にバインドする。
    • cell 関数でセルを定義し、Observable Inspectorを使ってセルの出力を表示する。

  • セルの例

    • counter セルを宣言し、毎秒数値を出力する。
    • fizzbuzz セルを作成し、counter の値に応じて異なる出力を生成する。
    • silent 関数を使って、出力を表示しないセルを作成する。

  • 複雑な出力

    • Hypertext Literalを使って counter の値をフォーマットする。
    • Observable Plotを使って counter の値をプロットに利用する。

  • TeX、Markdown、Graphviz

    • セルからDOM要素を返して、さまざまな形式の出力を生成する。
    • TeX、Markdown、Graphvizを使って数式、表、グラフを生成する。

  • セルの状態

    • セルはPromiseまたはErrorを返すことができ、ObservableのInspectorがセルの外側のdiv要素にクラスを適用する。

  • SQLite

    • WASMベースのSQLiteクライアントを使ってデータベースクエリを実行する。
    • SQLクエリを通じてトラック長の分布を可視化する。

  • PythonとR

    • PyodideとWebRを使ってPythonとRのコードを実行し、可視化を生成する。
    • Pythonのsqlite3モジュールとMatplotlibを使ってプロットを生成する。

  • 入力

    • Observable Inputsを使って入力を作成し、セルと接続する。
    • viewof 関数を使って入力要素をセルの上に表示する。

  • 可変性

    • mutable 関数を使って、状態を変更できるオブジェクトを作成する。
    • 状態が変化するたびに新しいGenerator値を生成する。

  • 今後の計画

    • すべての内容をライブラリに統合し、適切なドキュメントを提供する予定である。
    • ライブラリ名は @celine/celine に決定している。

  • スライドインフラ

    • 文書をスライドショーに変換するコードを提供する。
    • キーボードショートカットを使ってスライドを移動できる。

関連記事

1件のコメント

 
GN⁺ 2024-11-19
Hacker Newsのコメント

  • HTMLが計算ノートブックの優れた基盤になり得るという記事には同意する。しかし、その実装方法は気に入らない。Observableはすばらしいが、標準JSから外れている。HeximalというリアクティブHTMLシステムを開発中で、これはHTMLテンプレートとカスタム要素を基盤としている。

    • HeximalはHTMX、Tangle、Curvenote、Polymerを混ぜたようなものだ。グラフィック編集やノートブックのユースケースによく合うはずだ。

  • このアプローチの使い勝手はひどいと思う。探索的データ分析をするときにスタイル要素を気にする理由はない。そこがJupyterノートブックの優れている点だ。それでも、好奇心と代替アイデアの実装には賛辞を送りたい。

  • PythonとSQLiteのデモが特に印象的だった。Webを通じて編集ループを始めた点が興味深い。永続性の問題はTiddlyWikiに似ており、ファイルシステムを使えば回避できる。組み込みスクリプトからエクスポートできない点は改善が必要だ。

  • RakuでHTMLノートブックをサポートしようという試みを近く行う予定だ。現在のRakuのノートブックソリューションはJupyterまたはMathematicaベースだ。

  • この投稿の形式が気に入った。多くの依存関係やフレームワークなしで興味深い結果につながっている。与えられたコード断片をコピーして、段階的に理解できる。文芸的プログラミングを使ってHTMLにエクスポートし、ブログ記事を書くつもりだ。

  • リアクティブHTMLだが、ほとんど全面的にJavaScriptのように見える。

  • pyodideの編集を試したが、携帯電話ではクラッシュしてページが再読み込みされた。

  • 作者は質問を受ける準備ができている。

  • Rakuのコード例をホストし、文芸的プログラミングのために似たものを構築しようとしている。Jupyter ChatbooksのRakuプラグインはあるが、Pythonを必要とするのが不自然だ。サーバー側コードを使ってリモート言語カーネルに接続できるメッセージレイヤーがあるとよい。

  • Windows XPの恐竜カーソルがたくさんの思い出を呼び起こした。