こんにちは、編集長の白石です。

この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。

今回お話を伺ったのは、アシアル株式会社 代表取締役社長の田中正裕さんです。

田中さんのセッションは「Web技術でネイティブアプリを開発する話」（ホール 14:20-15:00）です。 （現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベントということもあってキャンセルも多めに出るらしいので、あきらめずにキャンセル待ちすることをお勧めします！）

Webとネイティブ境目が曖昧になってきた

白石: 田中さんは、ずっとWebとネイティブのハイブリッドアプリの分野で活躍してらっしゃいます。そんな田中さんから見て、最近のWebやモバイルアプリ開発についてはどのように見ていらっしゃいますか？

田中: はい、まずはそもそも最近Webがネイティブにかなり近づいてきたな、と思っています。

例えば実現できる機能。以前はWebとネイティブはできることに差がありましたが、最近はWebにできることがすごく増えてきています。Service Workerの登場で、以前はWebでは実現が難しかった、プッシュ通知やバックグラウンド処理なども可能になってきている。

ネイティブはコードがバイナリにコンパイルされて高速に動く、という点でも、Web Assemblyの登場により、今後は目立ったディスアドバンテージではなくなっていくでしょう。そもそも、端末速度の向上とブラウザエンジンの高速化で、速度差自体が目立たなくなってきています。

白石: Web Assemblyは期待ですよね。そのうち、フルWeb AssemblyのWebアプリフレームワークが出たりするのではないか、と期待しています。

田中: きっと出るでしょうね。iOS 11がWeb Assemblyに対応したことも、すごく大きな意味を持っていると思います。

他には、アプリの起動方法も違いとしてよく挙げられていましたが、Webはブラウザからアクセスするもので、ネイティブはインストールして使用するもの、という区分けも最近意味がなくなってきました。例えばProgressive Web Appsなんかはその象徴ですよね。ブラウザがWebアプリを端末にインストールしたら、あとはネイティブアプリと遜色なく動作する。

白石: Safariには昔から、ホームスクリーンにWebサイトへのブックマークを追加する機能がありますが、それがもっとスマートな形で実現しそうですね。

田中: そして、Web技術を使ってアプリを作る方法自体が今や多様化していて、以前のような「Webかネイティブか」という単純な二分法じゃなくなっているんですよね。

Electron

白石: はい、その多様化したアプリ開発手法を本日は伺いに参りました。一つ一つ教えてください。

田中: カンファレンスのセッションではコード例を挙げながらお話しようと思いますが、今日は口頭による説明で進めましょう。

ではまず最初に、Electronの紹介からいきたいと思います。クロスプラットフォームなデスクトップアプリを開発するためのフレームワークで、元々はGitHubが開発した「Atom Shell」というツールでした。

田中: 特徴としては、Chromiumを組み込んだブラウザレイヤーと、Node.jsによるネイティブレイヤーの二層構造になっているという点が挙げられるかと思います。WebViewはもちろん、Node.jsもクロスプラットフォーム性の非常に高いプラットフォームですので、Electronを用いると、クロスプラットフォームなアプリを簡単に開発することができます。

白石: 著名なところでいうと、SlackはElectronで書かれているんですよね。

田中: そうです。Slack、Visual Studio Code、そしてもちろんGitHub製のエディタであるAtomと、著名なベンダーもElectronの採用には積極的ですね。

白石: Electronの将来は明るそうですね。Electronの欠点とかはあるんでしょうか？

田中: WebViewの上で動作するので、やはりパフォーマンスやメモリ使用量の面では不利になりますね。ただ実際には、PCはモバイルに比べると速度面で優位ですので、そこまで気にするところでもありません。

さっき挙げた例で言うと、SlackやAtomは重いなあ…と感じることが多いですが、Visual Studio Codeはすごく軽快に動作します。なんでElectron開発元が開発しているAtomがあんなに重いのか(笑)。VS Codeの軽快さは、相当な技術力のなせる業なのかもしれません。

白石: さすがマイクロソフトってところですね。

Cordova

田中: では次はCordovaについてですが、これは説明の必要もないくらい有名なフレームワークですね。Electronのモバイル版と言ってもいいかなと。WebViewと、ネイティブ機能を利用するためのCordovaプラグインという「二層構造」であるところも同様です。

Electronと違うところは、よりベースとなるOSの依存度が高いというところが挙げられると思います。WebViewは基本的にOSネイティブのものを使用しますし、Cordovaプラグインは通常ネイティブの開発言語で開発します。（Electronの場合はWebViewは組み込みのChromium、ネイティブ部分はNode.js）

白石: 田中さんはMonacaの開発者でもあり、Cordovaのことは誰よりも知りつくしていらっしゃるかと思いますが、利点や欠点を教えていただけますか？

田中: 利点はやはりクロスプラットフォーム性です。複数のモバイルOS上で動作するアプリを、ほぼ1ソースで書くことができます。

欠点は昔から言われているように、パフォーマンスが遅いという点。ただ先程も申し上げたように、端末もブラウザも速度が向上していて、「遅さ」はあまり気にならないレベルになっていると思います。少なくとも、Monacaのユーザーに限って言うと、ほとんどの方が問題ないとおっしゃってますね。

白石: ぼくも、もうそういう段階なんじゃないかな…とは思っていたのですが、田中さんに言われると説得力が違いますね。

田中: 今では、Cordovaを使っていても、ユーザーが気付くこともほとんどないと思います。例えば、◯◯（某ECアプリ）も実はCordovaを使っているようなんです。

白石: えっ！あの◯◯が！ぼくもよく使っていますが、全然気づきませんでした。

田中: そうなんです。意外と広がっているんですよね。今後もその存在感は増していく…と言ってもいいんじゃないでしょうか。

React Native

田中: では次はReact Nativeです。Facebookが作っているモバイルアプリ用のフレームワークで、一言で言えばReactを使ってモバイルアプリを作るためのツールですね。Reactの仮想DOMを、ネイティブのUIコンポーネントを利用してレンダリングするものです。

白石: React Nativeは最近人気急上昇中ですよね。その理由は何なんでしょうか？

田中: React自体に人気があるということと、そしてFacebookが自ら使用しているのが大きいですね。React Nativeは、元々Instagramのチームが作っていたそうです。

白石: React Nativeの利点や欠点はなんでしょうか。

田中: WebViewの上で動作するのではなく、ネイティブに動作するアプリが作れるというのは大きな利点ですね。パフォーマンス上の問題も生じにくいし、ネイティブのルック＆フィールをそのまま利用できる。

また、UIスレッドとJavaScriptのUIスレッドが最初から分かれているのも利点だと思います。JavaScriptの処理がUIスレッドの動作を阻害しないので、UIが60fpsを維持しやすい。

白石: では、React Nativeには欠点といえるものはありますか？

田中: 作ってみると分かるのですが、結構作り方に癖があるんですよね。それに慣れるのが少し大変かもしれません。コードの共通化は促進されるものの、クロスプラットフォームじゃないというところも、議論が分かれるところです。

白石: Facebookは「Learn Once Write Anywhere」（一度学べばどこでも書ける）と言っていますね。

田中: そうですね。クロスプラットフォームは最初から目指していない。そこもCordovaとは大きな違いです。

CordovaはWebそのものですから、ブラウザを使って開発し、ブラウザの機能が増えてネイティブと遜色なくなれば、なくなって当然のものという前提でした。React Nativeは、ネイティブアプリをJavaScriptで作るという発想です。なので、開発にはネイティブの知識が必要になります。JavaScriptを使用するので、開発体験自体はWebに近いものがあるのですが、やはりHTMLやCSSを使ったUI開発とは別物です。

NativeScriptとWeex

田中: あとはNativeScript、あとWeexというフレームワークを紹介していこうと思います。

白石: ここらへんまで来ると、聞いたことないという人も多そうですね〜。

田中: NativeScriptは、ネイティブで動作するアプリをJavaScriptで書けるフレームワークです。「React NativeからReactを抜いたもの」と考えてもいいでしょう。

白石: ぼくもNativeScriptの名前は聞いたことがあったのですが、Angularの界隈で耳にしました。

田中: そう、Angularと組み合わせて使えるというのを一つのウリにしています。Angularのイベントとかにも積極的に出ていて、Angularチームとの関係は良好そうです。

白石: 利点や欠点を教えていただけますか？

田中: 利点はやはりネイティブのパフォーマンスで動くこと、そしてAngularと組み合わせて使えることでしょうね。ただ、「組み合わせて使える」と言っても、React Nativeほどスムーズには使えないのが悩ましいところですが。

欠点は…なんといってもユーザーが少ないことですね。採用事例とかも探したのですが、今のところ見つかっていない状態です。GitHub上ではかなりの人気なのですが （筆者注: 2017/9/16時点で11,076のスターを集めている）。

あと、開発していたTelerikという会社がProgressという大企業に買収されてしまって。その後ちょっと開発が停滞してしまっているように見えるんですよね。それもちょっと心配なところです。

白石: 買収あるあるですね(笑)。

田中: 最後はWeexをご紹介しましょう。

これはVue.jsを使ってネイティブアプリを作れるというフレームワークです。React NativeのVue版と言っても差し支えないかと思います。

白石: では、利点もReact Nativeなどと同様に、ネイティブの速度で動く、ネイティブのUIコンポーネントが使えると言ったところですよね、きっと。

田中: はい、あと面白いのは、これってアリババが開発に携わっているんです。なので、実は中国ではすでに事例が多いそうなのですよね（筆者注: Weexのサイトに、「Who uses it」というセクションで採用企業の一覧がある）。

白石: おお、それはNativeScriptとは違うところですね。アリババが付いているとなると、開発リソースも割けそうだし、事例もどんどん増えていきそうです（筆者注: 元々アリババのGitHubリポジトリ上で開発されていたが、Apache Software Foudationに寄贈された）。

田中: Vue自体もすごく人気がありますしね。Vueに関心のある方にとっては、注目に値するプロダクトだと思います。

Web技術を用いたネイティブアプリ開発は広まるか？

白石: では最後にまとめとして、Web技術を使ってネイティブアプリを作るという手法は、今後も広がっていくのかどうかをお聞きしたいです。

田中: そうですね、今回取り上げた各プロダクトのnpmのダウンロード数とかを見ると、右肩上がりではあるんです。ただ、その事実を以て、Web技術によるアプリ開発の人気が高まっていると言い切れるかは微妙です。アプリ開発市場そのものも、まだまだ拡大していっていますからね。

個人的には、Web技術によるアプリ開発が、ネイティブの開発手法よりも人気が上回るようなことにはならないと思います。OSの開発元がオフィシャルに推進しているわけでも、何かを保証しているわけでもありませんし。これまでiOSやAndroidの開発者を雇って、アプリ開発を行っていたような企業が、Cordovaを選ぶようなことは、今後もあまり起きないと考えています。

白石: なるほど、冷静なご意見。

田中: ただ一つだけ言えるのは、Web技術者による、フロントエンドのアプリケーション開発が今後も伸びていくのは間違いないということです。それが純粋なWeb技術だけを用いてProgressive Web Appsを作るのか、先程紹介した技術のどれかを利用してモバイルアプリを作るのかについては、あまり変わらないと思います。

だから、元々Webをやっていた会社にとっては、既存のスキルセットや資産を使って、やれることの選択肢が増えてきているのは間違いありません。

Web技術の進化も、Webブラウザによる実装もまだまだ続いていますし、Webの未来にはまだまだ期待しています。

白石: よくわかりました。田中さん、今日はWeb技術を使ってネイティブアプリを作るテクノロジーについて、幅広く教えていただきありがとうございました。大変勉強になりました。

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を試してみてはいかがでしょうか。

エキスパートの佐川が、「de:code2016」のセッションレポート、日本マイクロソフトエバンジェリスト・物江修氏の「Developing on the Edge. 〜 WebプラットフォームとCordova 〜」をご紹介します。

今年の夏、MicrosoftはWindows 10の大型アップデート「Windows 10 Anniversary Update」を予定している。このアップデートで「Microsoft Edge」にも数多くのAPIが追加される。このセッションでは新しく追加されるAPIの紹介と、それらを利用したUniversal Windows Platform(以下、UWPと記載する)、Cordovaアプリケーションの開発ポイントを紹介する。

• Microsoft EdgeとWindows10のWebプラットフォーム
• EdgeHTMLの新機能とこれからの方向性
• Webプラットフォームを利用したアプリケーション開発

Microsoft EdgeとWindows10のWebプラットフォーム

初めに、Microsoft EdgeとWindows 10で「Webプラットフォーム」と呼んでいる事柄についてみていく。すでにご存じのとおり、Windows10には、2つのマイクロソフト製のブラウザが含まれている。Windows10から新しく採用された「Microsoft Edge（以降、Edgeと記載する）」と「Internet Explorer11」である。

Webブラウザが2つ入っている理由は、以下のとおり。

• Edgeは相互運用性を重視し、最新のWebコンテンツをブラウズするため
• Internet Explorer 11は過去のバージョンのIE向けに作られたコンテンツを従来どおりに見るため

この二つは物理的に完全に別なものとなっていて、レンダリングエンジンもJavaScriptエンジンも異なる。

EdgeのレンダリングエンジンとJavaScriptの組み合わせが、Windows 10用のアプリケーションを開発する際に使用されるWebプラットフォームになるが、現状、Windows 10で動作するアプリケーションのすべてがEdgeのエンジン（以降、EdgeHTMLと記載する）を利用しているわけではない。

どういう意味か。

アプリケーションとの組み合わせを見てみる。Windows 10から採用されたUWPアプリケーションは、EdgeHTMLを使用している。しかし、以前の環境で作られたWindows 8系のいわゆるWindowsストア・アプリケーションやデスクトップ・アプリケーションであるWin32アプリケーションは、以前の Tridentを使用している。

新しいSDKに含まれるWeb ViewコントロールはEdgeを使用するようになっているので、もしどちらも選択が可能である場合はEdgeHTMLを使用する。

Windows 10 Anniversary Updateまでに搭載されるEdgeの新機能

ここからは「Windows 10 Anniversary Update」までに搭載されるEdgeの新機能について紹介していく。Edgeのエンジンが、Windows 10でアプリケーションを開発する際に使用するWebプラットフォームの機能になるので、そのままアプリケーションから使用できるようになる。

Edgeの2016年の機能実装を含めた展望については、今年の2月にEdgeの開発者ブログで公開されており、その記事では優先課題とて5つ存在する。（参考までに、日本語の開発者ブログはこちらです）

1. WebテクノロジとWindowsストアによるモダン拡張機能プラットフォームを提供する
2. アクセシビリティとインクルーシブ デザインにより、Microsoft Edgeを使うすべての人の力になる
3. Microsoft Edgeの基本であるセキュリティ、パフォーマンス、効率を引き続き向上させる
4. Webの未来を見据えて開発する
5. コミュニティのフィードバックや参加を可能にするチャネルを増やす

まずは拡張機能。ネイティブ形式のアドオンとは異なるWebテクノロジを活用した、開発者になじみのある拡張機能プラットフォームを作成する。現在のInsider Previe版のEdgeでは同じくプレビュー版のアドオンを使用できるようになっている。

次にアクセシビリティ。この項目では「HTML Accessibility API Mappings」と「Core Accessibility API Mappings」への対応、「ハイコントラストのサポート」や「視覚障碍のある方にとっての読みやすさ」や、「フォーカスおよび選択の操作性の向上」などが表明されていた。

基本機能では、「JavaScript エンジンのベンチマークの向上」「さらなるセキュリティの強化」たとえばFlashを別のプロセスに分離し、不要なコンテンツ処理を保留したり、GPUレンダリングの強化などが表明されている。

Insider Preview に搭載された新機能

ここからは「Insider Preview」に搭載された新機能について紹介していく。現在、Insider Previewに実装されていて、実際に試すことができるものが約20個以上、開発中のものを含めると36個くらいあり、しかも、これは現段階のものなので、これからまだ増える可能性がある。

• Web Speech API (synthesis)
• Fetch API
• Beacon
• Web Notifications
• WebRTC
• OPUS open audio
• VP9 open video playback
• WOFF File Format 2.0
• FIDO 2.0 Password
• Canvas 2D path2D
• Ambient Light Events
• Color input type
• Element
• Default parameter (ES2015)
• Destructuring (ES2015)
• Generators (ES2015)
• SIMD (after ES2016)
• Exponentiation Operator (ES2016)
• Array.prototype.includes (ES2016)
• Async Functions (after ES2016)

Insiger Previewに新しく搭載された機能をいくつか、デモを交えながら紹介する（この記事ではデモ資料省略）。

Web Speech API

IETF標準の言語タグである「BCP 47」に対応しており、タグの指定によってさまざな言語の指定ができる。音量、音声、速度はもちろん、SSML (Speech Synthesis Markup Language) を使用して音声合成時の修飾的情報を指定したりもできる。

Fetch API

「Fetch API」は、Webサーバと通信するためのAPIで、Promise ベースで非同期処理を行える。従来の「XMLHttpRequest」の仕様のさまざまな不足分をなくし、より細かい処理ができるようになっていて、将来的に「XMLHttpRequest」は「Fetch API」に置き換わると言われている。「Fetch API」は「XMLHttpRequest」とは異なり「Service Worker」からも使用できる。参考までに「Service Worker」とは、「Progressive Web Apps」というモバイルWeb向けの新しいコンセプトだ。

Web Notifications

「Web Notifications」はユーザーへのデスクトップ通知の設定や表示のために使われるもので、EdgeではWindows 10のアクションセンターと統合される。この通知には、カスタムアイコンやタイトル、メッセージが設定可能だ。Service WorkerとPush APIを組み合わせると、サーバからのPuch通知を受け取って表示したりということが可能になるが、残念ながらこの2つはまだサポートされていない。しかし、ブラウザ上でアプリケーションが稼働状態であれば、WebSocktsやWebRTCの通知を受け取ってデスクトップ通知を表示するといったことが可能だ。

WOFF2.0フォント

WOFF2.0フォントは、従来のフォントファイルのサイズを30%以上多く減らす新しいフォーマットだ。日本語を含むアジアフォントではおよそ50%前後節減できると言われている。現在、Webページの60%以上でカスタムWebフォントが使用されていて、平均的にWebページのサイズの5.3%を占めると言われているので、これをサポートすることでページの表示速度の向上が期待できる。

WebRTC

WebRTCについて。RTCとは「Real Time Cominucation」の略で、プラグインなしでWebブラウザ間のボイスチャット、ビデオチャット、ファイル共有ができる技術がWebRTCだ。Firefox、Chromeは、Edgeに先行してWebRTC1.0をサポートしているが、EdgeはWebRTCの使い勝手を改善したORTCのみをサポートしてた。このWebRTCとORTCは互換性があるので、互いに通信を行うことができるが、さらなる相互運用性を高めるためにEdgeHTML 15では、WebRTC1.0もサポートすることになった。

RTCの相互間運用性

その他

そのほかにもオーディオ用の高い圧縮フォーマットであるOpusや動画圧縮コーデックのVP9、細かい時間の計測に使用される「High Resolution Time」のLebel2や、フォルダのドラッグ・アンド・ドロップ、Webブラウザで生体認証を行うためのFIDO(ファイド)2.0、それからBeacon、アクセシビリティ関連のエレメントなどなど多くの機能がサポートされる。

ハイブリッド・アプリケーション

説明した機能は、ハイブリッド・アプリケーション開発用の様々なフレームワークを使用することで、スマートフォンやデスクトップのアプリケーションとして利用することができる。ここからは、Webプラットフォームを利用したアプリの開発について紹介していきます。

ブラウザで動作するWebアプリケーションを、ハイブリッド・アプリケーション化するメリットは3つほどあります。

• オフライン
• アプリストアのエコシステム
• プラットフォーム/ハードウェアの機能

もう少し待っているとEdgeでもService WokerがサポートされてWebアプリケーションでもオフラインの利用が可能になるので、実際にアプリケーション化するメリットというのはアプリストアのエコシステムを使用するとか、Webブラウザでは使用できないハードウェアの機能を使用するということぐらいに差が縮まる。

このハイブリッド・アプリケーションの形式には、Packageアプリケーションと、Hotedアプリケーションがある。Packageは、オフラインで利用可能。サーバサイドのリソースががならずしも必要でない。Hostedは常に最新のコンテンツで実行でき、開発の一元化が可能だがオフラインでの使用が前提となる。ざっくり言うとコンテンツの配置場所くらいしか違いはない。

Universal Windows PlatformとCordovaを利用したHostedアプリケーション

UWPとCordovaで、どのようにHostedアプリケーションを作るか、というのを紹介する。

UWP

これがWindow 10に用意されている、アプリから使用可能なOSリソースだ。プッシュ通知や、タイルへの情報表示、予定表、アドレス帳へのアクセス、Cortana連携とWindowsランタイムを使用し、さまざまなハードウェアにもアクセスできる。作成は

1. package.appmanifestの[アプリケーション]タブで[スタート]を指定
2. [コンテンツURI]タブでWinRTへのアクセスを設定
3. 使用しないファイルを削除

Cordova

Tools for Apache Cordovaが提供する機能は

• ターゲット
• ビルド
• デバッグ
• エミュレータ
• コード補完

がありiOSアプリケーションに対するビルドにはMacが必要ではあるが、ほとんどの環境(Android系/iOS系/Windows系)で実行可能だ。CordovaにおけるHostedアプリケーションの作成は以下の３つで行っていく。

1. config.xmlの編集
2. www¥scripts¥index.jsの編集
3. index.htmlの編集

尚、Apache Cordovaを使用したホスト型Webアプリケーションの作成についてはこちらの資料を見るとよい

Visual Studioで提供されている検証環境

• Ripple
• Android
• Monaca Debugger(iOS/Android)
• Windows Phone

その他、Mac OS用、リモートエージェント、Mac in Cloud(Mac OSのホスティング)などがある。

最後に、Webプラットフォームについてということと、この夏に向けていろいろなAPIが出てくる。そして、Webではできないことができるようになると物江氏は締めくくり、Microsoft Edgeのすぐそこにある未来について熱く語ってくれた。今最も熱いブラウザは「Microsoft Edge」ではないだろうか。

先週の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プラグインを開発しやすくするためのツールを作っていきます。

エンタープライズモバイル開発で求められる要件については、前回の記事で概説しました。特に、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を活用するためのノウハウが詰め込まれており、ユーザーインターフェースの開発負担を大幅に減らすことができます。

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

Visual Studioの開発機能は、これまでWindowsプラットフォーム向けのものでしたが、Visial Studio 2013 Update 2からは、Multi-Device Hybrid Appsというアドインをインストールすることにより Apache CORDOVA を使用したAndroid、iOS用アプリを開発することができます。

今回はVisual Studio 2013 Update 2用のアドイン Multi-Device Hybrid Appsについて紹介します。

(Multi-Device Hybrid Appsの構成)

Multi-Device Hybrid Appsとは

Multi-Device Hybrid AppsはProfessional以上のエディションのVisual Studio 2013でApache CORDOVAを使用してAndroid、iOSアプリの開発を可能とするためのアドインです。

Visual Studio 2013の提供する強力なコード補完機能、デバッグ機能を使用して、Android、iOS (およびWindows 8とWindows Phone 8.0) のアプリを開発することができます。

Multi-Device Hybrid Appsが提供する機能は以下の図のとおりです。

(Multi-Device Hybrid Appsが提供する機能)
※Windows 8、Windows Phone 8.1については割愛

開発のターゲットとなるプラットフォーム

• Android 4+ (4.4 にもっとも最適な開発エクスペリエンスが提供されます)
• iOS 6 & 7
• Windows 8.0 (ストアアプリ)
• Windows Phone 8.0

ビルド

• Android : 〇
• iOS : ×
• Windows 8 : 〇
• Windows Phone 8.0 : 〇

[Mac OS用アプリのビルドについて]
現状、iOS用アプリはWindows上でビルドすることはできません。Multi-Device Hybrid Appsで開発したソースをビルドしてApp Storeに公開するには、Mac OS X Mavericks上のXcode 5.1でコンパイルするか、Mac OS上にインストールしたリモートビルド用のエージェントを使用してビルドを行う必要があります。iOSアプリのリモートビルドの詳細な方法については、以下のドキュメントを参照してください。

Documentation Multi-Device Hybrid Apps for Visual Studio
http://go.microsoft.com/fwlink/?LinkID=397716

デバッグ

Cordovaアプリの開発にVisual Studioがもたらす利点のひとつは、アプリの種類およびデバイス、 プラットフォーム全体を横断するシームレスかつ共通化されたツール類です。しかしながら現リリース (CTP1.1) の Multi-Device Hybrid Appsでは、すべてのデバイス、プラットフォームで同じVisual Studioデバッガ機能を利用することができません。

現在のデバッガのサポート状況は以下の通りです。

Visual Studio デバッガサポート

• Android 4.4 : 〇
• Android < 4.4 : ×
• iOS 6 & 7 : ×
• Windows 8 (ストア アプリ) : 〇
• Windows Phone 8.0 : ×

(※)Visual Studio デバッガーはRippleやAndroid 4.4 エミュレーターまたはデバイスでの最初のページの読み込み前に発生するブレークポイントでは停止されません。ただし、ブラウザー  (Ripple)を更新またはJavaScriptコンソールから “window.location.reload()” を実行したあとではこれらのブレークポイントにヒットします。

アウトプット ウインドウでのJS コンソール メッセージ

• Android 4.4 : 〇
• Android < 4.4 : 〇
• iOS 6 & 7 : ×
• Windows 8 (ストア アプリ) : 〇
• Windows Phone 8.0 : ×

エミュレーター

Multi-Device Hybrid Appsには、エミュレーターとしてApache Rippleがインストールされます。Apache Ripple エミュレーターはChromeのようなWebKitブラウザー内部の Webアプリケーションとして実行されます。CORDOVA環境では、複数のデバイスとプラットフォームをシミュレートし、位置情報やデバイスの向きのような、CORDOVAプラグイン コアの基本的な機能をサポートします。

Apache Rippleは、AndroidとiOS上で動作するアプリのオーサリングと検証の第一歩を簡単かつ迅速に提供しますが、Rippleは、iOS シミュレータのように、そのエミュレーションにおいて決して完全ではありません。「Web View (WebKit)での動作検証 + 基本的なCORDOVAコアAPIのテスト」くらいにとらえておくがよいでしょう。よって、完全な検証は実機で、少なくともネイティブのエミュレーターで行うことをお勧めします。

Multi-Device Hybrid Appsのインストール

Multi-Device Hybrid Appsを使用するメリットのもうひとつに、Cordova開発環境構築にかかる工数が圧倒的に少なくてすむということがあげられます。

VisualStudio 2013 Update2 + Multi-Device Hybrid Appsを使用しない、従来の方法で Windows OSにCordoveの開発環境を構築するには、大まかに以下のステップが必要となります。

1. Node.jsのインストール
2. Node.jsのnpmコマンドを使用したApache Cordoveのインストール
3. Apache Antのインストール
4. Java(JDK)のインストール
5. Android SDKのダウンロードと展開
6. Android SDK のパスを通すための作業
7. Androud SDKにあるSDK Managerを使用して必要なツールと拡張をインストールする
8. ひな形となるCordoveプロジェクトの作成
9. Cordoveプロジェクトから、目的のプラットフォーム用のプロジェクトを作成

この手順は、インストールはもちろん、プロジェクトの作成まで、すべてコマンドラインで行う必要があります。

こう書くと、手順が多く操作も煩雑で、なんだかとても大変そうですが、実際のところとても大変です。Multi-Device Hybrid Appsを使用する場合は、Windows  8.1に  Visual Studio 2013 Update 2がインストールされた環境で、Multi-Device Hybrid Appsのセットアップウィザードを実行するだけです。

また、Cordove開発環境が使用している各モジュールに更新が行われた場合には、VisualStudioが通知してくれるので、安心して使い続けることができます。

インストールの前提条件

Multi-Device Hybrid Appsアドインをインストールする前に、以下のソフトウェアと各オプションをインストールし、正常に動作するようにしておく必要があります。

• Windows 8.1
• Visual Studio 2013のProfessional,、Ultimateもしくは、Premiumエディション
     以下の機能がインストールされている必要があります。
  • Tools for Maintaining Store apps for Windows 8
  • Windows Phone 8.0 SDK (Windows Phone 8.0 アプリを開発するのであれば)
• Visual Studio 2013 Update 2

Multi-Device Hybrid Appsのインストール手順

Muiti-Device Hybrid Appsアドインのインストールは。インストールをイメージを入手して実行し、セットアップウィザードのボタンをクリックしていくだけです。

具体的な手順は以下のとおりです。

1. Multi-Device Hybrid Apps (Preview) の配布ページで「Download」リンクをクリックします。
   
   

   Multi-Device Hybrid Apps (Preview)
   http://msdn.microsoft.com/ja-jp/vstudio/dn722381

2. Download Center に遷移するので、ページ内の [Download] ボタンをクリックします。
    
3. 「Choose the download you want」のパネルが表示されるので、vs2013mda_0.1.1.exe と Documentation for Multi-Device Hybrid Apps for Visual Studio CTP1.1.pdf  にチェックをつけ [Next] ボタンをクリックします。
    

   

   exeファイルは Multi-Device Hybrid Appsのインストールイメージ、pdf は Multi-Device Hybrid Appsの詳細なドキュメント(英語)です。このドキュメントは、Multi-Device Hybrid Appsについての非常に詳細な情報が書かれているので一読されるのをおすすめします。
    
4. exe ファイルとpdfファイルは別々にダウンロードされるので、「download.microsoft.comからvs2013mda.exeを実行または保存しますか?」ダイアログで [実行] ボタンをクリックしします。
    

   

5. インストールウィザードが起動してくるので、[Select All] にチェックが付いた状態で [INSTALL] ボタンをクリックし、インストールを行ってください。
    

   

   あとはウィザードの内容に従って作業を進めてください。
   なお、インストール作業は、必ずコンピューターをネットワークに接続した状態でインストールを行ってください。 
        
   

Muiti-Device Hybrid Appsがインストールするもの

Muiti-Device Hybrid Appsアドインのセットアップウィザードは、以下のサードパーティー製のものも同時にインストールします。

• Joyent Node.js — Apache CordovaのコマンドラインインターフェースとApache RipperエミュレーターをVisual Studioに統合します。
• Git CLI — プラグイン用にgitのURLを手動で追加する場合にのみ必要です。
• Google Chrome — Apache Ripperエミュレーターを動作させるのに必要です。
• Apache Ant 1.8.0+ — Android ビルドプロセスの依存関係として必要です。
• Oracle Java JDK 7 — 〃
• Android SDK — 〃
• SQLite for Windows Runtime — SQL接続をWindowsアプリに追加するのに必要です。(WebSQLのポリフィルプラグイン)
• Apple iTunes — Windows PCに接続されたiOSデバイスにアプリを展開するのに必要

アンインストールする際、Muiti-Device Hybrid Appsのインストーラーは、これれらのすべてを削除してはくれませんので、残ったものに関しては、それぞれ個別にアンインストールする必要がありますので、ご注意ください。

Muiti-Device Hybrid Appsを使った Android、iOSアプリの開発

Visual Studio 2013 で Cordoveを使用した開発を行うMuiti-Device Hybrid Appsプロジェクトを作成するには以下の手順を実行します。

1. Visual Studio 2013のメニュー [ファイル] – [新規作成] – [プロジェクト] を選択します。
2. [新しいプロジェクト] ダイアログボックスが表示されるので、同ダイアログボックス左のテンプレートツリーより[テンプレート] – [JavaScript] – [Muiti-Device Hybrid Apps ] を選択します。
    

   
   (作成するプロジェクトを選択するダイアログボックス)

3. 同ダイアログ中央のリストより、「Blank App(Apache Cordova)」を選択します。
    

   
   (Apache Cordova用プロジェクト)

4. ダイアログボックス下部の [参照] ボタンをクリックし、プロジェクトを保存する場所のパスをスペースや日本語を含まないものに変更し、[OK] ボタンをクリックします。
5. Visual Studio 2013 の IDEにプロジェクトがロードされるので、ウィンドウ右の [ソリューションエクスプローラー] からindex.htmlをダブルクリックします。
    

   
   (ソリューションエクスプローラーでの index.html の選択)

6. IDE のエディタにindex.htmlの内容が展開されるので、</body>の上に一行あけます。
   「h1」とタイプし、[Tab] キーを押下するとdivタグが挿入されるので、同タグ内に 「Hello World」と記述します。
   

   

7. ツールバーの実行ボタン横のリストから「Ripple – Nexus (Galaxy)」が選択されていることを確認し、クリックします。
    

   
   (実行ボタンのデバイスリスト)

8. Google Chromeが起動し、ウィンドウ内のRippleエミュレーターに実行結果が表示されます。
    

   
   (アプリの実行結果)

9. 実行を終了するにはVisual Studio 2013のツールバー上の [デバッグの停止] ボタンをクリックします。

   
   ([デバッグの停止]ボタン)

対象プラットフォームの切り替え

Muiti-Device Hybrid Apps プロジェクトの既定の対象プラットフォームは Android OS となっています。

ここでは、対象のプラットフォームをiOSに変更する手順を例に紹介します。

1. Visual Studio 2013 のメニュー [ビルド] – [構成マネージャー] をクリックします。
2. [構成マネージャー]  ダイアログボックスが表示されるので、[アクティブ ソリューション プラットフォーム]ドロップダウンリストから「iOS」を選択し、[閉じる] ボタンをクリックします。
    

   
   (開発対象プラットフォームの一覧)

3. 設定が完了するとツールバーの実行ボタン横のリストにiOSデバイスが表示されるので、任意のデバイスをクリックして実行します。

   
   (テスト可能なiOSデバイス一覧)

Google Chrome が起動し、ウィンドウ内の Rippleシミュレーターに実行結果が表示されます。
なお、Rippleエミュレーターは、Mac OS上で動作する iOSシミュレーターほど正確ではありませんので、アプリを提出する前には必ずMac OS上のiOSエミュレーターか、できれば実機でテストすることをお勧めします。
Visual Studio 2013から、Mac OS上の iOSシミュレーターにアプリを転送してリモート実行する方法については、以下のドキュメントの Remote Build & Simulation Agent for iOS [Optional]をご覧ください。


Document for Multi-Device Hybrid Apps for Visual Studio
http://go.microsoft.com/fwlink/?LinkID=39771

まとめ

Multi-Device Hybrid Appsアドインをインストールすると、Visual Studio 2013でCordovaを使用したAndroid、iOS、Windows 8、Windows Pnone 8.0のアプリを開発できるようになります。

Visual Studio 2013のエディションはProfessionalである必要がありますが、試してみたい、という方は90日間有効の試用版を使用してみるとよいでしょう。また、Macユーザーだけど Visual Studio 2013を使ってみたい、という方にはWindows 8.1 の試用版とあわせ、以下のドキュメントをご参照ください。

Mac に Windows 8と開発者ツールをインストールする

http://msdn.microsoft.com/ja-jp/library/windows/apps/jj680133

<備考>

今回の記事は以下をHTML5 Experts用に再編集したものです。

Visual Studio 2013でAndroid、iOSのアプリを開発するためのアドイン

Visual Studio 2013 へのMulti-Device Hybrid Appsアドインのインストール

Muiti-Device Hybrid Apps を使ったAndroid、iOSアプリの開発

現在最新のVisual Studio 2013のHTML5関連の開発機能全般に興味をお持ちの方は以下の記事をご参照ください。

Visual Studio 2013 Update 2でのHTML5関連の強化点

Sencha Touchは、スマートデバイス開発に特化したJavaScriptフレームワークです。米Sencha社によって開発されました。米Sencha社にはデスクトップ用のSencha Ext JSもありますが、それ以外にもHTML5（JavaScript/CSSを含む）を使ってWebアプリケーションを構築するための様々な開発ツール/サービスを展開しています。

開発環境はWindowsでもMacでも可能です。ここではMacでの開発手順を示しますが、Windowsでも代わりありません。Sencha Touchが動作するデバイスはiPad/iPhone/Windows Phone/BlackBerry/Android 2.3+等、そのほとんどをサポートしています（http://www.sencha.com/products/touch/features/）。

Senchaについて

Senchaは、単にJavaScriptフレームワークの一つというものではなく、アプリケーションフレームワークです。強力でかつ整理されていて、拡張も可能、メンテナンスも可能なアプリケーションを構築することができます。そのためエンタープライズ向きと言われるところでもあります。

特徴

• レイアウトマネージャによるデザイン設計
• UIコンポーネントが豊富
• Sencha独自のクラスシステム

Senchaには「Sencha Cmd」というYeomanと同じようなSCAFFOLDING TOOLがあります。プロジェクトを作成すると、動くアプリケーションがすぐにでき上がります。この動くアプリケーションからコーティングを開始します（画面のハードコピーとソースを添付します）。

画面の構成はJSONで行いますが、ビジネスロジックは当然JavaScriptで記載します。Senchaは画面構成は設定レベルですませ、エンジニアを業務アプリケーションにとって、最も重要なビジネスロジック部に注力させるよう仕組み作りを行っています。

Ext.define('SampleApp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title: 'Welcome',
                iconCls: 'home',

                styleHtmlContent: true,
                scrollable: true,

                items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                },

                html: [
                    "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                    "contents of <a target='_blank' href="app/view/Main.js">app/view/Main.js</a> - edit that file ",
                    "and refresh to change what's rendered here."
                ].join("")
            },
            {
                title: 'Get Started',
                iconCls: 'action',

                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Getting Started'
                    },
                    {
                        xtype: 'video',
                        url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                        posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
                    }
                ]
            }
        ]
    }
});

ライセンス形態

Sencha Ext JS/Sencha Touch共に3つのライセンス形態が存在しています。

• オープンソースライセンス(GPL v3)
• 商用ライセンス
• 商用OEMライセンス

GPL v3ライセンスのもと、自由に利用することが可能ですが、商用アプリにSenchaを利用する場合は、商用ライセンス（開発者ライセンス）を購入する場合がほとんどです。

では、具体的に開発手順を追って説明します。

開発手順

Sencha Touchは100% PureなHTML5アプリケーションですが、カメラなどのハードウェアリソースを利用する場合にはPhoneGapもしくはCordovaを利用します（PhoneGap/Cordovaについては、こちらの記事も参考にしてください）。開発手順の大まかな流れを以下に示します。

• Sencha Touchアプリケーション開発の準備
• Sencha Touchプロジェクトの作成
• Sencha TouchとPhoneGapもしくはCordovaとの連携
• プラグインの追加およびコーティング
• エミュレータもしくは実機で実行

Sencha Touchアプリケーション開発の準備

Sencha Touchでアプリケーション開発を行うための準備としては、以下の2つが必要です。

• Senchaコマンドのインストール
• Sencha Touch Software Development Kitのダウンロード

Sencha Touch SDKをダウンロードしたら「~/Library/Sencha/」の中へ保存し展開します（習慣的に「~/Library/Sencha/」を利用しますが、どこでもかまいません）。SDKはZIP圧縮されていますので、unzipコマンド等で解凍します。

これに加え、Androidエミュレータ、iOSエミュレータ、PhoneGap、Cordovaなどの開発ツールも必要になりますので、必要なものをインストールしてください（それらのインストール手順については説明を割愛します）。

Sencha Touchプロジェクトの作成

Senchaでプロジェクト開発をする際、一番最初に実行するコマンドは以下のsenchaコマンドです。

$ sencha -sdk [使うsdkのディレクトリを指定] generate app [アプリケーション名] [アプリケーション開発ワークディレクトリ]

今回は、以下のように実行しています（任意の空ディレクトリ上で実行してください）。

$ sencha -sdk ~/Library/Sencha/touch-2.3.1 generate app SampleApp ./my_sencha_touch_app

このコマンドを実行すると、以下の様なファイルやディレクトリが作成されます。

Sencha TouchとPhoneGapもしくはCordovaとの連携

次に、Sencha TouchアプリケーションとPhoneGapを連携させます。そのためにsencha phonegap initというコマンドを使います。

$ sencha phonegap init com.albatrosary.SampleApp SampleApp

Cordovaを利用する場合はsencha cordovaを用います。

$ sencha cordova init com.albatrosary.SampleApp SampleApp

sencha phonegapコマンドを実行することによりPhoneGap/Cordova用のセットアップが行われ、phonegapディレクトリ、phonegap.local.propertiesファイルが生成されています。

プラグインの追加およびコーティング

作成するアプリケーションでは、モバイルデバイスが備えるカメラを使用するため、PhoneGapプラグインの導入を行います。プラグインを追加するにはphonegapコマンドを使います。
カメラ用のプラグインをインストールするには、プロジェクトディレクトリ内にあるphonegapディレクトリに移動し、プラグイン追加のコマンドを実行してください。

$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

次にカメラを利用するためのアプリケーションをコーディングします。下記サンプルコードをapp/view/Main.jsに記載します。

Ext.define('SampleApp.view.Main', {
    extend: 'Ext.Panel',
    xtype: 'main',
    requires: [
        'Ext.Button',
        'Ext.Img'
    ],
    config: {
        layout: {
            type:"vbox",
            pack:"center",
            align:"center"
        },
        items: [
            {
                xtype: "image",
                src: "http://peatix.com.new.s3.amazonaws.com/user/229914/logo-html5j_200w.png",
                width: 200,
                height: 200
            },
            {
                xtype: "button",
                text: "Photo",
                handler: function() {
                    function success(image_uri) {
                        var img = Ext.ComponentQuery.query("image")[0];
                        img.setSrc(image_uri);
                    }

                    function fail(message) {
                        alert("Failed: " + message);
                    }

                    navigator.camera.getPicture(success, fail, 
                        {
                            quality: 50,
                            destinationType: navigator.camera.DestinationType.FILE_URI
                        }
                    );
                }
            }
        ]
    }
});

対象となるデバイスを選択するため設定ファイル「phonegap.local.properties」を変更します。今回はphonegap.platformとしてAndroidを指定しています。

phonegap.build.remote.password={password}

phonegap.build.remote以降の設定内容はリモートビルドする場合の指定です（リモートビルドはCordovaの場合には存在しません）。

html5jのロゴをamazonaws.comから取得していますので「my_sencha_touch_app/config.xml」にアクセス許可のためにaccessタグのoriginとして「http://peatix.com.new.s3.amazonaws.com/*」を追加します。

origin="http://peatix.com.new.s3.amazonaws.com/*"

エミュレータもしくは実機で実行

$ sencha app build -run native

このコマンドは、実機がUSB接続されている場合は実機にモジュールが転送されますが、実機が接続されていない場合にはエミュレータが起動します。実機を接続しないで動かしてみます。

起動中の画面

起動完了

続いて、実機をUSB接続しコマンドを実行します。アプリケーションが転送されますので実行確認を行いました。実機のスクリーンショットを添付します。

適用事例

今回ご紹介させていただいたSencha Touch、Sencha Ext JSは様々なところで利用されています。ご参考までにわずかではありますが、いくつかの事例をご紹介します。

PhoneGapの概要と歴史

PhoneGapとは、ハイブリッドアプリのフレームワークです。つまり、HTML5コンテンツをラッピングして、いろんなデバイスやOSでネイティブアプリとしてインストール可能なアプリケーションを作成できる技術です。元々は2009年にiPhoneDevCamp（ハッカソンのようなイベント）で生まれ、Nitobiという会社によって開発されました。2011年にアドビがNitobiを買収し、同時にPhoneGapのソースコードをApache Foundationに寄付して、Apache Cordovaというオープンソースプロジェクトが作られました。

現在では、Cordovaという下層のフレームワークの上に、アドビのサービスに連携するPhoneGapのレイヤーが乗っています。しかし使い方はほぼ同じであるため、PhoneGapとCordovaは大体同じものという認識で問題ありません。

ゼロ（環境設定）からHello Worldまで

PhoneGap/Cordovaは、Node.jsで使うコマンドラインアプリケーションです。ゼロから始める手段は下記の通り：

1. Node.jsをインストールして、ターミナルで使えることを確認します：

> node -v
v0.10.13
>

2. Node.jsのパッケージマネージャー npm（上記ステップでインストールされます）を利用して

cordova

をインストールします：

> npm install -g cordova
npm http GET https://registry.npmjs.org/cordova
npm http 200 https://registry.npmjs.org/cordova
...
>

※ Macでは、多くの場合には

sudo

> sudo npm install -g cordova
Password: 
npm http GET https://registry.npmjs.org/cordova
npm http 200 https://registry.npmjs.org/cordova
...
>

3.

cordova create

のコマンドを使って、新規プロジェクトを作ります。コマンドのパラメータとして、フォルダ名、アプリID、アプリ名を渡します。

> cordova create testapp com.example.test "Test App"
Creating a new cordova project with name "Test App" 
and id "com.example.test" at location "~/testapp"
>

4. 新規プロジェクトのフォルダに移動します：

> cd testapp/
>

5.

cordova platform add

のコマンドで、作りたいアプリのプラットフォームをプロジェクトに追加します。この例ではAndroidを使います：

> cordova platform add android
Creating android project...
...

6. デバイスをマシンに接続して、アプリのビルドと動作確認します。

> cordova run android
Generating config.xml from defaults for platform "android"
Preparing android project
...

cordova run ...

cordova build

cordova emulate

cordova help

注意：ビルドを行うためには、各プラットフォームの仕組みが必要となります。例えばAndroidの場合はAndroid SDK、iOSの場合はXCodeのインストールが完了している必要があります。SDK不要のビルド方法については後ほど説明します。

PhoneGapアプリの構成について

cordova create

1. ルートにある

   config.xml

   は、アプリのメタデータ（アプリ名など）を定義します

2. /www

   フォルダはHTMLアプリのソースです。

   cordova create

   によって参考用のサンプルコードが作成されますが、編集・削除・上書きを自由にします。このフォルダの

   index.html

   がアプリの初期画面になります。

上記2点以外のコンテンツは、編集する必要は通常ありません。

ところで、新規プロジェクトに生成される参考用の

index.html

cordova.js

script

cordova.js

cordova.js

プラグインについて

標準のHTMLでは、デバイスの機能（カメラロール、ノーティフィケーションなど）にアクセスできない場合があります。その際は、PhoneGapプラグインを使います。基本的な手順は：

1. Pluginレポジトリでプラグインを探します。この例ではノーティフィケーションのプラグインを使います。
2. ターミナルで

   cordova plugin add [ID]

   で追加します：

   > cordova plugin add org.apache.cordova.dialogs
   Fetching plugin "org.apache.cordova.dialogs" via plugin registry
   ...

3. アプリソースのJSから、プラグインのAPIを呼びます：

   navigator.notification.prompt("hoge");

JavaScriptで定義されたプラグインのAPIが呼ばれると、各OSの対応するネイティブコードが各デバイスの機能を呼び出す仕組みになっています。その際、デバイス機能がAndroid/iOSなどで仕組みが違っていても、プラグインのインターフェイスは共通なのでPhoneGapアプリのソースを別バージョンに分ける必要がありません。しかしデバイス側の機能がプラットフォームによって実装が変わる場合もあります。その場合は、アプリの動作を各OSの挙動に合わせる必要があったりしますので、各プラグインのドキュメンテーションにある「Quirks（方言）」セクションに目を通しましょう。

クラウドで行うアプリ作成サービス「PhoneGap Build」

 アプリのビルドを行う際に、各プラットフォームのSDKが必要と説明しましたが、それが難しい場合もあります。例えばiOSのSDKはMacでしか動きませんので、Windowsでは利用不可能です。

この場合、アドビのクラウドビルドサービスPhoneGap Buildの利用をオススメします。Android、iOS、そしてWindows 8アプリをSDKの準備なしでビルドできます。PhoneGap Buildの使い方で前述の解説と異なるところは主に次の２点です。

1. cordova

   ではなく

   phonegap

   コマンドを使用
2. クラウド側で実行するコマンドに

   remote

   というキーワードを追加

具体的には次のような流れで利用できます：

> sudo npm install -g phonegap
...
> phonegap create test com.example.test2 Test
...
> cd test
> phonegap remote build android

初回はPhoneGap Buildのユーザ名、パスワードを要求されます。既存のAdobe IDでログインするか、アドビのWebサイトでAdobe IDを新規作成（無料）してください。その後、アプリがクラウド側でビルドされます。アプリの確認、インストールなどをPhoneGap Buildサイトでできます。

まとめ

PhoneGap/Cordovaは非常に軽量なフレームワークです。HTML5コンテンツのアプリ化に特化しており、他フレームワークとの競合も少なく、比較的導入し易いフレームワークだと言えます。HTMLコンテンツからモバイルアプリまでの最短経路だと思いますので、ぜひお試しください！