Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
FlutterのWebView プラグインどれ使えば?
Search
Takashi Kawasaki
November 07, 2019
Technology
2
2.2k
FlutterのWebView プラグインどれ使えば?
FlutterでWebView使いたいんだけど、標準の奴だとちょっとバグがあって困るんだけど、ネイティブだとWidget Treeに打ち込めないし、うーん、何を使おう。
Takashi Kawasaki
November 07, 2019
Tweet
Share
More Decks by Takashi Kawasaki
See All by Takashi Kawasaki
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
320
Flutterプラグインでdart:ffiを使ってみる
espresso3389
5
7.5k
Flutterで動画配信するプラグインを作った話
espresso3389
4
2.4k
FlutterでiOSアプリを作ってIn-House配布
espresso3389
5
1.5k
Other Decks in Technology
See All in Technology
AgentCore BrowserとClaude Codeスキルを活用した 『初手AI』を実現する業務自動化AIエージェント基盤
ruzia
7
1.1k
Bedrock AgentCore Memoryの新機能 (Episode) を試してみた / try Bedrock AgentCore Memory Episodic functionarity
hoshi7_n
2
1.6k
コンテキスト情報を活用し個社最適化されたAI Agentを実現する4つのポイント
kworkdev
PRO
1
1.9k
[Data & AI Summit '25 Fall] AIでデータ活用を進化させる!Google Cloudで作るデータ活用の未来
kirimaru
0
2k
mairuでつくるクレデンシャルレス開発環境 / Credential-less development environment using Mailru
mirakui
5
590
さくらのクラウド開発ふりかえり2025
kazeburo
2
430
障害対応訓練、その前に
coconala_engineer
0
180
通勤手当申請チェックエージェント開発のリアル
whisaiyo
3
380
M&Aで拡大し続けるGENDAのデータ活用を促すためのDatabricks権限管理 / AEON TECH HUB #22
genda
0
220
Fashion×AI「似合う」を届けるためのWEARのAI戦略
zozotech
PRO
2
1.1k
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
scova0731
0
480
Building Serverless AI Memory with Mastra × AWS
vvatanabe
0
340
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.3k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
286
14k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
26
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Navigating Weather and Climate Data
rabernat
0
49
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
0
22
Statistics for Hackers
jakevdp
799
230k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
36
Chasing Engaging Ingredients in Design
codingconduct
0
80
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
150
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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