ReiwaTravel Engineering
Recruit
  • Frontend

Webviewを採用したホテル予約機能リリース メリット・デメリットの実例紹介

2023/04/21
| Shirahama Yasutomo
tags
advent calendar
frontend
author
category
frontend
mainImage
type-b (8).png
publishedAt
Apr 21, 2023
published
published
slug
newt-adventcalendar-20230421
authorDisplayName
Shirahama Yasutomo
notion image
1. プロダクト紹介2. Webviewの採用WebviewとはWebview採用の背景弊社におけるWebviewのアーキテクチャ3. Webview採用で得られたメリットリソースの節約UI起因のバグの最小化変更容易性4. Webview採用で生じた課題UX上の問題遷移の制御5.まとめ
 
こんにちは。NEWT 1st ANNIVERSARY CALENDAR 17日目担当の白浜です！
このたび、私が2022年11月に入社してから開発していた海外旅行予約アプリ『NEWT（ニュート）』に海外ホテル予約機能がリリースされました🎉🎉🎉
 
これからは 飛行機+ホテルがセットの海外ツアーだけでなく、海外ホテル単体で予約することができます🙆🏻‍♂️ 今なら10%もクーポンもつきますので、ぜひお試しください！
 
海外ホテル予約が今だけ10%OFF｜NEWT（ニュート）
おトクな海外ホテルの予約がスタート！70万軒以上の海外ホテルからえらべます。いつでも業界最大級の5%ポイントを還元。さらに今なら10％OFFクーポンを全員にプレゼント！海外ツアー・海外旅行ならNEWT（ニュート）
海外ホテル予約が今だけ10%OFF｜NEWT（ニュート）
https://newt.net/spl-htl-opn
海外ホテル予約が今だけ10%OFF｜NEWT（ニュート）
 
この記事では、海外ホテル予約機能の開発に採用したWebviewの、具体的なメリット・デメリットをご紹介いたします。

1. プロダクト紹介

改めまして、令和トラベルでWebエンジニアをしている白浜 @shirahama_x です。家族で海外移住を目指していまして、この記事も視察も兼ねたオーストラリア旅行中に書いています🇦🇺
 
notion image
メルボルンにある州立図書館
 
この旅行にももちろんNEWTという弊社のアプリを利用しています👌🏻
NEWTにはチケット管理・やることリスト・トラベルコンシェルジュによるサポートがあり、簡単に安心して海外旅行をすることができます。
 
notion image
 
そして今回のリリースで、タブを切り替えると海外ホテルが開くようになりました。この海外ホテルはWebviewを使ってシームレスに実装されています✌🏻

2. Webviewの採用

 

Webviewとは

Webviewは簡単に言うと「ネイティブアプリケーションがWebコンテンツを表示するために使用できる埋め込み型ブラウザ」です。
 
Webviewを利用すると、UIロジックをAndroidエンジニア、iOSエンジニアに頼ることなく、フロントエンドエンジニアだけで実装することができます。
 
notion image
 

Webview採用の背景

弊社には GO FASTというバリューがあり、最小工数で価値を検証していくにはクロスプラットフォームで開発することが必要でした。今回 Webviewは、
  • すでに海外ツアー詳細でWebviewを採用した実績がある
  • Webviewで作成したWebコンテンツはいずれにせよWebバージョンとして再利用可能
  • フロントエンドエンジニア3人が開発時点で供出可能
という観点で採用しました。
 
 

弊社におけるWebviewのアーキテクチャ

Webブラウザで表示するコンテンツと iOS / Androidで表示するコンテンツは基本的に同じですが、「アプリで開く」ボタンやSEO用のフッターは iOS / Androidでは必要がなく、出し分けが必要になってきます。
 
  • webview.newt.netのようなドメインによる識別方法は Vercel等の各種環境設定が複雑になり、
  • Cookieやクエリパラメーターでフラグを立てて識別する方法は、ISR時に識別できずレイアウトシフトが起きてしまう
という問題があります。
 
今回のホテル機能のリリースでは下記のようにwebviewのフォルダを区切って /webviewをパスに含める方法を採用しました。
notion image
 
WebviewかどうかはisWebviewフラグまたはカスタムフックに容易に識別が可能です。
notion image
 
これは上記問題を解決するほか、
  • 今後 iOS/Androidの場合だけ表示をカスタマイズしたい、パフォーマンスを上げたい、という場合に、変更が容易（拡張性がある）
というメリットも得ることができました。
 
 
 
また、Webviewにけるセッション管理はついてはメルカリ社のTech Blogにある「ソウゾウ立ち上げの技術」に関する記事が大変参考になりました。
メルカリShopsのためのWebViewの技術
こんにちは、ソウゾウのSoftware Engineerの@gentleです。連載：「メルカリShops」プレオープンまでの開発の裏側の6日目を担当いたします。メルカリShopsは既存のメルカリアプリの中に独立したWebアプリケーションを組
メルカリShopsのためのWebViewの技術
https://engineering.mercari.com/blog/entry/20210814-6694cc7502/
メルカリShopsのためのWebViewの技術
 

3. Webview採用で得られたメリット

 

リソースの節約

2022年9月から開発していた海外ホテル予約機能ですが、振り返ると圧倒的なリソースの節約になりました。
具体的には、今回のリリースで「トップ画面」「検索画面」「詳細画面」「予約画面」の4画面をフロントエンドエンジニア3人で4ヶ月かけて実装しましたが、もしWebviewを採用しなかった場合、同じくiOSエンジニア3人Androidエンジニア3人を4ヶ月も拘束することになったはずです。
 
notion image
人手が足りない中でも成果を出す必要があるスタートアップにおいては、WebviewはMVP（Minimum Viable Product）達成のための強力な手段ということが示されました。
 

UI起因のバグの最小化

また、今回最小単位で価値を確認・提供していくために、12月末ではiOSでのみリリース、2月末にwebとAndroidを段階的にリリースしました。iOSリリース時のバグは、4画面で計186件ありましたが、そのうちUIに起因するバグは124件でした。
もしWebviewを採用しておらず、全プラットフォームを個別に実装した場合、WebとAndroidでおよそ200~300件のバグ件数が想定されますが、結果的に54件に抑えることができました。
 
notion image
一つのプラットフォームでのUI起因のバクの修正を、他のプラットフォームにも適用できることは、Webviewの大きな利点でした。
 
 

変更容易性

ネイティブで実装した場合は、小さな変更も実施するために新しいバージョンをリリースする必要があります。新しいバージョンをリリースしても、ユーザーはアプリをアップデートしない選択肢もあり、ときには強制アップデートが必要になります。
Webviewを選択したことで、新機能やバグ修正を行った場合に迅速で価値を提供できるようになりました。
 
 

4. Webview採用で生じた課題

ここからは少し専門的な話になります。
Webviewはもちろんメリットだけではありません。採用したことによりいくつかの課題が残りました。
 

UX上の問題

Webviewを採用したことでUXの品質がネイティブ実装に比べて低くなったことは否めません。
例えばネイティブアプリにタブは一般的にはスワイプにより遷移することができますが、Webview上の横スクロールとの識別が難しく、Androidではスワイプでタブ遷移できないように制限をかけました。
 
notion image
 
またモーダル表示をする際はWebviewの範囲に収まってしまうため、期待した通りの表現になりません。
 
notion image
 
これらは一例ですが、一般的なネイティブのUXとして認知されている動作ができないことは、カスタマー体験の低下を招くだけでなく、プロダクトへの信頼にも関わります。今後、優先順位を見極めながら改善していきたいと思っています。
 

遷移の制御

一貫したデザインを保ち、ネイティブの共有ボタンの機能を維持するため、ヘッダーはネイティブで実装しました。
notion image
このヘッダーの「戻る」ボタンの制御が予想以上に難しく、例えば
  • 予約完了画面では決済画面に戻らせたくない
  • Webview側で複雑な閲覧履歴の操作をしたい
という場合に、ネイティブ側で細かい制御が必要になりました。
 
また、
  • 予約する際に未ログインの場合はネイティブのログイン画面に遷移し、ログイン後はWebviewに戻りたい
  • クレジットカードの3Dセキュアなどの外部ドメインへはWebview内で遷移したい
といったそもそものWebview内外への遷移、それに伴うヘッダー・フッターの表示非表示もネイティブアプリのエンジニアによって複雑にこなす必要がありました。
 
 
 

5.まとめ

この記事では海外ホテルアプリを開発するにあたり採用したWebviewの紹介と、得られた具体的なメリット、デメリットについて紹介させていただきました。
UX上・実装上の課題があるものの、Webviewのお陰で少ないリソースで十分な品質を持ってリリースすることができました。
 
今後はPVやCVRを測定しながら、改善を積み重ねていきたいと思います。
 
 
明日のNEWT 1st ANNIVERSARY CALENDAR はPRチームで大活躍！インターン生の西さんが「令和トラベルに入ってからの10ヶ月間で学んだこと」について、記事にしてくれる予定です。お楽しみに！
 
令和トラベルでは、現在全力で仲間探しをしていますので、少しでもご興味ある方はぜひ採用ページからご連絡ください。まずは気軽にお話を聞いていただける、ミートアップも開催しています。メンバー全員で温かく迎える準備はできています！
Recruit | 株式会社 令和トラベル
私たちは「あたらしい旅行を、デザインする。」というミッションのもと、挑戦を始めました。令和時代を代表するデジタルトラベルエージェンシーとなり、あたらしい旅行体験を提供します。そして、5年以内の上場を目指し、全速力で社会価値を創出していきます。創業メンバーの一員として、大きな変革にチャレンジする仲間を募集しています！
Recruit | 株式会社 令和トラベル
https://www.reiwatravel.co.jp/recruit
Recruit | 株式会社 令和トラベル
私たちが運営する海外旅行予約サービス、NEWTはこちらから。
NEWT（ニュート）| スマホ1つでかんたんに海外旅行を予約できるアプリ
スマートに海外旅行するなら、NEWT（ニュート）。海外ツアーやホテルをアプリでかんたんに予約できます。ぴったりの旅行がえらべて、いつでも大満足プライス。出発から帰国までサポートで安心。
NEWT（ニュート）| スマホ1つでかんたんに海外旅行を予約できるアプリ
https://newt.net/app?utm_source=internal&utm_medium=product_page&utm_campaign=hello&utm_id=hello-newt
NEWT（ニュート）| スマホ1つでかんたんに海外旅行を予約できるアプリ
 
*******************
現在、NEWTでは大感謝セール『NEWT FES』を開催中です。ぜひこの機会に海外旅行をもっとおトクにご予約ください。
NEWT FES 祝1周年！大感謝セール｜ NEWT（ニュート）
NEWT FES 祝1周年！大感謝セール｜ NEWT（ニュート）
おかげさまでNEWTは1周年。感謝の気持ちをこめて特大セール「NEWT FES」を開催！ハワイ、韓国、バリなど13都市のツアーを特別プライスで。今年こそ自由に海外旅行へ。
NEWT FES 祝1周年！大感謝セール｜ NEWT（ニュート）
https://newt.net/sale-fes2303
NEWT FES 祝1周年！大感謝セール｜ NEWT（ニュート）
 
令和トラベルに関する情報発信を専門とした公式noteはこちらから。
株式会社令和トラベル｜note
「あたらしい旅行を、デザインする」株式会社令和トラベルの公式noteです✈️デジタルの力を最大活用し、令和時代を代表する旅行代理店を目指しています。このnoteでは、メンバーや会社のリアルな内情などを発信していきます！https://www.reiwatravel.co.jp/
株式会社令和トラベル｜note
https://note.com/reiwatravel
株式会社令和トラベル｜note
 
ポスト
シェア