Servo Embed 入門

Rust で出来てる Mozilla 製ブラウザエンジン Servo で遊ぶ

## 構成

- Servo の Embed って ?
- Embed の流れ、処理の流れ
- Embed のポイント
- まとめ

https://rust.connpass.com/event/133657/

Transcript

1. Servo Embed 入門 Rust で出来てる Mozilla 製ブラウザエンジン Servo で遊ぶ
 2019/07/03 Rust LT
 
 KAZUHIRO HARA
 @kara_d

2. https://kansock.industries 
 KAZUHIRO HARA 原 一浩 (@kara_d)
 Web サイトデザインの観測・ビッグデータのビジュアライズ 
 および、複雑な UI デザインがメイン領域 
 屋号は、カンソク (観測) からきてます 
 
 2019 年に頑張る言語 : Rust 

3. 本日お話しすること、しないこと
 お話しする
 • Servo を Embed するときの流れ
 • Embed で気をつけるポイント
 しない
 • Servo 自体の話
 • Embed に関する細かな話

4. 諸注意
 • 現在絶賛試行錯誤研究中です
 • おかしな部分があったらどんどんツッコミください
 • Servo のコードはどんどん変わっていきます
 本日のサンプルコード入りのリポジトリ
 • https://github.com/karad/my-servo-embedding-example 

5. モチベーション
 Web の デザイン 〜 フロントエンド が今の自分のメイン領域
 • より深くブラウザについて知りたい
 • WebAssembly に興味がある
 } Rust だ!!
6. 構成
 1. Servo の Embed って ?
 2. Embed の流れ、処理の流れ
 3. Embed のポイント
 4. まとめ

7. Servo の Embed って ?

8. Servo そして、Embed って ?
 Servo について
 • Mozilla による Rust 製の Web サイトをロード、実行、表示できるコンポーネントを提 供するプロジェクト
 • 詳しくは @helloyuk13 さんの Servo にコントリビュートしてみよう！ が勉強になりま す
 Embed って ?
 • Servo 単体ではなく、組み込まれて使われる
 • VR デバイスへの組み込みとかも !

9. Servo の起動方法
 いろいろな起動方法がある
 • ビルド済み Servo をダウンロードする
 • Servo を自前でビルドする
 • 自作のプログラム上で Embed する

10. これらをチェック
 参考リンク
 • paulrouget/servo-embedding-example ( 1年以上前なので注意 )
 ◦ 全体的な流れや方法などで めちゃくちゃお世話になります 
 • paulrouget/servoshell ( Archived なので注意 ) 
 • antoyo/servo-gtk ( ResourceReader の参考に )
 • servo/ports/glutin/headed_window.rs ( 現行バージョンの実装の参考 )
 • servo/components/compositing/windowing.rs ( Event 関係で
 お世話になる )

11. Embed の流れ
 paulrouget/servo-embedding-example に沿って進める
 途中から Servo 関係の仕様変更に悩まされることになる
 1. 新規 cargo プロジェクトの作成
 2. 別ディレクトリに servo のリポジトリを clone 
 3. Cargo.toml の編集、リソースのコピー
 4. src/main.rs の編集
 5. 実行

12. 大まかな処理の流れ
 1. 新しいイベントループを作成 ( glutin::EventsLoop::new() )
 2. ウインドウの作成
 a. 新しいウインドウの定義を行う 
 b. OpenGL の定義を行う 
 c. 上記を使って新しいウインドウを作成 ( glutin::GlWindow::new() ) 
 3. Servo を Embed する
 a. トレイト WindowMethods を impl した Window 構造体に対してウインドウを渡す (Rc) 
 b. Window に対してプロキシを設定 
 c. Servo にEventLoopWaker と Window を渡して作成 ( servo::Servo::new() ) 
 4. アクセスするべき URL などを定義し、渡す
 a. WindowEvent::NewBrowser にて新しいブラウザコンテキストを作成 

13. Embed のポイント

14. Cargo.toml について
 features を書いておかないと、servo/components/canvas/canvas_data.rs にある #[cfg(feature = "XXX")] にて create_backend() できなくなる
 [dependencies] # libservo = { git = "https://github.com/servo/servo", rev = "a9ec99f42" } libservo = { path = "/Users/XXXXXX/src/servo/components/servo" } glutin = "0.13.1" [features] azure_backend = ["libservo/azure_backend"] raqote_backend = ["libservo/raqote_backend"]
15. ビルド / 実行時に features を指定
 前述の通り features を指定する必要がある (config で指定する方法は調査中)
 
 
 $ cargo build --features azure_backend --release $ cargo run --features azure_backend --release
16. パッケージが変わるパターン
 これは書き換えればよい
 
 
 引数の数が変わっている場合とかもあって、これは doc を見よう
 use servo::compositing::compositor_thread::EventLoopWaker; use servo::embedder_traits::EventLoopWaker;
17. トレイトを実装しないといけなくなる部分パターン
 pub struct GlutinEventLoopWaker { proxy: Arc<glutin::EventsLoopProxy>, } impl EventLoopWaker for GlutinEventLoopWaker { fn clone(&self) -> Box<dyn EventLoopWaker + Send> fn wake(&self) } impl EmbedderMethods for GlutinEventLoopWaker { fn create_event_loop_waker(&mut self) -> Box<dyn EventLoopWaker> }
18. そもそも実装方法が変わるパターン
 リソースの指定方法
 use servo::servo_config::resource_files::set_resources_path; struct ResourceReader; impl resources::ResourceReaderMethods for ResourceReader { fn read(&self, file: Resource) -> Vec<u8> fn sandbox_access_files_dirs(&self) -> Vec<PathBuf> fn sandbox_access_files(&self) -> Vec<PathBuf> } fn resources_dir_path() -> io::Result<PathBuf> {}
19. まとめ

20. まとめ
 • Servo は自前の Cargo プロジェクトから Embed してつかえます
 • 手順は、その時期の Servo の仕様により異なります
 • Servo のコードやドキュメントを見るいい機会になります
 • みんなも Embed してみよう !

21. END 
 KAZUHIRO HARA
 @kara_d

22. おまけ

23. Servo のコード
 リポジトリは大きい。Rust コードだけカウントしてみた
 
 
 280万行ある (*.rs のみ)
 $ find . -name \*.rs -type f | xargs cat | wc 2807830 8308197 112528568