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
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
460
Flutterプラグインでdart:ffiを使ってみる
espresso3389
5
7.7k
Flutterで動画配信するプラグインを作った話
espresso3389
4
2.5k
FlutterでiOSアプリを作ってIn-House配布
espresso3389
5
1.6k
Other Decks in Technology
See All in Technology
Terragrunt x Snowflake + dbt で作るマルチテナントなデータ基盤構築プラットフォーム
gak_t12
0
420
分断された OT と IT を繋ぐ架け橋 -Kubernetes が切り拓く 産業用組み込み製品の現在地 -
yudaiono
1
120
AI-Assisted Contributions and Maintainer Load - PyCon US 2026
pauloxnet
1
180
アプリブロック機能のつくりかたと、AIとHTMLの不合理な相性の良さについて
kumamotone
1
260
Every Conversation Counts
kawaguti
PRO
0
250
セキュリティ対策、何からはじめる? CloudNative環境の脅威モデリングと リスク評価実践入門 #cloudnativekaigi
varu3
5
990
20260515 ⾃分のアカウントとプライバシーを守る認証と認可の話〜利⽤者向け〜
oidfj
0
710
M&Aで増え続けるプロダクトに少数QAはどう立ち向かうか─GENDAが挑む、全員で取り組む品質標準化戦略 / GENDA Tech Talk #4
genda
0
130
Databricks 月刊サービスアップデートまとめ 2026年04月号
tyosi1212
0
130
Claude Code で使える DuckDB Skills を試してみた / DuckDB Skills and Claude Code
masahirokawahara
1
730
CARTA HOLDINGS エンジニア向け 採用ピッチ資料 / CARTA-GUIDE-for-Engineers
carta_engineering
0
47k
React Compiler導入の効果と運用の工夫
kakehashi
PRO
3
260
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.4k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
340
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Leo the Paperboy
mayatellez
7
1.8k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
120
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
510
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.5k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
170
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.2k
The Curious Case for Waylosing
cassininazir
1
350
Writing Fast Ruby
sferik
630
63k
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