モバイル Web サイトとネイティブアプリとハイブリッドアプリの比較

Rachel Appel

Rachel Appel 最新アプリの開発現場では、モバイル Web サイト、ネイティブアプリ、ハイブリッドアプリのいずれをビルドすべきかという疑問がいつも問いかけられています。開発者ならば、ソフトウェアの開発に安易に着手しないで、事前に時間をかけて、いくつかの考慮事項をきちんと検討すべきです。そのような考慮事項の 1 つが、ターゲット層の決定です。ターゲットにする層がある程度決まれば、ターゲットにするプラットフォームが決まります。

ユーザーは、さまざまなデバイスを使ってソフトウェアにアクセスします。企業ネットワーク経由でしかアクセスされないアプリもあれば、一般消費者をターゲットにするアプリもあります。ターゲットにするユーザーとプラットフォームが決まったら、将来必要になりそうなプラットフォーム固有の機能を考慮しつつ、どのような種類のソフトウェアならターゲット層のニーズに応えられるかを判断する必要があります。

最新のアプリの主な種類には、モバイル Web サイト、ネイティブアプリ、ハイブリッドアプリの 3 つがあります。今回は、これらの各種類のメリットとデメリット、さらに開発手法について調べていくことにします。ここでは、Windows フォームや Windows Presentation Foundation (WPF) を使って作成する従来のデスクトップ (ネイティブ) アプリについては考えません。デスクトップアプリが実行されるのは大きなデスクトップ画面のみで、多種多様なデバイスで実行されることはないため、このコラムで扱う最新アプリの範疇には入れません。

モバイル Web サイト

モバイル Web サイトは、アプリの 3 つの主な種類の中でターゲットになる層が最も広くなります。どのようなスマートフォンでも、機能に多少の優劣はありますが、少なくともサイトのコンテンツを表示し、ユーザーがモバイルページを操作できるようになります。開発が容易な点もメリットの 1 つです。1 つの場所で更新するだけで、すべてのユーザーが自動的に最新バージョンのサイトにアクセスできるようになります。

既に Web サイトがあり、コンパニオンアプリが必要な場合やアプリ市場に進出する場合は、Web サイトをモバイルフレンドリにすることから始めます。これにはいくつか修正が必要ですが、完全にネイティブなアプリのセットをビルドする場合に比べて、少しの労力で大きな成果が得られます。デスクトップや大きなモニターをターゲットにしている Web サイトは、小型のデバイスでは扱いにくいと感じられます。モバイルデバイスでも使いやすくなるように Web サイトを修正すれば、顧客満足度の向上に直接つながります。

サイトではモビリティ機能の重要性が高まってきています。モバイル Web サイトのほうが使いやすく感じます。モバイル Web サイトには、ポップアップなどの気が散る要素はほとんどありません。また、一般的にモバイルデザインでは、指でタップしやすい大きな四角形のボタンが採用されています。

開発者は自身の現状の Web 開発スキルを活かして、モバイルバージョンの Web サイトをビルドできます。つまり、HTML、JavaScript、CSS と、状況に応じていくつかの好みのフレームワークを使用します。アプリをモバイル対応にするには、特定のプラットフォームやベンダーに限定されない豊富な知識が必要です。

モバイル対応にするにあたって注意すべきポイントは、レスポンシブデザインを取り入れることと、小型のハードウェアで機能するようにコンテンツの編成をやり直すことの 2 つです。レスポンシブデザインには、CSS メディアクエリで対応します。メディアクエリとは CSS のコーディング手法の 1 つで、特定のデバイスフォームファクターをターゲットにするスタイルのルールを定義します。たとえば、開発するサイトでは、携帯電話、タブレット、ファブレット、ノート PC、大型の画面など、複数のデバイスフォームファクターに対応するメディアクエリを用意します。

さいわい、1 つのカテゴリに含まれる複数のデバイスに対して有効なメディアクエリをビルドできます。コンテンツの編成をやり直す場合は、小さな画面に表示でき、ユーザーが見やすいレイアウトに変更します。そのためには、表示するデータの量も変更します。Twitter Bootstrap (すぐに使えるレスポンシブデザインの CSS とスタイルを含む人気のライブラリ) には、既定のメディアクエリが付属しています。

例として、さまざまなデバイスで機能する CSS を図 1 に示します。図 1 のコードはすべてのシナリオを網羅しているわけではありませんが、ほとんどのシナリオに対応しています。ニーズに合わせてこのコードに修正を加えます。

図 1 よく使われるフォームファクターの CSS メディアクエリ

Smartphones
Portrait and Landscape
@media only screen and (min-device-width : 320px) and
(max-device-width : 480px) { ... }
Landscape
@media only screen and (min-width : 321px) { ... }
Portrait
@media only screen and (max-width : 320px) { ... }
Tablets, Surfaces, iPads
Portrait and landscape
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) { ... }
Landscape
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : landscape) { ... }
Portrait
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : portrait) { ... }}
Desktops, laptops, larger screens
@media only screen  and (min-width : 1224px) { ... }
Large screen
@media only screen  and (min-width : 1824px) {  ... }
Smartphones
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { ... }
Portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { ... }

図 1 の CSS は、モバイル Web サイトだけでなく、ネイティブアプリでも機能します。つまり、モバイル Web サイトとネイティブアプリの中間に位置するハイブリッドアプリを含め、ここで取り上げる 3 種類のアプリすべてで機能します。Windows プラットフォームでは、JavaScript 用 Windows ライブラリ (WinJS) プロジェクトや C# のハイブリッドアプリでこの CSS を使用できます。レスポンシブアプリのデザインの詳細については、2013 年 10 月号のコラム「WinJS アプリ向けに CSS を使用して最新のレスポンシブ UI をビルドする」 (msdn.microsoft.com/magazine/dn451447) を参照してください。

モバイルサイトとホスト OS の UI や UX は一致しないことがよくあります。Web プラットフォームとネイティブプラットフォームでは、特定のデザインパターンとデザインテクニックで外観を仕上げることが多いためです。多くの開発者は、デスクトップモニターをターゲットとする Web サイトを、スマートフォンやファブレットの小さな画面に押し込もうとしますが、この試みがうまく行くことはほとんどありません。常に、どのようにすれば小型のデバイスでユーザーが情報を利用できるかを考えます。

モバイル Web サイトの問題の 1 つは、ネイティブアプリで利用できる多くの機能を利用できない点です。ハイブリッドアプリでも利用できるネイティブ機能でさえ、モバイル Web サイトでは利用できません。これは主に、セキュリティ上の理由によるものです。

モバイル Web サイトかどうかに関わらず、Web サイトからはファイルシステムやローカルリソースにはアクセスできません。ただし、ブラウザーで File API が広く採用されるようになれば、この状況は変わるでしょう。目下のところ、Mobile IE、Opera Mini、数バージョンの iOS Safari では、File API がサポートされていません。また、Web カメラ、センサーなどのハードウェアコンポーネントは、コードから呼び出せません。いずれ、ブラウザーで多くのハードウェア機能が利用できるようになると思われますが、今のところはほとんど手付かずの状態です。

モバイル Web サイトでオフライン機能を有効にするには、Web ストレージ、IndexedDb、AppCache などの Web テクノロジを使用する必要があります。モバイルサイトではファイルシステムのリソースを利用できませんが、サンドボックスモデルでは依然として一部のクライアントベースのストレージを許可しています。多くの既存の Web サイトはオフライン機能をサポートしておらず、非接続の状態ではサイトが機能しません。

ネイティブアプリ

ターゲットとする大半のプラットフォームで、開発者は自身のスキルを活かせるはずです。Windows で開発しているのであれば、C#、Visual Basic、C++ を使ってアプリを作成し、UI には XAML を利用できます。JavaScript でアプリを記述して、UI に HTML、CSS、WinJS を利用してもかまいません。iPhone であれば、Java と iOS 用の Objective-C でアプリを作成します。

ネイティブアプリにすれば、アプリストアの市場競争力を活用できます。ストアの種類は問題ではありません。実際どのストアでも、開発したアプリを無料で公開して宣伝し、売り込むことができます。このような機会は、他の方法では得られません。もちろん、アプリストアの問題点は、ユーザーになりそうな人が、アプリを見つけてインストールしてくれなければならないことです。ストアで市場に売り込むチャンスが与えられても、ユーザーがアプリを見つけてくれるとはかぎりません。

複数のプラットフォームをターゲットにする場合に問題になるのが、プラットフォームごとに少なくとも一部の UI を作り直さなければならない点です。つまり、Windows ストアと Windows Phone、iOS と Android にはそれぞれに応じた UI が必要です。微妙に異なる多数の画面で適切に機能する柔軟な UI をビルドするのは、かなり困難な作業です。とは言え、そのような UI をビルドできれば、質の高いネイティブアプリに期待される優れたエクスペリエンスを実現できます。結局は、優れた UX を提供するアプリが、アプリストアで評価されます。

ネイティブアプリにする場合は、クロスプラットフォーム戦略を綿密に計画する必要があります。ターゲットにする複数のプラットフォームを考え、公開する順序を検討します。コラムのテーマであるモバイル Web サイト、ネイティブアプリ、ハイブリッドアプリのどれを選択するかという観点からすれば、モバイル Web サイト、ハイブリッドアプリ、ネイティブアプリと進むのが最も円滑な経路です。

ネイティブアプリを公開することに決めたとしても、モバイルでは大量のトラフィックが生じるため、開発者としては適切なメンテナンスが行われた状態にモバイル Web サイトを維持することが求められます。ここまで計画できたら、プラットフォームを選んで、開発に着手します。選択するプラットフォームは、おそらく開発者のスキルに合ったものになるでしょう。クロスプラットフォームアプリを作成する際のさまざまな考慮事項の詳細については、2014 年 5 月のコラム「最新のクロスプラットフォームアプリのアーキテクチャを設計する」 (msdn.microsoft.com/ja-jp/magazine/dn683800) を参照してください。

Visual Studio には、Windows プラットフォーム向けのネイティブアプリ作成用に多数のプロジェクトテンプレートが用意されています。テンプレートには。C#、Visual Basic、C++ の各言語に対応した Windows ストアアプリと Windows Phone アプリ向けのものがあります。また、JavaScript アプリ用のテンプレートもあります。アプリをクロスプラットフォーム対応にするかどうかを含め、言語の選択時に多くの考慮事項があるため、使用する言語を最初に決めます。使用する言語を選択する際の参考に、2013 年 9 月のコラム「最新のアプリ開発に選択する言語を理解する」(msdn.microsoft.com/ja-jp/magazine/dn385713) をご覧ください。ご想像どおり、目的の各プラットフォームをターゲットにする API やコントロールなど、ネイティブアプリに関するツールの優れたエコシステムがあります。

特定のプラットフォームに含まれるほとんどのネイティブアプリは、同じナビゲーションパラダイムを備えています。たとえば、Windows ストアプラットフォームは、アプリバーと目的に沿って配置された [戻る] ボタンを採用しています。組み込みのナビゲーション方式を活用することで、ユーザーが親しみやすく、簡単に習得できるアプリになります。結果として、アプリの評価が高まり、ダウンロード数が増えます。Windows ストアアプリのナビゲーションについては、2014 年 4 月のコラム「Windows ストアアプリでのナビゲーションの必須要素」(msdn.microsoft.com/ja-jp/magazine/dn342878) を参照してください。

ハイブリッドアプリ

モバイル Web サイトとネイティブアプリの中間に位置するのが、ハイブリッドアプリです。ハイブリッドアプリとは、既存の Web サイトのコンテンツをアプリ形式で公開する方法です。ハイブリッドアプリは、アプリストアで公開するために、Web コンテンツを取り込んでパッケージ化する優れた方法です。Microsoft Windows ストア、Google Play、Apple App Store、Amazon Appstore、BlackBerry World など、任意の主要アプリストアでハイブリッドアプリを公開できます。

ハイブリッドアプリが優れている点は、一連のネイティブアプリの作成に取り組んでいる間、暫定アプリとしてストアに公開しておけることです。その結果、ネイティブアプリの公開を市場に知らせ、ネイティブアプリ完成前にマーケティングプロセスを開始できるようになります。ネイティブアプリの公開を予定していなくても、ハイブリッドアプリをアプリストアに正式に公開することができます。

ハイブリッドアプリは、モバイル Web サイトに比べてローカルリソースを利用できる可能性が高くなります。ただし、その可能性はホスト OS のルールによって異なります。つまり、Web カメラや特定のセンサーなどを利用できる可能性はありますが、どのような場合でも機能するわけではありません。

ハイブリッドアプリを検討する場合にメリットになるのは、開発者が精通している Web 開発スキルを活用できる点です。ハイブリッドアプリは、実際には Web サイトのラッパーにすぎません。基盤となるのは、既に使い慣れた HTML、JavaScript、および CSS です。

さまざまなアプリストア向けのハイブリッドアプリのビルドに関しては、すべてが揃ったサードパーティエコシステムがあります。ご想像どおり、Visual Studio にはハイブリッドアプリ作成用のテンプレートがあります。Xamarin、Telerik、DevExpress、Infragistics など、著名なベンダーはすべて、ハイブリッドアプリの開発プロセスを高速化するツールやコントロールを用意しています。

Visual Studio の JavaScript アプリで iFrame を使用すると、完全に Web 言語からハイブリッドアプリを作成できます。C# や Visual Basic .NET と Windows Phone HTML5 プロジェクトテンプレートを使っても、ハイブリッドアプリをビルドできます。最後に、任意の XAML ベースアプリを利用して、同じ効果が得られるように WebView コントロールを追加します。WebView コントロールは、ブラウザーのように動作します。つまり、Navigate、Refresh、Stop などのメソッドを呼び出して、アプリを制御します。こうしたメソッドのほとんどは、ユーザーが行う操作に対応付けられています。以下に、WebView コントロールとアプリのスタートページに移動する基本コードのサンプルを示します。

MainPage.Xaml

<WebView x:Name="webView"/>

MainPage.Xaml.Cs

public MainPage()
{
  this.InitializeComponent();
  Uri targetUri = new Uri("http://rachelappel.com");
  webView.Navigate(targetUri);
}

開発者は、ナビゲーション、ページの読み込みなどのタスクを実行する WebView イベントを利用できます。次の例では、人気のあるリンクをログに記録するナビゲーションを利用しています。

private void webView_NavigationCompleted(Windows.UI.Xaml.Controls.WebView sender,
  WebViewNavigationCompletedEventArgs args)
{
  logNavigation(args.Uri.ToString());
}

Rachel Appel は 20 年を超える IT 業界での経験を持つマイクロソフトの元社員で、コンサルティング、執筆活動、および指導を行っています。彼女は Visual Studio Live!、DevConnections、MIX など、業界トップクラスのカンファレンスで講演しています。専門分野は、マイクロソフトの各種開発ツールやオープン Web を重視したテクノロジとビジネスを連携させるソリューションの開発です。Appel についてもっとよく知るには、彼女の Web サイト rachelappel.com (英語) を参照してください。

この記事のレビューに協力してくれたマイクロソフト技術スタッフの Frank La Vigne に心より感謝いたします。

最新のアプリ

モバイル Web サイトとネイティブ アプリとハイブリッド アプリの比較

モバイル Web サイト

ネイティブ アプリ

ハイブリッド アプリ

その他のリソース

モバイル Web サイトとネイティブアプリとハイブリッドアプリの比較

ネイティブアプリ

ハイブリッドアプリ