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

仕組みを知れば怖くない! Flutter入門

najeira
April 18, 2018

仕組みを知れば怖くない! Flutter入門

najeira

April 18, 2018
Tweet

More Decks by najeira

Other Decks in Technology

Transcript

  1. 仕組みを知れば怖くない!
    Flutter
    入門
    Flutter Meetup Tokyo
    2018/04/18
    @najeira
    仕組みを知れば怖くない!Flutter
    入門 1

    View full-size slide

  2. CARTUNE
    Flutter
    でアプリ作りました
    仕組みを知れば怖くない!Flutter
    入門 2

    View full-size slide

  3. 対象
    Flutter
    に興味があるが
    使えるものなのかどうか、
    漠然と不安がある
    他のSDK
    と比べて、
    何が違うかわからない
    仕組みを知れば怖くない!Flutter
    入門 3

    View full-size slide

  4. 目的
    Flutter
    がクロスプラットフォー
    ムを
    実現している仕組みを知ることで
    不安を解消する
    できること(
    得意なこと)
    できないこと(
    苦手なこと)
    を知る
    仕組みを知れば怖くない!Flutter
    入門 4

    View full-size slide

  5. フルスタック
    仕組みを知れば怖くない!Flutter
    入門 5

    View full-size slide

  6. フルスタック
    レイアウトを計算して
    画面に描画するところまで
    Flutter
    がすべて行う
    仕組みを知れば怖くない!Flutter
    入門 6

    View full-size slide

  7. 階層
    仕組みを知れば怖くない!Flutter
    入門 7

    View full-size slide

  8. ほとんどの場合は
    Material / Cupertino / Widgets
    を使う
    ここが Reactive framework
    になっている

    あとは Animation
    仕組みを知れば怖くない!Flutter
    入門 8

    View full-size slide

  9. Rendering / Painting
    など UI
    の基本的な実装
    上位の Material / Cupertino / Widgets
    が使う
    アプリから直接使うことは、
    まずない
    仕組みを知れば怖くない!Flutter
    入門 9

    View full-size slide

  10. Flutter
    React Native
    仕組みを知れば怖くない!Flutter
    入門 10

    View full-size slide

  11. フルスタック
    プラットフォー
    ムのUI
    を使っていない

    ラップではない)
    仕組みを知れば怖くない!Flutter
    入門 11

    View full-size slide

  12. フルスタック
    自前のUI
    なので
    UI
    に関してプラットフォー
    ム間の差異が小さい
    プラットフォー
    ム標準と異なる場合がある
    プラットフォー
    ム標準のUI
    と混在させにくい
    仕組みを知れば怖くない!Flutter
    入門 12

    View full-size slide

  13. プラットフォー
    ム間の差異
    UI
    は基本的に同じになる
    プラットフォー
    ム標準に寄せて、
    Flutter
    内部で変えている箇所はある
    AppBar
    の中央寄せ(iOS),
    左寄せ(Android),
    矢印
    デフォルトの画面遷移のアニメー
    ション
    iOS
    風UI
    の Cupertino
    パッケー

    プラットフォー
    ムごとにUI
    調整が要らないので楽
    仕組みを知れば怖くない!Flutter
    入門 13

    View full-size slide

  14. ネイティブとの差異
    Android
    では気にならない
    もともとOS
    バー
    ジョンで大きく違う
    最近はマテリアル・
    デザイン
    マテリアル・
    デザインの準拠度は高い
    仕組みを知れば怖くない!Flutter
    入門 14

    View full-size slide

  15. ネイティブとの差異
    iOS
    の標準UI
    とは違いもある
    スクロー
    ルの加減速
    計算もFlutter
    自前なので微妙な違いを感じる人も
    いるかも?
    Cupertino
    パッケー
    ジにまだ無いものもある
    随時追加されている
    仕組みを知れば怖くない!Flutter
    入門 15

    View full-size slide

  16. ネイティブとの差異
    基本的に Android/iOS
    とも同じUI
    ということをやろうとすると
    わざわざ別のUI
    を実装するコストがかかる
    Android
    はマテリアルで、iOS
    は標準UI

    プラットフォー
    ムごとに違う見た目にしよう……


    仕組みを知れば怖くない!Flutter
    入門 16

    View full-size slide

  17. ネイティブとの差異

    個人的なおすすめ
    基本はマテリアル・
    デザインで作る
    要所で(
    少しだけ)iOS
    風を出す
    下タブ
    ナビゲー
    ションバー
    のボタンをテキストにする
    画面遷移のアニメー
    ション
    一覧のもっと見る矢印
    仕組みを知れば怖くない!Flutter
    入門 17

    View full-size slide

  18. ネイティブとの混在
    レイアウト、
    描画などFlutter
    がやっている
    Flutter
    はネイティブのUI
    のことを知らないので
    1
    画面内で混在させるのは難しい
    ネイティブの別画面との遷移は問題ない
    仕組みを知れば怖くない!Flutter
    入門 18

    View full-size slide

  19. utter/engine
    仕組みを知れば怖くない!Flutter
    入門 19

    View full-size slide

  20. utter/engine
    Flutter
    のUI
    フレー
    ムワー
    ク部分はDart
    で実装
    各プラットフォー
    ムで動作させるために
    C++, Java, ObjC
    で書かれた
    utter/engine
    がある

    別リポジトリ、
    もちろんOSS
    仕組みを知れば怖くない!Flutter
    入門 20

    View full-size slide

  21. Android
    とのGlue
    FlutterApplication (extends Application)
    FlutterActivity (extends Activity)
    FlutterView (extends SurfaceView)
    単一のActivity
    があり
    そこに画面いっぱいのSuerfaceView
    が載っている
    Flutter
    は、SuerfaceView
    に描画している
    仕組みを知れば怖くない!Flutter
    入門 21

    View full-size slide

  22. iOS
    とのGlue
    FlutterAppDelegate (extends UIApplicationDelegate)
    FlutterViewController (extends UIViewController)
    FlutterView (extends UIView)
    単一のFlutterViewController
    があり
    そこに画面いっぱいのUIView
    が載っている
    UIView
    にはCAEAGLLayer
    が載っている
    Flutter
    は、CAEAGLLayer
    に描画している
    仕組みを知れば怖くない!Flutter
    入門 22

    View full-size slide

  23. Flutter
    も Activity / UIViewController
    の一種
    別の Activity / UIViewController
    を表示
    同じ画面でネイティブのUI
    を重ねる
    ということが可能
    あとはネイティブの通常の開発と同じ
    ※UI
    を重ねるのは最終手段
    仕組みを知れば怖くない!Flutter
    入門 23

    View full-size slide

  24. プラグイン
    Flutter
    アプリから Android / iOS
    のコー
    ドを呼び出す
    仕組みを知れば怖くない!Flutter
    入門 24

    View full-size slide

  25. プラグイン
    UI
    以外の、
    プラットフォー
    ム固有の機能を使いたい場合
    はプラグインの仕組みを使う
    SharedPreference, KeyChain
    device_info (OS
    バー
    ジョンの取得など)
    仕組みを知れば怖くない!Flutter
    入門 25

    View full-size slide

  26. プラグイン
    RPC
    的に処理を呼び出す

    同じプロセス内ではあるが)
    多少のオー
    バー
    ヘッドがあるので
    ヘビー
    に呼び出すのは避ける
    大きいタスクに切り出して呼び出す
    仕組みを知れば怖くない!Flutter
    入門 26

    View full-size slide

  27. 余談
    仕組みを知れば怖くない!Flutter
    入門 27

    View full-size slide


  28. 個人の感想です
    最初にFlutter
    を調べてみたときに

    ブラウザの別実装」
    なのではないか、
    と思った
    ブラウザではHTML, CSS
    でUI
    を作っていたのを
    最初からUI
    を作ることを念頭に置いて実装したのが
    Flutter
    仕組みを知れば怖くない!Flutter
    入門 28

    View full-size slide

  29. ブラウザ
    HTML
    のDOM
    ツリー
    をレンダリングする
    HTML
    はプラットフォー
    ムに依存しないので
    クロスプラットフォー
    ムで動作する
    Flutter
    Widgets
    ツリー
    をレンダリングする
    Widgets
    は自前なので
    クロスプラットフォー
    ムで動作する
    仕組みを知れば怖くない!Flutter
    入門 29

    View full-size slide

  30. utter/engine
    (Flutter
    の下回りのC++
    部分)
    Copyright
    にChromium Authors
    やApple Inc
    があったり
    namespace blink
    だったり
    仕組みを知れば怖くない!Flutter
    入門 30

    View full-size slide

  31. まとめ
    プラットフォー
    ム間の差異が小さい
    ネイティブとの差異は少しある
    ネイティブUI
    と混在しにくい
    画面が違えば大丈夫
    プラグイン機構でネイティブ側の実装を呼べる
    仕組みを知れば怖くない!Flutter
    入門 31

    View full-size slide