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

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のインストール方法
③Android Studio + SDK Android Studioのインストール方法SDKのPATH設定SDK Platform-tools等のインストール
④Cordova Cordovaのインストール方法
⑤Ionic Ionicのインストール方法
スポンサーリンク

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

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

Ionicの基礎編
はじめに 【AngularJS入門】基礎的な使い方まとめ
基本 【Ionic入門】基本操作まとめ
設定 タブ作成ホーム画面をHomePageからEventPageに変更ストレージの利用
実装例 簡易カウンターメモ帳日付の入力・保存
【AngularJS入門】基礎とサンプル集
プラグイン編
カメラ カメラプラグインの導入カメラで写真を撮影するアプリ ■cordova-plugin-camera-preview
センサ 加速度センサ
管理 プラグインの更新
Android向けにアプリ公開
Google Playで公開 Google Playデベロッパーアカウントの作成署名付きapkファイルの作成署名付きAPKファイルを最適化Google Playにアプリ公開アプリの更新方法
広告掲載 AdMob Free
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」を使ったハイブリッドアプリケーションの脆弱性に関する調査報告書
HTML5Javascript
スポンサーリンク
西住工房

コメント