初期設定
cordovaとionicをインストール
$ npm install -g cordova ionic
プロジェクトを作成
$ ionic start hogehoge
$ cd hogehoge
config.xmlの編集
-
<widget id="io.ionic.starter" version="0.0.1" ...>バンドルID（パッケージ名、バージョン -
<name>MyApp</name>アプリ名 -
<description>An awesome Ionic/Cordova app.</description>説明 -
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>メルアド、HP - など
cordovaプラグインのインストール
cordovaプラグインをTypescriptでラップしたionic-nativeを使う
https://ionicframework.com/docs/native/
cordovaプラグインとnodeのモジュールをそれぞれインストール
画面の向きを扱うScreen Orientationならこんな感じ
$ ionic cordova plugin add cordova-plugin-screen-orientation
$ npm install --save @ionic-native/screen-orientation
ionic-native化されてないcordovaプラグインは？
一応直接触ることはできる
ただしTypescript化されていないので型は使えない
$ ionic cordova plugin add cordova-plugin-file-opener2
してcordovaプラグインのみをインストールしたのちコード内に以下を書く
declare const cordova;
詳しくは
https://qiita.com/saihoooooooo/items/822d594fa3639e5c8080
webで確認
$ ionic serve
でブラウザが立ち上がる（＋ライブリロード）
iOSエミュレート
iOSをプラットフォームに追加
$ ionic cordova platform add ios
ios-simのインストール
$ cd platforms/ios/cordova && npm install ios-sim@latest
エミュレータのリスト
$ ionic cordova emulate --list
Apple-TV-1080p, tvOS 11.0
Apple-TV-4K-4K, tvOS 11.0
Apple-TV-4K-1080p, tvOS 11.0
Apple-Watch-38mm, watchOS 4.0
Apple-Watch-42mm, watchOS 4.0
Apple-Watch-Series-2-38mm, watchOS 4.0
Apple-Watch-Series-2-42mm, watchOS 4.0
Apple-Watch-Series-3-38mm, watchOS 4.0
Apple-Watch-Series-3-42mm, watchOS 4.0
iPhone-5s, 11.0
iPhone-6, 11.0
iPhone-6-Plus, 11.0
iPhone-6s, 11.0
iPhone-6s-Plus, 11.0
iPhone-7, 11.0
iPhone-7-Plus, 11.0
iPhone-SE, 11.0
iPhone-8, 11.0
iPhone-8-Plus, 11.0
iPhone-X, 11.0
iPad-Air, 11.0
iPad-Air-2, 11.0
iPad--5th-generation-, 11.0
iPad-Pro--9-7-inch-, 11.0
iPad-Pro, 11.0
iPad-Pro--12-9-inch---2nd-generation-, 11.0
iPad-Pro--10-5-inch-, 11.0
ターゲット指定（動かず。。。修正に期待）
$ ionic cordova emulate ios --target="iPhone-8, 11.0"
Androidエミュレート
- jdkをインストール
- http://www.oracle.com/technetwork/java/javase/downloads/
- ただし1.8以上かつ1.9はまだ未対応。。。
- Android Studioをインストール
- https://developer.android.com/studio/index.html
- 必要に応じてAndroid StudioのSDK Managerからダウンロード・同意を行う
- Android Studioでなにかしらプロジェクトを作り
実機へのデプロイ
アイコン・スプラッシュ
resources/icon.png、resources/splash.pngを置き換えた後に
$ ionic resources
を実行する
アイコンは1024×1024、スプラッシュ画像は2732×2732の.png/.psd/.aiを用意する
ログ