hAcKTion

日々のアウトプット場所。

IonicとCapacitorを使ったアプリを準備する(iOSプロジェクトの設定)

前回から引き続き、IonicとCapacitorのアプリを構築していきます。 次は、iOSのプラットフォーム(プロジェクト)をアプリに追加します。

$ npx cap open ios

差分はこのようになりました

package.jsondependencies@capacitor/ios が追加されています。
そして ios/ というディレクトリが作られて中に様々なファイルが入っています。
iPhoneアプリを作った事がないので詳細はよくわかりませんが、アプリを起動してWebviewのガワを表示するところまでを準備してくれていそうです。
ここにリソースとしてSPAを埋め込んでおくのかなと今のところ理解しています。

こうする事で、作ったSPAを内包したアプリをXcodeで開く事ができます。 下記コマンドで、SPAをiOSプロジェクトに反映させることができます。

$ npx cap copy

ちなみに、このコマンドでAndroidのプロジェクトにも同時に反映されます。

上記の通り、アプリとして動かすためにはXcodeをインストールする必要があります。(Android Studioと比にならないサイズの8.1GB...)

Xcode

Xcode

  • Apple
  • 開発ツール
  • 無料
apps.apple.com

初めてXcodeを立ち上げたら、以下のようなダイアログが出てきたので、インストールします。

f:id:akt-uehr:20200830160102p:plain

下記コマンドでiOSプロジェクトをXcodeで開きます。

$ npx cap open ios

画面左上にある、再生マークを押します。

f:id:akt-uehr:20200830202409p:plain

すると、iPhoneSE (2nd generation)のシミュレーターが立ち上がります。
違うデバイスのシミュレーターにする場合は、再生マークの右側にあるデバイス部分で選択できます。

f:id:akt-uehr:20200830202536p:plain

Androidと違ってすんなりできました。
おそらく、Android Studioと違って、シミュレーター関連もアプリケーションと一緒にダウンロードしてきているのだと思います。

実機でデバッグしてくには、色々とアカウント周りも必要になってきた記憶がありますが、一旦必要になったらまた設定することにして、次からはIonicとCapacitorを使ったアプリを作っていきます。