MacにFlutterでiOSとAndroidのアプリ開発環境を構築する

mac-flutter-dev
  • URLをコピーしました!

今回は、macOSFlutter開発環境を構築する手順を詳しく解説します。
Flutterとは、Googleが開発したAndroidiOSの両方のアプリを開発できる便利なフレームワークです。
Flutterを使用することで、1つのコードベースからAndroidiOSの両方のネイティブアプリを開発できます。
開発を始める前に、以下の手順に従ってFlutter開発環境を整えましょう。

目次

Flutterとは

まず、Flutterについて少しだけ説明します。(知っている方は読み飛ばしてください)
なぜFlutterを注目されているのかというと、異なるプラットフォームアプリを開発する場合、例えばiOSならSwiftAndroidならKotlinなど、それぞれプログラミング言語が違います。
しかしFlutterの場合は、同じコードで両方のプラットフォーム向けのアプリを作成できるため、開発の効率が大幅に向上するからです。

Flutterは、Dartというプログラミング言語アプリを記述します。
Dartは初心者にも学びやすく、言語仕様がシンプルです。
Flutterは、アプリのビジュアル要素をウィジェットと呼ばれる部品で視覚的なコンポーネント(ボタン、テキスト、アニメーションなど)を表現します。

手段と目標

Flutterをインストールする前に、開発環境に必要なものと、構築完了のゴールを決めておきます。

パッケージのバージョン管理には、FlutterだけでなくXcode等もHomebrewを使用します。
基本的に最新バージョンで構築し、自動的に更新しても良いですが、複数人で開発する際にバージョン違いでトラブルになったりするので、念の為入れておきます。

Flutterの開発環境が正常に構築できたことを確認するためのコマンドが用意されていますので、最終的にはflutter doctor -vコマンドの実行結果にエラーも警告も出ないことで完了とします。

実際の開発は、XcodeAndroid Studioではなく、Visual Studio Code(以下、VSCode)で開発できるようにします。

スクロールできます
必要なもの説明
HomebrewmacOS上で動作するパッケージ管理システム
FlutteriOSとAndroidの両方に対応したモバイルアプリ用フレームワーク
Rosetta2Apple Silicon Mac上でIntel対応アプリを動作させるためのプログラム
CocoaPodsiOSアプリ開発で使用するライブラリの管理ツール
XcodeAppleのiOSアプリ開発用の公式の統合開発環境(IDE)
Android StudioAndroidアプリ開発用の公式の統合開発環境(IDE)
VSCodeMicrosoftのクロスプラットフォーム対応のコードエディター
Flutter開発環境構築に必要なもの

Homebrewのインストール

Homebrewのインストール

Homebrewはパッケージ管理システムで、開発環境のセットアップに便利です。
Flutter以外の開発でも使用することが多いので、とりあえず入れていても損はないです。

ターミナルを開いて以下のコマンドを実行します。

パスワードを聞かれたら、Macのログインパスワードを入力してください。

以下が表示されたら、エンター(リターン)またはその他のキーを押下します。

ディレクトリへのアクセス権限の許可を求められるので、再度Macのログインパスワードを入力します。

しばらく待てばイントール完了です!

【補足】パスを通す

最新版のHomebrewでは、インストール時に自動でパスが通っていましたが、もしパスが通っていない場合は、インストールの最後に表示される文章をよく読み、パスを通してあげてください。

/Users/admin/$HOMEでも~/でも可
念のため、以下のコマンドで設定を確認しましょう。

最後に、brewコマンドが使えるようになっているか、バージョン情報を表示して確認します。

Flutterのインストール

Flutterのインストール

先程インストールしたHomebrewを使って、Flutterをインストールします。

公式サイトからダウンロードしてインストールする手順はこちらから(M系チップを搭載したApple Silicon Macは「Apple Silicon」を選択すること)

【補足】パスを通す

もし、Flutterの公式サイトからインストールした場合は、手動でパスを通す必要があります。
しかし、ここで1つ注意点です。
環境によってパスを書く場所が異なりますので、まずは以下のコマンドパスをどこに書くか確認しましょう。

著者のM2 MacBook Airの場合は、~/.zshrcでした。
ですので、次のコマンドで書くか、vi等でファイルを開いて直接書くのもありです。

そして、よく忘れがちなsourceコマンドによる設定の反映を忘れないようにしてください。

最後に、Flutterパスが正しく通っているか、バージョン確認でもしてみましょう。

Rosetta2とCocoaPods

Intel Mac向けに作られたアプリApple Silicon Macでも使えるようにしてくれる「Rosetta2」と、iOSアプリ開発には必須とも言えるiOSアプリのライブラリ管理ツールCocoaPods」をインストールします。

管理者

ごちゃごちゃ言いましたが、この2つはとりあえず何も考えないで入れておけば良いです。

Rosetta2のインストール

Apple Silicon Mac(M系チップ使用のMac)の場合のみ、以下のコマンドRosetta2をインストールします。

特に何もする必要はありません。
しばらく待って、成功の表示が出たら完了です。

CocoaPodsのインストール

CocoaPodsも以下のコマンドだけでインストールが完了します。
こちらも特に何もする必要はありません。

Xcodeのインストール

Xcodeのインストール

Xcodeのインストールは以下の3つから好みの方法を選んでください。
--caskオプションを付けることで、GUIで好きなバージョンを選択してインストールできる「Xcodes.app」アプリも利用可能になるので、個人的には「1」がオススメです!
XcodeをインストールするにはApple IDが必要

GUIでバージョンを指定してインストールする場合

完了したら「Xcodes.app」アプリを起動して好きなバージョンをインストールしてください。

CLIでバージョンを指定してインストールする場合

App Storeからインストールする場合

App Store公式サイトからダウンロードしてください。

App Store以外にもApple Developerからインストールする方法もありますが、ここでは割愛します。

Xcodeのバージョンを切り替える

初回起動とシミュレーターの確認

インストールが完了したら、Xcodeを起動してプロジェクトを作成しようとしてください(実際には作成しなくて良いです)。
そこで、インストールされてないシミュレーターが表示されたらインストールしておきます。
インストールが完了したら、以下のコマンドシミュレーターを起動できるか確認する

Android Studioのインストール

Android Studioのインストール

Android Studioも同様に、brewコマンドを使用してCLIでインストールします。

Webからダウンロードする場合

Android Studio公式サイトからダウンロードしてください。
ダウンロードする際は「Mac with Apple chip」を選択してください

初期設定

インストールが完了したら、Android Studioアプリを起動して次のように進めます。

Android Studioの初期設定手順
  • Import Android Studio Settings:「Do not import settings」を選択して「OK」ボタン押下する
  • Help improve Android Studio:「Don’t send」ボタン押下する
  • Welcome:「Next」ボタンを押下する
  • Install Type:「Standard」を選択して「Next」ボタンを押下する
  • Select UI Theme:<どちらでも可>(個人的にはダークモード推奨)
  • Verify Settings:「Next」ボタンを押下する
  • License Agreement:Acceptを選択して「Finish」ボタンを押下する

以下の参考サイトが画像付きでわかりやすかったです。

SDKツールを導入

次に、Android Studioのメニューから「Preferences」を開いて、以下の項目から「Android SDK Command-line Tools」をインストールします。

Android SDKの導入手順
  • 「Appearance & Behavior」>「System Settings」>「Android SDK」を選択する
  • 「SDK Tools」のタブを選択する
  • 「Android SDK Command-line Tools」をチェックする
  • 「OK」ボタンを押下する

ライセンスに同意

ライセンスに同意する必要があるので、以下のコマンドを実行します。

規約と共に何度か同意を求められるので、すべて「y」を押下してください。

最後に以下が表示されたら完了です。

エミュレータの確認

ここまででAndroid Studioの設定が完了しましたので、最後にエミュレーターを起動してみましょう!

エミュレータを確認する手順
  • 「More Actions」から「Virtual Device Manager」を選択
  • エミュレータの下矢印(▼)をクリックして「Wipe Data」を選択
  • エミュレータの再生(▶)をクリックして起動する

VSCodeのインストール

VSCodeのインストール

VSCodeもここではbrewコマンドを使ってCLIでインストールしますが、正直、個人的にはVSCodeに関してはバージョン管理をする必要性が感じられないです…。

Webからダウンロードする場合

Visual Studio Code公式サイトからダウンロードしてインストールしてください。

プラグインのインストール

プラグイン」の検索窓で「Flutter」を検索してインストールします。
念のため「Dart」も検索し、もしFlutterと一緒に入ってければインストールしてください。

Flutterの確認

最後に、以下のコマンドを実行してエラー()や警告()がなく、すべて完了()になれば完了です。

もし、エラー()や警告()がある場合は、指示に従って改善してください。

以上がApple Silicon Mac上にFlutter開発環境を構築する手順になります!
これで快適にiOSAndroidアプリを開発できます。
初めての方は、他のサイトを参考にHello Worldなどをやってみてください。
お疲れ様でした!

参考・引用サイト
著:掛内 一章
¥4,096 (2024/07/12 07:24時点 | Amazon調べ)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次