Help us understand the problem. What is going on with this article?

Ionic + Firebaseで記録するカレンダーアプリを作る その2 実機でビルド

More than 1 year has passed since last update.

完成イメージ

はじめに

環境は以下の通り
・ionic4
・Nativeとの橋渡しにはcapacitorを使用
・カレンダーについてはionic2-calendarというライブラリーを使用

前回はとりあえずカレンダーを表示させた。
:point_right:前回の記事はこちら

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成功!!

IMG_6139.JPG

iOS成功!!

IMG_20191007_220416.jpg

実機ビルドできなかった時に確かめるといい事

xcode

スクリーンショット 2019-10-07 22.10.21.jpg

signingのTearmの所がNoneになっていて、僕は何度も失敗を喰らった・・・。

Android Studio

これについてはよくわからん。
ビルドに失敗しても勝手に治ったりするし、逆に何もしていないのに失敗したり・・・。

一晩寝かせてみるといいかも。。(こんなクソ情報ですいません。。。)

※追記

頻繁に発生していたGradle関連のエラーは、このゾウさんのボタンで治るかもしれません!!

スクリーンショット 2019-10-17 20.48.25.jpg

最後に

続き:point_down:
その3 Firebaseにイベントを追加し取得

各ストアで配信されてます。
興味があれば使ってみてください。:relieved:

Apple Store

Google Play

kokogento
エストニアの電子国民e-Residencyです。2020/09より、東京で人生初の正社員に! 〇活を記録するアプリをIonic + Angularで開発し、運営中。アプリについては下記URLを参照。現在Vueを学習中。。。
https://gengendiary.world/first-app/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away