AdaのためのモダンなGUIライブラリ: CSSスタイリング、XML UI、SDL3

Adi2 AdaのためのモダンなGUIライブラリ。 Adi2は、開発者がモダンなUIスタックに期待する利便性を提供する、本格的なウィジェットツールキットです — CSSライクなスタイリング（ライブリロード対応）、宣言的なXMLレイアウト、アニメーション、SVGおよびLottieグラフィックス、国際化、アセットバンドル — これらすべてがSDL3上にネイティブでAdaで実装されています。 ステータス: 本番環境で使用中ですが、まだ安定リリースではありません — APIはバージョン間で変更される可能性があります。 なぜAdi2なのか？ ウェブのようにUIをスタイリングします。 セレクター、擬似クラス、パーツ、トランジション、グラデーション、ボックスシャドウ — すべておなじみの.css構文で。 ファイルを編集し、保存し、変更を確認します。開発中に再コンパイルする必要はありません。 純粋なAdaを好みますか？ CSSルールは単なるプレーンなAdaのStyle_Rules集です — 追加の儀式なしで手書きできます（以下のスニペットを参照）。 UIを宣言的に記述 — または記述しなくても。 XMLで<button>、<grid>、<text-editor>を記述し、ツールチェーンにクリーンなAdaパッケージを出力させるか、ハンドルベースのビルダーで直接Adaで同じウィジェットツリーを構築します。どちらのパスも全く同じAPIをターゲットとしています。XMLジェネレーターは利便性であり、要件ではありません。 リッチなコンテンツをレンダリングします。 組み込みの軽量HTMLビューウィジェットは、カスケードスタイルシートでドキュメントスタイルのマークアップをレンダリングします。SDL3_image経由のラスター画像、バンドルされたplutosvg経由のSVG、バンドルされたrlottie経由のLottieアニメーション。 単一のバイナリを配布します。 CSSファイル、フォント、画像、翻訳、SVGスプライトをすべて実行可能ファイルにバンドルします。実行時にファイルシステムへの依存関係はありません。 ユーザーの言語で話します。 複数形、自動ロケール検出、.po → Adaコンパイルに対応したgettext互換のi18n。 ボイラープレートなしでアニメーションします。 色、背景色、境界線の色、境界線の幅、境界線の半径、パディング、マージン、不透明度、ボックスシャドウ、フォントサイズに対するCSSトランジション — フレームワークが補間とタイミングを処理します。 HiDPI対応ユニット。 レイアウトにはdp/dip、タイポグラフィにはrem、正確に1つのレンダラーピクセルを意味する場合はpix、そしてpx — これはSet_Px_Maps_To_Dipの設定に応じて、ディスプレイのスケーリングに従うか従わないかです。docs/css_styling.mdを参照してください。 ツールと自動化のために構築されています。 開発専用のMCPブリッジにより、エディタやAIアシスタントが実行中のアプリのスクリーンショットを撮り、ウィジェットツリーをウォークし、それを操作できます — ボタンをクリックしたり、入力フィールドにタイプしたり、フォーカスを移動したり、パフォーマンスカウンターを読み取ったりします。お好みのAIによって書かれたエンドツーエンドテストに最適です。 ブラウザで実行します。 例はGNAT-LLVMとEmscriptenでWebAssemblyにコンパイルされます — それらをライブで試すか、wasm/ディレクトリでビルドを確認してください。 出荷コスト リリースビルドは、ウィジェットツールキット、CSSエンジン、SVGおよびLottieレンダリングなど、すべてを含めて10MB未満の単一実行可能ファイルに静的にリンクされます。バンドルするアセットは、その重量を追加します。 SDLのレンダラーを通じて描画され、これはホストが提供するものをバインドします: WindowsではDirect3D、macOSではMetal、存在する場所ではVulkanまたはOpenGL、そしてソフトウェアフォールバックです。 Windows XPはDirect3D 9を、現在のMacはMetalを、同じソースから使用します。 Adi2 Qt Flutter Electron 出荷サイズ <10MB、1ファイル ~15–30MB 静的; それ以外はQtランタイムと合わせて~20MB+ エンジンとデータディレクトリ合わせて~100MB+ ChromiumとNodeランタイムをバンドル 自己完結型Qtライブラリとプラグイン Flutterエンジン; LinuxではGTK3 ChromiumとNode グラフィックス SDLレンダラー、ソフトウェアフォールバックを含む GPUまたはラスタバックエンド SkiaまたはImpeller、GPUが期待される GPUスタックとコンポジター ポータビリティ Windows XP+, macOS, Linux, WebAssembly Windows 10+, macOS, Linux, モバイル, 組み込み Windows 10+, macOS, Linux, モバイル, ウェブ Windows 10+, macOS, Linux 言語 Ada C++ Dart JavaScript メモリ安全性 チェック済み、決定論的回収 手動ガーベージコレクション ガーベージコレクション スタイリング CSS QSS Dartウィジェットコード CSS サイズは最小アプリケーション用です。あなたのアプリケーションは、あなた自身のコードとアセットとともに成長します。 他の各ライブラリは、大規模なエコシステムと長年の本番使用によってそのサイズを得ています — Adi2が提供するトレードオフは、誰かに手渡すことができる単一のファイルであり、他のライブラリが過去のものとしたハードウェアでも動作することです。 スクリーンショット hello_example material_demo html_view_example rlottie_example assets_example すべての例の完全なギャラリー: docs/gallery.md。 または自分で実行してください、ブラウザで: ライブデモ。 味見 宣言的なパス — XML + CSS /* examples/css/hello_example.css */ .primary { background-color: rgb(37, 99, 235); border-radius: 8px; padding: 10px 16px; transition: background-color 150ms ease-out; } .primary:hover { background-color: rgb(29, 78, 216); } .primary::label { color: white; font-size: 14px; font-weight: 500; } <!-- examples/xml/hello_example.xml --> <adi> <link rel="stylesheet" href="examples/css/hello_example.css"/> <callback name="On_Hello_Click" type="Adi.Widget.Button.Click_Callback"/> <window title="Hello, Adi" width="320" height="180"> <box class="root"> <label text="Welcome to Adi" class="welcome"/> <button text="Click me" class="primary" on-clicked="On_Hello_Click"/> </box> </window> </adi> ツールチェーンは、メインプログラムからインスタンス化する型付きAdaパッケージを出力します — 完全な約25行のプログラムについては、examples/hello_example.adbを参照してください。 同じもの、Adaで手書き 上記のCSSルールは単なる集まりです。XMLウィジェットツリーは単なる数個のコンストラクタ呼び出しです。どちらのパスも同じAPIに着地します — 完全な同等のプログラムについては、examples/hello_raw_example.adbを参照してください。 スタイリングコードの形状は次のとおりです。 function Style return Style_Builder renames Adi.Widget_Styles.Create; -- .primary base + :hover from hello_example.css の同等物 Primary_Base : constant Style_Rules := (Background_Color => Set_Bg (RGB (37, 99, 235)), Border_Radius => Set (Radius (Px (8.0))), Padding => Set (CSS_Box (Px (10.0), Px (16.0))), Transition => Set ((Duration => 0.15, Easing => Ease_Out, Properties => Props (Prop_Background_Color)))), others => <>); Primary_Hover : constant Style_Rules := (Background_Color => Set_Bg (RGB (29, 78, 216)), others => <>); -- ベース + ホバーをボタンのMain_Partにワイヤリング Set_Part_Style (Widget_Handle'(+Btn), Main_Part, Style.Base (Primary_Base).On_Hover (Primary_Hover).Build); どちらのフレーバーもビルドして実行します: tools/build_examples.sh hello_example hello_raw_example ./examples/bin/hello_example # XML + CSS パイプライン ./examples/bin/hello_raw_example # 純粋な手書きAda クイックスタート # ライブラリをビルド alr build -- -j0 # テストスイートをビルドして実行 tools/run_tests.sh # すべてのサンプルプログラムをビルド tools/build_examples.sh # ...または1つだけ tools/build_examples.sh stack_example # デモを試す ./examples/bin/material_demo ./examples/bin/html_view_example Adi2を独自のプロジェクトから使用するには、「adi.gpr」を使用します — SDLリンカオプションが含まれています。 ライブラリの公開仕様はAda 2022の構文を使用しているため、Adi.*パッケージをwithするユニットはpragma Ada_2022;または-gnat2022が必要です。 独自のプロジェクトを開始しますか？ docs/getting_started.md は、空のディレクトリからXML/CSS、そしてプレーンAdaでの作業ウィンドウまでをウォークスルーします。 Alireなしでのビルドを含む完全なビルド手順は、docs/build.mdおよびdocs/gprbuild_without_alire.mdにあります。 ロードマップ CSS: より広範なCSSサーフェス — より標準的なプロパティ、セレクター、値。 HTMLビュー: テーブル — table, tr, td/th, 列幅, スパン。 Flexとグリッド — ドキュメント内のdisplay: flexおよびdisplay: grid。 ウィジェットとテーマ: より多くのウィジェット — ツリービュー、データグリッド、メニューバー、プログレスおよびビジーインジケーター、ツールチップ、スプリットペイン、日付およびカラーピッカー。既製のテーマ — Material, Fluent, Adwaita, macOS、それぞれライトおよびダーク。 テキストとリーチ: 右から左へのテキストと双方向テキスト — directionおよびbidi再並べ替え。 アクセシビリティ — スクリーンリーダー用のセマンティックロール、名前、状態（AT-SPI, UI Automation, NSAccessibility経由）。 ポータビリティ: プラグ可能なバックエンド — Win32/Direct2D, Cocoa, GLFW, raylibまたはSkiaがSDL3の代わりに使用できる抽象化レイヤー（設計ノート）。組み込みデバイス。 オーサリングとツール: ビジュアルデザイナー — RAD IDEのような体験、UI XMLとCSSの両方を編集できます。HACによるスクリプティング — HAC Adaコンパイラを埋め込んで、リロード可能なアプリケーションロジックを実現します。XML UIのライブリロード — CSSはすでに実現していますが、XMLウィジェットツリーもホットリロードします。より良い生成ドキュメント — gnatdocによるブラウズ可能なAPIドキュメント。 正確性とAPI: より良いコールバック