【Flutter】iOSアプリの開発環境を整える(環境構築②)2024年最新版

※本記事で使用している環境

<パソコン>
機種:MacBook Air(13inch)
OS:macOS Sonoma(ver.14.5)
チップ:Apple M3
シェル:zsh

<ソフトウェア>
・Flutter(ver.3.22.3)
・Xcode(ver.15.4)
・CocoaPods(ver.1.15.2)

前回は、M1〜M3チップのMacパソコンでFlutter SDK をインストールする方法の解説を行いました。

今回は、Xcode のインストールなど、iOSアプリの開発環境を整える方法の解説を行います。

記事を執筆するにあたって、以下の書籍を参考にしました。

おすすめ書籍

目次

公式ドキュメントの該当箇所

主に、赤枠で囲まれた部分「Configure iOS development」を扱います。

内容としては、Xcode のインストールCocoaPods のインストールです。

説明画像1

Xcode のインストールと設定

Xcode のインストールと設定を行います。

説明画像2

Xcode のインストール手順

STEP
Launchpad を起動
説明画像3
STEP
App Store を起動
説明画像4
STEP
Xcode をインストール
説明画像5

1: 検索ボックスで「Xcode」と検索

2: 「入手」をクリック
※僕の画面は、すでにインストールした経験があるため、画面のようなマークが表示されています

Xcode の設定

STEP
ターミナル を起動
説明画像6
STEP
新しくインストールした Xcode のバージョンを使うためのコマンドラインツールの設定

何をやっているかわからなくても構いません。

とにかく、以下のコードをターミナルに打ち込んでください。

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'
説明画像7
STEP
デバイスのパスワードを入力

すると、パスワードの入力を求められます。

説明画像8
STEP
enter キーを押す

ライセンスに同意していないため、同意する必要があり、ライセンスを画面に表示させるためには、

enter

を押してくださいと指示されます。

説明画像9
STEP
ライセンスに同意する

ライセンスに同意できる場合は、

agree

と入力しましょう。

説明画像10

ここで、

cancel

を押してしまった人は、STEP7 にいきましょう。

STEP
設定が完了しました。
説明画像11
STEP
ライセンスに同意しそびれた人はこちら

ターミナルに、

sudo xcodebuild -license

と入力します。

説明画像12

次に、

agree

と入力しましょう。

説明画像13

これで、Xcode のインストールは終了です。

iOS シミュレーターの起動

iOS シミュレーターのインストールと起動を行います。

説明画像14
STEP
iOS シミュレーターを入れる
xcodebuild -downloadPlatform iOS

と入力します。

説明画像15
STEP
iOS シミュレーターを起動する
open -a Simulator

と入力すると、iOS シミュレーターが立ち上がります。

説明画像16
説明画像17
説明画像18

この画面になったら、iOS シミュレーターの設定は終了です。

CocoaPods のインストール

CocoaPods のインストールを行います。

説明画像19

CocoaPods のインストール手順

STEP
CocoaPods をインストールするコマンドを入力
sudo gem install cocoapods

をターミナルに入力する。

説明画像20
STEP
デバイスのパスワードを入力

パスワードの入力を求められます。

説明画像21
STEP
インストールが終了
説明画像22

エラーが出てインストールできない場合

様々な要因がありますので、基本的にはエラーメッセージをコピーして検索するなど、できる限り調べて対処しましょう。

今回は2つほど紹介します。

libのヘッダーが見つからない

Cocoapodsをインストールする前に、以下のコードを入力します。

sudo xcode-select --switch /Library/Developer/CommandLineTools

これを実行した後に、以下のコードを入力するとうまくいくはずです。

Rubyのバージョンが低い

説明画像23

僕は今回、このようなエラーメッセージが表示されてしまいました。

ChatGPTに聞いてみると、このように回答されました。

ChatGPT画面

つまり、Rubyのバージョンが足りていなかったのです。

バージョンを上げる方法はこちらを参考にしてください。

PATH(パス)を通す

STEP
.zshenv ファイルを開く
vim ~/.zshenv

と入力し、.zshenv ファイルを vim エディターで開きます。

説明画像24
STEP
.zshenv ファイルが開かれた画面

キーボードの

i

を押して、INSERT(インサート)モードにしたら以下のコードを入力します。

export PATH=$HOME/.gem/bin:$PATH
説明画像25

esc

を押して、

:wq

で保存して終了します。

STEP
ファイルを読み込む
source ~/.zshenv

でファイルを読み込むか、ターミナルを閉じて再度起動します。

説明画像26

ここまで完了したら、CocoaPods のインストールは終了です。


これにて、iOSアプリの開発環境を整える方法の解説を終わります。

次回は、環境構築がうまくできているかを確認する方法の解説を行います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

shimaのアバター shima ライター

20代のITライター。
ITやソフトウェアに関することをわかりやすくまとめ、多くの人にそれらを知ってもらおうと活動しています。
ご質問やご要望、お仕事依頼がございましたらお問合せフォームよりお願いいたします。

コメント

コメントする

CAPTCHA



reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

目次