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

ここ数年、従来のJavaやObjective-Cでのモバイルアプリ開発以外に、HTML5を使ってモバイルアプリを開発する手法、HTML5ハイブリッドアプリ開発が注目を浴びています。この記事では、第48回HTML5とか勉強会（ハイブリッドアプリ開発最新動向）で発表した「はやわかりHTML5ハイブリッドアプリ開発事情」での内容を解説することで、HTML5モバイルアプリについての基本的な知識を簡単に紹介します。

HTML5ハイブリッドアプリとは?

それでは、まずHTML5ハイブリッドアプリの構造についてご紹介します。ハイブリッドアプリではアプリの画面としてWebViewというネイティブのコンポーネントを使います。このWebViewの中でHTMLの画面を表示するモバイルアプリがハイブリッドアプリです。図で表現すると、以下の画像でハイブリッドアプリの構造を表現することができます。

なぜハイブリッドアプリなのか?

従来の純粋なJavaやObjective-Cで開発するネイティブアプリとHTML5で開発するハイブリッドアプリがどのように異なるのか、ハイブリッドアプリを採用する際のメリットをご紹介します。

1.クロスプラットフォーム

従来のアプリ開発では、アプリ開発対象のOSの流儀に従わなくてはなりませんでした。JavaやObjective-Cといった開発言語も違えば、開発環境や必要とされる知識やノウハウも異なります。ハイブリッドアプリではWebViewという各OSに共通のコンポーネントを用いるので、HTMLやCSS、JavaScriptでどのOSでも共通に動作するアプリを記述することができます。

2. Web標準の知識をモバイルアプリ開発に適用できます

ハイブリッドアプリ開発ではHTMLやCSS、JavaScriptといったWeb開発では必須の言語でモバイルアプリを開発することができます。もちろんPCでのブラウザ向けの開発とは違い、モバイル端末のスペックやそれ上で動作するブラウザのことは考慮しなければいけませんが、もっぱらWeb開発に携わっていた方が、モバイルアプリを開発する際にも比較的、敷居は低くなります。

3. JavaScriptから各OSのAPIを呼び出すことができます

Cordovaなどのハイブリッドアプリ開発用のフレームワークを使うことで、カメラや、センサーなどのモバイル端末でのみ利用できるAPIをJavaScriptから呼び出すことができます。

ハイブリッドアプリが向いていない場面

ハイブリッドアプリを採用する際のメリットをご紹介しましたが、ここでは逆にハイブリッドアプリがあまり向いていない場面、不得意な分野もあります。

例えば、高速な描画処理が要求されるゲームなど、ネイティブでOpenGL等を使ってバリバリに高速描画させているゲームなどをハイブリッドアプリで実現しようとすると厳しいものがあります。モバイル端末でのWebGL実装の普及に伴って解決されていく問題かもしれませんが、今のところHTML5ハイブリッドアプリでは、こういった分野は苦手です。

また、HTMLのレンダリングエンジン上で動くという性質上、端末のスペックを最大限引き出すような処理もネイティブアプリと比べると苦手です。

ハイブリッドアプリの作り方

ハイブリッドアプリを開発するためのフレームワークがいくつかありますが、その中でも最も有名なものは「Cordova (PhoneGap)」です。ここでは「Cordova (PhoneGap)」について紹介します。

よく呼称の問題で「Cordova」か「PhoneGap」かということが議論になっていることがありますが、基本的にはどちらも同じものと考えて、ここでは差し支えありません。

1. HTML5とネイティブ間のブリッジ

Cordavaを使うことでJavaScriptからカメラ、コンパス、センサー、連絡先、ネットワークなどの本来JavaやObjective-CでしかアクセスできないネイティブのAPIを呼ぶことができます。また、Cordovaのプラグインを自分で作ってHTML5アプリに組み込むことで、JavaScriptから呼ぶことのできるネイティブのAPIを拡張することができます。

2. HTML5をアプリとしてラッピングする

CordovaにはデフォルトでモバイルアプリをWebViewで表示する機能が備わっています。CordovaがWebViewに関連するネイティブのコードを提供するので、ハイブリッドアプリ開発者は、HTMLアプリを用意するだけで、ネイティブのコードを記述することなしにアプリを開発できます。

フレームワークを使わない選択肢

ネイティブアプリ開発でも、アプリの一部分をWebViewで記述するということは、よく行なわれています。自前で用意したWebViewをアプリ内に組み込むこともできますが、ここは開発するアプリの要件に併せて検討が必要でしょう。

ハイブリッドアプリの事例

有名なところではWikipediaのモバイルアプリや、クックパッドのAndroid版はHTML5が用いられています。

ほかにもPhoneGapの公式サイトにたくさん事例が掲載されていますので、興味がある方はアクセスしてみてください。

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

ここまで簡単にHTML5ハイブリッドアプリについて紹介しましたが、ハイブリッドアプリについてよく聞かれる疑問について答えていきたいと思います。

1. ハイブリッドアプリは遅いのでは?

普通にWebサイトのように作ると遅くなってしまいます。Android2.3等のWebViewだと特にパフォーマンスに問題が出ます。ここではHTML5アプリの描画や、パフォーマンスのチューニング方法を知っていることが重要になってきます。

2. この機能はハイブリッドアプリで作れますか?

実際に仕様策定段階に入る前に実現したい機能が本当にHTML5アプリで実現可能なのか、実現可能であるとしても意図した挙動になるのかというのを事前に検証しましょう。HTML5のAPIで実現できなくてもPhoneGapのプラグインが公開されている場合もあります。場合によってはPhoneGapプラグインを自作することで、対応可能である場合もあります。もちろん、ネイティブ部分をどんどん拡張していけば、HTML5でアプリを作るメリットも薄れてきますので、ハイブリッドアプリ以外の選択肢もあることを意識しておきましょう。

ハイブリッドアプリ開発のテクニック•ノウハウ

ハイブリッドアプリを実際に作っていくと、いろいろな問題に遭遇します。特によくあるのはレンダリングや反応が遅いという問題や、アプリっぽいUIを作るのが難しい問題でしょう。

過去に私が発表したスライドの後半で、アプリの最適化のテクニックを紹介していますので、参考にしてください。また、私が執筆した[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門にもハイブリッドアプリ開発のノウハウや知識を網羅的に詰め込んでいます。よろしければ、ご覧ください。

ハイブリッドアプリの開発環境

ハイブリッドアプリを開発するためのツール群や開発環境も近年、豊富に出てきています。Adobe社が提供しているPhoneGap BuildやTelerik社のAppBuilder、AppGyver、また、ハイブリッドアプリのデバッグ環境としてはWeinreやjsHybuggerなどが出てきています。

最後にハイブリッドアプリ開発環境として、私も開発に携わっているMonacaとOnsen UIについてご紹介させていただきます。

Monacaはクラウド上でAndroidやiOSなどのモバイルアプリ開発を行なうためのツールです。登録するだけで、すぐに無料で使うことができます。Monacaにはクラウド上のIDEが備わっており、Webブラウザ上でコーディングからデバッグ、ビルドまでを一貫して行なうことが可能です。このMonacaを使って、既にGoogle PlayストアやApp Storeには、2000以上のアプリが公開されています。

Onsen UIは、モバイルアプリらしいUIを手軽に作成することを目的として開発されているUIフレームワークです。フレームワークとして人気の高いAngularJSを組み込んでいます。Onsen UIのCSSを用いて作成されたモバイルアプリUIのコレクションとして、Onsen CSS Componentsというサイトを用意しています。ここでは、Onsen UIのCSSを用いて作成された様々なモバイルアプリのUIのHTML、CSSを自分好みのテーマに自由にカスタマイズしてダウンロードすることができます。

終わりに

ここまでこの記事では、HTML5ハイブリッドアプリ開発に関する諸事情をまとめて紹介しましたが、いかがだったでしょうか。

以前からハイブリッドアプリに関する動きを見てみると、開発者が実際にHTML5を使ったアプリを開発・公開する事例が増えてきました。また、モバイル端末のスペックが向上してきたおかげでHTML5でもそれなりの速度がでるようになり、だんだんとハイブリッドアプリ開発に関する開発者の認知が上がってきています。

それのおかげで開発者間での話題も、単に「WebViewを使ってみました」程度の話から、実際に「HTML5を使ってどうやって質の良いアプリを開発するか」というような現実的な話にシフトしてきている印象です。

また開発者の意識だけではなく、この記事で紹介したようなハイブリッドアプリ開発のためのツール、ライブラリや最適化のためのノウハウもだんだんと育ってきています。

Mobile Chrome AppsやFirefox OSなど、最初からHTML5でモバイルアプリを書くことを前提とするプロダクトも出ていることを考えると、今後ますますモバイルアプリ開発でのHTML5の活躍する場所が広がっていくものと思われます。

読者の方もぜひHTML5ハイブリッドアプリ開発に挑戦していただければと思います。