Bento: 単一ファイルHTMLプレゼンテーションツール

Bentoは、デッキデータ、ビューア、エディタを含むアプリケーション全体を単一のHTMLファイルに統合するプレゼンテーションツールです。このアーキテクチャにより、ユーザーはアカウント、インストール、外部サーバーの依存関係を必要とせず、任意の最新ブラウザでプレゼンテーションを開き、インプレースで編集し、保存することができます。

コアアーキテクチャ: シングルファイルアプリ

Bentoは「シングルファイルウェブアプリ」として動作し、ソフトウェア自身がファイルとなります。ランタイムはHTMLドキュメント内にピン留めされ、これによりプレゼンテーションは時間とともに「腐敗」せず、ブラウザが利用可能である限りアクセス可能な状態を保ちます。

技術的実装

作成者のstarfallgによると、HTMLファイルは2つの主要なセクションに分割されます:

• スライドデータ: ファイルの上部近くにあるプレーンなJSONブロック。これにより、外部ツールやAIエージェントによってドキュメントが読み取り可能かつ検索可能（grep-able）になります。
• アプリケーションロジック: アプリは小さなシャムを介してロードされるbase64ブロブとして保存されます。ブラウザ内でアプリケーションを展開するためにDecompressionStreamを使用し、ファイルサイズを小さく保ちます（デフォルトのデッキは約560 KB）。

データの永続性とアップデート

Bentoは、File System Access APIを使用して、ユーザーが保存（⌘S）するときにJSONデータを同じHTMLファイルに書き戻します。また、起動時に署名済みマニフェストをチェックしてアップデートを処理しますが、この機能はユーザーによって無効にすることができます。

主なプレゼンテーション機能

Bentoは、モーションとインタラクティブデータに焦点を当てた高 fidelity なプレゼンテーション体験を提供します。

ダイナミックトランジションとモーション

Bentoはアニメーションの処理にGSAP/Flipを利用します。同じIDを共有する要素がスライド間で位置、サイズ、色、グラデーションをアニメートする「Morph」トランジションを特徴とし、シームレスな視覚的フローを作り出します。

インタラクティブおよびライブデータ

静的なスライドとは異なり、Bentoはライブチャートとインタラクティブな状態を統合します:

• ライブチャート: チャートはアクティブなツールチップとズーム機能を持つ実際のインスタンスです。データは同じデータセットを維持しながら、棒グラフから円グラフや散布図など異なるチャートタイプ間でモーフできます。
• インタラクティブシーン: ユーザーは単一のスライド内に「シーン」を作成できます。これは基本的に隠れた状態であり、ボタンを介してリンクされ、次のスライドに進まずに要素を並べ替えたりレイアウトを変更したりできます。
• ライブリンクテーブル: テーブルのデータを編集すると、関連するチャートと成長線がリアルタイムで更新されます。

コンテンツ作成

Bentoは組み込みエディター（Escキーでアクセス）を含み、Markdownをサポートして即座のタイポグラフィとフォーマット（箇条書き、コードブロック、取り消し線）を提供します。

コラボレーションとセキュリティ

Bentoはオフラインファーストですが、「ブラインドリレー」システムを通じてオプションのライブコラボレーションをサポートします。

• CRDTsと暗号化: コラボレーションは、Conflict-free Replicated Data Types（CRDTs）と暗号化されたデータによって駆動されます。Cloudflare Durable Objects上でホストされるリレーは、暗号化されたペイロードのみを表示し、プライバシーを確保します。
• アクセス制御: コラボレーションは招待ファイルを共有することで開始されます。アクセスはユーザーキーによって管理され、作成者は読み取り専用権限を割り当てたり、ユーザーのアクセスを取り消したりできます。

コミュニティフィードバックと洞察

Hacker Newsのユーザーは、ツールの有用性と潜在的な改善点について以下の点を議論しました:

"エージェントでの編集や同僚との共有に最適です。モバイルでもよく動作します。画像や動画の埋め込みも完璧に機能します。"

"すべて必要なものが単一のファイルにあることを知っているだけで、とても満足感があります。"

1人のユーザー(@aag)はプライバシーに関する不一致を指摘し、ホームページが「何もホームに電話しない」と主張しているにもかかわらず、一部のBentoファイルにcloudflareinsights.comビーコンが含まれていることを観察しました。他のユーザーは、アクセシビリティのためにすべてのアニメーションを無効にする設定を追加するか、ツールをPandocの出力形式として統合することを提案しました。