AndroidアプリとWebコンテンツの連携 / Sansan Tech Meetup Android

by Hideki Hamada

Slide 1

Slide 1 text

AndroidΞϓϦͱ Webίϯςϯπͷ࿈ܞ Ϋϥεϝιουגࣜձࣾɹ඿ాӯथ ʲSansan Tech MeetupʳAndroid։ൃTipsΛ3ࣾͷΤϯδχΞ͕ޠΔ 2020/12/18

Slide 2

Slide 2 text

ࣗݾ঺հ • ඿ాӯथ (@jakalada) • AndroidΤϯδχΞ • 2೥΄ͲલʹΫϥεϝιουʹస৬ • ૣ͘ాΜ΅ͷ༷ࢠΛݟʹߦ͖͍ͨ 2

Slide 3

Slide 3 text

։ൃࣄྫ ʢ˞ଞࣾʹҾ͖ܧ͍ͩࣄྫ΋ؚ·Ε͍ͯ·͢ʣ 3

Slide 4

Slide 4 text

ࢲ͕࡞ͬͯΔΞϓϦ ֓ཁ ҿ৯ళͷΞϓϦ ༗ޮձһ਺ ສਓ ˞௚ۙ೥ؒʹ౓Ͱ΋ϩάΠϯͨ͜͠ͱͷ͋Δձһ %"6."6 ສສ ˞J04"OESPJEͷ߹ܭ ετΞධՁ લޙ ˞ΞϓϦ಺ϨϏϡʔಋೖޙ㽉

Slide 5

Slide 5 text

ΞδΣϯμ • Webίϯςϯπͱ࿈ܞ͢Δٕज़ • WebView / ϒϥ΢βىಈ / Custom Tabs / TWA • ٕज़͝ͱͷҧ͍ • UI / CookieɾΩϟογϡ؅ཧ / Webٕज़ͷ੍ݶ 5

Slide 6

Slide 6 text

6 Webίϯςϯπͱ ࿈ܞ͢Δٕज़

Slide 7

Slide 7 text

7 WebView

Slide 8

Slide 8 text

WebView • View • Fragment/Activityʹ૊ΈࠐΊΔ 8

Slide 9

Slide 9 text

WebViewͷ࢖༻ྫ • WebView͔ΒͷϦΫΤετͷUser-AgentʹΞϓϦݻ༗ͷ஋Λ௥Ճ • →WebͰग़͠෼͚ɺJavaScriptͰදࣔ಺༰Λ੍ޚ • WebͰϨϯμϦϯά͞ΕͨΫʔϙϯͷόʔίʔυΛΞϓϦ಺Ͱදࣔ • →ΞϓϦଆͰը໘Λ໌Δͯ͘͠όʔίʔυϦʔμʔͰಡΈऔΓ΍͢͞޲্ • ΞϓϦͰϩάΠϯ͍ͯ͠Δ৔߹͸ࣗಈͰϩάΠϯ • →JWTϩάΠϯΛ࢖༻ 9

Slide 10

Slide 10 text

10 ϒϥ΢βىಈ

Slide 11

Slide 11 text

ϒϥ΢βىಈ • Intentૹ৴ʹΑΔϒϥ΢βΞϓϦ ͷىಈ 11

Slide 12

Slide 12 text

12 Custom Tabs

Slide 13

Slide 13 text

Custom Tabs • ΞϓϦ಺ϒϥ΢β • ϒϥ΢βΞϓϦͷActivity • ※ChromeҎ֎ͷҰ෦ͷϒϥ΢β΋αϙʔτ • ࠷௿ݶͷU/IɺΧελϚΠζՄೳ 13

Slide 14

Slide 14 text

Custom Tabsͷߴ଎Խ • ϒϥ΢βଆͷެ։Serviceʹbind • warmup() : ىಈͷߴ଎Խ • mayLaunchUrl() : WebϖʔδͷϓϦϩʔυ 14

Slide 15

Slide 15 text

Custom TabsΛಋೖͨ͠ܦҢ • ΞϓϦ಺ͷϓϩϞʔγϣϯͷܦ࿏͕૿͑ͨλΠϛϯάͰɺϒϥ΢β͕ ىಈ͢Δ͜ͱʹ͍ͭͯiOSͷϨϏϡʔ͕େߥΕͨ͠ɻAndroid͸एׯ • ݱࡏ͸ϒϥ΢βΛىಈ͍ͯͨ͠৔໘Ͱ͸ɺΞϓϦ಺ϒϥ΢β ʢCustom TabsʣΛ࢖༻ 15

Slide 16

Slide 16 text

16 TWA

Slide 17

Slide 17 text

TWA • Trusted Web Activity • ChromeͷActivity • ϑϧεΫϦʔϯදࣔՄೳ 17

Slide 18

Slide 18 text

TWAͷىಈϑϩʔ 1. Digital Asset LinksΛ࢖༻ͨ͠ݕূ ➡ ࣦഊͨ͠ΒCustom TabsͰىಈ 2. Chrome͕TWAΛαϙʔτ͍ͯ͠Δ͔֬ೝ ➡ αϙʔτ͍ͯ͠ͳ͍όʔδϣϯͰ͸Custom TabsͰىಈ 3. TWAΛىಈ 18

Slide 19

Slide 19 text

৴པͰ͖ͳ͍ ৴པͰ͖Δ 19

Slide 20

Slide 20 text

https://dev.classmethod.jp/articles/report-developers-io-2019-tokyo- developersio_cafe_pwa/ 20

Slide 21

Slide 21 text

21 ٕज़͝ͱͷҧ͍

Slide 22

Slide 22 text

UI 8FC7JFX 6*ͳ͠ɾಠࣗʹ࣮૷Ͱ͖Δ ϒϥ΢βىಈ ΧελϚΠζෆՄ $VTUPN5BCT γϯϓϧͳ6*ɾΧελϚΠζՄೳ 58" ϑϧεΫϦʔϯ 22

Slide 23

Slide 23 text

CookieɾΩϟογϡ؅ཧ 8FC7JFX ࣗ෼ͷΞϓϦͰ؅ཧ ˞ΞϓϦ͔Β੍ޚՄೳ ϒϥ΢βىಈ ϒϥ΢β͕؅ཧɾڞ༗ ˞ΞϓϦ͔Β੍ޚෆՄ $VTUPN5BCT 58" 23

Slide 24

Slide 24 text

Webٕज़ͷ੍ݶ 8FC7JFX ੍ݶ͋Γ ػೳ͝ͱʹΞϓϦଆͰ༗ޮԽ͕ඞཁ 04΍ߋ৽ঢ়گͰಈ࡞ʹࠩҟ͋Γ ϒϥ΢βىಈ ϒϥ΢β͕αϙʔτ͍ͯ͠Δٕज़ ˞58"͸ݫີʹ͸$ISPNF͕αϙʔτ͍ͯ͠Δٕज़ $VTUPN5BCT 58" 24

Slide 25

Slide 25 text

·ͱΊ 25

Slide 26

Slide 26 text

·ͱΊ 8FC7JFX ΞϓϦ޲͚ͷ8FCϖʔδΛදࣔ͢Δ ˞੍ݶΛཧղɾௐ੔ͯ͠8FCΛ੍࡞͢Δඞཁ͕͋Δ ϒϥ΢βىಈ ෆಛఆͷ8FCϖʔδΛදࣔ͢Δ Ϣʔβʔ͕ΞϓϦ͔Β཭Εͯྑ͍ $VTUPN5BCT ΞϓϦͷମݧͷҰ෦ͱͯ͠8FCϖʔδΛද͍ࣔͨ͠ 8FCͷٕज़Λࣗ༝ʹ࢖͍͍ͨ 58" 18"ΛϑϧεΫϦʔϯͷΞϓϦͱͯ͠ެ։͍ͨ͠৔߹ ˞18"Ͱͳͯ͘΋ྑ͍ 26

Slide 27

Slide 27 text

ࢀߟࢿྉ • Web-based content | Android Developers • https://developer.android.com/guide/webapps • Custom Tabs | Web On Android | Google Developers • https://developers.google.com/web/android/custom-tabs • Trusted Web Activity | Web On Android | Google Developers • https://developers.google.com/web/android/trusted-web-activity 27