フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

【Ionic Angular】シュミレータでアプリを表示してみる

スポンサーリンク

スポンサーリンク

 

前回の続き

www.ksakae1216.com

 

使ってるMacBook ProのSSDが128GBしかなく、Xcodeをインストールできず、ブラウザの確認までとなったのが前回。

 

PC変えて、Xcodeインストールできたので続きをやってみる

 

 

M1 MacBook Air購入

SSDは256GB、メモリは念の為、16GBに。

これでSSDの容量を心配する必要が無くなる。

あと、みんな言ってる通り、速いし、バッテリー持ちバツグンだし、タッチID最高。

M1 MacBook Air

 

先代(MacBook Pro)は2017年購入時で16万円だったから、大分安くなってるな。

MacBook Pro 2017 13インチをポチりました!! - フリーランス チャレンジ!!

※ちなみにAppleに下取りすると2万円。

 Airは仕事専用、Proはプライベート用としておこう。

 

XcodeにAppleID追加

そんなわけで、M1 MacBook Airでやってく。

下記の手順通りに。

iOSでの開発 - Ionic Framework 日本語ドキュメンテーション

 

XcodeにAppleID追加

Xcode AppleID追加

 

iOSシュミレータの作成

Xcodeを開き、Window » Devices and Simulators に移動します。iPhone 11シミュレータが存在しない場合は作成します。

なるほど、そんざいしないので追加する

iOSシュミレーター

 

デプロイユーティリティをインストール

ios-sim と ios-deploy は、開発中にiOSシミュレータとiOSデバイスにアプリをデプロイするユーティリティです。これらは npm を使ってグローバルにインストールすることができます。

ふむふむ。

 

gista3db98f8083eda122f3eef3dfdcceaed

 

よしインストール完了。

 

プロジェクト設定

capacitorコマンド実行したら既にインストール済みだと言われた。

前回やってたんだな。

 

Package IDを設定は、何に変更すれば良いのか分からず、一旦skip。

 

Xcodeでプロジェクトを開く

gist3bef165c79457026621c02c439737a4e

 

ワーニングがでてる。(ドキュメントも出てるからいいのかな?)

確認がピンとこないのでこのまま進む。

 

Xcodeで実行

コピーコマンドを実行

gista6e249b4eee7f6d6dd767dcb1264ee29

 

Xcodeでシュミレータ選択して実行してみる

 

ぐぬぬ、エラーだ。

 

別のやり方

ふむ、コマンドでもいけるのか

Capacitor - build cross platform apps with the web

 

pod installでエラーが出た

pod install エラー

 

下記で解決(M1の問題か。。。)

M1 Macでpod installを実行する

 

もう一度、動いた!!!

 

Xcodeでも動いた

コマンドでシュミレータが動いた後に、Xcodeでも実行したら動いた。

youtu.be


最後に

Xcodeでシュミレータ起動するとこまでできて良かった!!

M1買った甲斐があった。