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

# はじめに

メリークリスマス！

この記事は [Slint Advent Calendar 2024](https://qiita.com/advent-calendar/2024/slint) 25日目の記事です。

昨日は @hermit4 さんによる [M5Stack Core２+ Zephyr OSでSlintを動かしたい](https://qiita.com/hermit4/items/866998245b9084e74c41) でした。

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


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

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

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

インターネット上に情報も徐々に増えはじめてきていますし、困った時には相談できる [コミュニティ](https://slint.dev/community) もあります。

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


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

Slint のドキュメントにある [building.md](https://github.com/slint-ui/slint/blob/master/docs/building.md) に目を通しておくことをお勧めします。

## 準備

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

https://www.rust-lang.org/learn/get-started

## ソースコードの取得

Slint のソースコードは [GitHub](https://github.com/slint-ui/slint) で公開されていますので、それを取得しましょう。

Windows の場合は以下のとおり
```console
git clone -c core.symlinks=true https://github.com/slint-ui/slint
```

Linux や macOS では
```console
git clone https://github.com/slint-ui/slint
```
で大丈夫です。


## ビルド

```
cd slint
cargo build
```

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

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

ルートディレクトリにある [Cargo.toml](https://github.com/slint-ui/slint/blob/master/Cargo.toml)の `default-members` の中に含まれる、`examples` や `demos` は簡単に試すことができます。

```toml: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',
    ...
]
```

```console
cargo run --bin gallery
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13867/c0fa34e9-d2b1-caad-2ea1-4ffd54342981.png)

```console
cargo run --bin virtual_keyboard
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13867/547b0750-e157-ae32-bd24-4ae630a08435.png)

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


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

[demos](https://github.com/slint-ui/slint/tree/master/demos) や [examples](https://github.com/slint-ui/slint/tree/master/examples) の下には他にも様々なアプリがあります。個々のディレクトリに移動して、色々試してみてください。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13867/1ca61f17-3496-294c-c141-b7827ecdce1b.png)

[18日目の記事](https://qiita.com/task_jp/items/34949faa225c17d197e6) で紹介した [ダイアルのサンプル](https://github.com/slint-ui/slint/tree/master/examples/dial
) など .slint ファイルしかないものは、[22日目の記事](https://qiita.com/task_jp/items/2897352d7268a8185ce1)で紹介した Slint Viewer で試すことができます。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13867/596d8c39-3e50-77b7-b702-8271614c4820.png)


## テストを実行してみる

```console
cargo test
```

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


# Slint に貢献してみる

まずは [CONTRIBUTING.md](https://github.com/slint-ui/slint/blob/master/CONTRIBUTING.md) に目を通しましょう。

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

- [Discussions](https://github.com/slint-ui/slint/discussions) で話したいことを気軽に共有してください
- [Issues](https://github.com/slint-ui/slint/issues) にバグ報告や提案をかいてください
- [Pull Request](https://github.com/slint-ui/slint/pulls) も受け付けています
    - [good first issue](https://github.com/slint-ui/slint/labels/good%20first%20issue) ラベルがついたものは、初めての方でも挑戦しやすくしてあります
    - [rfc](https://github.com/slint-ui/slint/labels/rfc) ラベルがついたものはみなさんのご協力をお待ちしているものです

Pull Request を送る際には、[Slint Individual Contributor License Agreement](https://cla-assistant.io/slint-ui/slint) に合意する必要があります。ご理解とご協力をお願いします。

## わたしがやってみたこと

### Issues に報告してみたもの

https://github.com/slint-ui/slint/issues?q=is%3Aissue+author%3Atask-jp+

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

https://github.com/slint-ui/slint/issues/6473

こちらは、[6日目の記事](https://qiita.com/task_jp/items/fc6efa749f591f8cb3ff) で PSD を .slint に変換しているときに欲しいなと思った機能です。

https://github.com/slint-ui/slint/issues/7146

こちらの詳細は [20日目の記事](https://qiita.com/task_jp/items/44f4061852c6b8595dc6) として書きました。

### Pull Request を送ってみたもの

https://github.com/slint-ui/slint/pulls?q=author%3Atask-jp+

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

https://github.com/slint-ui/slint/pull/1794

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

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

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


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

## ドキュメントの生成方法

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

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

https://docs.slint.dev/latest/docs/slint/

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

https://github.com/slint-ui/slint/blob/master/docs/astro/README.md

（ちょっと変だったので [直してみました](https://github.com/slint-ui/slint/pull/7211)）

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

```base
cargo doc
```

で生成します。

[公式のドキュメント](https://github.com/slint-ui/slint/blob/master/docs/building.md#rust-api-docs) に従うと、シンタックスハイライトの機能が有効になります。

```bash
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
```

（こちらもちょっと変だったので [直してみました](https://github.com/slint-ui/slint/pull/7212)）

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

まだ試す機会に恵まれてはいませんが、[公式のドキュメント](https://github.com/slint-ui/slint/blob/master/docs/building.md#generating-the-documentation) に従えば生成できるはずです。


## テストの実行

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

https://github.com/slint-ui/slint/blob/master/docs/testing.md

### .slint 言語の文法のテスト

https://github.com/slint-ui/slint/tree/master/internal/compiler/tests/syntax

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

```bash
cargo test --test syntax_tests
```

でテストが可能です。

（こちらもちょっと変だったので [直してみました](https://github.com/slint-ui/slint/pull/7213)）

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

https://github.com/slint-ui/slint/pull/7207/files

https://github.com/slint-ui/slint/pull/7208/files

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

https://github.com/slint-ui/slint/blob/master/docs/testing.md#interpreter-test

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

```bash
cargo test -p test-driver-interpreter --
```

[tests/cases](https://github.com/slint-ui/slint/tree/master/tests/cases) 以下の .slint ファイルを評価します。

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

（こちらもちょっと変だったので [直してみました](https://github.com/slint-ui/slint/pull/7214)）

[internal/interpreter](https://github.com/slint-ui/slint/tree/master/internal/interpreter) 以下を変更したら、このテストで確認しましょう。

### Rust の API のテスト

https://github.com/slint-ui/slint/blob/master/docs/testing.md#rust-driver

```bash
cargo test -p test-driver-rust
```

[internal/compiler/generator/rust.rs](https://github.com/slint-ui/slint/blob/master/internal/compiler/generator/rust.rs) を変更した場合にはこのテストで確認しましょう。

前述の [tests/cases](https://github.com/slint-ui/slint/tree/master/tests/cases) 以下の .slint ファイルの中のコメント中の

> \```rust
> \```

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

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

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

### C++ および nodejs

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

```bash
cargo test -p  test-driver-cpp 
```

API は [internal/compiler/generator/cpp.rs](https://github.com/slint-ui/slint/blob/master/internal/compiler/generator/cpp.rs) です。

```bash
cargo test -p  test-driver-nodejs
```

API はどこなんだろう。

### Python

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

https://github.com/slint-ui/slint/tree/master/tests/driver


### 描画のテスト

https://github.com/slint-ui/slint/blob/master/docs/testing.md#screenshot-tests

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

リファレンス画像の生成
```bash
SLINT_CREATE_SCREENSHOTS=1 cargo test -p test-driver-screenshots
```

テスト
```bash
cargo test -p test-driver-screenshots
```

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

https://github.com/slint-ui/slint/blob/master/docs/testing.md#doctests

> \```slint
> \```

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

```bash
cargo test -p doctests
```

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

https://github.com/slint-ui/slint/tree/master/docs

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

分からないことがあったらコミュニティのチャットの [#Development](https://chat.slint.dev/public/channels/development) で気軽に聞いてみましょう。


# おわりに

今日は、[Slint Advent Calendar 2024](https://qiita.com/advent-calendar/2024/slint) の記事をいくつか書くにあたって、Slint のバグを報告したり、バグを修正したり、新機能を追加しようとして色々学んだことを記事にしてみました。


今年からはじめた [Slint Advent Calendar](https://qiita.com/advent-calendar/2024/slint) ですが、めでたいことにすべて埋まりました。記事を書いてくれたみなさん、読んでくれたみなさん、ありがとうございます。

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


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

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

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