Blitz: 軽量・モジュール型・拡張可能なWebレンダラー

Blitz: 軽量・モジュール型・拡張可能なWebレンダラー

Blitzは「Dioxus Native」プロジェクトを支援するために開発された「ネイティブ」HTML/CSSレンダラーです。JavaScriptエンジンの代わりにネイティブのRust APIを使用し、Rustのリアクティビティ／状態管理ライブラリと直接インターフェースできます。

現在サポートしている2つのフロントエンド

• HTML/Markdownフロントエンド: HTML文字列をレンダリングできます。HTMLおよびMarkdownファイルのプレビューに便利ですが、対話性は限定的です。
• Dioxusフロントエンド: Dioxus VirtualDomをレンダリングできます。Dioxusのイベント処理により完全な対話性をサポートします。

Blitzの基盤技術

• Stylo: Firefoxの並列ブラウザ級CSSエンジン
• Vello + WGPU: レンダリング
• Taffy: ボックスレベルレイアウト
• Parley: テキスト／インラインレベルレイアウト
• AccessKit: アクセシビリティ
• Winit: ウィンドウおよび入力処理

参考: このリポジトリにはStyloを使用する新しいバージョンのBlitzが含まれています。以前のバージョンのソースコードはlegacyブランチで引き続き利用できますが、積極的には開発されていません。

スクリーンショット

• Dioxusレンダラー
• HTMLレンダラー（google.comをレンダリング）

試してみる

1. このリポジトリをクローン
2. サンプルを実行:
   • cargo run --example google
   • cargo run --example url https://myurl.com
   • 他のサンプルも利用可能
   • より良い実行時性能のために --release を追加
3. Ctrl/Cmd + + / Ctrl/Cmd + - でスケール変更、F1を押してレイアウト矩形を表示

目標

BlitzはHTMLとCSSをレンダリングするために設計されています。ブラウザのすべての機能をサポートするものではなく、こうした「追加」機能は選択的に提供する予定です。ブラウザは基本的なHTML/CSSレンダリングには過度に複雑だと考えています。

サポート予定の機能:

• モダンなHTMLレイアウト（flexbox、grid、table、block、inline、absolute/fixed など）
• 高度なCSS（複雑なセレクタ、メディアクエリ、CSS変数）
• HTMLフォームコントロール
• AccessKitによるアクセシビリティ
• カスタムウィジェットによる拡張性

サポートしない機能:

• webrtc、websockets、bluetooth、localstorage など

他言語（JavaScript、Python など）向けのBlitzバインディングはまだありませんが、貢献は歓迎されています。

アーキテクチャ

Blitzはいくつかの部分に分かれています:

• blitz-dom: スタイル解釈とレイアウトを含むが、描画／ペインティングは含まない中核DOM抽象化
• blitz: blitz-dom にVello/WGPUベースのレンダラーを追加
• dioxus-blitz: Blitzを使ってDioxusアプリをレンダリングするDioxus統合レイヤー。現在 dioxus-blitz にはHTMLレンダラーも含まれていますが、今後は別パッケージとして分離される可能性があります。

状態

Blitzは現在 実験的 です。実用可能な状態にするため積極的に開発されていますが、まだアプリ構築に使うことは推奨されていません。

TODO

• 中核DOMツリー抽象化
• html5everを使用したスタイル解析
• html5everドキュメントのスタイル計算
• Taffyを使用したレイアウト計算
• WGPUを使用したレンダリング

レンダリング

• ウィンドウへのレンダリング
• 画像へのレンダリング
• グラデーション
• 境界線／アウトライン
• ラスター画像（png、jpeg など）
• ズーム
• SVG
  • 外部SVG（基本サポート）
  • インラインSVG
• シャドウ
• アニメーション／トランジション
• 標準フォームコントロール（チェックボックス／ドロップダウン／スライダー など）
• カスタムウィジェット
• シャドウ要素

レイアウト

• インライン（部分サポート - 実装は未成熟）
• ブロック
• フレックスボックス
• グリッド
  • 名前付きグリッドライン
  • サブグリッド
• テーブル
• Zインデックス
• 追加のCSS機能
  • box-sizing: content-box
  • calc()
  • position: static
  • direction: rtl
  • transform

テキスト

• フォント読み込み
  • システムフォントの読み込み
  • Webフォントの読み込み
• テキスト
  • シェーピング / Bidi
  • レイアウト / 改行
  • フォントサイズ / 行の高さ
  • テキスト色
  • 太字 / 斜体
  • 下線 / 取り消し線
• テキスト選択

入力

• スクロール
  • ルートビュー
  • overflow: scroll 要素
• ホバー検出
• クリック処理
• テキスト入力

パフォーマンス

• ホットリロード
• スタイルおよびレイアウトの再解釈なしでのスクロール
• スタイルキャッシュ
• レイアウトキャッシュ

その他

• マルチウィンドウ
• アクセシビリティツリー
• フォーカス
• 開発ツール
• コンテキストメニュー用フック
• 任意のレンダリングサーフェスに要素を取得するための use_wgpu_context()

ライセンス

このプロジェクトはApache 2.0およびMITライセンスのデュアルライセンスです。別途明記されていない限り、ユーザーがstylo-dioxusに含める目的で意図的に提出したすべての貢献は、追加条件なしでMITライセンスとして扱われます。

GN⁺の要約

• BlitzはRustベースの軽量HTML/CSSレンダラーで、Dioxusプロジェクトを支援するために開発されています。
• ブラウザの複雑な機能を排除し、基本的なHTML/CSSレンダリングに集中しています。
• 実験段階にあり、まだアプリ構築には推奨されていません。
• 類似の機能を持つプロジェクトとしてはServo、WebRenderなどがあります。