既存のWebシステムとスマホアプリを連携させるには？

ハイブリッドアプリの開発を検討する際によく聞かれる声が「既存システムと連携するスマホアプリを作りたい」というものです。既存システムは、Webアプリケーションとして提供されていることがほとんどです。そして、MonacaアプリなどのハイブリッドアプリもWeb技術（HTML5/JavaScript/CSS）を使って作るため、親和性が高いと考えられています。

しかし、いくつかの注意点があります。これらを知っておくことで、手戻りや開発負荷を減らせるはずです。

Monacaでのアプリ開発を例に説明しますが、ほかの手段でハイブリッドアプリを開発する際にも注意点は変わりません。

WebサイトとスマホアプリのUI/UXの違い

既存システムがWebブラウザ向けに作られている場合、その多くがHTMLのレンダリングをサーバで行っていることでしょう。

下の図のようにブラウザは、Webサーバに対してリクエストを行って、HTMLを受け取ります。Webブラウザはその内容を描画して、ユーザが表示を確認します。

これはごく一般的なWebサイトのあり方と同じです。
ボタンやリンクをクリックすると、数秒待たされた後、画面全体が表示されます。

それに対して、スマホアプリの場合は、オフラインの場合も想定して表示できる仕組みにしなければなりません。

また、スマホアプリを利用するユーザにとって、スマホアプリの画面は最初に表示された後、必要な場所だけが書き換わっていくのが当たり前です。皆さんもスマホアプリを使っている時には、ごく自然と利用されているはずです。

URLをたどるように画面全体を再描画するのがWebサイト。
一方、スマホアプリは最初の表示をした後は、必要な箇所だけを書き換えていく仕組みになっています。

WebサイトのようなUI/UXであったり、単にWebサイトをMonacaでラッピングしただけのアプリは、iOSアプリの審査でリジェクトされる可能性が高いです。それはユーザ体験として、WebサイトならばWebブラウザで行ってください、という理由からになります。

スマホアプリのUI/UXを実現する方法

では、どうしたらスマホアプリのUI/UXが実現できるでしょうか。
大きく分けると、次の3ステップになります。

1. 画面を表示するHTML/CSSをアプリ内に保持する
2. 表示する内容をWebサーバから取得する
3. Webサーバからのデータに基づいて、画面をスマホアプリ内で書き換える

システム開発ではMVCという考え方があります。

M（モデル = データ）
V（ビュー = 表示用テンプレート）
C（コントロール = 表示ロジック）

を分けて開発する方法です。

アプリ開発でも、このMVCと似た考え方が基本となります。
Webサイトと比較すると、次のようになります。

この関係性を作るのが、Monacaアプリを含むハイブリッドアプリ開発の第一歩になります。

Web APIとは何か

Web API （または単にAPI） は、Webサーバとアプリが、データを送受信するための仕組みになります。

Web APIは、主にシステム （アプリなど） を対象とするため、人に対して見やすい内容ではありません。人に対しては、HTMLが返されるのに対して、アプリにはより処理しやすいJSONやXMLといったフォーマットが使われます。(現在の主流はJSONです)

JSONデータは、JavaScriptから扱いやすいため、スマホアプリのWeb APIとしてよく使われます。

たとえば、商品一覧ページがあったとします。
Webブラウザの場合は、 https://example.com/items/ でアクセスできるとします。アクセスして返ってくるのはHTMLで、そこにはCSSのリンク、バナー画像のURL、商品詳細へのリンクなど様々な情報があることでしょう。

それに対して、JSONの場合は、余計な情報を省いたものになります。

たとえば次のようになります。
人が読むのに適したフォーマットではありませんが、システムが利用するのには最適なフォーマットです。

[
  {
    "id": "0001",
    "name": "Monaca 教材コース1",
    "price": 2000,
    "summary": "Monaca 教材コース1では主にJavaScriptが学べます…"
  },
  {
    "id": "0002",
    "name": "Monaca 教材コース2",
    "price": 2500,
    "summary": "Monaca 教材コース2では主にOnsen UIが学べます…"
  },
  :
]

こうしたデータをサーバから受信して、その内容に応じてアプリの画面を作るのが、ハイブリッドアプリ開発の基本になります。

システム連携のステップバイステップ

では、ここから既存システムと連携するハイブリッドアプリ開発を行う上でのステップバイステップを紹介します。

ステップ1 Web APIの確認をしましょう

まず最初に行うのは、既存システムにあるWeb APIの確認です。
基本的にアプリで実行する全ての機能が、Web APIで提供されなければいけません。たとえば、次のようになります。

• 認証機能
• お気に入り一覧の取得
• お気に入りの追加
• お気に入りの更新
• お気に入りの削除
• 商品一覧の取得
• 商品詳細の取得
• ショッピングカートに追加する
• :（省略）

データを閲覧するだけのアプリであれば、データ公開用のWeb APIだけあればいいでしょう。しかし、お気に入り登録や認証などが必要であれば、データの追加、更新および削除ができるWeb APIも必要となってきます。

まず最初に、これらのアプリの画面を構成するのに必要なWeb APIが揃っているか確認しましょう。もしなければ開発が必要となります。

ステップ2 Web APIの内容を確認しましょう

Web APIがあったとしても、取得できる内容がアプリ要件に合っていないことも多々あります。

たとえば、商品一覧APIはあったとしても、一覧で表示するには情報が不足している場合があります。その場合、商品一覧を取得した後、各商品について、商品詳細APIを呼び出して、不足していた情報を取得するという流れになります。

しかし、これはAPIを呼出す回数が増えるため、少し現実的ではありません。スマホアプリの場合、ネットワークは動作時のボトルネックになりやすいので、なるべくネットワークアクセスを少なくしましょう。つまり、画面から不足情報を省いたり、Web APIを変更して不足情報もサーバーから返すようにしたいです。

Web APIが返してくれる情報以上のものは、アプリ内では表示できないと基本的には考えて開発を進めます。

もちろん、JavaScript内で計算して出せるものであれば問題ありません。しかし、計算処理も量が増えるとアプリが重たくなってしまうので、サーバ側で計算できるなら、その方がお勧めです。

ステップ3 Web APIから取得できる内容をアプリに表示していきましょう

Web APIの準備ができたら、その内容をアプリ内で表示していきましょう。

HTMLやCSSは、アプリの中にある状態で、サーバ側のものを用いる必要はありません。もちろん、共有できる部分も多いと思いますが、アプリからサーバ側のHTML/CSSを取得するのは、お勧めしません。ネットワークがない時に表示が不具合を起こしますし、ネットワークアクセスが増える分、アプリのUXが悪化します。

アプリのUIについてはOnsen UIの利用をお勧めします。アプリのUXでよくあるスワイプ操作やアニメーションしながらの表示をサポートしており、よりネイティブアプリ風のUI/UXを簡単に実現できます。そうした表示やアニメーションを自力で実装するのは困難でしょう。

まとめ

最初にHTMLを表示して、その後はWeb APIを通じてサーバからデータを取得し、画面表示の更新を行う仕組みはSPA（シングルページアプリケーション）と呼ばれます。

最近ではWebブラウザ向けでもSPAで開発されることが増えてきています。画面全体の再描画を減らしたり、データ通信量を抑えることで、表示速度を高速化したり、ユーザの離脱を防ぐ効果があります。

アプリにおいては、SPAを念頭に置きつつ、さらにアプリらしいUXを実現する必要があります。既存システムをスマホアプリに対応する際には、今回のステップバイステップを参考に開発を進めてください。