Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
FlutterのWebView プラグインどれ使えば?
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Takashi Kawasaki
November 07, 2019
Technology
2.2k
2
Share
FlutterのWebView プラグインどれ使えば?
FlutterでWebView使いたいんだけど、標準の奴だとちょっとバグがあって困るんだけど、ネイティブだとWidget Treeに打ち込めないし、うーん、何を使おう。
Takashi Kawasaki
November 07, 2019
More Decks by Takashi Kawasaki
See All by Takashi Kawasaki
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
440
Flutterプラグインでdart:ffiを使ってみる
espresso3389
5
7.6k
Flutterで動画配信するプラグインを作った話
espresso3389
4
2.5k
FlutterでiOSアプリを作ってIn-House配布
espresso3389
5
1.5k
Other Decks in Technology
See All in Technology
Microsoft 365 / Microsoft 365 Copilot : 自分の状態を確認する「ラベル」について
taichinakamura
0
340
レビューしきれない?それは「全て人力でのレビュー」だからではないでしょうか
amixedcolor
0
350
CloudTrail を見つめ直してみる
kazzpapa3
1
110
260422_Sansan_Tech_Talk__関西_vol.3_データ活用のリアル__矢田__.pdf
sansantech
PRO
0
120
ServiceNow Knowledge 26 の歩き方
manarobot
0
150
Route 53 Global Resolver で高額課金発生!
otanikohei2023
0
120
Agents CLI と Gemini Enterprise Agent Platform で マルチエージェント開発が楽しくなる!
kaz1437
0
140
「SaaSの次の時代」に重要性を増すステークホルダーマネジメントの要諦 ~解像度を圧倒的に高めPdMの価値を最大化させる方法~
kakehashi
PRO
3
2.4k
UIライブラリに依存しすぎないReact Native設計を目指して
grandbig
0
130
AIを共同作業者にして書籍を執筆する方法 / How to Write a Book with AI as a Co-Creator
ama_ch
2
150
Oracle AI Database@AWS:サービス概要のご紹介
oracle4engineer
PRO
4
2.4k
Do Vibe Coding ao LLM em Produção para Busca Agêntica - TDC 2026 - Summit IA - São Paulo
jpbonson
3
150
Featured
See All Featured
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.4k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
420
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.9k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
130
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
180
Automating Front-end Workflow
addyosmani
1370
200k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
220
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
The SEO Collaboration Effect
kristinabergwall1
1
430
エンジニアに許された特別な時間の終わり
watany
106
240k
Become a Pro
speakerdeck
PRO
31
5.9k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
380
Transcript
FlutterのWebView プラグインどれ使えば? 川崎 ⾼志 @espresso3389 クミナス株式会社
⾃⼰紹介 • 川崎 ⾼志 (@espresso3389) • クミナス株式会社 代表取締役 CEO •
恵⽐寿の会社です • なんでもやる⼈ • Flutterは好きなんだけどどちらかというと底レイヤー担当
WebViewのプラグインどれ使えば?
WebViewのプラグインどれ使えば? webview_flutter • flutter.dev 純正 • Platform Viewによる実装 flutter_webview_plugin ネイティブ
WebView をオーバーレイする実装 flutter_inappbrowser • Platform Viewによる実装 • Chrome Custom Tabs (Android) • SFSafariViewController (iOS)
webview_flutter • 純正の安⼼感(謎) • Developer Previewから正式版になりませぬ・・・ • APIは最も洗練されているように⾒えるが分かりにくいとも(?) • ドキュメントも「⽐較的」ある
• 困ったやつ(2019/11現在) • ドロップダウンクリックしたら死ぬ(#34248) • NavigationDelegateをasyncにしてくれ(#43271)
flutter_webview_plugin • ネイティブのビューを上に重ねる⽅式 • ネイティブなので安定性は良い • ⾼速動作(カクツキが少ない) • FlutterのWidget Tree上に混ぜられない
• カッコいい遷移アニメーションとかできません • webview_flutterのNavigationDelegate相当の機能がない • 困ったバグ • ネイティブビューのshow/hideが正しく動いてない(気がする)
flutter_inappbrowser • InAppBrowser という単語を最初に思い浮かべるのは難しい • 3種類のブラウザ実装(機能が豊富) • InAppWebView • InAppBrowser
• ChromeSafariBrowser • CookieManager • クッキーの管理が簡単 • InAppLocalhostServer • localhostでサーバー建てられる • webview_flutterのNavigationDelegate相当の機能がある • shouldOverrideUrlLoading • ⾯倒なところ • Swift4.1実装なのでPodfileに修正が必要
InAppWebView • ただのWebView • Platform View • webview_flutterよりAPIが素直で使い やすいが肝⼼な部分の説明が皆無。
InAppBrowser • ネイティブWebView(Platform Viewではない) • Flutterのページの上にポップアップする形で利⽤ • Platform View版より⾼速・安定動作
ChromeSafariBrowser • Chrome Custom Tabs/SFSafariViewController • TwitterやFacebookアプリなどでよく⾒るアプリ内ブラウザ • OSネイティブなので⾼速・安定動作 •
ちょっとだけカスタマイズできる • WebViewと⽐べて最近のセキュリティ関連の知⾒が⽣かさ れてる • AndroidでOAuth関連で利⽤したいならこれ使うべき • ※iOSなら下記を推奨 • ASWebAuthenticationSession(iOS12) • SFAuthenticationSession(iOS11)
おまけ • FlutterでGoogleとかメジャーじゃないところのOAuth2使いた いなら • oauth2_custom_uri_scheme