「Web技術でアプリ開発2016」ということで、この記事ではPCからIoT機器まで、Windows 10プラットフォームであればデバイスを問わず動作する ユニバーサルWindowsプラットフォーム (以下、UWPと記述) 上で動作するアプリについて紹介します。

このアプリはもちろんHTML、CSS + JavaScriptといったWeb開発者が慣れ親しんだ技術で開発することができます。また、インターネットでホストされているWebページをラップしてアプリ化することができます。

UWPをターゲットとしたアプリ開発では、新規開発はもちろん、既存のWeb資産を利用してアプリを開発し、さまざまな Windows 10デバイスに横断的に機能を提供することができます。

この記事では、UWPがどのようものであるか、UWP上で動作するアプリの開発方法と公開方法について紹介します。

ユニバーサルWindowsプラットフォーム (UWP)アプリ とは

Windows 10では、PC、モバイル、XBOX、Surface Hub、HoloLens、IoT 機器といったデバイスファミリーで共通のカーネルを採用しており、これによりアプリケーションのプラットフォームが統合されました。

このWindows 10デバイスファミリーで統合されたプラットフォームをユニバーサルWindowsプラットフォーム (Universal Windows Platform : UWP)と呼びます。

UWP用のアプリは、OSのバージョンではなくデバイスファミリーを対象としますが、UWPのコアAPIはすべてのWindowsデバイス ファミリーに共通であり、アプリにコアAPIのみを使う場合は、そのアプリはいずれのWindows 10デバイスでも動作します。

つまり、固有のデバイスに縛られることなく、目的のデバイスファミリーをターゲットして再コンパイルすることでPCから IOT基板まで、さまざまな機器に配置し、動作させることができるのです。

Webの開発者からみればハードルが高そうなIoT機器用のアプリもHTML、CSS + JavaScriptで開発することができます。

たとえば、以下の記事では、Raspberry Piとディスプレイをマジックミラーの裏に配置し、洗面台の鏡の中に情報を表示するアプリを紹介していますが、この上表を表示するアプリはHTML、CSS + JavaScriptを使用したUWPアプリです。

• Building an IoT Magic Mirror with Hosted Web Apps and Windows 10

また逆に、拡張機能SDKにより特殊なデバイス用のアプリも開発することもできます。

UWPアプリのメリット

UWPアプリのメリットは、前述したようにデバイスファミリーを横断したアプリの開発が容易であるということもありますが、それ以外でも、複数の言語で開発することができることや、UWPが公開する豊富なAPIを直接使用できるということがあるでしょう。

UWPアプリのロジック部分はC#、Visual Basic、C、C++、JavaScriptといった開発言語で記述することができ、UI部分は XAML (C#、VB、C、C++)、DirectX (C、C++)と、HTML/CSS (JavaScript)で記述することができます。

UWPのリソースにアクセスするためのWindowsランタイム(WinRT) APIには、各言語ともWindows名前空間を空間を介して接続することができます。

WinRT APIは Windows 10の予定表や連絡先、タイルといったOSが持つソフト的なリソースからBluetoothやWi-Fi、USBといったハード的リソースへのアクセスなど、幅広く機能を提供します。そしてこれらのAPIはUWPでサポートされている言語であれば、言語を問わず利用することができます。

Windowsランタイムがアプリ向けに公開しているAPIのついての詳細は以下のドキュメントをご参照ください。

• Windows ランタイム アプリのWindows APIリファレンス

開発環境

UWPアプリの開発はWindows 10とVisual Studio 2015もしくは、Apache Cordovaを使用して行うことができます。

Visual Studio 2015とApache Cordovaの使い分け

Visual Studio 2015では、それ単体によるUWPアプリの開発はもちろん、Visual Studio Tools for Apache Cordova を使用してiOS、Android、UWPアプリの開発が行えます。

つまり、Visual Studio 2015ではそれ単体とApache Cordovaのどちらかを使用してUWPアプリを開発することができますが、これは単に機能が重複しているということではなく、以下のように状況や目的に合わせて使い分けるためにあります。

なお、Visual Studio 2015は有償製品ですが、非営利目的やオープンソースソフトウェアの開発であれば、無償の Visual Studio Community　を使用することができます。

Visual Studio Communityは、機能的にはVisual Studio Professionalと同等であり、クロスプラットフォーム開発をサポートしています。

開発できるアプリの形式

HTML、CSS + JavaScriptで開発できるUWPアプリの形式は、大まかにUI部分をクライアントサイドにインストールするパッケージ型と、ネットワークにホストされているコンテンツをラップしたホスト型の2つのタイプに大別されます。

一部をWebViewコントロールで覆ったものもVisual Studioのプロジェクトテンプレート上はパッケージ型に含まれます。

パッケージ型、ホスト型アプリにはそれぞれ特徴とメリットがあります。

パッケージ型アプリは、動作に必要なリソースをクライアントサイドにインストールできるので、アプリの作りによっては、動作にサーバーサイドのリソースを必要としない完全にオフラインのアプリを作ることも可能です。

ホスト型のアプリの場合は、ネットワーク上に公開されているコンテンツを表示しているので、画面や機能を変更する際でも再インストールの必要はなく、常に最新の情報を提供することができます。また、Webサイト向けのコンテンツの開発と作業が一元化できます。
ホスト型のアプリはその性質上オンラインでの使用が大前提となりますが Progressive Web Apps の実装が可能になればこういった制限も大幅に緩和され、パッケージ型よりもホスト型が選択されるケースが増えることでしょう。

パッケージ型のアプリはもちろん、ホスト型のアプリも、適切なセキュリティ設定を行うことにより、Windowsランタイム API にアクセスできます。

たとえば、以下の記事では、Webサイトに公開されているページに記述されているJavaScirptからNFCデバイスにアクセスする方法について紹介しています。

• UWPのHosted WebアプリからのNFCデバイスへのアクセス

開発方法

Visual Studio 2015に用意されたプロジェクトテンプレートを使用してプロジェクトを作成し、コーディングしていきます。

HTML、CSS + JavaScriptで開発するUWPアプリに用意されているプロジェクトテンプレートの種類は以下のとおりです。(2016年9月現在)

開発を開始するための具体的な手順について、以下のチュートリアルを参照してください。

• JavaScript とHTMLのチュートリアル
• C#とXAMLのチュートリアル
• C++とXAMLのチュートリアル

配布方法

UWPアプリの公開は、一般的にはWindowsストアを介して行われます。

Windowsストアにアプリを公開するには、Windowsデベロッパーセンターのダッシュボードから、appx形式にパッケージングしたアプリを提出します。Windowsストア側で安全性を含め様々な審査が実施され、合格すると公開されます。

UWPアプリをWindowsストアに公開するまでの、開発者アカウントの作成からパッケージの提出、支払いの受け取り (販売した場合) までの具体的な方法については以下のドキュメントを参照してください。

• Windowsアプリの公開

会社組織のみの利用を想定した場合など、Windowsストアで公開を希望しない場合にはサイドローディングという方法を使用して、管理化にあるデバイスにUWPアプリを直接インストールすることができます。

サイドローディングの具体的な方法については以下のドキュメントを参照してください。

• DISM を使ったアプリのサイドローディング

収益モデル

Windowsストアでは提出したアプリを販売することができます。また、アプリ内の課金も可能です。開発者Windowsストアが用意するさまざまな仕組を利用して収益を上げることができます。

現在Windowsストアで収益を上げるには、以下の3つの方法があります。

1. アプリそのものの販売
2. アプリ内課金(In-App purchase : IAP)
3. アプリ内広告

これら収益に関する詳しい内容は、以下のドキュメントを参照してください。

• アプリの価格と使用可能状況の設定
• IAPの申請
• 広告による収益獲得

まとめ

この記事ではWindows 10から採用されたユニバーサルWindowsプラットフォーム用のアプリ(UWPアプリ) について紹介しました。

UWPアプリは Window 10デバイスファミリーに対し横断的にアプリを開発できます。そのためPC、スマートフォンはもちろん、Web開発者からは技術的に遠いIoTデバイス向けのアプリも使い慣れた HTML,CSS + JavaScriptで開発することができます。

Continuumにも対応しているため、対応スマートフォンをテレビやディスプレイに接続した際にユーザーにデスクトップエクスペリエンスを提供することもできます。

Webブラウザー上で動作するアプリはもちろん、他のハイブリット アプリ用フレームワーク向けのコンテンツでも、HTML、CSS + JavaScriptを使用して作られているのであれば、特別なことをしていない限りはUWPアプリへの移植はそれほど難しくはありません。

新規での開発はもちろん、既存のアプリの新たな市場獲得のための移植先としても検討してもいいかもしれません。

UWP開発についてのより詳しい情報は以下をぜひご覧ください。

• ユニバーサル Windowsプラットフォーム(UWP)向けアプリの開発
• ユニバーサル Windowsアプリの開発 – Windowsアプリの開発
• ユニバーサルWindows プラットフォームアプリ(UWP)のデザイン – Windowsアプリ開発

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

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

HTML5を活用したハイブリッドアプリ開発について、Web業界を代表するエキスパート陣が様々な観点からレポートをお届けした「ハイブリットアプリ開発最前線」特集。

最後のレポートは「ハイブリッドアプリ開発、ホントのトコロ」と題し、第48回HTML5とか勉強会「ハイブリッドアプリ開発最新動向」の懇親会で行われたぶっちゃけトーク対談を再現レポートします。

▲登壇者（左から）：株式会社ニューフォリア 畠田喜丈さん、アシアル株式会社 久保田光則さん、AngularJS Japan User Group管理人 金井健一さん、Google Developer Expert（Chrome）吉川徹さん
モデレーター：HTML5 Experts.jp編集長 白石俊平

ハイブリッドアプリ開発にしてよかったことは？

白石：ハイブリッドアプリ開発が注目され出してもう数年が経つんですが、まだくすぶってる感があると思うんです。今日は本音でいろいろ聞けたらと。まず、ハイブリッドアプリ開発にしてよかったと思うことを聞かせてください。

久保田：僕はハイ・フィデリティ（忠実度の高い）なプロトタイプをさくっと作れることですね。アプリの機能は動かないけど、アプリのユーザーインターフェイスやインタラクションがわかる。動きやさわった感じが確かめられるし、アプリケーションの見た目の“ガワ”を作るのが断然早くなります。

これがいいアプリなのか判断に迷うフェーズでも、実際のUIの“ガワ”をがっちり作ることで、高い確度で確かめることができる。それに、クロスデバイス,クロスプラットフォームでがしがし動くので、アプリのUIを確かめるのに役立っています。サービスの受託でやってたときに、お客様にもそんなに早くできるのかって驚かれたこともありますね。

アシアル株式会社　久保田 光則さん

白石：ところで、ここまでクロスプラットフォームでの移植性の話があまり出てきていませんね。ハイブリッドの利点といえばそこだと思っていたので、意外。

畠田：ああ、移植性については、まずありきのつもりで話してました。

久保田：そうですね。ちなみに私はAndroid版は動作が遅いので、先に作るようにしています。前にiOSから作ってAndroidに移植したら遅くて大変な目に合ったことがあって…。

白石：ちなみに最近は、Androidは2.3以上をターゲットにして開発しているんですか？まだ2.2もスコープに入ってるのかな。

畠田：2.2が要求仕様書に入ってるところはまだ多いですね。ただ「端末買い換えが2年だからそこは切り捨てましょう」って、そこは削ってもらうように説得しようと試みますけどね（笑）。

吉川：私は一エンジニアとしての視点から、ハイブリッドアプリでよかった点をお話すると、やはりWebエンジニアがJavaやObjective-Cが書けなくても、AndoroidやiOSアプリの仕事が受けられることですね。最近はWebのコードで書いて、Cordovaでコンパイルすればアプリが作れる。仕事の幅が広がって楽しいです。

──ここで会場から質問が寄せられた

Q.ハイブリッドアプリというと移植性の話もあるけど、クックパッドの事例が成功として挙げられます。ユーザーを絞り込んだABテストが容易にできるだけではなく、デブロイの早さなどを考慮してハイブリッドアプリにしていると聞いたことがあるのですが、そのほかにハイブリッドアプリにしかできないことってありますか？

畠田：ハイブリッドアプリって遅いんじゃないか？というハイブリッドアプリに否定的な声に対抗できるので、クックパッドさんの成功事例は我々にとってありがたいですね。

詳しくは存じ上げないのですが、クックパッドさんにとっては、新機能のデプロイまでの時間を短くするための、現時点での最善策がハイブリッドアプリなのではないでしょうか。

株式会社ニューフォリア　畠田喜丈さん

ハイブリッドアプリで開発してドはまりしたことある？

白石：ところで、ハイブリッドアプリでドはまりした経験はありますか？デバックが全然できなかったとか、移植したら動作が違うとか。

金井：端末によって同じCSSなのに見た目が全然違うのもそうですが、JavaScriptの挙動も違うところ。一方の端末は滑らかに動くのに、別の端末だとカクカクだったり、もっさりしたり。とにかく端末ごとに挙動が違うのは予想できないので、トライ＆エラーを繰り返すことになりましたね。

html5j Web先端技術味見部部長　AngularJS Japan User Group 管理人　金井 健一さん

標準化の動きはどうなってる？

白石：CordovaやニューフォリアのAPI、Chrome AppsのAPIなど、モバイルデバイス向けのWeb APIは細分化しつつありますが、これって標準化できないものなんでしょうか。

──ここで、白石さんが突然会場の羽田野太巳さんを指名

羽田野さん、現状ってどんなかんじなんですか？

羽田野：最新情報はあまりよく知らないんだけど、統一はしばらくないんじゃないかと思います。もちろんいつかは一緒にするために施策を立てているとは思いますが、現在はFirefox OS/Windows 8/Chrome Appsなど、各ベンダーが独自にAPIを作り込んでるのが現状です。

でも、いつか標準化してくれるからそれまで開発を待とうなんてベンダーはないわけで。いろいろAPIが出てきて、いろんな事例を経験して、みんなが試していいものが残っていくし、ある意味健全です。だからまだまだ時間がかかる。個人的にはベンダーがそれぞれ独自のAPIで作っていくのは大歓迎ですね。

これまではネイティブでしかできなかったことが、JavaScriptで何でも開発できるようになってきました。今はばらばらだけど、一つのプログラム言語だけでできるようになりつつあると思います。これはまだデファクトではないけど、コンソーシアム標準的には前向きに捉えていいのではないでしょうか。

有限会社futomi 代表取締役、株式会社ニューフォリア　取締役　最高技術責任者 羽田野 太巳さん

HTML5でデバイスごとの互換性や移植性がとれてない？

白石：ところで、HTML5ならデバイスごとの互換性や移植性がとれると言われていたのに、結局選ぶプラットフォームに依存していて、互換性がとれてないですよね？その辺はいかがでしょうか。

HTML5 Experts.jp編集長　白石 俊平

さまざまなデバイスでWeb技術が果たす役割

白石：これからさらに様々なデバイスが登場し、Web技術が果たす役割も増えていくと思います。皆さんはどのようにお考えですか？

吉川：いろんなデバイスにWebの技術が広がっていくのはうれしいですね。Webの進化のスピードに合わせて、デジタル家電のUIやデザインの進化も加速するはず。期待したいです。

畠田：ユーザーインターフェイスもだんだんWebに準じたものになり、今まで古くさかったデザインやUIが洗練されたものになっていくはずです。Webで活躍しているエンジニアやデザイナーたちによって使いにくいインターフェイスやマニュアルなどが革新されていく。誰でも使えるようになる世界が早く来てほしい。

白石：ただ僕が心配しているのは、ウェアラブルなデバイスなど、デバイスの小型化がどんどん進んでいる現状では、デバイスの「非力化」も進んでいるんじゃないかと思うのです。そうなると、比較的高いCPUパワーを必要とするWeb技術は敬遠されて、ネイティブが当たり前になっちゃうんじゃないかと。Webブラウザを搭載しないデバイスも増えてきそうです。

吉川：それは心配ないんじゃないでしょうか。ハードウェアの進化があったからこそ、ウェアラブルが出てきたはず。今後もハードウェアの進化は続くでしょう。

例えば、昔のインターネット回線が遅かった時代は動画なんてありえませんでしたが、回線が早くなったからこそ品質が良くなって動画サービスがブレイクした。要は、環境次第で変わるということです。今は、ハードウェアの性能が上がってきているからこそ、Webを組み込んでも大丈夫じゃないかという流れですね。未来はそんなに暗くはないんじゃないかな。

Google Developer Expert（Chrome）　吉川 徹さん

さらに会場からは、HTMLとJavaScriptとCSSで書くから重くなるのではないかという声も。JavaScriptだけにすれば軽くなるのではという意見や、3つ以外の言語や新たなレンダリングエンジンが生まれる可能性、WebGLやFamo.usなどに対する期待の声も多く聞かれました。

未来のデバイスとWeb技術にも夢を馳せながら語り合った対談もここで終了。Webとネイティブのメリット、デメリットを合わせ持つハイブリッドアプリが、今後デバイスやWeb技術の進化とともにどう技術的課題をクリアしていくのか。編集部では今後も最新事情をお伝えしていきたいと思います。

★今回の登壇者が執筆したハイブリッドアプリ特集記事もぜひ合わせてご覧ください。

• 久保田光則さん執筆：HTML5ハイブリッドアプリ開発、最新動向はやわかり！
• 金井健一さん執筆：キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！
• 畠田喜丈さん執筆：PhoneGapとは一味違う！純国産ハイブリッドアプリフレームワーク、「アプリカン」事始め
• 吉川徹さん執筆：Chrome AppsをモバイルでもーChrome Apps on mobileー
• ハイブリッドアプリ開発最前線：特集レポート一覧はこちら

ハイブリッドアプリ開発の手法のひとつして、Chrome Appsをモバイルアプリに変換するApache CordovaベースのChrome Apps on mobileについて解説します。これによって、Chrome Appsとして作成したWebアプリがAndroidやiOS向けのネイティブアプリとして公開、インストールすることができるようになります。

Chrome Apps on mobileは、まだデベロッパープレビュー版で、GitHub上でプロジェクトが公開されています。まだデベロッパープレビュー版ということで、Chrome AppsのすべてのAPIを利用できるわけではありませんが、順次対応される予定です。本記事では、そもそも「Chrome Appsとは何なのか？」というところから、Chrome Apps on mobileの開発環境の構築やビルド、実行までひと通り見ていきます。

Chrome Appsとは？

Chrome Appsとは、単にChromeで動作するWebアプリというわけではなく、Chromeウェブストア上で配布・販売できるアプリケーションプラットフォームです。通常のWebアプリをChrome Appsとしてそのまま公開することもできますし（若干のマニフェストファイルを書く必要はあります）、Chromeに実装されている高機能なAPIを利用して、よりリッチなWebアプリを作ることもできます。

Chromeウェブストア

例えば、通常のWebアプリをChrome Appsとして公開する場合（Chrome独自のAPIを利用しないケース）、次のようにマニフェストファイル「manifest.json」とバックグラウンドで動作するJavaScriptファイル「background.js」を記述し、Webアプリのファイル一式と同梱することによって簡単にChrome Appsとして動作させることができます。

ChromeAppSample （任意のフォルダ）
      ├── index.html （Webアプリ本体一式を同梱する）
      ├── manifest.json
      └── background.js

{
  "name": "Chrome App Sample",
  "version": "0.1",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    'bounds': {
      'width': 400, 'height': 500
    }
  });
});

また、Chrome Apps上では、独自のChrome APIを使って、さらにリッチなWebアプリを作ることも可能になっています。Chrome Appsの作成方法についてのより詳細な情報は、公式ページの「What Are Chrome Apps?」にまとまっていますので、参考にしてください。簡単に試してみたいという場合は、「Create Your First App」を試してください。

開発環境の構築

まずは、Chrome Apps on mobileの開発環境を構築します。Chrome Apps on mobileは、iOSのバージョン6以降、Androidのバージョン4.0以降を対象にしています。どちらを対象にするかによって必要なツール・ライブラリが異なりますので、対象に合わせて準備しましょう。いずれの環境でも必要なのは、Node.js (バージョン0.10.0以降)です。既にインストールされている場合は必要ありませんが、まだの場合はWindows、Mac（またはLinux）いずれでも、こちらからダウンロードしてインストールしておきましょう。さらに環境によって次のようなツール・ライブラリが必要になります。

Androidの場合

• Java JDK7 以降
• Android SDK 4.4.2 以降（ sdk/tools と sdk/platform-tools をPATHに追加する）
• Apache Ant（ apache-ant-x.x.x/bin をPATHに追加する）

iOSの場合

• Xcode 5 以降
• ios-deploy（iOSデバイスにデプロイする際に必要です）
  > npm install -g ios-deploy
• ios-sim（iOSシミュレーターにデプロイする際に必要です）
  > npm install -g ios-sim`

※ Appleストアに公開する場合は、iOSデベロッパー登録が必要です

ccaコマンドラインツールのインストール

最後に、Chrome Apps on mobileのツールとしてccaコマンドラインツールをインストールします。

> npm install -g cca

既に、ccaがインストール済みでアップデートをする場合は、npm update -g ccaを実行しましょう。ccaのインストール後に、次のコマンドでAndroidおよびiOSの開発環境が揃っているか確認できます。

Android SDK detected. Xcode detected.

「Android SDK detected.」と「Xcode detected.」という結果が表示されればOKです。片方のみの環境であれば、いずれか片方だけが表示されます。例えば、Android環境のみの場合は、「Android SDK detected.」だけが表示されます。

プロジェクトの作成とビルド、実行

開発環境の構築が終わったら、実際にプロジェクトを作成してビルド、実行してみましょう。ccaコマンドツールを使って次の手順で行います。

プロジェクトの作成

• 新規にプロジェクトを作成する場合 > cca create ChromeSampleApp カレントディレクトに ChromeSmapleApp というフォルダが作成され、プロジェクトが作られます。

• 既にあるChrome Appsを元にプロジェクトを作成する場合

既にChrome Appsを作成済みであれば、オプションでそれを指定します。指定方法には、次の2種類があります。

> cca create ChromeSampleApp --link-to=path/to/manifest.json

作成済みのChrome Appsのマニフェストファイルの場所を指定します。 path/to/を皆さんの環境に合わせて置き換えてください。--link-toオプションでは、指定したフォルダへのシンボリックリンクでプロジェクトが作成されます。

> cca create ChromeSampleApp --copy-from=path/to/manifest.json

--copy-from オプションでは、指定先のフォルダをコピーしてプロジェクトが作成されます。

ビルド、実行

プロジェクトの作成が終わったら、いよいよビルドし、実行してみます。こちらも非常に簡単で、プロジェクトのルートフォルダ上で、次のようにccaコマンドを実行するだけで済みます。

• Androidのエミュレータで実行

> cca emulate android

※ Androidのエミュレータが設定されていない場合、android avdコマンドでセットアップする必要があります

• Androidの実機で実行（デバイスをUSBデバッグモードで接続します）

> cca run android

• iOSのシミュレーターで実行

> cca emulate ios

• iOSの実機で実行（デバイスをUSBで接続します） > cca run ios

それぞれの環境に合わせて、cca emulate または、cca runで簡単にビルド、実行することできます。単純にビルドするだけであれば、 cca buildで可能です。是非試してみてください！

iOSシミュレーターで実行

Chrome App Developer Tool

Chrome Apps on mobileには、実際のデバイス上でChrome Appsを動作させつつ、開発（修正）＞ビルド＞実行のイテレートを高速に回すことができる開発ツール「Chrome App Developer Tool」が用意されています。

Chrome App Developer Toolは、モバイルアプリですので、実機にインストールする必要があります。Androidの場合は、こちらからapkファイルをインストールして使用することができます。（iOSの場合は、ソースコードからビルドする必要がありますので、公式サイトの「Building from Source (iOS or Android)」を参考にインストールしてください）

Androidの場合、Chrome App Developer ToolをインストールしたデバイスをUSBデバッグモードで接続し、次のようにコマンドを実行します。

> adb forward tcp:2424 tcp:2424

cca push

adb forwardコマンドは、デバイスを接続後に1回だけ実行します。その後cca pushコマンドで、Chrome App Developer Tool上でChrome Appsが動作します。これは、ビルドせずにChrome AppsをそのままChrome App Developer Toolに転送して動作するため非常に高速です。

Chrome App DevTool起動

cca push後

Chrome App Developer Toolで動作しているChrome Appsを終了するには、2本指で同時にダブルタップします。

また、cca push --watchコマンドでプロジェクトに変更があれば自動的にpushするということも可能です。ソースコードを修正しながら実機で逐次、動作確認できるのでおすすめです。

まとめ

Chrome Apps on mobileは、デベロッパープレビュー版ということで、まだまだこなれていない面もありますが、Chrome Appsがそのままモバイルで動作するということで非常に楽しみなプラットフォームです。単なるWebアプリをモバイルアプリにするのであればPhoneGapなどの方が簡単ですが、Chrome APIを利用したパワフルなChrome Appsを作って、Chrome Apps on mobileにチャレンジしてみてください！

現在対応している・今後対応するChrome APIのステータスは、こちらから確認することができます。高機能なAPIの多くは、これからの対応に期待ですが、ぜひ楽しみにしていただきたいと思います。

アプリカンは、純国産のハイブリッドアプリフレームワークです。いつも使っているエディタだけでアプリが作れるので、開発環境のOSも選びません。

アプリカンは2013年末に公開され、ハイブリッドアプリフレームワークとしては後発ですが、他のフレームワークとは異なるアプローチとして、様々なパートナー企業のサービスのSDKを組み込み、AR機能や、位置情報連動サービスなど複雑なサービスオプション機能を JavaScriptから簡単に呼び出せるようになっています。

基本は無料で利用できますが、前述の高機能なオプションを使ったり、無料ビルドしたアプリに表示される広告バナーを外す場合には有料となります。

アプリカンの開発に必要なもの

• エディタ
• 好奇心

アプリカンの開発には、IDEを用意する必要はありません。 テンプレートとなる web.zip をアプリカンのサイトからダウンロードして開発マシン上で解凍し、そのフォルダの中に HTML5、JavaScript、CSSを作り込んでいき、できあがったものを zipで圧縮して、サーバーにアップロードするだけです。

デバッグは、iOS、Androidそれぞれのアプリマーケットからダウンロードできる アプリカンシミュレータで行います。

Hello アプリカン World

それでは実際にアプリカンでお約束のHello Worldを作ってみましょう。

アプリカンでのアプリ作成は3ステップ

1. アプリカンサイトにユーザ登録
2. HTML5、CSS、JavaScriptでコンテンツを作成
3. ZIP圧縮して、アプリカンサイトにアップロード

この3ステップで、iOSアプリとAndroidアプリを同時に開発することが可能です。

1. アプリカンにユーザ登録を行う。

アプリカンサイトにユーザ登録します。

ユーザー登録、ログインが完了したら、基本になるテンプレートをダウンロードしましょう。

ユーザー画面の左サイドバーのメニューから各種ライブラリをクリックし、新しく開いたウィンドウから【シンプル】をダウンロードしましょう。

2.HTML5、CSS、JavaScriptでコンテンツを作成

ダウンロードしたweb.zipを解凍すると、index.html、applican-config.xml、jsフォルダの中には applican-1.5.jsが出てきます。

今回はHello Worldを表示するだけなので、 index.htmlを編集します。いつもお使いのエディタで index.htmlを開き、“タグの中の”SAMPLE”を “Hello World”に書き換え保存して終了します。

3.ZIP圧縮して、アプリカンサイトにアップロード

webディレクトリごと ZIPファイルに圧縮できたら、それをサイトにアップロードします。先ほどのアプリカンサイトにログインした状態から、プロジェクトを作成します。

[新しいプロジェクトを作成]をクリックし、プロジェクト名、対象デバイス、プロジェクトの説明を入力し、作成ボタンをクリックします。

プロジェクト一覧に先ほど作成したプロジェクトができているので【選択】ボタンをクリックします。

プロジェクト画面で【アップロードへ】を選択し、画面の指示に従って先ほど作成した ZIPファイルをサーバにアップロードします。

アプリカンで作成したアプリは、本番ビルドをかける前に、シミュレータ上で動作確認を行うことができます。iOS端末、Android端末でそれぞれのストアを開き、「アプリカンシミュレータ」を検索しインストールしてください。

アプリカンサイトに登録したユーザー名、パスワードを入力すると、先ほど作成したプロジェクト名が表示されるのでそれをタップし、Hello Worldが表示されることを確認してください。

アプリカンならではの魅力

アプリカンには、オプションサービス（有料）として、パートナー企業の提供するサービスのSDKを組み込んだベースアプリが用意されています。

現在用意されているサービスには、 – Remote TestKit (アプリ検証サービス) – app C cloud (CPI広告) – ARAPPLI PLUS (ARアプリ開発) – popinfo (PUSH通知サービス) があります。 これ以外にも、高速なデータ転送を実現するプロトコルスタックオプションや、OCR機能を実現するオプションなどが順次リリースされる予定です。

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は様々なところで利用されています。ご参考までにわずかではありますが、いくつかの事例をご紹介します。

ionic 概要

ionicはそのサイトのデザインからも見てわかるとおり、シンプルかつ美しいUIを取り揃えたコンポーネント群で、Apache Cordova を拡張して作られているフレームワークです。
また、動的なUIコンポーネントを実装するために、 AngularJS を採用してる点もその特徴の1つです。

ionicがサポートしているプラットフォームは、iOS 6+とAndroid 4+です。（ただしAndroidについては、2.3+でもいくつかの機能を提供してるとのこと）
現状ではこの2つのプラットフォームのみですが、Windows PhoneとFirefoxOSについても今後対応を進めていくようです。

特徴

• Apache Cordovaを拡張して作られている、モバイルUIフレームワーク＆開発ツール
• UIがシンプル、かつ美しい
• AngularJS を採用している
• 現状はiOS 6+とAndroid 4+のサポートのみで、Windows PhoneとFirefox OSについては今後対応予定

ionicでHello, World

事前準備

ionicでアプリケーションを開発するためには、 Node.js がインストールされている必要があります。 インストールされていない場合は、上記のリンクからダウンロードしてインストールしておきましょう。
また、各プラットフォーム（Android、iOS）ごとに必要なSDKのインストールも必要です。
こちらについては本稿では触れませんのでご了承ください。

1. cordova-cliとionic-cliのインストール

Node.jsのnpm-cliを利用して、cordova-cliとionic-cliをインストールします。
今回はiOSを対象に解説していくため、ios-sim-cliもインストールしておきます。
これは後述するiOSのエミュレータでの確認をするために必要となります。

$ sudo npm install -g cordova ionic
  $ sudo npm install -g ios-sim

2. ionicプロジェクトの作成

ionicのプロジェクトを作成します。

$ ionic start myApp tabs

実行すると”myApp”という名前のプロジェクトが作成されます。
“tabs”という引数はデフォルトのテンプレートの指定になります。
“blank”、”tabs”、”sidemenu”の3種類がテンプレートとして用意されていますので、ご自身で作成するアプリケーションの要件に応じて使い分けるとよいでしょう。
各テンプレートのレイアウトは以下の画像を参照してください。

3. 対象のプラットフォームを設定

次に、作成したプロジェクト内に移動して作成するプラットフォームを指定します。
iOS 向けの設定を追加します。

$ cd myApp
  $ ionic platform add ios

4. Hello, Worldを書く

今回のケースでは、アプリケーション起動時に表示されるhtmlはmyApp/www/templates/tab-dash.htmlなので、このhtmlファイルを編集します。
以下のように、h1要素のテキストを”Hello, World”に書き換えます。

<ion-view title="Dashboard">
      <ion-content class="has-header padding">
          
Hello, World
      </ion-content>
  </ion-view>

5. 変更を確認する

アプリケーションの動作確認をおこなうためには2つの方法があります。
主にデザインやレイアウトの確認を行なう場合であればWebサーバを起動して確認するとよいでしょう。

$ ionic serve

$ ionic build ios
  $ ionic emulate ios

ネイティブのAPIを利用している箇所は、エミュレータを起動して確認しましょう。

6. 実機での動作確認

Androidであれば、実機と開発環境をUSBケーブルで接続してから

$ ionic run android

で実機にインストールすることができます。

iOSの場合は、ionicコマンドから実機にインストールすることができません。
iOSでの実機確認を行なうには、XcodeからmyApp/platforms/iosを開いて実機にインストールすることができます。
これ以降はXcodeでの作業になります。

ionic の機能

ionicコマンドで作成されたプロジェクトには、以下のディレクトリが配置されます。
これらがionic独自のディレクトリで、Apache Cordovaとは大きく異なる点です。
Apache Cordovaで作られたプロジェクトにはこれらのディレクトリは存在しません。

myApp/www/lib/ionic
  myApp/scss/

myApp/www/lib/ionic配下のファイル群がionicが提供するUIコンポーネント群の実体です。
またionicはSassを採用しているので、myApp/scss/やmyApp/www/lib/ionic/scss配下のファイルを編集することで、UIコンポーネントをカスタマイズすることも可能です。
もちろん、myApp/www/lib/ionic/css配下のcssファイルを直接編集することも可能ですが、7000ステップ以上ありますので現実的ではありません。
カスタマイズを前提とするならば、Sassの導入は必須となります。

Optional

ionicは、タスクランナーとしてgulp.jsを採用しています。
gulp-cliを利用することで、Sassを自動コンパイルさせたりすることもできます。
設定方法について詳しく知りたい方はこちらを参照してください。

ngCordovaモジュール

2014/6/3に公式ブログから ngCordova のαリリースが発表されました。
cordova.js（ネイティブの機能を呼び出すためのApache Cordovaのライブラリ）をAngularJSでラップしたモジュールです。
ionicにとっては、cordova.jsを直接呼び出して使用するよりも、ngCordovaというAngularJSのモジュールとして扱うことで親和性が高くなり、これまで以上に機能拡張が容易になります。

最後に

以下のProductsのページには、”Coming mid-2014: Powerful mobile development tools and services for Ionic.”と記述されていて、近々大きなリリースを予定しているのが伺えます。
注目されているフレームワークの1つですので、今のうちから試してみてはいかがでしょうか。

参照リソース

• ionic http://ionicframework.com/
• ngCordovaモジュール http://ngcordova.com/
• ionicons
• Apache Cordova
• AngularJS https://angularjs.org/

はじめに

HTML5でのモバイルアプリ開発という手法が登場して以来、HTML5でモバイルアプリを開発する様々なツールやプラットフォームが登場しています。この記事ではそうしたHTML5でのモバイルアプリ開発ツールとして、Monacaおよび、Onsen UIを紹介させていただきます。

必要なもの

• WindowsもしくはMac
• 最新版のGoogle ChromeもしくはSafari

Monacaとは?

MonacaはHTML5でモバイルアプリを開発するためのツールです。このMonacaを使って開発されたアプリがGoogle PlayやApp Storeに2000以上登録されています。Monacaの事例ページにはMonacaで開発されたいろいろなアプリが掲載されています。登録 (無料) するだけですぐにモバイルアプリの開発をスタートできます。

• Monacaで作るアプリはPhoneGapベースのため、PhoneGapの利点(クロスプラットフォームやネイティブにアクセスできるAPIなど)をそのまま享受できます。
• Monacaには、Webブラウザ上で動作するIDEが付属しています。
• ほかのプラットフォームと比較して、日本で開発されているので比較的日本語の情報が豊富です。
• また、Monacaには Google PlayやApp Storeで専用のデバッグツール (Monaca Debugger) が公開されており、IDE上でコードを変更すると、即座にその変更をデバッグツールが反映するため、ビルドしなくてもアプリの実行結果を素早く確認することができます。

Onsen UIとは?

HTML5で実際にアプリを開発していくと、様々な壁にぶつかります。例えば、モバイルアプリでのアニメーションを伴うページ遷移などです。まだ、HTML5でアプリを開発するノウハウが十分に浸透しているとは言い難く、ネイティブアプリでは当たり前のことをHTML5で実現しようとした時にいろいろな課題が実際には存在します。Onsen UIはスマホのトランジションやリッチなUIなどをHTML5で簡単に作成するためのフレームワークです。

• Onsen UIはAngularJSベースのフレームワークです。AngularJSのngRepeatなどの通常のディレクティブに加えて、Onsen UIで独自に拡張したディレクティブを使うことができます。
• Onsen UIは、AngularJSのディレクティブを拡張したWebコンポーネントライクに開発を行なうことができます。

MonacaとOnsen UIでHello World

それでは、実際にMonacaでOnsen UIを使ってみましょう。Onsen UIとMonacaはともに兄弟製品であり、MonacaからはOnsen UIを手軽に使うことができます。

1.Monacaにサインアップする

Monacaにアクセスして、ユーザー登録します。および基本的な使用は無料です。登録が完了すれば、すぐに開発を始められます。Google ChromeとSafariが推奨ブラウザなので、2つのどちらかでアクセスしてください。

Monacaに登録したら、登録したメールアドレスに確認メールが届いていますので、そのメール内の確認用URLをクリックして本登録を済ませましょう。

2. ダッシュボードにログインする

Monacaにサインアップすると、最初にダッシュボードと呼ばれる画面に遷移します。このダッシュボードはプロジェクト (アプリ) を管理するための画面です。既に「はじめてのMonacaアプリ」というプロジェクト (アプリ) がありますが、今回はOnsen UIを使うプロジェクトを作成したいので、「+ 新しいプロジェクト」ボタンをクリックして、新しくプロジェクトを作成しましょう。

3. Onsen UI 最小限プロジェクトを作成する

「+ 新しいプロジェクト」ボタンをクリックするとプロジェクト作成の画面に遷移します。下の方に遷移して「Onsen UI 最小限のテンプレート」をクリックします。

そして、「プロジェクトの作成」をクリックしてプロジェクトを作成します。

4. Monaca IDEでOnsen UI 最小限のプロジェクトを開く

「Onsen UI 最小限のテンプレート」が作成されました。「開く」ボタンをクリックして、このプロジェクトを開きます。

5. 「page2.html」を編集する

Monaca IDEを起動したら、アプリのコードが表示されます。最初は「index.html」のコードが表示されているはずです。ここでは左側の「page2.html」をクリックして、「page2.html」を開きましょう。「page2.html」を開いたら、<h2>Page 2</h2>の箇所を<h2>Hello World!</h2>に変更します。

6. Monaca IDEのライブプレビューで簡単に結果を確認する

Monaca IDEのライブプレビューで簡単にアプリの動作を確認してみましょう。Monaca IDE上部のプレビューをクリックして、ライブプレビューを開きます。

すると、ライブプレビューが開きます。画面内の「pushPage」と記述してあるボタンをクリックしましょう。次の画面に遷移できて、「Hello World」という文字列が表示されます。

簡単にpage1.htmlのコードを見てみましょう。

page1.html

<ons-button>というディレクティブのng-clickとして設定されているons.navigator.pushPage()で別のページへの遷移を簡単に実現することができます。遷移した先のページから元のページに戻ってくる場合にはons.navigator.popPage()で戻ってくることができます。このようにOnsen UIを使えば簡単に画面遷移を実現することができます。

7. Monacaデバッガーでプロジェクトを動かす

実機を持っている人はMonacaデバッガーで確認してみましょう。Android端末もしくはiOS端末でストアを開き、「Monaca」と検索してMonacaデバッガーを検索してインストールします。MonacaデバッガーはMonacaのアプリを起動してシミュレーションするためのアプリです。

Monacaデバッガーを起動するとログインを求められますので、Monacaに登録したアドレスとパスワードでログインします。

そして、「Onsen UI 最小限のプロジェクト」をクリックしてアプリを起動します。

同期が完了したら、「Onsen UI 最小限のプロジェクト」アプリが起動します。アプリが起動したら、「Push Page2」ボタンを押して、「page2.html」に遷移しましょう。モバイルアプリでよく見られるスライドアニメーションで遷移することができます。

「page2.html」に遷移したら、先ほど記述した「Hello World」が表示されていることを確認しましょう。これで、MonacaでOnsen UIを使って、Hello Worldを行うことができました。

外部リンク

このアプリではOnsen UIのシンプルなアニメーションを伴ったトランジションを見ることができますが、Onsen UIにはほかにもスライド式のメニューやSplit ViewなどモバイルのUIには欠かせない様々な機能が用意してあります。Onsen UIのComponentsのページでいろいろなUIの部品が紹介してありますので、詳細はそちらをご覧ください。またOnsen CSS ComponentsにはOnsen UIのCSSで作成した　UIパターンが掲載されており、CSSとHTMLをダウンロードすることができます。

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コンテンツからモバイルアプリまでの最短経路だと思いますので、ぜひお試しください！