みなさんこんにちは！プロダクト開発グループに所属している菅野です。
SpaceCoreのモバイルアプリは、WebViewフロントエンドとNative Appを組み合わせた構成で提供されています。Web側はNuxtベースのフロントエンドとして動作し、Native側と役割を分担することで、画面更新のしやすさとOS機能との連携を両立しています。
本記事では、このアーキテクチャの設計思想と役割分担についてご紹介します。
1. SpaceCoreアプリの全体構成と役割
まずSpaceCoreアプリの全体構成は大きく分けて「Native App」「WebView」「Backend APIs」の3つのレイヤーで構成されています。
graph TD
subgraph "Native App Layer"
direction LR
Native["Native App (iOS / Android)"]
SDKs["External SDKs"]
end
subgraph "Web Layer (WebView)"
WebView["Nuxt-based SPA"]
end
subgraph "Backend Layer"
APIs["Backend APIs"]
end
Native <---> WebView
WebView --> APIs
Native --> SDKs
この構成により、画面まわりの変更はWeb側で扱いやすくしつつ、端末固有の機能や外部SDK連携はNative側に寄せる、という役割分担ができます。
フロントエンドの役割：柔軟なUIと画面まわりのロジック
フロントエンドはNuxtベースのSPAとして動作し、スマートホームのダッシュボードやデバイス操作画面などの主要なUIを提供します。
- UIの更新しやすさ：Web技術を用いることで、UIや軽微なロジックの修正を迅速に反映できます。
- 状態管理の共通化：認証情報や画面状態はWeb側でも保持し、Native側との連携に活用しています。
- iOS/Android クロスプラットフォーム対応：共通のWebコードベースを使用することで、近い体験を提供しやすくなっています。
Nativeアプリの役割：端末機能と外部連携
iOSおよびAndroidのNative層は、Web技術だけでは扱いにくい領域を担当しています。
- ハードウェアSDKの統合：インターホンやIoTゲートウェイなどの専用SDKを直接組み込み、安定した通信と制御を実現しています。
- バックグラウンド処理と通知：通知や状態更新など、OSの機能を活かす処理をNative側で担います。
- サービス種別ごとの切り替え： サービス種別（SpaceCorePro / SpaceCoreHome）を起動時に切り替える仕組みを備えています。
2. WebViewとNativeの連携メカニズム
ハイブリッド構成で重要なのは、WebViewとNativeの間をどうつなぐかです。
ここでは、専用のブリッジを通じて、画面遷移やセッション復元のための情報受け渡しを行います。
sequenceDiagram
participant JS as WebView (JavaScript)
participant Bridge as ブリッジ
participant Native as Native (Swift/Kotlin)
Note over JS, Native: 初回ログイン時（Web → Native）
JS->>Bridge: 認証結果やセッション情報を送信
Bridge->>Native: 情報を受け取り、ローカルに保持
Note over JS, Native: アプリ再起動時（Native → Web）
Native->>Bridge: 保存済み情報をWebViewへ渡す
Bridge->>JS: セッション復元に必要な情報を通知
JS->>JS: UI更新
Note over JS, Native: 機能呼び出し（Web → Native）
JS->>Bridge: 画面遷移 / 機能呼び出しリクエスト
Bridge->>Native: Nativeメソッド呼び出し
Native-->>JS: 実行結果の返却
ブリッジを通した情報の受け渡し
WebViewからNativeへ処理を依頼し、NativeからWebViewへ結果を返す、という双方向の連携を前提にしています。
この仕組みにより、Web側の画面操作とNative側の機能を容易に連携できる設計になっています。
認証情報の受け渡し
認証情報はNative側で保持し、WebViewと連携してセッションを復元します。
初回ログイン時はWebUI上でユーザーが認証を行い、その結果をブリッジ経由でNative側に渡して保持します。
アプリ再起動後は、Native側に保持されている情報をもとにWebViewのセッションを復元します。
3. 設計のポイントとメリット
開発効率と品質のバランス
頻繁な変更が予想されるUI部分はWebViewで開発し、変更が少なく安定性が求められるコア機能やSDK連携はNativeで実装することで、開発スピードとアプリの信頼性を高いレベルで維持しています。
ゲートウェイ世代への柔軟な対応
ハードウェアの世代（ゲートウェイのバージョン）によって制御方式が異なる場合でも、アプリ側でその差異を吸収し、ユーザーには常に最新のインターフェースを提供できる設計になっています。
スケーラビリティ
新しいIoTデバイスや外部サービスの追加が必要になった際も、役割分担が明確であるため、影響範囲を最小限に抑えながら機能を拡張することが可能です。
おわりに
SpaceCoreにおけるハイブリッドアーキテクチャは、単なる技術的な選択ではなく、複雑なスマートホーム体験をユーザーにシームレスに届けるための戦略的な判断です。Webの柔軟性とNativeの堅牢性を組み合わせることで、私たちは日々進化するIoTの世界に迅速に対応し続けています。
課題はまだ多くありますが、それ自体がエンジニアとして挑戦しがいのあるテーマです。このアーキテクチャを一緒に進化させるエンジニアを募集しています。ぜひ採用ページよりご応募をお待ちしております！
📩 お問い合わせ・採用情報
本ブログを読んでいただきありがとうございます。 もし内容にご興味を持っていただけましたら、以下よりお気軽にお問い合わせ・ご応募ください。
スマートホームの導入をご検討中の企業様へ：
アクセルラボへご興味を持たれたみなさまへ：
アクセルラボでは採用を強化しています。 私たちの技術やビジョンに共感し、スマートホームの未来を共に創っていきたい方のご応募をお待ちしています。
