データアプリのための静的サイトジェネレーター、Observable 2.0

 (observablehq.com)
14 ポイント 投稿者 GN⁺ 2024-02-16 | 1件のコメント | WhatsAppで共有

Observable Framework 発表

  • Observable 2.0 を公開: オープンソースの静的サイトジェネレーターとして、高速で美しいデータアプリ、ダッシュボード、レポートを構築可能。
  • データを効果的に伝えることを目標としており、Observable ノートブックは一時的なデータ探索には適しているが、ダッシュボードやアプリには適していない。
  • Observable Framework を通じて優れたデータアプリを構築でき、フロントエンドの JavaScript とバックエンドのさまざまな言語を組み合わせて利用可能。

ノートブックを超えて 📓

  • Observable 2.0 は長年にわたる経験を反映している。
  • 計算ノートブックの軽快さと協調性は、データ探索や即時の質問への回答には理想的だが、あらゆる作業に最適化されたインターフェースではない。
  • ノートブックは単一カラム、低い視覚情報密度、常時表示されるエディターインターフェースによって制約があり、こうした制約は学習や実験には適しているが、プレゼンテーションには向いていない。
  • データアプリは共有された理解を促進し、チームにより頻繁に利用され、時間が経っても価値を保つ。

より良い開発者ワークフロー 👩‍💻

  • 現代の開発はファイルベースで行われ、ファイルは相互運用性を持つ。
  • 開発者は好みのテキストエディター、ソース管理、コードレビューシステムを利用でき、ユニットテストやリンターを実行し、CI/CD を自動化できる。
  • Observable Framework はバニラ JavaScript 構文を採用し、require の代わりにモダンな ES import を使用して、学習とコード共有を容易にする。

より良いユーザー体験 😍

  • 開発者体験だけでなくユーザー体験も重要であり、創造的なツールの価値は生成物の質で評価されるべき。
  • Framework は素早い立ち上がりのためのデフォルト設定と利便性を提供し、必要に応じてカスタマイズできる。
  • Framework のデータアーキテクチャはデータを事前計算することで、アプリの速度を高める。

より良いデータアーキテクチャ

  • データ可視化には特定のデータ準備が必要であり、作業の大半はデータ準備にある。
  • 開発者はさまざまな言語、ライブラリ、データソースを使い、データをオフラインで事前処理しながら、ブラウザーでは JavaScript を使ったインタラクティブなグラフィックスを活用したいと考えている。
  • Framework のデータローダーはビルド時に静的なデータスナップショットを計算してページ読み込み速度を高め、サーバー上で実行されるため、セキュリティとプライバシーを制御できる。

謝辞

  • コミュニティの支援、フィードバック、励ましのおかげでここまで来ることができ、Observable Framework を共有できることをうれしく思う。
  • Framework についてさらに知りたければ、ドキュメントを読むかフォーラムを訪れることを勧める。

GN⁺の意見:

  • Observable Framework は、データ中心の Web アプリケーション開発に革新をもたらしそうだ。特にデータローダーによる事前データ処理は、ユーザー体験を大きく向上させうる重要な機能。
  • 開発者とユーザーの双方に有益なツールを提供しようとする Observable のアプローチは、協業と効率を重視する現代的な開発文化によく合っている。
  • オープンソースであり、さまざまな言語やツールをサポートする柔軟性は、開発者コミュニティにとって魅力的な選択肢になりそうだ。

関連記事

1件のコメント

 
GN⁺ 2024-02-16
Hacker Newsの意見

  • Observable Framework のリリース告知

    • Observable Framework は、データアプリ開発のための新しいオープンソースツール。
    • 社内ダッシュボードで Web ログを分析したサンプルレポートを見ることを勧めている。
    • 「すべてをグラフで表現する」手法を使い、サーバー最適化やトラフィック制御に役立つ洞察を得ている。
    • Observable Plot という新しいオープンソース可視化ライブラリの採用状況を可視化した、伝統的なダッシュボードも共有している。
    • Observable Framework のリリースに合わせて、個人ユーザー向けに Observable を再び無料で提供している（非公開ノートブックとデータベースコネクタを含む）。

  • Observable Framework の特徴

    • Observable Framework は 100% バニラ JavaScript 構文を使用する。
    • Observable のリアクティブランタイムを、特殊な構文なしで利用できる。
    • npm やローカルモジュールから静的 ES インポートを使え、コードブロック内で複数のトップレベル変数を宣言できる。
    • 組み込みの display(…) 関数を呼び出して、ページに内容を表示できる。
    • バニラ構文を使うことで、相互運用性が大きく向上する。
    • こうした改善点を近い将来 Observable ノートブックへ移植する方法を模索している。

  • 「ファイル対アプリ」という概念の活用

    • 発表では「ファイル対アプリ」という概念への言及があった。
    • Markdown ファイルにコードブロックを使って、複雑なデータ可視化やダッシュボードを作成できる。
    • この相互運用性は非常に興味深い。
    • Obsidian で Observable サイトを編集してみたところ、うまく動作することを確認した。

  • Observable のアプローチへの高評価

    • Observable を observablehq.com から切り離すアプローチは素晴らしい。
    • これにより、あらゆる記者が動的で情報に基づくブログを簡単に作れるようになる。
    • Observable の創設者には、NYTimes で驚くべきデータ可視化を手がけた経歴がある。
    • このようなツールは、ジャーナリストに力を取り戻させ、疑わしい企業から距離を置かせる転換を可能にする。
    • Svekyll は Jekyll に着想を得た静的サイトジェネレーターで、ブログに Svelte を使いたい人向けのもの。

  • Observable Framework に関するさまざまなアイデア

    • データローダーは、標準出力にデータ（JSON など）を出力できるスクリプト。
    • 実行される ```js ブロックを含む Markdown ファイル。
    • カスタム構文を避けるための Observable ノートブックの再発明。
    • こうした点は非常に重要だ。

  • Observable Framework 利用に関する要望

    • データの読み込み・準備と表示が明確に分かれている点が気に入っている。
    • シンプルな例とデプロイ文書の明確さを求めている。
    • ほとんどの人は GitHub Actions 経由でのデプロイを好むはずなので、複雑なデプロイファイルではなく、最もシンプルなデプロイファイルの例をドキュメントに追加してほしいと要望している。
    • GitHub リポジトリに接続し、変更があったときにビルド・デプロイするインターフェースが使えるかどうかの提案。

  • Observable Framework に関する質問

    • データローダー／バックエンドで使われる言語の柔軟性がフロントエンド／UI にも適用されるのか、それともデータ読み込みにだけ任意の言語を使い、ダッシュボードは observablejs / observable plot で構築するというパラダイムが維持されるのかという質問。
    • ObservableJS が Quarto によってサポートされていることを踏まえ、Quarto と統合された Observable Framework を期待できるのか、それとも最新の Quarto がダッシュボード機能を備えることで Framework の競合になるのかという質問。
    • Evidence.dev との比較を見て、Markdown 中心の開発体験にも似たものを感じたが、Evidence が主要チャートライブラリとして Apache Echarts を選んでいたことを思い出した。Echarts と ObservableJS / Plot の長所と短所についての考え。

  • Observable の歴史的発展

    • Observable の歴史をたどると、ダッシュボード向け静的サイトジェネレーターを作る会社として始まり、中間管理職にデータサイエンスを導入しようと試みたものの市場適合性を見つけるのに苦労し、最終的には JavaScript における探索的プログラミング、データ可視化、対話的ドキュメント作成のためのシンプルでエレガントなツールへと集中していった。

  • Observable Framework 利用に関する追加の質問

    • サーバー上の Sqlite / Duckdb データベースファイルから、スライダーやフィルターを使って一度に一部のデータだけを取得・表示するプロットやテーブルを作りたい場合、そのような相互作用をどう実現するのかという質問。
    • Observable Framework がフロントエンドを提供するなら、ログインや購読オプション付きのウェブサイトを作るために、どの認証ライブラリでも使えるのかという質問。
    • 静的ウェブページである場合、ユーザーがチャートを見るたびに Dev Tools を使って可視化の背後にあるデータファイルをダウンロードできてしまうのかという質問。
    • Plot のインタラクション（ズーム、パン、インタラクティブな凡例、ブラシ）のリリース予定日に関する質問。
    • 大きな parquet、sqlite、csv ファイルを持っている場合、GitHub や Vercel を通じた CI/CO は不可能なので、こうしたファイルとランタイムを生成するためのホスティングサービスを提供する予定があるのかという質問。

  • 類似したアイデアに関する観察

    • 非常によく似た（一部の面では大きく異なる）ツールを rysana.com で開発中。
    • アイデアが、まるで微積分が最初に発明されたときのように、何の調整もなく波のように現れている。
    • ここには多くの先行技術がある一方で、複数の言語を使う単一ファイルの Markdown「アプリ」への特定のジャンプが同時に起きているのは興味深い。