Web技術でアプリ開発2016特集・第二弾は、Cordovaの最新状況と基本をご紹介。その歴史からプラットフォーム／ライブラリの特徴、ネイティブな機能を呼び出す方法などを解説していきます。

概要

CordovaはPhoneGapと呼ばれていた時代を含めると、8年以上の歴史があります。PhoneGapが産声を上げたのは2008年、Nitobi社がハッカソンでPhoneGapを発表しました。オープンソースで提供されていたPhoneGapは注目され、2011年にはNitobiはAdobe社に買収されます。その結果、オープンソースで提供されているフレームワーク（PhoneGap本体）はCordovaと名前がつけられ、Apache Foundationの仲間入りします。

その結果、Adobeだけでなく、GoogleやMicrosoft、IBM、インテルといった会社がCordovaを支えています。現在、コミュニティをリードしているのはMicrosoftで、Cordovaのコア機能の実装だけでなく、開発者向けの製品へのCordova対応を進めています。

PhoneGapは、Adobe Creative Cloudのいちプロダクトとして、Cordovaをベースとした有償のビルドツールを提供しているほか、エンタープライズ製品も発表されています。

Hello, World

Cordovaはクロスプラットフォームではありますが、ビルドできるアプリはビルド環境に依存します。

• macOS: iOS, Android
• Windows: Windows, Android
• Linux: Android

ローカル環境に依存してしまうため、クラウド環境を使って複数のOSに対応させるソリューションが各社から提供されています。詳しくはPhoneGap BuildやMonacaを参照してください。

Cordovaアプリの開発には様々なオプションがあります。エディタとしては、MicrosoftのVisual StudioやVS Code、JetBrainsのWebStormなど、Web開発と親和性の高いツールを選ぶと良いでしょう。

Cordovaがオフィシャルに提供しているツールとしてCordova CLIがあります。これを使うと、コマンドラインツールでPC上でのシミュレートからビルドまで行うことができます。Cordova CLIはNode.jsを入れた後、下記のようにインストールします。なお、Cordova CLIはNode.jsバージョン4以上に対応しています。

$ npm install -g cordova

インストールしたらcordovaコマンドが使えるようになります。早速アプリを作成するために、cordova createコマンドを実行します。

$ cordova create helloworld
$ cd helloworld
$ cordova -v
6.3.1

これでプロジェクトが作成されました。次にプラットフォームを追加します。cordova platformコマンドを使用し、引数にはプラットフォーム名（android、ios、windows等）を指定します。

$ cordova platform add android (ios, windows)

ブラウザーでプレビューするには、cordova serveコマンドを使います。

$ cordova serve

ブラウザーを開き、http://localhost:8000/にアクセスします。下記の画面が表示されたら成功です。

実際のアプリを表示するには、プラットフォーム名をクリックします。なお、ブラウザではネイティブAPIとの連携ができないため、ブラウザー上で変なエラーメッセージ等が表示される可能性があります。

最後にビルドを行ってみましょう。USBで接続した端末に実行するにはemulateを、パッケージを作るにはbuildコマンドを使用します。

$ # エミュレータを起動します
$ cordova emulate android (ios, windows)
$ # ビルドを実行します
$ cordova build android (ios, windows)

プラットフォーム／ライブラリの特徴

以下に上の表を補足します。

サポートするプラットフォーム

• iOS
• Android
• Windows (Windows Phone, Windows 10)

以前から数多くのモバイルOSに対応しており、上記以外にもBlackberryやTizen、Firefox OSなどもラインアップに加わっています。アンオフィシャルなものでは、Electron対応もあります。

コードベースは完全に統一できるのか？

作り方次第ではありますが、基本的には完全に統一できます。ただし、プラットフォームごとにブラウザーエンジンが異なるため、その癖を理解しておく必要があります。

iOSはWebKit、AndroidはWebKitから派生したBlinkが使われるため、近い挙動となります。一方Windowsアプリでは、セキュリティの理由でInnerHTMLやインラインJavaScriptが禁止されているなど、細かい挙動に違いがあります。

また、CSSのプロパティやJavaScriptのサポート度合いもブラウザ依存です。その辺りに気をつけて確認をしながら開発を行うことが求められます。

一方、ネイティブ側は各OSごとの実装依存となります。プラットフォームごとの注意点について、CordovaのAPIドキュメントに記述されています。

UIを記述する言語

WebView上にUIを表現します。そのためWebサイトやWebアプリと同様、HTML、CSS、JavaScriptの組み合わせで記述していきます。

ただしモバイルUIにゼロから対応していくのは大変です。そのため、Onsen UIやIonicといったオープンソースのUIライブラリーが多用されます。

パフォーマンス

WebView上で動作させることから、ネイティブと比べてボトルネックが発生しやすいです。ただし端末スペック向上やブラウザの最適化などのおかげで、昔と比べるとはるかにスムーズに動作します。

一方で、パフォーマンスチューニングの要であるブラウザ上での高速化テクニックに乏しいという事情もあります。Service WorkerやWebAseemblyといった技術に期待したいところです。

UIはネイティブか、Webか

WebView上で開発しますので、ブラウザの持つHTML、CSS、JavaScriptを使用します。

ネイティブUIを実装する取り組みも行われており、MicrosoftからはProject Aceというプロジェクトが立ち上がりました。これを使うと、パフォーマンス向上だけでなく、WebView上にネイティブウィジェットを配置したり、WebViewをネイティブUIの中に組み込むといった事が可能になります。

ネイティブな機能を呼び出す方法

Webレイヤーからネイティブレイヤーに、非同期的にネイティブAPIを呼び出す仕組みを備えています。SwiftやJavaで記述する必要がありますが、JavaScript APIで実現できないOSやデバイスの機能を呼び出すことができます。

また、Cordovaプラグイン仕組みが提供されており、npmには様々なプラグインが公開されています。プラグインを組み込むにはcordova pluginコマンドを実行します。

$ cordova plugin add cordova-plugin-camera

上記の例では、カメラを制御するプラグインを組み込んでいます。これで、下記のようにしてカメラ画像の撮影が可能になります。

navigator.camera.getPicture(onSuccess, onFail, {
  quality: 50,
  destinationType: Camera.DestinationType.FILE_URI
});
function onSuccess(imageURI) {
  var image = document.getElementById('myImage');
  image.src = imageURI;
}
function onFail(message) {
  alert(message);
}

まとめ

かつてPhoneGapと呼ばれていた頃と異なり、WebやモバイルOSの進化の流れを受け、だいぶ様変わりしました。一方で、一昔前はアーリーステージにつきものの仕様変更や互換性問題がありましたが、現在では比較的落ち着き、良くも悪くも枯れてきたように思います。

Cordovaの強みは、Web技術をそのまま生かすことでのエンジニア層の厚さと、幅広く使われていることによるエコシステムの大きさではないでしょうか。一度使ったことがある方も、そうでない方も、最新のCordovaを試してみてはいかがでしょうか。

先週の11月5日、Apache Cordova勉強会の第1回が開催されました。HTML5ハイブリッドアプリについて、実際の開発者によるプレゼンテーションが行われました。今回は、参加できなかった方のために、その勉強会のまとめを紹介したいと思います。

Cordova勉強会とは？

まず始めに、そもそも勉強会の目的から。Apache Cordovaというのは、PhoneGapやMonacaといった製品に組み込まれている、HTML5ハイブリッドアプリを開発するためのオープンソースなフレームワークです。このCordovaの技術情報を共有するために、「日本Cordovaユーザー会」として、月に1度のペースで勉強会を開く活動を行っています。今回は、その第1回となります（第1回の案内はこちら）。

• Twitterハッシュタグ: #cordovajp
• YouTube公開録画: 第1回Apache Cordova勉強会

Cordovaの最近ホットな話題

新しいbrowserプラットフォームは、ブラウザー上でデバイスAPIをエミュレーション動作

これまで、iOSやAndroidアプリの開発を目的としていましたが、ブラウザー用のAPIも整備が進み出しました。現時点ではまだ対応APIも少ないものの、今後は充実していくことになりそうです。

browserプラットフォームを使うと、ブラウザー上でCordova APIのエミュレーションが実行されます。ビルドはzip形式で圧縮します。

ChromeベースとGeckoベースの新しいWebViewエンジンを使えるように

Cordova 4.0では、WebViewエンジンを選択することができるようになりました。それに伴い、Intelが主導するCrosswalkプロジェクトではChromiumベースのWebViewエンジンが、MozillaはGeckoベースのMozillaViewエンジンが登場しました。これにより、下記のようなメリットが挙げられます。

1. ブレークポイントやプロファイリングなどの高度なデバッグ機能が利用可能に

Crosswalkを組み込むと、Chrome Dev Toolsを用いたデバッグができるようになります。PCブラウザーとほぼ同じデバッグ機能を、Cordovaアプリでも使えるようになります。

2. Androidのバージョン問題から解放される

同一Androidバージョンにおいても、端末メーカーが独自にカスタマイズするWebViewでは、細かな実装レベルに違いがありました。WebViewをCordovaアプリに内包することで、すべてのAndroid端末で、同じブラウザーエンジンを使うことができます（その分アプリサイズは大きくなります）。フラグメンテーションが全く存在しないAndroidネイティブアプリ開発が可能になります。

3. WebGLなどの最新機能が使える

最新のブラウザーエンジンが持つHTML5機能を利用できます。CanvasやWebGLを使った3Dグラフィックスもスムーズに動きます！

Cordova 3.5.0での脆弱性問題には速やかに対応を

Cordova 3.5.0にて脆弱性が発見されました。そのため、Google Playストアでは、古いCordovaアプリを利用している場合に警告メッセージが表示されます。速やかに最新版にアップデートしましょう（Google Playストアで非公開扱いされるリスクがあります）。

Cordova開発のベストプラクティスを学ぶ

要件定義が重要

下記のような内容について、クライアント（もしくは企画側）と話し合い、コンセンサスを得ることが重要です。

• OSバージョンはどこまで対応するか？
• Androidの動作保障端末は？
• Cordovaプラグインでどこまで実装するか？

これはCordovaに限った話ではありませんが、特にCordovaでは後々の方針変更は大きな痛手になる可能性があります。

UI設計はOSの違いを考慮する

プラットフォームごとにUI規約は異なります。それを理解したうえで、UI設計を行いましょう。

巨大なリスト構造はHTML5には不向き

巨大な数のDOM要素が入るようなUIはHTML5では難しいです。ページ送りなどで代用することも検討しましょう。

開発アーキテクチャーは「SPA」

いわゆるSingle-Page Application形式で開発するのがおすすめです。Onsen UIやIonic Frameworkなど、ハイブリッドアプリ用のUIを組み込んだSPAフレームワークが開発での候補になるでしょう。

コーディングサイクルを最適化

毎回コンパイルするのは時間の無駄です。browserプラットフォームを使ってPC上で確認したり、Monaca Localkitのような高速に実機に転送してくれるツールを利用しましょう。

ボトルネック探しはインスペクターを使う

JSの処理・CSSのマッチング処理・DOMリフロー・GPUへの転送・描画処理など、アプリのボトルネックの要因は様々です。こちらの資料を参考にしてください。GapDebugというツールも便利です。

DOMリークをきちんと対処する

DOMリークとは、解放されるべきDOM要素がJSから参照されたまま解放されない問題です。やっかいなのが、ドキュメントに含まれないDetatched DOMツリー自体がリークしてしまい、そこに含まれる画像などもメモリー上から解放されません。DOMリークを防ぐ方法として、必要に無くなったDOM要素の参照をきちんと切ったり、イベントリスナーをremoveすることが重要です。

実機がない端末はクラウドでテスト

たとえばRemote Test Kitというサービスでは、クラウドを通じて実端末を一定時間レンタルすることができます。自由にアプリをインストールすることができるため、機種問題で悩まされている場合は、こういったツールが非常に効果的です。

開発事例 〜iPad向け業務アプリ（サービスマン支援システム）〜

アルティザンエッジ合同会社の井上さんより、実際の業務アプリの事例と、そのなかで苦労した点や工夫した点を紹介して頂きました。

• Cordovaを採用した理由
• BackboneやjQuery Mobileを用いたアーキテクチャー
• ネイティブで開発した「Cordovaプラグイン」も数多い
• Cordovaアプリ開発でハマったこと
• メモリー消費量について

ぜひこのリンクより、スライドをご覧になってください。

次回の勉強会について

第2回Cordova勉強会は、12月2日午後7時より開始予定です。ご興味ある方は、ぜひ下記のリンクよりお申込みください。

第2回Apache Cordova勉強会（DoorKeeper）

2014年10月24日、米サンフランシスコにてPhoneGap Day US 2014が開催されました。3年前から始まった本イベントですが、これまでアメリカではオレゴン州ポートランドで開催されていて、残念ながら参加する機会がありませんでした。今年は同じくサンフランシスコで開催されたHTML5 Dev Conf 2014と同じ週となった関係で、両方のカンファレンスに参加することができました。

HTML5ハイブリッドアプリ開発として幅広く使われているPhoneGapは、またの名を「Cordova」と呼ばれます。CordovaはApache FoundationベースのOSSプロジェクトで、それをAdobeが製品として出している名称がPhoneGapとなります。そのため、PhoneGap Dayの内容も、主にCordovaに関するものがほとんどです。それもGoogleやMozilla、Microsoftなどに所属するCordova開発者のスピーチが多く、とてもオープンなカンファレンスとなっています。

司会は毎度ながらPhoneGap開発チームのリーダー的存在なBrian LeRoux。PhoneGap Desktop Appの紹介などが行われました。

.@Adobe's @brianleroux kicks off PhoneGap Day 2014 http://t.co/PJqfunCgwE #pgdayus14 #pgday14 pic.twitter.com/cIiYBoSYPP

— Eric Oesterle (@erico) October 24, 2014

ハイライト紹介

CrosswalkエンジンでAndroid WearでもCordovaが動いた

Joe Bowserの「Many Webviews on PhoneGap Android」より。Intelがオープンソースプロジェクトとして進めているCrosswalk Project。これは、Chromium互換WebViewエンジンをCordovaに組み込み、ハイブリッドアプリの大きな課題であるAndroidバージョン依存や実行パフォーマンス、JavaScriptデバッグ機能の強化などを解決してしまおうというものです。PhoneGap Dayに先立ち公開されたCordova 4.0では、WebViewをAndroid標準WebViewからサードパーティ製のものに切り替える仕組みが備わり、Crosswalkの導入も簡単になりました。これを使うと、WebViewを持たないAndroid Wearにおいても、Cordovaアプリを動作させることができるとのこと。メモリーの問題等で実用ではないらしいですが、面白い取り組みです。

Visual StudioでCordova開発。次バージョンでiOSにも対応

現在プレビュー公開されているMulti-Device Hybrid Appsですが、近日中にアップデートが行われ、iOSのビルドができる機能が搭載されるとのこと。Windowsローカル環境で具体的にどうやって実現するのかなと思ってみていると、どうやらMac上にエージェントを起動し、Visual Studioはそのエージェントに対して、ネットワーク経由でリモートビルドをかけることで対応するようです。これでMonacaを使わなくてもWindowsユーザーがCordovaでiOS開発ができるようになりますね！

Ionic Frameworkの正式リリースは11月末か？

モダンなUIフレームワークとして注目されているIonic Frameworkですが、11月末ごろに正式リリースされるという話がありました。これまで1年間ずっとベータ版のままでしたので、正式リリースでどのようになるのか楽しみです。

まとめ

他にも、PhoneGapアプリのデバッグをするツールや、Mozillaが開発中の新しいWebViewエンジン、iOS 8で登場したWKWebViewの話など、PhoneGap/Cordovaデベロッパーにとって非常に面白いテーマが目白押しで、個人的にとても楽しむことができました。それと同時に、HTML5ハイブリッドアプリの世界は、CordovaというOSSフレームワークを通じて、メジャーどころが共同で開発を担っていることが実感されました。今後、PhoneGap Blogではセッションの録画ビデオを掲載していくと思いますので、ぜひチェックしてみてください。

PR: Cordovaユーザー会で一緒に最前線を探索しませんか？

PRとなりますが、このたびHTML5ハイブリッドアプリ全般の技術を扱うためのオープンソースコミュニティ「Cordovaユーザー会」を立ち上げました。この会では、HTML5ハイブリッドアプリ、とりわけCordovaの普及に向けて、実際にアプリ開発を実践されている方々が積極的に情報共有をしていくことを目的としています。キックオフ第1弾として第1回Cordova勉強会を11月5日、午後7時から開催する予定です。ぜひ興味ある方はご参加ください。

P.S. Google Chrome Apps Mobileの方に、Monacaの紹介をしてもらいました。Cordovaプラグインを開発しやすくするためのツールを作っていきます。

前々回、前回と業務アプリのフロントエンドについて主に説明しました。今回は、バックエンドに焦点を当てて説明を行います。

業務アプリの多くは、ブラウザーを通じて利用されるWebアプリ方式で提供されます。この場合、サーバー側でJavaやPHP、Rubyといった言語を用いてサーバーサイドプログラムが実行されます。もちろんHTML5やJavaScriptを用いてリッチなWebアプリを実現することができますが、その場合においてもビジネスロジックのほとんどはバックエンドに記述されてます。

一方、モバイルアプリの世界では、この割合が大きく異なります。たとえば、バックエンドの機能は、フロントエンドと連携するためのAPI機能が中心となります。フロントエンドについては、HTML5で開発しようと、ネイティブで開発しようと、バックエンドから受け取ったデータを表示したり、データを編集してバックエンドに送信するといった機能が必要とされます。

異なるスキルセットが必要

処理がバックエンドとフロントエンドに分散する問題点の一つは、アプリ開発のスキルセットが異なることです。フロントエンド開発では、ユーザビリティに関する知識や、HTML5やJavaScriptといった言語の理解が必要となります。一方、バックエンド開発では、ビジネスロジックの理解と、フロントエンド開発とは異なるサーバーサイド言語の知識が必要です。エンジニアが両者を一手に引き受けるのは簡単ではありません。

また、バックエンドにおいても、モバイルアプリに特化した機能を求められるケースがあります。たとえば、任意のタイミングでアプリに情報を送信するプッシュ通知や、App StoreやGoogle Playストアを経由せずにアプリを配信する機能、モバイルアプリからユーザー認証を行う機能などです。これらはネイティブ機能を用いて実現され、フロントエンド側にも対応する機能が実装されている必要があります。

さらに、業務アプリを考える上でバックエンドに求められる最も重要な機能は、既存システムとの接続です。これは、既存の業務システムやイントラネットに配置されたデータベースと連携するために必要です。そのためには、ファイアーウォール内に配置された各種システムにインターネットを経由して接続する仕組みを構築する必要があります。

こういったモバイル特有の課題を実現するために、専用のバックエンドをゼロベースで開発することは非現実的です。そのために、クラウドやパッケージ形式でモバイルバックエンドを提供するソリューションが存在します。これらのソリューションを使うと、フロントエンドの開発者はバックエンドの知識に乏しい場合でも、安全に業務システムに接続したり、モバイルアプリの機能を実現することができます。

既存システムとの接続

業務システムの運用では、社内ネットワーク（イントラネット）だけでなく、ハイブリッドクラウドやSaaSといったクラウドサービスを利用しているケース、そして両方を使い分けているような場合も考えられます。まずは、こういった多彩なシステムに対していかに接続するか、という観点が重要になります。

接続先として考えられるのは、ERPやCRMといった基幹系システム、Active DirectoryやLDAPといったユーザー管理システム、グループウェアやメールシステムといった情報系システムが挙げられます。B2Cアプリのバックエンドに求められる、FacebookやTwitterなどのソーシャル連携や、広告配信システムなどとは大きく異なることが分かります。

企業モバイルの典型的な接続先

開発後の運用基盤

また、アプリ運用時の基盤についても考慮する必要があります。具体的には、アプリケーションの配布や更新を管理する機能、ユーザーやデータの権限を管理する機能、そしてエラーログや利用状況などを一元的に把握する機能などが挙げられます。

アプリのインストール数が数万台を超えるB2Cアプリと比べて、B2BやB2Eアプリは数十から数千台が中心となります。端末やアプリ管理を集約することで、運用にかかる工数を抑えることができます。

MEAPはスモールスタートに向いていない

モバイルエンタープライズの開発・運用基盤として、これまで中心的な存在であったのはMEAP製品です。MEAPとは、Mobile Enterprise Application Platformの略で、2008年にガートナー社が提唱した概念です。

MEAPは、エンタープライズ向けモバイルアプリに要求される、長期的な開発～運用を担う総合的なソリューションの総称です。MEAPソリューションの具体的な例としては、IBMのWorklightやKonyといった製品が挙げられます。

MEAPの大きな機能の1つに、クロスプラットフォーム開発が挙げられます。実はどの製品も、第1回で紹介したCordovaフレームワークをベースにしており、HTML5ハイブリッドアプリとして開発されます。

MEAPにも問題点があります。それは、オールインワンとしての利用が前提となるため、どうしてもソリューションとしての規模が大きくなってしまい、それに伴い、値段も上がってしまうことです。特に、モバイルプロジェクトはスモールスタートすることが多いことから、MEAPは向いていないと判断される例が少なくありません。

また、モバイルアプリの開発では、様々なツールやサービスを組み合わせてアプリを作っていくことがよくあります。たとえば、プッシュ通知やテスト配信、アプリ管理などに特化した専用ツールが提供されています。MEAPを利用した場合に、こういった外部ツールとの連携がとりづらくなり、結果としてオープンな環境で開発できないといった懸念があります。

エンタープライズ向け次世代モバイル基盤

その中で、次世代モバイル基盤とも言える、新たなエンタープライズ向けのバックエンド基盤が登場しています。2013年末に発表された米Yankeeグループの調査結果によると、サービス形式でバックエンド基盤を提供するMBaaSプロバイダーは既に一般的な存在になっており、より優れた技術を持ち、顧客ベースが確立している成長企業が今後主役になるだろうとしています。

エンタープライズ向けモバイルバックエンド

その中の1社であるKidoZen社を紹介したいと思います。KidoZenはエンタープライズに特化したバックエンドを提供しており、クラウドだけでなくオンプレミスでの運用にも対応しています。イントラネット内で稼働する各種ユーザー認証基盤やデータベース製品に接続できるだけでなく、Salesforce.comやOffice 365といったクラウドベースのサービスとも連携できます。データ仮想化によるセキュリティ向上や、バックエンドの利用統計といった機能も搭載されています。

今後は、こういった単体でも利用でき、様々なツールと組み合わせて活用できるバックエンド基盤ソリューションが普及すると考えられます。使い勝手の面や、導入や運用コストが、従来のMEAP製品と比べて優位であるためです。

ただし、こういった製品には開発機能が含まれていません。そのために、HTML5開発プラットフォームであるMonacaやアプリカンといったソリューションと組み合わせた開発が広がっています。実際に、ガートナーは2013年、MEAPに代わってMADP（Mobile Application Development Environment）という概念を紹介し、開発機能とバックエンド運用機能を別軸で捉えはじめています。

モバイルソリューション全般に言えることですが、バックエンドもテクノロジーの進化が早く、ともすると大きな投資の結果、半歩遅れのものができあがるということも考えられます。一方で、エンタープライズ向けのモバイルアプリ開発ソリューションの選択肢も広がってきました。ツールやサービスを組み合わせることで、開発と運用効率を高めることが、今後も求められることになるでしょう。

エンタープライズモバイル開発で求められる要件については、前回の記事で概説しました。特に、BYODと相性の良いマルチプラットフォームの仕組みや、開発チームの統一、Webとネイティブアプリの両刀対応など、業務で使うアプリならではの特有ニーズがあることが、エンタープライズの特徴です。

この分野では、B2CやPCの世界と比較しても、HTML5が大きな注目を受けています。その背景には、HTML5がモバイルアプリ開発、とりわけ業務アプリ開発との親和性が高いことが挙げられます。

実行速度よりもコストメリットが優先

「モバイルアプリ開発をHTML5で」というテーマで話をした際の反応として、HTML5だと速度が遅くて使いものにならないのでは、という懸念の声が挙がります。確かに、フルネイティブコードで書かれたアプリと比較すると、ブラウザーエンジン上で動作するHTML5アプリは、スピードのボトルネックが発生しやすのが事実です。とはいえ、「ネイティブかHTML5か」が中心テーマだった3年前と比較して、現在は端末の性能が、Android 2.3やiOS 4が主流だった当時と今では大きく状況が異なります。

参考のため、下記にAndroid端末の性能推移を紹介します。4年前の端末と比較して、10倍以上の性能向上が行われていることが理解できます。

Android端末の性能推移

出典: AnTuTuベンチマーク

アプリの実行パフォーマンスの点では、App Storeでトップ10を狙うようなコンシューマーアプリとは異なり、業務アプリで求められる必要十分な速度を満たせば問題ありません。フレームワーク選定の際に、速度重視のJavaScriptライブラリー（Onsen UIなど）の採用を考慮することで、HTML5でも満足できる実行速度が達成できます。

それ以上に、次節の通り、開発時には下記にあるようなメリットがネイティブに勝ります。

HTML5が業務アプリに向いている理由

HTML5のメリットを一言で表現するならば、「つぶしが効く」というのが最も近いかもしれません。対応するOSの種類や画面サイズの広さもさることながら、使用技術やハイブリッド化によるネイティブアプリ作成まで、アプリ開発エンジンとしてHTML5は高い汎用性を備えています。

マルチプラットフォーム・スクリーンサイズに対応

HTMLを使えば、モバイルやPCといった端末の種類を問わず、また、画面の大小を問わず、同じコンテンツを展開できます。もちろん、画面サイズに合わせてコンテンツの配置を変更したり、最適化したりすることはよく行われます。同じコンテンツでも表示端末に最適化するという考え方はレスポンシブデザインとも呼ばれ、具体的にはCSS3メディアクエリーがよく使われます。

Web技術者がヨコ展開できる

HTML5は既存のWeb技術の延長線上にあります。開発言語としてはJavaScriptが用いられますが、AngularJSやjQueryなどのフレームワークやライブラリーもモバイルでそのまま利用可能です。非常に制約の大きかったiモード向けCHTMLなどと比較すると、スマートデバイスのHTML対応度はPCとほぼ同等の機能を備えています。ActiveXやFlashを用いたサイトを除き、スマートデバイスで閲覧できないWebサイトはありません。

レンダリングエンジンの進化、今後はグラフィック性能向上が焦点

端末性能だけでなく、ブラウザーも至る所で進化が進んでいます。その中でも性能強化が著しいのは、グラフィック描画の分野です。モバイルブラウザーが最新HTML5技術の1つであるWebGLに対応することで、2Dや3Dのグラフィックがさらに高速化され、より高い表現が求められるアプリへの適用範囲が広がります。

HTML5ハイブリッドアプリでネイティブアプリ化

ハイブリッドアプリとは、HTML5で作られたネイティブアプリです。具体的には、ネイティブコードとHTML5を組み合わせており、HTML5をベースとした開発でありながらも、プッシュ通知やデバイスAPIといったネイティブアプリでないと実現できない機能を組み込むことができます。

モバイルアプリはHTML5ハイブリッドアプリの道へ

HTML5の技術でネイティブなモバイルアプリ開発ができるハイブリッドアプリは、Web由来のクロスプラットフォーム性能を持ちながらも、端末機能やOS機能にアクセスできます。オフライン対応やパッケージ形式での配布と自動更新など、Webアプリでは実現が難しい課題にも対応できます。

CordovaとPhoneGap

現在、HTML5ハイブリッドアプリのライブラリとしては、アドビシステムズ社が提供する「PhoneGap」がデファクトスタンダードです。また、このPhoneGapの開発元となっているオープンソースプロジェクト「Cordova」は、PhoneGapだけでなく、様々な製品に組み込まれ、エンタープライズソリューションとして利用されています。

Cordovaは様々なエンタープライズソリューションの基盤に

HTML5ハイブリッドアプリ開発の課題

HTML5ハイブリッドアプリにも課題があります。その最も大きなものは、ハイブリッドアプリに特化した開発環境がまだ少ないということです。Cordova/PhoneGapアプリ開発に対応したソリューションとしては、私たちが開発しているMonacaだけでなく、最近ではVisual StudioやSenchaなどの製品でもサポートが開始されました。

MonacaはCordova/PhoneGapに対応した開発環境で、クラウドを活用したプラットフォームとなっています。好きなエディタやIDEと組み合わせてローカルで開発することもできますが、ブラウザーベースのIDEを備えていたり、開発中のアプリをすぐに実機でデバッグできるMonacaデバッガー等の仕組みを用意しています。また、ビルド機能が組み込まれているため、SDK等をインストールしなくてもiOSやAndroid、Windows 8向けの配布パッケージを作ることができます。

開発環境の整備だけでなく、開発ノウハウを蓄積する場所、いわゆるナレッジベースも必要です。同じHTMLと言えども、Webサイトとモバイルアプリでは、情報設計の観点や実装上のポイントが大きく異なります。そのために、HTML5ハイブリッドアプリに特化したフレームワークの活用が推奨されます。Onsen UIやjQuery Mobileなどが候補となるでしょう。これらの製品は、モバイルアプリとしてHTML5を活用するためのノウハウが詰め込まれており、ユーザーインターフェースの開発負担を大幅に減らすことができます。

さて、エンタープライズモバイルではフロントエンドだけでなく、バックエンド方式も非常に重要な観点です。セキュアな通信は当然として、どのように社内のシステムと連携するのか、ソリューション選定のポイントは何なのか、開発後の運用基盤をどう整えるのか、などのトピックについて、次回に説明したいと思います。

スマートフォンやタブレットが普及する中で、エンタープライズ分野でのモバイル活用が注目を集めています。特にモバイルファーストという掛け声のもと、B2E（Business to Employee）やB2B（Business to Business）において、スマートデバイスを活用する動きが広まっています。

私としても「多くの企業ではモバイルを活用するのかしないのか」という議論から、「いつモバイルを始めるのか？」「どのように実装するのか？」という内容に論点が移っていることを実感しています。

もう一つの大きな特徴は、事業部門がモバイル化を先導している一方、情報システム部や総務部はセキュリティリスクやBYOD等の対処を迫られていることです。企業モバイル先進国であるアメリカでは、モバイル化を前提として業務の見直しを進めながら、上手くアプリを活用している事例が多く見受けられます。

企業のモバイル活用はカスタムアプリへ

モバイル化を進める上で重要なことは、モバイルでの業務範囲を見定め、その範囲に最適化したアプリを設計することです。モバイル活用レベルに応じて課題も変わってきますが、下記の3フェーズに分けて考えるとイメージしやすいと思います。

エンタープライズのモバイル化における3フェーズ

それぞれの段階によって、必要となる基盤が異なります。フェーズ1や2では、MDMやVPN、セキュアブラウザーといったセキュリティ対策や管理用ツールがその中心的な存在となります。実際に、現状では話題の多くがこの状況を反映しているのではないでしょうか。

今後、モバイル化がさらに推進され、業務をよりモバイルに最適化していく中で、カスタムで開発するアプリの重要性が一層高まっていきます。その中でHTML5が重要な技術として位置づけられ、フロントエンドに採用されていくことでしょう。また、その場合のバックエンド技術についても検討が必要です。

まずは技術的な側面から、エンタープライズモバイルの特徴を紹介したいと思います。

エンタープライズ分野におけるモバイルアプリの技術要件

大きくフロントエンドとバックエンドに分けて、エンタープライズモバイルの技術的な課題について紹介します。

クロスプラットフォーム

App Store等で配信するアプリでは、通常iOSやAndroidといった特定のプラットフォームに向けて開発されるネイティブアプリが主流です。ユーザーエクスペリエンスを高め、ユーザーから高い評価を得ることが最優先されるためです。

一方で、エンタープライズアプリはクロスプラットフォームが選択の中心となります。その背景として、従業員が自分のプライベート端末を業務でも使用する、BYOD（Bring Your Own Device）が挙げられます。企業がBYODを選択すると、マルチプラットフォームでアプリをサポートすることは必須要件になるためです。

また、業務システムは5年～10年という、一般のコンシューマーアプリと比較しても長いライフスパンで使うことが前提となります。そのため、現時点で採用されたプラットフォームに限定したシステムは、メンテナンスのリスクが伴います。移植性がより重要視されるわけです。

開発効率

技術選定の際には、評価軸としてアプリの実行速度よりも開発効率が重要になります。特に、モバイルアプリ開発エンジニアの確保と育成のしやすさ、Webやサーバーサイドといったテクノロジーとの親和性も重要なポイントです。

UIの作りやすさ

モバイル開発全般に当てはまりますが、アプリはビジネスロジックが比較的少ない一方で、ユーザーインターフェースの品質が使い心地に直結します。そのため、ワイヤーフレームやモックアップという形でプロトタイプを作りながら、ユーザーの視点で使い勝手を評価していく開発スタイルが好まれます。

業務アプリと言えども、ユーザーはB2Cアプリの使い心地に慣れているため、コンシューマー向けの開発フローを参考にすることが望まれます。ヌルヌル、キビキビ動く必要はありませんが、PC版の画面から表示項目数を落としてモバイルアプリ化するといった配慮が必要です。

メンテナンスコスト

端末の性能もさることながら、OSとその周辺環境は驚異的なペースで進化しています。その結果、WebやPC版のアプリと比較しても、TCO（Total Cost of Ownership）の中でメンテナンスの占めるウェイトが高く、リリースしてからの改修、改善をいかにスムーズに行っていくかが重要です。その中で機能改修や新バージョンへの対応のしやすさだけでなく、アプリのアップデートのしやすさも大きなポイントになります。

フロントエンド技術の本命はHTML5

さて、コンシューマー向けのアプリとは明らかに性格の異なる要件が連なっていますが、実際の開発技術には変わりがありません。ネイティブアプリやWebアプリなど様々な方式があり、どれも長所と短所を備えています。

その中で、エンタープライズモバイルの要件を満たす最有力候補となるのは、ネイティブアプリにもWebアプリにも対応できるHTML5です。では、なぜエンタープライズ向けフロントエンド技術の本命がHTML5なのか、次回に解説を進めていきたいと思います。