Slide 1
Slide 1 text
Flutterで本当に
iOS / Android同時開発できるのか？
チームラボ株式会社 スマートフォンチーム
除村 武志
Slide 2
Slide 2 text
【前回発表内容】
アイディアを形に！
【超入門】スマホアプリ開発〜リリースまでの流れ
をご紹介
https://note.team-lab.com/n/n5dd111122c84
Slide 3
Slide 3 text
Today’s Program
01
04
02
05
03
はじめに
06
ネイティブ開発はどれくらい大変なのか
Flutterのクロスプラットフォームの仕組み
OS依存部分をどうするか
パッケージ利用デモ
作りたいアプリに必要なパッケージを探してみよう
07 まとめ
Slide 4
Slide 4 text
はじめに
01 02
03
04
05
06
07
01
Slide 5
Slide 5 text
Flutterで本当にiOS / Android
両方いっぺんに開発できるのか？
今日のテーマ
Slide 6
Slide 6 text
けっこうできる
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
使ってる人がたくさん
↓
じゃあ問題なし！
Slide 9
Slide 9 text
使ってる人がたくさん
↓🤔？
じゃあ問題なし！
Slide 10
Slide 10 text
Flutterのメリット・デメリット
１ソースコードで両OSのアプリを開発
することができる
各OSの新機能や仕様変更への追従
に時間がかかる
片方のOSにしかない機能を実装する
のが大変
😄
😢
クロスプラットフォーム
Slide 11
Slide 11 text
Flutterのメリット・デメリット
１ソースコードで両OSのアプリを開発
することができる
各OSの新機能や仕様変更への追従
に時間がかかる
片方のOSにしかない機能を実装する
のが大変
😄
😢
クロスプラットフォーム
具体的には？？？
Slide 12
Slide 12 text
Bluetooth, カメラ, フォトライブラリ, オーディオ, ビデオ,
顔認証, GPS, 傾きセンサ, アニメーション, Webページ
連携, 有料アイテム, サブスクリプション・・・
Slide 13
Slide 13 text
自分の作りたいアプリは
本当にFlutterで大丈夫？
🤔
Bluetooth, カメラ, フォトライブラリ, オーディオ, ビデオ,
顔認証, GPS, 傾きセンサ, アニメーション, Webページ
連携, 有料アイテム, サブスクリプション・・・
Slide 14
Slide 14 text
ネイティブ開発は
どれくらい大変なのか
02 02
03
04
05
06
07
01
Slide 15
Slide 15 text
各OSの違い(1) 言語が違う
iOS
Slide 16
Slide 16 text
各OSの違い(1) 言語が違う
iOS
EASY
文法の違いなどはそれなりにあるが、基本似てるので片方分かればもう片方は簡単に学べ
る
Slide 17
Slide 17 text
各OSの違い(2) 開発環境が違う
iOS
Xcode Android Studio
Slide 18
Slide 18 text
各OSの違い(2) 開発環境が違う
iOS
Xcode Android Studio
EASY
できることに大きな違いはないので、各機能がどこにあるかを覚えればなんとかなる
Slide 19
Slide 19 text
各OSの違い(3) 仕組みや作法が違う
Slide 20
Slide 20 text
各OSの違い(3) 仕組みや作法が違う
テキストを表示するときどうするか？
画面遷移するときどうするか？
データを端末に保存するときどうするか？
GPSやBluetoothを使いたいときどうするか？
フォトライブラリにアクセスしたときどうするか？
etc.
すべてにおいてやり方が違う！
Slide 21
Slide 21 text
各OSの違い(3) 仕組みや作法が違う
テキストを表示するときどうするか？
画面遷移するときどうするか？
データを端末に保存するときどうするか？
GPSやBluetoothを使いたいときどうするか？
フォトライブラリにアクセスしたときどうするか？
etc.
すべてにおいてやり方が違う！
しかも、日々変化する！
Slide 22
Slide 22 text
各OSの違い(3) 仕組みや作法が違う
テキストを表示するときどうするか？
画面遷移するときどうするか？
データを端末に保存するときどうするか？
GPSやBluetoothを使いたいときどうするか？
フォトライブラリにアクセスしたときどうするか？
etc.
すべてにおいてやり方が違う！
VERY HARD
しかも、日々変化する！
Slide 23
Slide 23 text
けっこう大変😵
やっぱりネイティブ開発は
Slide 24
Slide 24 text
両OS同時開発したい
やっぱりFlutterで
Slide 25
Slide 25 text
Flutterのクロスプラット
フォームの仕組み
03
04
05
06
07
01
02
03
Slide 26
Slide 26 text
https://docs.flutter.dev/resources/architectural-overview#platform-embedding
Slide 27
Slide 27 text
https://docs.flutter.dev/resources/architectural-overview#platform-embedding
自作プログラム(Dart)
Slide 28
Slide 28 text
https://docs.flutter.dev/resources/architectural-overview#platform-embedding
自作プログラム(Dart)
何かいろいろ橋渡し
プラットフォーム固有処理
OS等ごとにここを取り替え
Slide 29
Slide 29 text
https://docs.flutter.dev/resources/architectural-overview#platform-embedding
自作プログラム(Dart)
made by
Slide 30
Slide 30 text
あまりに
Google様頼み
なのでは？
🤔
Slide 31
Slide 31 text
あまりに
Google様頼み
なのでは？
🤔
Bluetooth, カメラ, フォトライブラリ, オーディオ, ビデオ, 顔認
証, GPS, 傾きセンサ, アニメーション, Webページ連携, 有料
アイテム, サブスクリプション・・・
Slide 32
Slide 32 text
そうでもない
Slide 33
Slide 33 text
OS依存部分をどうするか
04 02
03
04
05
06
07
01
Slide 34
Slide 34 text
Platform Channels
https://docs.flutter.dev/resources/architectural-overview#platform-embedding
Slide 35
Slide 35 text
Platform Channels
https://docs.flutter.dev/resources/architectural-overview#platform-embedding
Android / iOS
ネイティブコードを書
ける！
Flutter側から呼び出せる
Slide 36
Slide 36 text
Android / iOS
ネイティブコードを
書ける！
Slide 37
Slide 37 text
Android / iOS
ネイティブコードを
書かなきゃ
いけない！
Slide 38
Slide 38 text
両OS同時開発は
やはり幻想なのか・・・？
😢
Slide 39
Slide 39 text
そうでもない
Slide 40
Slide 40 text
Flutter Native Plugin
Slide 41
Slide 41 text
Platform Channels
https://docs.flutter.dev/resources/architectural-overview#platform-embedding
ここを
パッケージ化
できる
🎉
Flutter Native
Plugin
||
Slide 42
Slide 42 text
パッケージ化できる
Slide 43
Slide 43 text
パッケージ化できる
↓
配布できる
Slide 44
Slide 44 text
パッケージ化できる
↓
配布できる
↓
実際にめっちゃ配布されてる
Slide 45
Slide 45 text
パッケージ化できる
↓
配布できる
↓
実際にめっちゃ配布されてる
↓
自分で作らなくていい🎉
Slide 46
Slide 46 text
パッケージ利用デモ
05 02
03
04
05
06
07
01
Slide 47
Slide 47 text
パッケージの利用は簡単
1. パッケージ名を調べる（後述）
2. 設定ファイル(pubspec.yaml)に書く
3. コマンド実行(pub get)
4. 🎉
Slide 48
Slide 48 text
作りたいアプリに必要な
パッケージを探してみよう
06 02
03
04
05
06
07
01
Slide 49
Slide 49 text
pub.dev
ほとんどのFlutterパッケージはここ
ググってもだいたいここにたどりつく
Slide 50
Slide 50 text
● pub.devを検索、あるいはGoogle検索
● LIKES/PUB POINTS/POPULARITYを
チェック
● GitHubで最終更新日時もチェック
Slide 51
Slide 51 text
まとめ
07 02
03
04
05
06
07
01
Slide 52
Slide 52 text
・・・の前に補足
● 申請・設定関係はAndroid/iOS両方の知識が
必要、これは避けられない
● Android/iOSそれぞれのUI指針に完全に従
いたいなら二度手間になる可能性
● ゲームや3DはUnity, Unreal等の方が無難
Slide 53
Slide 53 text
まとめ
● パッケージを活用することでFlutterでカバー
できる範囲は大幅に広がる
● Flutterを使うべきかどうかの判断にパッケー
ジの有無は大きな指標になる
● パッケージの評価やメンテナンス状況を確認し
よう
Slide 54
Slide 54 text
CREDITS: This presentation template was created by Slidesgo, and
includes icons by Flaticon, and infographics & images by Freepik
ご清聴ありがとうございました
本日はチームラボによるアカデミアにご参加いただき、
誠にありがとうございました！
Slide 55
Slide 55 text
EOF