Webview_もう古い__Chrome_Custom_TabsでWeb表示を快適に_.pdf

Transcript

1. Webview、もう古い？〜Chrome Custom TabsでWeb表示を快適に！ @kyappamu
2. 自己紹介 • @kyappamu (Yoshiki Takamatsu) • 株式会社Voicy • フルスタックエンジニアーAndroid・iOS アプ リ開発をメイン • Android歴半年くらい • 最近サウナーデビューしました
3. 今日お話すること • WebView とは • Chrome Custom Tabs とは • 特徴から見る両者の違い • Chrome Custom Tabs を使ってみる • まとめ
4. WebView とは • アプリで手軽にWebコンテンツを表示(埋め込み)する方法 • カスタマイズ性の高さ ◦ JS機能の有効・無効、埋め込みができる ◦ ページ読み込み開始／終了、読み込みエラーをフックして処理を行う ◦ リンククリック時の遷移の挙動 • ページ読み込みが遅い • ログイン情報などブラウザと情報を共有できない（自前でHttpClient等を実装する など対応が必要） 参考 ：https://developer.android.com/develop/ui/views/layout/webapps/webview?hl=ja
5. Chrome Custom Tabs とは • アプリからブラウザ機能を呼び出し、Webコンテンツを重ねて表示 • カスタマイズは限定的 ◦ Chrome の標準UIが適用 ◦ セキュリティの関係で JS埋め込みできない ◦ 画面読み込みエラー等のハンドリングは chromeブラウザ側が担当する • ページ読み込みが高速 • ブラウザの情報をシームレスに使える 参考 https://developer.chrome.com/docs/android/custom-tabs?hl=ja
6. 特徴から見る両者の違い 特徴 WebView Chrome Custom Tabs 表示方法 アプリ内にWebコンテンツを埋め込む アプリの上に Chromeブラウザを重ねて表示 表示速度 遅延を感じることがある（エンジン起動など） 高速 キャッシュ/Cookie アプリ内で独立して管理（共有しない） Chromeブラウザと共有（ログイン情報など） UIカスタマイズ 非常に高い（細かく制御可能） 限定的（ツールバーの色などシンプルに） セキュリティ アプリのWebViewコンポーネントに依存 常に最新の Chromeのセキュリティを利用 実装の複雑さ やや複雑（各種設定、エラーハンドリングなど） 非常にシンプル（数行のコードで起動可能） ユースケース例 ハイブリッドアプリ、完全に制御したい WebUI 利用規約・ヘルプページなどの静的ページ、ニュース記事 表示、認証フロー
7. Chrome Custom Tabs を使ってみるー実装例 1. build.gradle にChrome Custom Tabs の依存を追加
8. Chrome Custom Tabs を使ってみるー実装例 2. CustomTabsIntentを生成し、URLを指定してlaunchUrlを実行する
9. Chrome Custom Tabs を使ってみるーデモ WebView Chrome Custom Tabs
10. まとめ Chrome Custom Tabs を使って • Web ブラウザの高速表示をアプリに • アプリとWebがシームレスにつながる ◦ 普段使っているChromeのログイン情報やパスワード、オートフィルがそのまま使える ◦ 再入力の手間がなくアプリからWebへの移動がスムーズ • 実装はシンプル、効果は絶大 ◦ セキュリティ対応 ◦ UIUX • etc.. よければぜひ活用してみてください！ Pdmやデザイナーとの会話の中で「WebViewで」のような話が出た際に、幸せになれるかも
11. Thank You！