Slint を直したり新機能を追加したくなったら

はじめに

メリークリスマス！

この記事は Slint Advent Calendar 2024 25日目の記事です。

昨日は @hermit4 さんによる M5Stack Core２+ Zephyr OSでSlintを動かしたい でした。

最近日本でも少し盛り上がりを見せつつある Zephyr で、綺麗な GUI を簡単に作れるオープンソースの選択肢が増えるのはいいことですね。何とかちゃんと使えるところまで行くといいなと、陰ながら応援しています。

Slint はオープンソースプロジェクトです

Slint のいいところの１つは、オープンソースで開発されているところです。

誰でもソースコードを入手して、ビルドして、試して、直し、Slint 自体に反映することができます。

インターネット上に情報も徐々に増えはじめてきていますし、困った時には相談できる コミュニティ もあります。

Slint に限らないのですが、Rust 製のプロジェクトはエコシステムやコミュニティが素晴らしいなと感じています。言語自体だけ以外にも、そういうところもモダンで居心地がいいし、貢献していけたらいいなと思っています。

Slint 自体をビルドしてみよう

Slint のドキュメントにある building.md に目を通しておくことをお勧めします。

準備

Slint は Rust で書かれているので、Rust の開発環境が必要です。以下のページに沿ってインストールをします。

ソースコードの取得

Slint のソースコードは GitHub で公開されていますので、それを取得しましょう。

Windows の場合は以下のとおり

git clone -c core.symlinks=true https://github.com/slint-ui/slint

Linux や macOS では

git clone https://github.com/slint-ui/slint

で大丈夫です。

ビルド

cd slint
cargo build

いやぁ、Rust (というか Cargo）って楽でいいですね。

サンプルアプリを実行してみる

ルートディレクトリにある Cargo.tomlの default-members の中に含まれる、examples や demos は簡単に試すことができます。

Cargo.toml

default-members = [
    ...
    'examples/gallery',
    'examples/memory',
    'demos/printerdemo/rust',
    'examples/slide_puzzle',
    'examples/todo/rust',
    'examples/virtual_keyboard/rust',
    'examples/carousel/rust',
    'demos/energy-monitor',
    ...
]

cargo run --bin gallery

cargo run --bin virtual_keyboard

これ以外のものも試してみてください。

その他のデモやサンプルアプリ

demos や examples の下には他にも様々なアプリがあります。個々のディレクトリに移動して、色々試してみてください。

cd demos/home-automation/rust && cargo run

18日目の記事 で紹介した ダイアルのサンプル など .slint ファイルしかないものは、22日目の記事で紹介した Slint Viewer で試すことができます。

cargo run --bin slint-viewer -- ./examples/dial/dial.slint

テストを実行してみる

cargo test

とても、、、時間がかかります。

Slint に貢献してみる

まずは CONTRIBUTING.md に目を通しましょう。

Slint の開発は GitHub のインフラで行われています。

• Discussions で話したいことを気軽に共有してください
• Issues にバグ報告や提案をかいてください
• Pull Request も受け付けています
  • good first issue ラベルがついたものは、初めての方でも挑戦しやすくしてあります
  • rfc ラベルがついたものはみなさんのご協力をお待ちしているものです

Pull Request を送る際には、Slint Individual Contributor License Agreement に合意する必要があります。ご理解とご協力をお願いします。

わたしがやってみたこと

Issues に報告してみたもの

上記で一覧が見られます。

こちらは、6日目の記事 で PSD を .slint に変換しているときに欲しいなと思った機能です。

こちらの詳細は 20日目の記事 として書きました。

Pull Request を送ってみたもの

上記で一覧が見られます。

これが記念すべき最初の貢献でした。

ちょっとした Typo を直したり、サンプルアプリをちょっと改善したりからはじめて、前述の 「good first issue」に取り組んだりしている感じです。

大したことはしていませんが、こう些細な改善の積み重ねによってプロジェクトって安定していくんだと思っています。

Slint を開発する際に知っておきたいこと

ドキュメントの生成方法

ちょっとした Typo 程度なら自分でドキュメントを生成して確認したりはしませんが、それ以上の変更をした場合にはローカルで確認しましょう。

.slint のドキュメントの生成方法

これですね。自分で生成する場合は、以下のドキュメントを見てください。

（ちょっと変だったので 直してみました）

Rust API のドキュメントの生成方法

cargo doc

で生成します。

公式のドキュメント に従うと、シンタックスハイライトの機能が有効になります。

RUSTDOCFLAGS="--html-in-header=$PWD/docs/astro/src/utils/slint-docs-preview.html --html-in-header=$PWD/docs/astro/src/utils/slint-docs-highlight.html" cargo doc --no-deps --features slint/document-features,slint/log

（こちらもちょっと変だったので 直してみました）

C++ や NodeJS のドキュメント

まだ試す機会に恵まれてはいませんが、公式のドキュメント に従えば生成できるはずです。

テストの実行

すでに cargo test を試しましたが、１行コードを変更する度にそれを実行していたのでは開発が終わりません。以下のドキュメントを見て、最小限のテストを素早く繰り返せるようになりましょう。

.slint 言語の文法のテスト

上記に、.slint 言語のコンパイルやエラーに関するテストがあります。

cargo test --test syntax_tests

でテストが可能です。

（こちらもちょっと変だったので 直してみました）

以下の改善をした際に利用しました。

インタープリターのテスト

slint-viewer などで .slint ファイルを実行する際のテストです。

cargo test -p test-driver-interpreter --

tests/cases 以下の .slint ファイルを評価します。

また、最後に記載してあるコンポーネントに bool 型の test とい名前のプロパティがあった場合には、それが true であることを確認します。

（こちらもちょっと変だったので 直してみました）

internal/interpreter 以下を変更したら、このテストで確認しましょう。

Rust の API のテスト

cargo test -p test-driver-rust

internal/compiler/generator/rust.rs を変更した場合にはこのテストで確認しましょう。

前述の tests/cases 以下の .slint ファイルの中のコメント中の

```rust
```

で囲まれたコードをテストします。このテストは全部実行すると非常に時間がかかるため、

SLINT_TEST_FILTER=layout cargo test -p test-driver-rust

のようにフィルタをかけて関連する最小限のテストで済むように工夫しましょう。

C++ および nodejs

Rust と同様にそれぞれテストがあります。

cargo test -p  test-driver-cpp 

API は internal/compiler/generator/cpp.rs です。

cargo test -p  test-driver-nodejs

API はどこなんだろう。

Python

試験的に対応が進んでいる Python ですが、まだテストはないかもしれません。

描画のテスト

スクリーンショットを撮って比較するテストがあります。バックエンドなどを変更した際にはテストで確認しましょう。

リファレンス画像の生成

SLINT_CREATE_SCREENSHOTS=1 cargo test -p test-driver-screenshots

テスト

cargo test -p test-driver-screenshots

ドキュメントに埋め込まれているコードのテスト

```slint
```

で囲まれているコード片もテストがあります。

cargo test -p doctests

その他の開発に関する情報

にあるものは必要に応じてチェックしましょう。

分からないことがあったらコミュニティのチャットの #Development で気軽に聞いてみましょう。

おわりに

今日は、Slint Advent Calendar 2024 の記事をいくつか書くにあたって、Slint のバグを報告したり、バグを修正したり、新機能を追加しようとして色々学んだことを記事にしてみました。

今年からはじめた Slint Advent Calendar ですが、めでたいことにすべて埋まりました。記事を書いてくれたみなさん、読んでくれたみなさん、ありがとうございます。

Slint に少しでも興味を持ってくれた方がいたらとてもうれしいですし、実際に試して色々遊んでみてほしいなと思っています。

2024年時点では日本ではまだ時期尚早な雰囲気ではありますが、2025年は Slint の普及活動を頑張って、2026年が飛躍の年になればいいなと思っています。

日本のユーザーのコミュニティを作ったり、勉強会を開催したりといった活動や、実際に Slint を使ってなにかを作られている方のカジュアルなお手伝いや、本格的に業務で使用したい方に向けたトレーニングやサポートの提供などができればいいなと思っています、

メリークリスマス＆ハッピーニューイヤー！