$30 off During Our Annual Pro Sale. View Details »

Servo Embed 入門

Servo Embed 入門

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

## 構成

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

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

kazuhiro hara

July 03, 2019
Tweet

More Decks by kazuhiro hara

Other Decks in Programming

Transcript

  1. https://kansock.industries 
 KAZUHIRO HARA 原 一浩 (@kara_d)
 Web サイトデザインの観測・ビッグデータのビジュアライズ 


    および、複雑な UI デザインがメイン領域 
 屋号は、カンソク (観測) からきてます 
 
 2019 年に頑張る言語 : Rust 

  2. Servo そして、Embed って ?
 Servo について
 • Mozilla による Rust

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

  3. これらをチェック
 参考リンク
 • paulrouget/servo-embedding-example ( 1年以上前なので注意 )
 ◦ 全体的な流れや方法などで めちゃくちゃお世話になります

    
 • paulrouget/servoshell ( Archived なので注意 ) 
 • antoyo/servo-gtk ( ResourceReader の参考に )
 • servo/ports/glutin/headed_window.rs ( 現行バージョンの実装の参考 )
 • servo/components/compositing/windowing.rs ( Event 関係で
 お世話になる )

  4. Embed の流れ
 paulrouget/servo-embedding-example に沿って進める
 途中から Servo 関係の仕様変更に悩まされることになる
 1. 新規 cargo

    プロジェクトの作成
 2. 別ディレクトリに servo のリポジトリを clone 
 3. Cargo.toml の編集、リソースのコピー
 4. src/main.rs の編集
 5. 実行

  5. 大まかな処理の流れ
 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 にて新しいブラウザコンテキストを作成 

  6. 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"]
  7. ビルド / 実行時に features を指定
 前述の通り features を指定する必要がある (config で指定する方法は調査中)


    
 
 $ cargo build --features azure_backend --release $ cargo run --features azure_backend --release
  8. トレイトを実装しないといけなくなる部分パターン
 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> }
  9. そもそも実装方法が変わるパターン
 リソースの指定方法
 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> {}
  10. まとめ
 • Servo は自前の Cargo プロジェクトから Embed してつかえます
 • 手順は、その時期の

    Servo の仕様により異なります
 • Servo のコードやドキュメントを見るいい機会になります
 • みんなも Embed してみよう !