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


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


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


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


モチベーション
 Web の デザイン 〜 フロントエンド が今の自分のメイン領域
 ● より深くブラウザについて知りたい
 ● WebAssembly に興味がある
 } Rust だ!!

構成
 1. Servo の Embed って ?
 2. Embed の流れ、処理の流れ
 3. Embed のポイント
 4. まとめ


Servo の Embed って ?


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


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


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


Embed の流れ
 paulrouget/servo-embedding-example に沿って進める
 途中から Servo 関係の仕様変更に悩まされることになる
 1. 新規 cargo プロジェクトの作成
 2. 別ディレクトリに servo のリポジトリを clone 
 3. Cargo.toml の編集、リソースのコピー
 4. src/main.rs の編集
 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 にて新しいブラウザコンテキストを作成 


Embed のポイント


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"]

ビルド / 実行時に features を指定
 前述の通り features を指定する必要がある (config で指定する方法は調査中)
 
 
 $ cargo build --features azure_backend --release $ cargo run --features azure_backend --release

パッケージが変わるパターン
 これは書き換えればよい
 
 
 引数の数が変わっている場合とかもあって、これは doc を見よう
 use servo::compositing::compositor_thread::EventLoopWaker; use servo::embedder_traits::EventLoopWaker;

トレイトを実装しないといけなくなる部分パターン
 pub struct GlutinEventLoopWaker { proxy: Arc, } impl EventLoopWaker for GlutinEventLoopWaker { fn clone(&self) -> Box fn wake(&self) } impl EmbedderMethods for GlutinEventLoopWaker { fn create_event_loop_waker(&mut self) -> Box }

そもそも実装方法が変わるパターン
 リソースの指定方法
 use servo::servo_config::resource_files::set_resources_path; struct ResourceReader; impl resources::ResourceReaderMethods for ResourceReader { fn read(&self, file: Resource) -> Vec fn sandbox_access_files_dirs(&self) -> Vec fn sandbox_access_files(&self) -> Vec } fn resources_dir_path() -> io::Result {}

まとめ


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


END 
 KAZUHIRO HARA
 @kara_d


おまけ


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