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

#完成イメージ
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こんな感じ。 <a href="https://t.co/CvOFjFq2th">pic.twitter.com/CvOFjFq2th</a></p>&mdash; げん げんと (@gento34165638) <a href="https://twitter.com/gento34165638/status/1190431795877007362?ref_src=twsrc%5Etfw">November 2, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#はじめに

環境は以下の通り
・ionic4
・Nativeとの橋渡しには[capacitor](https://capacitor.ionicframework.com)を使用
・カレンダーについては[ionic2-calendar](https://github.com/twinssbc/Ionic2-Calendar#readme)というライブラリーを使用

前回はとりあえずカレンダーを表示させた。
:point_right:前回の記事は[こちら](https://qiita.com/kokogento/items/e4071d3c5198f7b55c5a)

**XcodeとAndroid Studio**がインストールされている前提で進める。

#実機でカレンダーを表示させる

前回カレンダーを表示させる段階まで行った。
今回はそれを実機でやってみよう。

基本[公式ページ](https://capacitor.ionicframework.com/docs/getting-started/with-ionic/)をそのまま真似していく。

もし

```terminal
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/22f1778c-33ed-9af7-cd7a-973ac83299b9.jpeg)




iOS成功！！

![IMG_20191007_220416.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/f5eb119a-29e2-13e6-d42b-72efd913d410.jpeg)


#実機ビルドできなかった時に確かめるといい事
##xcode
<img width="1000" alt="スクリーンショット 2019-10-07 22.10.21.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/00481b98-1675-754b-cb57-3fb7f2a5e31b.jpeg">

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

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

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

**※追記**

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

<img width="189" alt="スクリーンショット 2019-10-17 20.48.25.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/39420d15-5f59-b792-911a-eeacc99473a3.jpeg">

#最後に
続き:point_down:
[その3 Firebaseにイベントを追加し取得](https://qiita.com/kokogento/items/ba59a9fb93294f6e3f4c)



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

<a href="https://apps.apple.com/jp/app/%E6%80%A7%E6%B4%BB%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC/id1484151444?mt=8">Apple Store</a>

[Google Play](https://play.google.com/store/apps/details?id=com.hCalendar.app)