中規模プロダクトにFlutterを採用する
by
Naoto Horiguchi
×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Slide 1
Slide 1 text
Flutter Meetup Tokyo #10 தنϓϩμΫτͰFlutterΛ࠾༻͢ Δ LINEגࣜձࣾ ງޱਓ@naonya3
Slide 2
Slide 2 text
ࣗݾհ ງޱਓ@naonya3 • iOS։ൃ7΄Ͳ • Flutter 3ϲ݄΄Ͳ • LINEͰಇ͍͍ͯ·͢
Slide 3
Slide 3 text
ຊ͍͑ͨ͜ͱ • FlutterϓϩμΫτʹ࠾༻Ͱ͖Δ
Slide 4
Slide 4 text
͢༰ • ͳͥ࠾༻͢Δؾʹͳͬͨͷ͔ • தنϓϩμΫτ͕Γӽ͑Δ͖՝ • Tips
Slide 5
Slide 5 text
ͳͥ࠾༻͢Δؾʹͳͬͨͷ͔ • ॳظʹΞαΠϯͰ͖ΔΞϓϦΤϯδχΞ͕֤OS̍ਓ͍ͮͭͨ • ։ൃظؒ͋·Γ༨༟͕ͳ͍ • ༷Fix·Ͱʹ͕࣌ؒ͋Γٕज़ݕূͷ͕࣌ؒͱΕͨ • PlatformView͕Α͘ಈ͍ͨ
Slide 6
Slide 6 text
PlatformViewͱ • NativeͰ࣮ͨ͠ViewΛFlutterͷWidgetͱͯ͠ඳը͢Δػೳ • Flutter͚ͩͰ࣮ݱ͕͍͠ػೳΛ࣮͢ΔͨΊ
Slide 7
Slide 7 text
FlutterͰNativeͷػೳΛ͍͍ͨ ߹ • PlatformView • Nativeͷը໘ΛFlutterͷWidgetͱͯ͠ը໘ʹඳըͰ͖Δػೳ • MethodChannel • Flutter-NativeؒͰػೳͷݺͼग़͠ͱσʔλͷΓऔΓ͕Ͱ͖Δ • EventChannel • ҰํతʹσʔλΛ͚͛ͭͮͦΕΛߪಡ͢ΔɻStream
Slide 8
Slide 8 text
தنϓϩμΫτ͕Γӽ͑Δ͖՝ • ଞSDKͱͷ࿈ܞ • LINE SDK • αʔϏεͱͷ࿈ܞ • ͓Βͤ৴αʔϏε • ଟݴޠԽ • ࣾͷ༁γεςϜͱͷ࿈ܞ
Slide 9
Slide 9 text
LINE SDK • LINEͷAPIΛୟͨ͘Ίʹ༻ҙ͞Ε͍ͯΔSDK • ओʹLINEϩάΠϯ
Slide 10
Slide 10 text
LINE SDK • LINE SDK for iOS • LINE SDK for Android • LINE SDK for Unity • LINE SDK for Flutter • https:/ /pub.dev/packages/flutter_line_sdk
Slide 11
Slide 11 text
pubspec.yaml dependencies flutter_line_sdk: ^1.0.1
Slide 12
Slide 12 text
main.dart import 'package:flutter_line_sdk/flutter_line_sdk.dart'; // Setup void main() { LineSDK.instance.setup("{CHANNEL ID}").then((_) { print("LineSDK Prepared"); // login(); }); runApp(App()); } // Login void login() async { try { final result = await LineSDK.instance.login(); print(result.userProfile.displayName); } on PlatformException catch (e) { // Error handling. print(e); } }
Slide 13
Slide 13 text
ଞSDKΛFlutter͔Βར༻͢Δํ๏ • MethodChannelͰϥοϓ͢Δ • Flutter <- MethodChannel -> SDK
Slide 14
Slide 14 text
͓Βͤ৴αʔϏεͱͷ࿈ܞ • ཧը໘͔Β͓ΒͤΛొ • ΞϓϦىಈ࣌ʹpopupΛදࣔͰ͖Δ • FlutterSDKఏڙ͞Ε͍ͯͳ͍ • ࣗͨͪͰDartͰ࣮ͨ͠ • ࣾͷެ։υΩϡϝϯτඋͳͲͰFlutterΛ͔ࣾΒ Γ্͍͖͍͛ͯͨ !
Slide 15
Slide 15 text
ଟݴޠԽ • ଟݴޠԽࣗମʹintlΛར༻͍ͯ͠Δ • ࣾͷ༁ϑϩʔʹ߹ΘͤΔඞཁ͕͋ͬͨ
Slide 16
Slide 16 text
ଟݴޠԽͷϑϩʔ • keyΛఆٛͯࣾ͠ͷ༁γεςϜʹొ • ༁ऀ༁Λ༁γεςϜʹొ • ։ൃऀ༁͞ΕͨϑΝΠϧΛγεςϜ͔Βμϯϩʔυ • ରԠܗࣜ strings.xml / .stringsɹͳͲ • intlARBʹରԠ͍ͯ͠Δ
Slide 17
Slide 17 text
.strings to ARB .string hello.text=͜Μʹͪʂ{lastName} {firstName}
Slide 18
Slide 18 text
.strings to ARB ARB { "@@locale": "ja", "@@last_modified": "2019-07-09T14:53:30.474639", "helloText": "͜Μʹͪʂ{lastName} {firstName}", "@helloText": { "type": "text", "placeholders": { "lastName": {}, "firstName": {} } } }
Slide 19
Slide 19 text
Tips • gRPC • intl
Slide 20
Slide 20 text
gRPC • packageʹ·ͱΊΔ • submoduleΛߋ৽ͯ͠push • drone͕hookͯ͠build pubspec.yaml my_grpc_package: git: url:
[email protected]
:my_grpc_package.git
Slide 21
Slide 21 text
intl 1.ॻ͘ String helloText(String lastName, String firstName) => Intl.message( '͜Μʹͪʂ${lastName} ${firstName}', name: 'helloText', args: [lastName, firstName], ); 2.ARBΛੜ 3.ARBΛ༁ʹ·Θ͢ 4.ARB͔ΒଟݴޠԽ༻ͷίʔυΛੜ
Slide 22
Slide 22 text
ਤղฐࣾͷଟݴޠԽϑϩʔ
Slide 23
Slide 23 text
ࣗಈੜ͞ΕΔίʔυ Message.dart import 'package:intl/intl.dart'; class Messages { String helloText(String lastName, String firstName) => Intl.message( '͜Μʹͪʂ${lastName} ${firstName}', name: 'helloText', args: [lastName, firstName], ); }
Slide 24
Slide 24 text
MixinͰศར ... import 'messages.dart'; class L10n with Messages { static L10n of(BuildContext context) { return Localizations.of(context, L10n); } ...
Slide 25
Slide 25 text
·ͱΊ ࢲͨͪϓϩμΫτʹೖ͍͖ͯ͠·͢
Slide 26
Slide 26 text
એ ! • LINE SDK ͪ͜Β • https:/ /pub.dev/packages/flutter_line_sdk • https:/ /developers.line.biz/ja/docs/flutter-sdk/ • ϦϑΝϥϧ࠾༻ΛڧԽ͍ͯ͠·͢ • ͠LINEʹڵຯ͕͋Γ·ͨ͠Β͓ؾܰʹͲ͏ͧ