[技育CAMPアカデミア]Flutterで 本当にiOS _ Android両方いっぺんに開発できるのか？

Transcript

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