NOT A HOTEL オーナーアプリにおけるWebViewを活用したハイブリッド開発

はじめまして。
NOT A HOTELでWebエンジニアをしています堅田です。

NOT A HOTELのオーナーアプリは、Web・iOS・Android版があり、全てのプラットフォームで同等の体験を提供しています。

ほとんどの機能は、良い体験を提供するため各プラットフォームで最適なUI/UXでの開発を行っていますが、一部の機能についてはWebViewを利用している機能があります。今回はWebViewを活用している部分と活用の背景についてご紹介します。

1. はじめに

WebView とは何か

WebView は、ネイティブアプリケーション内で Web コンテンツを表示・実行するためのコンポーネントです。アプリ内にブラウザエンジンを埋め込むことで、Web 技術（HTML、CSS、JavaScript）で構築されたページをネイティブアプリ内で表示できます。

WebViewを利用する場合の一般的なメリットおよびデメリットは以下となります。

メリット

• 既存 Web 資産の活用: 既に構築済みのWeb アプリケーションをそのまま活用できる

• クロスプラットフォーム対応: Web、iOS/Android の対応を一つのコードベースで実現できる

• シームレスな統合: ネイティブアプリと Web コンテンツの境界を意識させない設計が可能

• リアルタイム更新: アプリストアの審査を経ずに機能更新が可能

デメリット

• カメラやGPS、プッシュ通知などのデバイス固有の機能の利用に制限があり、ネイティブアプリケーションでの開発に比べて、実装が難しい

• WebViewはWebページを表示する仕組みのため、ネイティブアプリに比べて動作が遅くなる場合や、オフライン環境では利用できない

• WebViewで表示するページはWebページとしても機能する必要があるため、内部的に不要な処理が動作する可能性がある

このように、WebViewには開発リソースを最小限に抑えつつ、複数プラットフォームで一貫性のある高品質なユーザー体験を提供できるというメリットがある一方で、デバイス固有機能の利用制限、パフォーマンスの低下、オフライン環境での制約といったデメリットも存在します。

NOT A HOTEL オーナーアプリでは、良い体験を提供するため、基本的には各プラットフォームでネイティブ実装しますが、これらのメリット・デメリットを十分に考慮した上で、機能の特性や後述する背景に応じて、WebViewを採用することも手段の一つとして検討し、最適な実装方法を選択しています。

以下で、実際にNOT A HOTELオーナーアプリでのWebViewの利用例をご紹介します。

2. NOT A HOTEL オーナーアプリでのWebView利用例

Home Controller、Tesla Control

NOT A HOTELでは、部屋にあるすべての物理的なスイッチとパネルを廃止して、部屋に設置してあるiPad、もしくはオーナーアプリから、照明、エアコン、サウナ温度などの操作ができるスマートホーム機能を提供しています。また物件によっては、オーナー様はモビリティとしてTeslaを利用することが可能で、ドアロックの施錠/開錠や車両の現在位置を確認できる機能を提供しています。
これらの機能を開発するにあたっては、オーナーアプリとスマートホームの複数チーム間での連携が必要であり、コミュニケーションコストが高くなる傾向があります。 また、物理的な機器の操作に直結するため、仕様変更に伴う機能改修コストや各プラットフォームでの実装遅延を考慮する必要があります。 それらを踏まえ、開発効率と保守性を重視し、WebViewを採用しました。
実装においては、ユーザー体験を損なうことがないように、ネイティブアプリと見分けがつかないレベルでのUX実現を追求しています。

THE DOOR

NACを保有しているだけで宿泊権が得られる「THE DOOR」というサービスも提供しています。THE DOORは、扉を開けるまでどの NOT A HOTELに泊まれるか分からない――そんなワクワク感とともに、全国の NOT A HOTEL いずれかへ宿泊できるサービスです。
どのNOT A HOTELへの宿泊が当選したかをお知らせするページをWebViewで実装しており、リッチな3Dアニメーションが表示されます。
3Dアニメーションの実装は、Web、iOS、Androidでそれぞれ違い、いずれも高度な実装が必要となり、その分の開発工数の拡大が機能のリリースの遅延に繋がってしまいがちですが、WebViewとすることでほぼWebの開発工数のみとなり、素早いリリースを実現することができました。

3. 実装の工夫とセキュリティ

ネイティブアプリとのブリッジ通信

• WebViewを閉じる

• 特定のURLを開く

• ネイティブアプリ側の特定の機能を起動する

等、WebViewを起動しているネイティブアプリに対してメッセージを送信して通信し、WebViewとネイティブアプリとの間をシームレスに、ユーザー体験を損なわないようにしています。
また、WebView内の処理はWebブラウザでも実行されるため、以下のような共通化した処理としています。

// iOSにメッセージを送信する処理
const sendToIOS = (methodName: string, ...args: any[]) => {
  if (
    typeof (window as any).webkit?.messageHandlers?.[methodName]
      ?.postMessage === "function"
  ) {
    (window as any).webkit.messageHandlers[methodName].postMessage(...args);
    return true;
  }
  return false;
}
// Androidにメッセージを送信する処理
const sendToAndroid = (bridgeName: string, methodName: string, ...args: any[]) => {
	...
}

// 地図を開く
const openMaps = (latitude: number, longitude: number, pinName: string) => {
  if (
      !sendToIOS("openMaps", { latitude, longitude, pinName }) &&
      !sendToAndroid(
        "VehicleControllerBridge",
        "openMapsWithPin",
        latitude,
        longitude,
        pinName
      )
    ) {
      // フォールバック：Google Mapsを開く
      window.open(
        `https://www.google.com/maps?q=${latitude},${longitude}`,
        "_blank",
        "noreferrer"
      );
    }
}

このようなブリッジ通信の実装により、WebView とネイティブアプリの機能を相互に連携させることができます。iOS と Android で異なる実装方式に対応しつつ、Web ブラウザでも動作するようフォールバック処理を組み込んでいます。

WebViewのセキュリティ

WebView を利用する上でセキュリティは最重要課題で、以下に挙げるように、ブリッジ通信の制御、短命なカスタムトークンによる認証、Secure Cookie の使用など、多層的なセキュリティ対策を実装しています。
特に HomeController のようなスマートホーム機能では、物件へのアクセス権限や操作可能期間を厳密に制御することで、安全性を確保しながら便利な機能を提供しています。

ブリッジ通信の安全性
上記のブリッジ通信で送信するメッセージの仕様やペイロードは、そのWebView内で定義されたもののみが処理されるようにしており、意図しないメッセージが送信されても動作しないように、ネイティブ側で制御されています。

認証システム
NOT A HOTELのオーナーアプリにはログイン機能があり、ログイン中でないと操作できない機能が多数あります。WebViewで提供する機能の多くはログイン中にのみ操作可能なため、ネイティブアプリでのログイン状態を引き継ぐことで、未ログイン状態ではWebView自体が開けない仕組みにしています。

• WebView用のカスタムトークンの発行および検証

• カスタムトークンの有効期限を短くする

• Secure属性のCookieを使用し、カスタムトークンの安全な受け渡し

HomeController
滞在中の物件でのみ、スマートホームの操作ができるようにしています。

• WebViewで扱うカスタムトークンの有効期限をチェックアウトの時間までとすることで、チェックアウト後の操作は不可

4. まとめ

NOT A HOTEL のオーナーアプリにおけるWebViewの活用は、開発効率とユーザー体験の両立を実現するための重要な戦略と考えています。
既存のWeb資産を活用することで、iOS・Android・Web の全てのプラットフォームで一貫した体験を提供しつつ、開発リソースの最適化も図っています。

WebView は「ネイティブアプリのパフォーマンス」と「Web 技術の柔軟性・開発スピード」を組み合わせることができる強力な手段と考えており、適切な設計とセキュリティ対策を行うことで、限られたリソースの中でも、高品質なクロスプラットフォームアプリケーションを実現することが可能です。

NOT A HOTEL のオーナーアプリでは、ユーザー体験と開発効率等のバランスを考慮し、最適な方法でより良い機能を提供していきたいと考えています。