Cordovaの使用方法を解説！React Nativeとの違いを比較！Ionicの動作が遅い時は何をチェックすべき？
ハイブリッドアプリとは？
まずハイブリッドアプリという言葉について説明しておきましょう。
そして、どうしてハイブリッドアプリを利用すると便利なのかご紹介していきます。
HTML5ハイブリッドアプリ
Web技術を用いて開発した、AndroidやiOSなどに対応するスマートフォンアプリケーションです。
Webアプリケーションと、ネイティブアプリケーションの良い部分を融合出来ることからハイブリッドと名付けられています。
JavaScriptやCSS3、HTML5などのWeb技術は用いますが、利用する際にはその端末のブラウザを起動する必要はありません。
またWebでは利用出来ない、カメラやファイルストレージなどといった機能を付加することも出来ます。
ハイブリッドアプリの利点
ハイブリッドアプリの利点は3つの利点があります。
- ネイティブ機能を呼び出すことができる
- ネイティブアプリ同様にストアからインストール可能
- Web技術のノウハウを利用できる
ハイブリッドアプリにはネイティブアプリと同様のパッケージとしてビルドされます。
ですので、Webアプリにはないプッシュ通知などが利用可能です。
またマーケットストアに配布されることはユーザーにとって質やセキュリティが保証されている証にもなります。
そのため、より多くのユーザーに届けたい開発者にとって有利です。
これまでWeb技術しか学んでこなかった開発者でも、新たにOS用アプリ技術を学ばずして開発することが出来るようになりました。
フレームワークとは？
次にハイブリッドアプリを開発しようとする際に、必要となってくるのがフレームワークです。
ハイブリッドアプリを開発する為のフレームワークが果たす役割とフレームワークの種類をご紹介していきます。
フレームワークの役割
フレームワークの役割は大きく分けて3つあります。
- WebViewをアプリにする
- ネイティブAPIへのアクセス
- ネイティブブリッジの提供
フレームワークがある事により、開発者は各OSのネイティブごとの差異に気を取られずにWeb技術を用いてアプリ開発に専念できます。
次に、ハイブリッドアプリ開発のフレームワークが提供するのは、HTML５からネイティブ機能を呼び出す仕組みです。
Webアプリと違って端末のAPIを呼び出せるので、Webアプリでは出来ない機能を呼び出すことが出来ます。
最後に、HTMLとネイティブとのブリッジをする点です。
フレーム側で提供されていないネイティブ機能があっても問題ありません。
開発者プラグインを実装して、フレームワークに新たな機能を実装することが出来ます。
フレームワークの種類
ハイブリッド開発フレームワークとして最も有名なのが、Cordovaです。
また、mixi社が社内開発用に作成したフレームワークにTrianiaがあります。
さらに、Cordovaと並ぶ2大クロスフレームである、React Nativeなどもフレームワークです。
また、アプリによってはフレームワークを利用しない場合もあります。
CordovaとReact Nativeの違いは？
- 結局どのフレームワークを利用したら良いかわからない人
- 最もメジャーなCordovaを利用したいけど、React Nativeとの違いが今ひとつわからない人
に向けて簡潔にご紹介していきます。
Cordova
開発者に最も利用されている、ハイブリッドアプリ開発向けのオープンソースフレームワークです。
Cordovaは元々カナダのNitobi社によって「PhoneGap」という名前で開発されていました。
Adobe社によるによる買収を経て、Apache Cordovaに名前が変更されました。
モバイルアプリ開発に、CSS3・HTML5・JavaScriptなどのWeb技術を使用します。
ビルド時間は比較的短いのが特徴です。また動作もネイティブ同様の性能を発揮します。
React Native
こちらもCordova同様、オープンソースフレームワークです。
React NativeはネイティブUI型と呼ばれ、iOSやAndroidなどのOSのUIシステムに重きを置く形が最大の特徴といえます。
ネイティブUIを別の言語やフレームワークから操作する形です。
またCordovaには組み込まれていない、ネイティブ機能が入っています。その関係によりビルド時間が長くなるのです。
CordovaとReact Nativeの違い
| Cordova | React Native | |
| フレームワーク | オープンソース | オープンソース |
| 特徴 | Web View上でアプリを動かす | UIシステムをフレームで動かす |
| パッケージサイズ | 小さい | 大きい |
| ビルド時間 | 短い | 長い |
| レンダリング時間 | 長い | 短い |
両者とも、クロスプラットフォームの性能としては非常に性能が良いといえます。
大きく違うのは、アプリに対するアプローチの仕方です。
CordovaではWebView上でアプリを操作する為、元々Webアプリを開発していた人に大きなオドバンテージとなります。
一方React Nativeでは、スマホアプリのネイティブUIに力を入れる場合に有用です。
Cordovaの使用方法
それではCordovaを用いてiOSアプリとAndroidアプリを開発する手順を解説していきます。
具体的に、以下の手順で進めていきます。
- 環境開発を構築する
- プロジェクトを作成・管理する
- アプリを開発する
- Cordovaプラグインを利用する
- 既存のアプリにCordovaを組み込む
Node.jsのインストール
Cordovaコマンドを導入するためにまず、Node.jsのWebサイトhttps://nodejs.org/enにアクセスします。
表示に従って開発マシーンにNode.jsをインストールして下さい。
Node.jsをインストールすると、Node.jsのパッケージマネージャであるnpmも同時にインストールされます。
cordovaのコマンドラインツールをインストールする
npmがインストールできたら、Cordovaのコマンドラインインターフェイスであるcordovaコマンドを、npmを通じてインストールします。
ターミナルを開いて以下のようにnpmコマンドを実行して下さい。
- $ npm install cordova -g
プロジェクトを作成する
Cordovaコマンドのインストールが完了したら、次はcordovaコマンドを用いたプロジェクトを作成します。
AndroidとiOSの開発が出来るプロジェクトを作成しましょう。
最後にcordova createコマンドを用いて次のようにプロジェクトを作成してください。
- ＄ cordova create hello com.
- Example.hello HelloWorld -d
hello ディレクトリ以下にアプリ識別子としてcom.example.helloを持つ「HelloWorld」という名前のアプリプロジェクトを作成します。
次に、プロジェクトにAndroidとiOS用のファイルを追加しましょう。
以下のように、helloディレクトリ以下に移動してcordova platform コマンドを実行します。
iOSとAndroid用のプロジェクトファイルが追加される筈です。
- $ cd hello
- $ cordova platform add ios
- $ cordova platform add android
このコマンドを実行するとiOSアプリの為のXcodeプロジェクトが生成されます。
プロジェクト構造を確認する
ここでいったんプロジェクトディレクトリ構造を確認します。
シミュレータで確認する
AndroidでもiOSでも、実機を使わずに開発マシーン上で動作確認できるようにしなければなりません。
そのためにAndroidエミュレータやiOSシミュレータが提供されています。
Cordovaを用いてアプリを開発する
Cordovaアプリケーションで、Cordovaが提供するネイティブ機能にJavaScriptからアクセスしましょう。
アクセスするには、Cordovaフレームワークが提供するJavaScript側インターフェイスであるCordova.jsを利用する必要があります。
またcordovaコマンドを用いる場合、
- モバイルアプリのアイコン
- スプラッシュスクリーン
加えて各種設定をwwwディレクトリ以下に配置しましょう。
これらのリソースについても説明します。
wwwディレクトリ以下の構造を把握する
cordovaコマンドで作成したプロジェクトのwwwディレクトリの構造は以下のようになる筈です。
- www/
- cofig.xml
- css
- img
- index.html
- js
- res
- spec
- spec.html
css、img、jsなどのディレクトリには、その名の通りアプリで利用するCSSや画像、JavaScriptが収められています。
それ以外のディレクトリの概要は以下の通りです。
| 名前 | 役割 |
| config.xml | cordovaの設定ファイル |
| index.html | アプリのエントリポイント |
| spec | specディレクトリ |
| spec.html | specを実行するHTML |
index.html
cordovaコマンドラインから作成したプロジェクトでは、アプリを記述する為のHTMLなどのファイルをwwwディレクトリ以下に置きます。
開発者はこの、wwwディレクトリ以下のファイルを編集してアプリを実装しましょう。
cordova.js
Cordovaフレームワークでは、JavaScript側のインターフェイスとしてcordova.jsを用意しています。
開発者は、このcordova.jsが提供するインターフェイスを通じてネイティブ側の機能にアクセスしてください。
devicereadyイベント
イベントが起こる仕組み
Cordovaを用いたアプリが実行されるときに、提供しているネイティブ機能をHTML5側からすぐに呼び出せる訳ではありません。
Cordovaのフレームワークは、HTMLの読み込み直後にネイティブとHTML5とのブリッジを確立する為の初期化処理を行うものです。
この初期化処理が終わると、HTML5側にdevicereadyというCordovaフレームワーク特有のイベントが発生します。
devicereadyイベントを察知する
- document.addEventL
- instener(‘deviceready’, function()
- {
- Console.log(‘devicereadyイベントが発火されました’)；
- ｝,false);
アプリの設定
Cordovaを用いたアプリには、アプリや特定のプラットフォームでの挙動の詳細を設定する様々なパラメータが存在します。
アプリの設定は、wwwディレクトリ以下のconfig.xmlファイルを編集して行いましょう。
ここでは、config.xml の基本的な構造や設定項目を説明します。
config.xmlの構造
Cordovaが参照するconfig.xml のスキーマはW3Cの策定する以下の仕様が基本です。
Packaged Web Apps(Widgets)-Packaging and XML Configuration (Second Edition)
https://www.w3.org/TR/widgets/
config.xml は以下の具体的な構造をしています。
- <widget>
- <name></name>
- <preference />
- <feature>
- <param />
- </feature>
- <access />
- <content />
- </widget>
preference要素
Cordovaフレームワークでは、実行時のフレームワークの挙動を設定変更できます。
name属性には設定名前、value 属性には設定の値を記述しましょう。
access要素
アプリ内で許可するドメインをホワイトリスト形式で記述します。
この要素に記述されていないドメインでホストされているHTMLは読み込めません。
feature要素
Cordovaフレームワークでは、端末のある特定のネイティブ機能へのアクセスをプラグインが提供します。
Cordovaフレームワークは実行時のfeature要素を見て、どのプラグインが有効になっているのかを知ることができるのです。
content要素
この要素では、Cordovaを用いたハイブリッドアプリが最初に読み込むHTMLのパスを指定します。
デフォルトでは、index.html が読み込まれる設定です。
アプリに関する設定
www/config.xml を編集して、アプリに関する基本的な情報を設定します。
設定を反映させる
ここで一旦設定を反映する手順を確認しましょう。
- www/config.xml を編集して変更した設定を、プラットフォーム別のプロジェクトに反映
- アイコン設定、スプラッシュスクリーン設定、ドメインホワイトリスト設定を実行
Cordovaプラグインを利用する
開発者は、公式で提供されているプラグインで以下の機能を利用できます。
- 加速度センサー
- カメラ・録音
- コンパス
- ネットワーク設定
- 端末内のコンタクトリスト
- デバイス情報
- イベント
- ファイルストレージ
- 位置情報
- 国際化
- アプリ内ブラウザ
- 音声・動画
- アラート・ダイアログ・バイブレーション
ここではCordova プラグインについての概要と、実際にアプリのプロジェクトへCordovaプラグインを導入する方法を記述します。
プラグインを導入する
Cordovaプラグインをプロジェクトに導入するには、cordova pluginコマンドを使いましょう。
コマンドには、プラグインのgitリポジトリのURLを指定してください。
例えば、端末のカメラ機能を利用できるプラグインを導入するとします。
その場合は以下のように、そのプラグインのコードが保管されているgitリポジトリのアドレスを指定してください。
- $ cordova plugin add https://git-wip-us. apache. Org/repos/asf/cordova-plugin-camera.git
このコマンドを用いると、プロジェクトのplugins ディレクトリに追加したプラグインの実体がダウンロードされます。
プラグインを管理する
プロジェクトにインストールされているプラグインを一覧するには cordova plugin Is コマンドを用います。
- $ cordoava plugin Is
- ［ ‘org.apache.cordova.sore.
- Camera’ ］
プラグインの仕組み
CordovaプラグインはCordova Pluginの仕様に従ってまとめられている1つのパッケージです。
このパッケージには以下のようなものが含まれています。
- プラグインに関する情報
- JavaScriptインターフェイス
- 各プラットフォーム向けのネイティブコード
- 依存関係
組み込みプラグインの一覧
Cordovaがあらかじめ用意しているプラグインとそのgitリポジトリはCordova3.0.0のドキュメントを参照して下さい。
Apache Cordova API Documentation:http://cordova.apache.org/docs/en/3.0.0/index.html
Android向けのCordovaプラグインを実装する方法
- config.xml を編集して、プラグインに関する情報を追加する
- Javaでプラグインのコードを記述する
- JavaScript からプラグインのコードを呼び出す
これらの作業は、Android用のプロジェクトである、platforms/android ディレクトリ以下で行います。
ネイティブ側のコードをJavaで記述するので、Eclipseを起動してAndroidのプロジェクトを開いてください。
他にもプラグインからは様々な処理を行うことができます。
iOS向けのCordovaプラグインを実装する
- config.xml を編集して、プラグインに関する情報を追加する
- Objective-C でプラグインのコードを記述する
- JavaScript からプラグインのコードを呼び出す
既存のアプリにCordovaを組み込む方法
ここまでは、cordovaコマンドを利用した作成方法でした。
ここからは、cordovaコマンドを利用せずにCordovaを導入したい場合にはどうすれば良いかを説明していきます。
Cordovaフレームワークのダウンロード
CordovaのWebサイトのトップページで［DAWNLOAD］ボタンを押してダウンロードします。
Apache Cordova:http://cordova.apache.org/
AndroidのプロジェクトにCordovaフレームワークを導入する
ここではあらかじめAndroidのプロジェクトがすでに作成しているものとして解説していきます。
- Cordovaフレームワークをビルドする
- Cordovaフレームワークをプロジェクトに追加する
- Cordova用の設定ファイルをwwwディレクトリに配置する
- Cordovaを呼び出すコードを追加する
- iOSのプロジェクトにCordovaフレームワークを導入する
- CordovaLib プロジェクトをアプリのサブプロジェクト化する
- www ディレクトリ以下にHTMLなどのファイルを配置する
- Cordova フレームワークを呼び出すコードを記述する
Cordovaと併用するフレームワーク
Cordovaの最大の特徴は、やはりWeb制作者がネイティブの知識なく作れる点です。
これは、AppDelegateなどを触らずに開発できる利便性があります。
一方、Cordovaの起動が遅い時は、Mobile Nativeで扱う領域に読み込みが苦渋している時です。
そんなときに併用されるフレームワークの1つにIonicがあります。
Ionic
ベースがAngularというフレームワークで、その上にHTML5アプリに重点を置いて開発されたJavaScriptフレームワークです。
つまりハイブリッドアプリを開発できるように設計された優れもの。
CordovaにはIonicを併用して使用することが非常に多いのが現状です。ではそのIonicが重い時はどうすれば良いのでしょうか。
Ionicの動作が重い時にチェックすべきこと
- エミュレータを確認する
- AOTビルドができているか確認する
- UIWebViewを使っていないか確認する
- タップ不可な要素にクリックイベントをつけていないか確認する
- 動作遅延となる処理を組み込んでいないか確認する
動作が遅いのをCordovaやIonicだけの性能に固執せず、遅延する原因を詮索しコードをチェックする癖をつけておきましょう。
まとめ
以上がハイブリッドアプリ開発フレームワークであるCordovaの説明です。近年格段に性能が上がってきています。
クロスプラットフォーム開発によって、コストの問題が大幅に解決されることも少なくありません。
開発者は性能や仕組みを理解して開発を進めていって下さいね。
