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-mono ■FLAT ICON DESIGN ■Flode illustration |
便利ツール | ■アイコン作成に便利なサイト ■iOSとAndroidアプリのアイコンリサイズを一発でやります。 ■Quick Picture Tools 角丸 |
最新情報 | ■Twitter(更新してエラーに悩まされた時の日本語情報収集などに) ■Qiita |
セキュリティ | ■「Apache Cordova」を使ったハイブリッドアプリケーションの脆弱性に関する調査報告書 |
コメント