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
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
470
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
Platform Engineering as a Product: Criteria for Improvement and Multi-Tenant Design
kumorn5s
0
440
Fabric-cicd によるAzure DevOps デプロイ
ryomaru0825
0
170
探して_入れて_作って_使う_Agent_Skills___LT.pdf
peintangos
2
130
Terraformモジュールは、なぜ「魔境」化するのか
hayama17
1
130
Generative UI × A2UI で AI エージェントを作った話 AI-DLC も使ってみた!
kmiya84377
1
300
地元にいないローカルオーガナイザーの立ち回り
uvb_76
1
410
開発を止めない CI/CD ~CI Visibilityによる継続的最適化~
pensuke628
0
220
Claude Codeですべての日常業務を爆速化しよう!
minorun365
PRO
17
16k
oracle-to-databricks-migration-with-llm-and-dbt
casek
1
390
製造業のクラウド活用最適解〜AI,DXを加速するデータ基盤の作り方〜
hamadakoji
0
110
Oracle AI Database@Azure:サービス概要のご紹介
oracle4engineer
PRO
6
1.8k
PHP と TypeScript の型システム比較:AI 時代の「型」は誰のためにあるのか? #frontend_phpcon_do / frontend_phpcon_do_2026
shogogg
1
210
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.5k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
300
What does AI have to do with Human Rights?
axbom
PRO
1
2.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.9k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Darren the Foodie - Storyboard
khoart
PRO
3
3.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
1.1k
The SEO identity crisis: Don't let AI make you average
varn
0
480
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.5k
How to Ace a Technical Interview
jacobian
281
24k
Heart Work Chapter 1 - Part 1
lfama
PRO
7
36k
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