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

2018.04.11

アプリケーションが現実世界の影響を受けてインタラクティブな動きをするには、センサやカメラ、マイクなどハードウェアからの入力が必要です。

 “ハイブリッドアプリ”の形を取ることで、Web技術からハードウェアの機能を利用でき、様々なデバイス上で、より新しい表現や仕掛けを提供できると考えています。

また、JavaScriptを主とするWeb技術による表現を得意とするチームスキルを活かすこともできます。

今回はその前段として、ハイブリッドアプリの作り方を試したので、やったことを3回に分けて紹介します。

今回は、ハイブリッドアプリ、Cordovaについて調べたことをまとめ、作ったものの紹介をします。実際の作り方は次回から始まります。

ハイブリッドアプリとは

ハイブリッドアプリとは、”Webアプリ”と”ネイティブアプリ”のハイブリッドです。

Webアプリはマルチプラットフォームで動作する為、一度開発すればOSに関わらず動作する事がメリットな反面、OSが持つ細かい機能(例えば、カメラなどハードウェアへのアクセス)までは操作できませんでした。反対に、ネイティブアプリはOSが持つ細かい機能まで制御可能ですが、開発は各プラットフォームで開発言語、提供APIに差があり、プラットフォームの分だけ新しいアプリ開発が必要でした。

現在における、ハイブリッドアプリの特徴は、以下であるといえます。

  • Web技術でアプリケーションが実現可能
  • 複数のOSに対して同じコードで対応できる
  • ハイブリッドアプリフレームワークを用いることで、ネイティブ部分の拡張が可能となり、ハードウェアの機能をWeb技術で利用することが可能

ハイブリッドアプリの大まかなソフトウェア構成は下図の通りです。

HybridAppStruct

以降は、ハイブリットアプリをアプリ、ハイブリッドアプリフレームワークをフレームワークと称して、説明していきます。

 

フレームワークの選定

アプリでネイティブ機能を利用するにあたって、フレームワークを取り込みます。フレームワークは、アプリ内での、Web技術からネイティブへのアクセス機能を提供します。

今回は、Cordovaを選択しましたが、フレームワークも幾つかありますので、比較検討しました。

以下に、一次選定の条件を示します。

  1. UIを実現し、ネイティブへアクセスする言語をJavaScriptで開発できる環境
  2. できれば1つのフレームワークで多くのプラットフォームがサポートされていると好ましい
  3. 多くの人の利用実績があり、エラーの解決情報がインターネット上にありそう

以上より、こちらの2つに絞りました

名前

Electron

Cordova(PhoneGap)

提供

GitHub.com

Apache Software Foundation

 

サポートプラットフォーム

Windows、OSX、Linux

Android、iOS、blackberry10、Windows Phone、Windows、OSX

など

ライセンス

MIT License

Apache License Version2.0

次に、以下の理由でCordovaを利用することに決定しました。

  • デスクトップ向けにも対応したいが、筆者がデスクトップアプリを作ったことがない
  • 直近でアプリを載せてみたい実機のプラットフォームがAndroidで、実機の動作確認に作ったネイティブアプリが手元にあった
  • ゆくゆくは、Cordovaでデスクトップアプリも対応できるのではという期待

尚、Cordovaの利用には、Cordovaを更に包括するツール(UIフレームワークを追加した形や、IDEまで提供)が多種リリースされている様ですが、以下の理由でCordovaそのままを利用することにしました。

  • 種類が多く、比較検討を十分に行う時間がなかった為、ツール導入はまだ避けたかった
  • コマンドラインによる手順がそれほど難しくない
  • 便利なクラウドIDEは、フリーライセンスのものだと自作プラグインの取込み不可など制約が大きい
  • Cordovaの構造を理解する為

 

Cordovaとは

正式名は、Apache Cordova

オープンソースのモバイルアプリケーション開発フレームワークです。ライセンスは、Apache 2.0 Licenseです。

元はPhoneGapと呼ばれるフレームワークでしたが、そのソースコードがAdobe経由でApacheに渡り、現在に至ります。このような経緯もあり、関連情報が”PhoneGap”のワードで検索されることもあります。

スタンスは、モバイル向けのフレームワークであり、モバイルデバイスへアクセスするAPIを追加することで、JavaScript、HTML、CSSといったウェブアプリケーション開発の技術でモバイルアプリケーションを開発することができるのが特徴です。

何を使うかは決まりました。次に、どのようなアプリを作ったかを紹介します。

 

作製するアプリについて

アプリの内容

  • Cordovaを利用した、近接センサでインナーカメラを起動するハイブリッドアプリ

動作仕様

  • Android端末の近接センサが物体を検知するとインナーカメラを起動してプレビュー画面を表示
  • 撮影(シャッター)、画像保存、ファイル管理は動作保証外
  • Android6.0.1で動作すること

開発環境

DevEnv

ソフトウェア構成

softwarestruct

今回は、アプリ画面の他、近接センサ機能をPluginとして自作して追加ました。カメラ機能は、既存のCordova Pluginを利用しました。

 

Cordovaの構成

Cordovaのソフトウェアアーキテクチャついては、上記ドキュメント内の「Introduction -Overview」の章にて説明はありますが、先にこちらのSlideShareを見て理解しました。

 

Cordovaディレクトリ構成

詳細な説明は、こちらのサイトが参考になると思います。以下は、プラットフォームをAndroidに設定して追加したところでのディレクトリ構成です。

 

開発にあたって

基本的に、以下のCordovaオリジナルドキュメントを見て進めていきます。

Cordova Documentation

http://cordova.apache.org/docs/en/latest/

次回は、Cordova documentのCreate your first app を試します。