Observable Notebooks 2.0 テクノロジープレビュー

概要

• Observable Notebooks の次世代版「Notebooks 2.0」の技術プレビュー発表
• Observable Notebook Kit と Observable Desktop の2つの新ツール公開
• ファイルベース ・ バニラJavaScript 対応で柔軟性と再利用性向上
• AI統合 ・カスタマイズ性強化・静的サイト生成対応
• ユーザーからのフィードバック を重視、今後の開発に反映予定

Observable Notebooks 2.0 技術プレビュー概要

• Observable Notebooks の新世代バージョン「Notebooks 2.0」発表
• Observable Notebook Kit ：オープンなノートブックファイル形式と静的サイト生成ツール
• Observable Desktop ：macOS向けローカルファイル編集アプリ、AI統合型
• ローカルファースト アプローチ採用、今後はWeb版も提供予定
• 技術プレビュー 段階でユーザーのフィードバックを歓迎

Notebooks 2.0 の主な目標

• ファイルベースワークフロー 対応でノートブック活用範囲拡大
• バニラJavaScript 採用で学習コスト軽減・再利用性向上
• 最新構文・ライブラリ 対応によるモダン化
• 高速な静的サイト生成 で最適な閲覧体験の実現

Observable Notebook Kit の特徴

• オープンソースCLI およびViteプラグインとして提供

• 自作ホスティング やCI/CD、カスタムWebアプリ統合が可能

• ノートブックの 静的サイト化 によりSEO・パフォーマンス向上

• npm install @observablehq/notebook-kit で導入

• package.json にスクリプトを追加し簡単にビルド・プレビュー

  • 例：
    • "docs:preview": "notebooks preview --root docs"
    • "docs:build": "notebooks build --root docs -- docs/*.html"

• Vite ベースの高速ビルド、 GitHub Pages ・ Vercel ・ Netlify 等へのデプロイ容易

• エディタ自由 で、Viteのプレビューサーバーによるライブ編集も可能

Observable Desktop の特徴

• macOS 15+・Apple Silicon専用 のデスクトップアプリ
• ローカルファイル編集 と AIアシスト による生産性向上
• クリーンなUI とコーディングに特化した編集体験
• AI統合 で創造性・学習・生産性を強化
• 将来的に Web版エディタ も提供予定、 Observable Workspace とのシームレスな連携

ノートブックファイル形式

• HTMLベース のシンプルで可読性・編集性の高いフォーマット

• ルート要素、 </strong>、各セルごとの <strong><script></strong> 要素で構成</p> </li> <li><p><strong>バージョン管理</strong> や <strong>検索・置換</strong> が容易</p> <ul> <li>例：<pre><code><!doctype html> <notebook> <title>Hello, world!</title> <script id="1" type="text/markdown"> # Hello, world! </script> <script id="2" type="module" pinned> 1 + 2 </script> </notebook> </code></pre> </li> </ul> </li> </ul> <h3>バニラJavaScript対応の詳細</h3> <ul> <li><strong>Observable JavaScript</strong> 独自仕様の廃止、 <strong>標準JavaScript</strong> に統一</li> <li>セル内で <strong>const/let</strong> による複数変数宣言が可能</li> <li><strong>display(…)</strong> で複数・非同期の表示対応</li> <li><strong>view(…)</strong> で複数のリアクティブ入力定義が可能</li> <li><strong>npm・JSR・Web・ローカルモジュール</strong> からの標準的なimport対応</li> <li><strong>require</strong> 非推奨、 <strong>import</strong> 中心のモダンなモジュール管理</li> </ul> <h3>テーマ・カスタマイズ性強化</h3> <ul> <li><strong>カスタムスタイルシート</strong> で自由なデザイン適用</li> <li><strong>フルブリード</strong> 表示でウィンドウ全幅活用</li> <li><strong>アニメーション背景</strong> や <strong>テーマ選択</strong> （ライト・ダーク両対応）</li> <li><strong>カスタムページテンプレート</strong> 追加でヘッダー・フッターも自由に設定可能</li> </ul> <h3>標準ライブラリのモダン化</h3> <ul> <li><strong>md, html, tex</strong> タグ付きテンプレートが最新バージョンにアップグレード</li> <li><strong>JavaScriptモジュール</strong> 全面採用、 <strong>require</strong> 非推奨</li> <li><strong>npm, JSR, ローカル, リモート, Observableノートブック</strong> からのimport対応</li> </ul> <h3>静的サイトとしてのノートブック活用</h3> <ul> <li><strong>Markdown・HTMLセル</strong> は静的レンダリングで高速表示</li> <li><strong>SEO最適化</strong>、クローラーによる内容認識が容易</li> <li><strong>Observable Desktop</strong> 不要で、任意のテキストエディタで編集・ビルド可能</li> <li><strong>今後はWebエディタから直接共有可能</strong> に</li> </ul> <h3>フィードバックと今後の展望</h3> <ul> <li><strong>GitHub Issues/Discussions</strong> でフィードバック受付中</li> <li><strong>👍リアクション</strong> や新規Issue投稿で開発優先度に反映</li> <li><strong>ユーザー作成例</strong> はギャラリーに掲載可能</li> <li><strong>今後も追加機能・改善予定</strong>、ビジネス用途での利用も歓迎</li> </ul> <hr> <h3>まとめ</h3> <ul> <li><strong>Observable Notebooks 2.0</strong> は、ファイルベース・バニラJavaScript・AI統合・カスタマイズ性・静的サイト生成など、現代的なノートブック体験を提供</li> <li><strong>Observable Notebook Kit</strong> と <strong>Observable Desktop</strong> の2つの新ツールで、柔軟な開発・運用・共有が可能</li> <li><strong>ユーザーの声</strong> を重視し、今後も進化を続けるプラットフォーム</li> </ul>