モバイル開発におけるハイブリッドアプリという選択肢

swiftやkotlinを用いてiOS/Androidアプリを開発してきましたが、チーム事情でハイブリットアプリを使用する機会があったので、所感や環境の構築について記載します.

ハイブリッドアプリの強み

やはりハイブリットアプリの強みといえばクロスプラットフォームであることだと思います. 私自身iOS, Androidでそれぞれ開発したサービスもありますが、開発はもちろん保守が大変です. その点統括してWeb周りのみ（html, css, javascript）で完結できてしまうのはやはり魅力です. 有名どころだとwekipediaやcookipadなどもハイブリッドアプリらしいです. 詳細に関してはこちらの記事がわかりやすかったです.

実際に使ってみる

最もスタンダードとされる環境で作ってみました. また、開発エディタ(IDE)はローカルの慣れた環境で開発したかったのでmonacaクラウドIDEではなくWebStromを使用しました.

環境

• Mac OSX
• Cordova
• AngularJS
• onsenUI
• node v6.9.2

Cordova環境構築

nodeのインストールは済んでいるものとします.

• cordovaをグローバルでインストールします.
  

npm install -g cordova

• バージョン確認
  

cordova -v

• 新規プロジェクト作成

cordova create [プロジェクトのフォルダ名] [アプリ識別名] [プロジェクト名]
ex) cordova create cordovaSampler com.example.cordovaSampler cordovaSampler

• フォルダ構成
  • config.xml
    • 設定ファイルです
  • hooks
  • platforms
    • iOSやAndroid etc..
  • plugins
    • プラグインです
    • カメラやステータスバーのカスタマイズなどネイティブ機能を使用する際は基本的にプラグインを用いることが多いです.
  • www
    • css
    • js
    • index.html
      • 初期起動時ではこいつが表示されます.

プラットフォームを追加する

今回はiOSとAndroidに対応するものとします.

• iOS / Androidを追加

cordova platform add ios
cordova platform add android

• 追加したプラットフォームの確認
  

cordova platform ls

• 起動してみる
  

cordova serve

ブラウザで表示されればokです. → http://localhost:8000/ios/www/

iOSシミュレータ（実機）でビルド

• AppStoreからXcodeをインストールしてください.
• ios環境に必要な諸々をインストール
  

npm install -g cordova-ios ios-sim ios-deploy

※ここらへんのインストール先はglobal推奨らしいです.

• プロジェクトの実行
• 下のbuildとemulateをまとめてのがrunな模様

cordova run ios

• build
  

cordova build

• エミュレータの実行

cordova emulate ios

• 実機で実行
  

cordova run ios -device

• ipaの作成
  • .xcworkspaceファイルを開くとXcodeが立ち上がります.
  • ネイティブ同様Archiveしてipaファイルを作成します.

Android(エミュレータ)でビルド

• 環境変数を設定する
  

export JAVA_HOME=`/usr/libexec/java_home`

• プロジェクトの実行
  

cordova run android

• エミュレータの実行
  

cordova emulate android

• デバイスを指定して実行
  

cordova emulate --target=Nexus_6_API_23 android

• apkの発行
  • 通常のapkの場合はrunしたタイミングで作成されます.
  • ここにあります build > outputs > apk > android-debug.apk
  • 参考
    • http://phiary.me/cordova-android-release-build-apk-for-google-play/

OnsenUIのインストール

• bowerでインストールできます.

bower init
bower install onsenui -S

ひとまずこれで準備は完了です.

所感

環境構築では特に難しいところはなく思ったよりスムーズに進行しました. 実機ビルドした際に変更が反映されないときがあったり、ステータスバーの下になぞの隙間ができてしまったりと不都合な部分もありましたが、一つ一つ解決していけばそれなりの開発スピードはでそうです.
ハイブリッドアプリで懸念される点としては動作スピードの遅さやファイルサイズの増大などありますが、近年かなり改善されているらしく普通に使っていてもあまり気になるレベルではないと感じました.
とはいえ、ゲームなどの処理速度を必要とするアプリに関しては不向きであると思います.