【Ionic入門】Android・iPhoneアプリ開発編

Cordovaフレームワーク「Ionic」を用いて、HTML5・CSS・JavaScriptでAndroid・iPhone(IOS)のハイブリッドアプリを作成する方法について紹介します。

【はじめに】Cordova・Ionicとは

「Cordova」「Ionic」の概要を以下に整理しました。

種別 概要
Cordova ●オープンソースのモバイルアプリケーション開発フレームワーク
●Android向けアプリをHTML5・CSS・JavaScriptで作成可能
Ionic ●Angularをベースに、アプリ開発に特化したJavaScriptフレームワーク
●Cordovaと組み合わせて使用
●ネイティブアプリに近いアプリを制作するのに必要

【環境構築】インストール編

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

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

【アプリ作成】基礎編、プラグイン編、公開編

Ionicを用いたAndroid向けハイブリッドアプリの作成について以下にまとめました。
AngularJSの基礎知識がない方は、はじめに「【AngularJS入門】基礎的な使い方まとめ」をご覧ください。

Ionicの基礎編
はじめに 【AngularJS入門】基礎的な使い方まとめ
基本 プロジェクト作成画像の格納場所・パスカスタムフォント使用エミュレータ起動スプラッシュスクリーンの変更・非表示新規ページの作成メニュー作成テンプレート一覧
タブ タブ作成タブのデザイン設定
設定 ホーム画面をHomePageからEventPageに変更
実装例 簡易カウンターメモ帳
【AngularJS入門】基礎とサンプル集
プラグイン編
カメラ カメラプラグインの導入カメラで写真を撮影するアプリ ■cordova-plugin-camera-preview
センサ 加速度センサ
管理 プラグインの更新
Android向けにアプリ公開
Google Playで公開 Google Playデベロッパーアカウントの作成署名付きapkファイルの作成署名付きAPKファイルを最適化Google Playにアプリ公開アプリの更新方法
広告掲載 AdMob FreeAdmob Pro
Google Playで非公開・削除
トラブル対策編
エラー ビルド時のエラー対策Google Playのアップロードエラー対策
署名エラー 「java.lang.RuntimeException: キーストアのロード~」
ポリシー違反 AdMob広告、Firebaseのポリシー違反

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

参考文献、素材サイトなどを以下に整理しました。

項目
Ionic入門 ハイブリッドアプリ入門 [cordova ionic]Ionicでのアプリ開発の始め方Ionic 入門Ionicハンズオン資料 Ionicの基礎
アイコン素材 icooon-monoFLAT ICON DESIGNFlode illustration
便利ツール アイコン作成に便利なサイトiOSとAndroidアプリのアイコンリサイズを一発でやります。Quick Picture Tools 角丸
最新情報 Twitter(更新してエラーに悩まされた時の日本語情報収集などに) ■Qiita
セキュリティ 「Apache Cordova」を使ったハイブリッドアプリケーションの脆弱性に関する調査報告書
関連記事