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

はじめに

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をダウンロードすることができます。

ここ数年、従来の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ハイブリッドアプリ開発に挑戦していただければと思います。