Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UIレンダリングから見るクロスプラットフォーム開発

Kuu
June 30, 2018

 UIレンダリングから見るクロスプラットフォーム開発

Kuu

June 30, 2018
Tweet

More Decks by Kuu

Other Decks in Programming

Transcript

  1. UI レンダリングから見るクロス
    プラットフォーム開発
    #学生LT @名古屋

    View Slide

  2. 対象者
    Web, アプリの基本的な知識を有する者
    歓迎: クロスプラットフォームな開発をしたことがある人
    歓迎: React Native のプロ

    View Slide

  3. お持ち帰れるもの
    クロスプラットフォーム開発ツールの種類
    自分にあった開発ツール選択術
    上記をわかったような気持ち

    View Slide

  4. 自己紹介
    くぅ@fumiya_kume
    Swift ❤ Kotlin
    最近はサーバーレスに浮気中

    View Slide

  5. UI レンダリングから見るクロス
    プラットフォーム開発
    果たして人類は銀の弾丸を得ることができるのか

    View Slide

  6. クロスプラットフォーム開発の定義
    iOS, Android が対象
    アプリケーションのコードの一部を共有しつつ開発できるツール
    C++ で共有とかは今回は排除

    View Slide

  7. 今回の見ていく対象
    React Native
    React を応用してクロスプラットフォーム開発
    Flutter
    Fuchsia 向けアプリ作るやつ
    iOS,Android でも動かせる
    Xamarin
    C# で開発

    View Slide

  8. UI レンダリングのプラットフォーム親和性

    View Slide

  9. UI レンダリングのプラットフォーム親和性

    View Slide

  10. Flutter UI レンダリングの 基礎

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. 実際のレンダリングの実装
    Google の開発している iOS, Android で動く Skia という描画ライブラリが存在
    各プラットフォームのCanvas の上でSkia を使い各UI をレンダリング
    もちろんイベントの扱いが存在するのでそんなに単純ではない

    View Slide

  15. Xamarin.Android UI レンダリング

    View Slide

  16. Xamarin.Android アプリ化への基礎
    Android Native アプリを錬成するメタツール(語弊あり)
    Xamarin.Android をコンパイルすると...
    UI 記述
    .axml -> .xml
    ドメイン
    .cs + Java Library with JCW -> .dll on mono runtime

    View Slide

  17. つまり?
    Xamarin.Android の UI はネイティブと等価な物を利用して記述する
    ネイティブのUI でレンダリングされる

    View Slide

  18. UI レンダリングのプラットフォーム親和性

    View Slide

  19. View Slide