【Cordova入門】Android向けハイブリッドアプリの作り方

この記事では、Cordovaを用いて、HTML5・CSS・JavaScriptでAndroidのハイブリッドアプリを作成する方法について紹介します。

Cordovaとは

Cordovaとは、オープンソースのモバイルアプリケーション開発フレームワークです。
つまりスマホアプリを作成できる便利なツールです。
このツールを用いることで、Android向けアプリをHTML5・CSS・JavaScriptを用いて作成できます。

開発環境の構築

Cordovaを用いて、Androidアプリを作成するには、「Node.js」「JDK」「Android Studio + SDK」「Cordova」を用意する必要があります。
いずれも無料で入手・使用できます。
それぞれのインストール・設定方法は下記事にまとめています。

項目
Node.js Node.jsのインストール方法
JDK JDKのインストール方法JDKのPATH設定
Android Studio + SDK Android Studioのインストール方法SDKのPATH設定SDK Platform-tools等のインストール
Cordova Cordovaのインストール方法

Androidアプリの作成

簡単なアプリを例に、Cordovaを用いたAndroid向けハイブリッドアプリの作成手順を紹介していきます。

基礎編
基本 プロジェクト作成, ②プログラム作成, ③アプリアイコン, ④スプラッシュスクリーン(起動処理中画面), ⑤ビルド(APK作成), ⑥プラグイン(拡張機能), ⑦エミュレータで動作確認, ⑧実機で動作確認(USB経由), ⑨実機で動作確認(apkファイルをDL), ⑩アプリ情報の設定(config.xml編集)
保存 ローカルストレージでデータ保存ローカルストレージで複数のデータ保存
プラグイン編
カメラ カメラプラグインの導入, カメラで写真を撮影するアプリ, cordova-plugin-camera-preview
センサ 加速度センサ
アプリ公開編
Google Playで公開 Google Playデベロッパーアカウントの作成, ②署名付きapkファイルの作成, ③署名付きAPKファイルを最適化, ④Google Playにアプリ公開, ⑤アプリの更新方法, ⑥アプリに広告を追加・掲載
トラブル対策編
エラー ビルド時のエラー対策, ②Google Playのアップロードエラー対策

その他・・・参考文献、素材サイトなど

項目
アイコン素材 icooon-monoFLAT ICON DESIGNFlode illustration
便利ツール アイコン作成に便利なサイトiOSとAndroidアプリのアイコンリサイズを一発でやります。Quick Picture Tools 角丸
最新情報 Twitter(更新してエラーに悩まされた時の日本語情報収集などに)