#完成イメージ
こんな感じ。 pic.twitter.com/CvOFjFq2th
— げん げんと (@gento34165638) November 2, 2019
#はじめに
環境は以下の通り
・ionic4
・Nativeとの橋渡しにはcapacitorを使用
・カレンダーについてはionic2-calendarというライブラリーを使用
前回はとりあえずカレンダーを表示させた。
前回の記事はこちら
XcodeとAndroid Studioがインストールされている前提で進める。
#実機でカレンダーを表示させる
前回カレンダーを表示させる段階まで行った。
今回はそれを実機でやってみよう。
基本公式ページをそのまま真似していく。
もし
ionic start myApp blank
でプロジェクトを始めているなら、config.xmlが存在しcapacitor.config.jsonがないかと思われる。
そんな場合はプロジェクトフォルダで
ionic integrations enable capacitor
のコマンドを実行しよう。
これでcapacitorを使ったビルドに必要な、capacitor.config.jsonが作成されるかと。
##アプリの初期設定
npx cap init [appName] [appId]
**・[appName]は日本語でもいける。**当然後から変更できるが、ちょっと面倒やし何より変な所を触ってバグられたら困る。。変えないつもりで入力した方が安全。
・[appId]はいわゆる逆ドメインの事。
例: com.example.app
少しネイティブアプリを触ったことがある人は「あーあれか」となるだろう。
ここではcom.名前.アプリ名で登録する。
よって
npx cap init 僕のカレンダー com.gento.mycalendar
とする。
##ビルドする
iOSとAndroidのプラットフォームをionicプロジェクトに追加する前に、一度ビルドする必要がある。
ionic build
20秒ぐらいはかかるかな？知らんけど。
このionic buildが具体的に何をしているのか、僕はあんまりわかっていない。
ビルドが終わるとwwwフォルダが作成させる。
##プラットフォームの追加
npx cap add ios
npx cap add android
ionicプロジェクトフォルダ直下にiosフォルダとandroidフォルダが作成された。
##XcodeとAndroid Studioでアプリを起動
npx cap open ios
npx cap open android
またCapacitor側にコピーもしましょう。
npx cap copy
さぁドキドキの瞬間。
iosならxcodeが、androidならAndroid Studioが起動してくれる。
シュミレーターでもいいけど、遅いので僕は実機で起動した。
Android成功！！
iOS成功！！
#実機ビルドできなかった時に確かめるといい事
##xcode
signingのTearmの所がNoneになっていて、僕は何度も失敗を喰らった・・・。
##Android Studio
これについてはよくわからん。
ビルドに失敗しても勝手に治ったりするし、逆に何もしていないのに失敗したり・・・。
一晩寝かせてみるといいかも。。（こんなクソ情報ですいません。。。）
※追記
頻繁に発生していたGradle関連のエラーは、このゾウさんのボタンで治るかもしれません！！
#最後に
続き
その3 Firebaseにイベントを追加し取得
各ストアで配信されてます。
興味があれば使ってみてください。