前記事にFlutterのインストールと開発環境構築方法について書いたが、これに続いて、FlutterによるiOSおよびAndroidアプリ開発用の追加的な環境構築手順を書いていく。
スマホアプリ開発を再開するにあたって、当面の目標として、ONVIF仕様IPカメラ（監視・防犯カメラ）とMatter規格スマートデバイス用のアプリを作りたいと考えている。
元組み込み屋だったこともあって、小生はやはりハードウェア／デバイス絡みの開発に興味を惹かれてしまう。スマホと連携できるデバイスやガジェットが増えているので、そういうものを利用するモバイルアプリを作りたい。
技術スキル維持と開発トレンド追随のためにも、今後もスマホアプリ開発は続けていくつもりだ。いままでは主にFlutterを使ってきたが、（フレームワーク設計思想がFlutterと似ている）React Nativeも使ってみたいと思っている。
必要なツールのインストール
CocoaPodsのインストール
前記事のコマンド "flutter doctor" の出力情報で指摘されていたとおり、Xcodeとの連携のためにCocoaPodsも必要になる。
CocoaPodsの公式サイトによると、下のコマンドによってインストールできる。
% sudo gem install cocoapods
このコマンドはMacにデフォルトで入っているRuby（gemはRubyのパッケージ管理コマンド）を使ってCocoaPodsのインストールを行っているが、言語バージョン管理ツールを使っている場合はそちらを利用した方が良い。
- anyenvを使っている場合
% anyenv install rbenv % exec $SHELL -l % rbenv install --list % rbenv install 3.3.1 % rbenv rehash % rbenv global 3.3.1 % cd % which ruby /Users/LOGNAME/.anyenv/envs/rbenv/shims/ruby /usr/bin/ruby % ruby --version ruby 3.3.1 (2024-04-23 revision c56cd86388) [x86_64-darwin21] % which gem /Users/LOGNAME/.anyenv/envs/rbenv/shims/gem /usr/bin/gem % gem install cocoapods % pod --version 1.15.2
- asdfを使っている場合
% asdf plugin add ruby % asdf install ruby latest % asdf reshim % asdf global ruby latest % cd % which ruby /Users/LOGNAME/.asdf/shims/ruby /usr/bin/ruby % ruby --version ruby 3.3.1 (2024-04-23 revision c56cd86388) [x86_64-darwin22] % which gem /Users/LOGNAME/.asdf/shims/gem /usr/bin/gem % gem install cocoapods % pod --version 1.15.2
XcodeとCocoaPodsはMac上でのmacOSやiOSアプリ開発に必要なものだ。これらのアプリはXcodeが使えるMacでしか開発することはできない。
Android Studioのインストール
Android StudioはAndroid Studioの公式サイトから入手できる。
下のようなコマンドによって、Homebrewを使ってAndroid Studioをインストールすることもできる。
% brew install --cask android-studio
Android Studioをインストールしたら、一度起動して、表示されるガイド画面に従って操作を行い初期セットアップを終わらせおく。
Android SDK Command-line Toolsのインストール
Android Studio起動後のWelcome画面上のプルダウンメニュー [More Actions] > [SDK Manager] を選ぶ（あるいは、メニュー [Settings]を選択する）。
すると、下のような画面が開く。
この画面内の項目 [Languages & Frameworks] > [Android SDK] の [SDK Tools] タブ画面から、 [Android SDK Command-line Tools (lastest)] チェックボタンを有効にして、[OK] ボタンを押す 。
この操作によって、有効にしたコンポーネントの追加インストールが開始される。
Javaのインストール
Androidアプリの開発に使用されるので、Java（Java JRE）もインストールする必要がある。
本記事執筆時点の最新Stable版Flutter SDKでは、Javaバージョン11以上20未満の使用が推薦されているようだ。
下のようなコマンドによって、Homebrewを使ってJavaをインストールできる。
% brew install openjdk@17
SDKMANを使ってJavaをインストールする方法もある。この方法については下の記事を参照してほしい。
asdfを使っている場合は、下のコマンドによってasdfを使ってJavaをインストールできる。
% asdf plugin add java % asdf install java temurin-jre-17.0.11+9 % asdf reshim % asdf global java temurin-jre-17.0.11+9 % exec $SHELL -l % cd % which java /Users/LOGNAME/.asdf/shims/java /usr/bin/java % java -version openjdk version "17.0.11" 2024-04-16 OpenJDK Runtime Environment Temurin-17.0.11+9 (build 17.0.11+9) OpenJDK 64-Bit Server VM Temurin-17.0.11+9 (build 17.0.11+9, mixed mode)
Flutter開発環境の状態確認
上記の手順操作がすべて済んだら、下のコマンドによってFlutter開発環境の状態を確認してみよう（FVMを使っている場合のコマンドは "fvm flutter doctor"）。
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.6, on macOS 13.4.1 22F770820d darwin-x64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.90.1)
[✓] Connected device (2 available)
[✓] Network resources
! Doctor found issues in 1 category.
前記事と本記事のここまでの手順操作がすべて済んでいれば、多分上のような表示になるんじゃないだろうか。
上の出力情報中で指定されている問題点 "Some Android licenses not accepted. " は、以下の操作によって解決できるだろう。
警告文中のアドバイスのとおり、下のコマンドを実行する（FVMを使用している場合のコマンドは "fvm flutter doctor --android-licenses"）。
% flutter doctor --android-licenses
これによって、Android Studio内のコンポーネントのライセンス条文が順次表示され、その同意/拒否を求められるので、すべてに "y" とタイプする。
この操作が済めば、コマンド "flutter doctor" の実行結果は下のような出力表示になるはずだ。
% flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.19.6, on macOS 13.4.1 22F770820d darwin-x64, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2024.1) [✓] VS Code (version 1.90.1) [✓] Connected device (2 available) [✓] Network resources • No issues found!
これで、 FlutterによるiOSとAndroidアプリの開発環境はすべて整った。
VSCodeでいずれかのFlutterプロジェクト・ディレクトリを開くと、ターゲットデバイスとしてiOSとAndroidの選択肢が増えていることが確認できるだろう。
なお、本記事執筆時点ではAndroidのターゲットデバイスは上のようになっているが、これは導入したAndroid Studioのリリースバージョンによって変化する。
iOSアプリのビルドと動作確認
Visual Studio Code使用
VSCodeでFlutterプロジェクトのディレクリを開き、ターゲットデバイスから [Start iOS Simulator] を選択する。
すると、iOSシュミレータが起動する。
この状態でVSCodeのメニュー [Run (実行)] > [Start Debugging (デバッグの開始)] または [Run Without Debugging (デバッグなしで実行)] を選ぶと、プロジェクトのビルドが行われ、ビルドが成功すれば、iOSシュミレータ上でアプリが起動する。
ターミナル使用
ターミナルから同じ操作を行うこともできる。
まず、下のコマンドによってiOSシュミレータを起動する。
% open -a Simulator
この状態で、Flutterプロジェクト・ディレクリ内で下のコマンドを実行すると、プロジェクトのビルドが行われ、ビルドが成功すれば、iOSエミュレータ上でアプリが起動する。
% cd FLUTTER_PROJECT_DIR % flutter run
iOS仮想デバイスの追加
iOSシュミレータを使って、新しいiOS仮想デバイスを作成することができる。
iOSシュミレータのメニュー [File] > [New Simulator] を選ぶと、下のような画面が開く。
この画面のメニューからデバイス種別とiOSバージョンを選んで、[Create] ボタンを押せば、仮想デバイスが作成される。
作成されたデバイスはメニュー [File] > [Open Simulator] の項目として追加されているので、同メニュー項目を選べば、そのデバイスが起動する。
この状態でVSCodeのメニュー [Run (実行)] > [Start Debugging (デバッグの開始)] または [Run Without Debugging (デバッグなしで実行)] を選ぶと、開いているiOSデバイス上でプロジェクト・アプリが起動する。
Androidアプリのビルドと動作確認
Visual Studio Code使用
VSCodeでFlutterプロジェクトのディレクリを開き、ターゲットデバイスからいずれかのAndroidデバイス（本記事執筆時点では、 [Start Pixel Fold API 35 mobile emulator] か [Start Pixel Fold API 35 mobile emulator (cold boot)] ）を選択する。
この状態でVSCodeのメニュー [Run (実行)] > [Start Debugging (デバッグの開始)] または [Run Without Debugging (デバッグなしで実行)] を選ぶと、プロジェクトのビルドが行われ、ビルドが成功すれば、Androidエミュレータ上でアプリが起動する。
ターミナル使用
ターミナルから同じ操作を行うこともできる。
まず、下のコマンドによってAndroidエミュレータを起動する。
% flutter emulators --launch Pixel_Fold_API_35
この状態で、Flutterプロジェクト・ディレクリ内で下のコマンドを実行すると、プロジェクトのビルドが行われ、ビルドが成功すれば、Androidエミュレータ上でアプリが起動する。
% cd FLUTTER_PROJECT_DIR % flutter run
Android仮想デバイスの追加
Android StudioのVirtual Device Mangerを使って、新しいAndroid仮想デバイスを作成することができる。
Android Studio起動後のWelcome画面上のプルダウンメニュー [More Actions] > [Virtual Device Manager] を選ぶ。
すると、下のようなVirtual Device Managerの画面が開く。
この画面の左上の [ ＋ ] ボタンを押すと、下のような画面が順次表示される。
各画面でデバイスとAPIの種類を選択し、最後にデバイス名を入力をして [Finish] ボタンを押せば、新しい仮想デバイスが作成される。
Virtual Device Mangerによって作成したデバイスはVSCode側にも反映される。
Virtual Device Mangerでデバイス名の左側の [ ▷] ボタンを押すか、VSCode側のコマンドパレット・メニューからデバイスを選択すると、Androidエミュレータでその仮想デバイスが起動する。
この状態でVSCodeのメニュー [Run (実行)] > [Start Debugging (デバッグの開始)] または [Run Without Debugging (デバッグなしで実行)] を選ぶと、開いているAndroidデバイス上でプロジェクト・アプリが起動する。
経験則的な情報だが、GPUを搭載していないPC（CPU内蔵GPU Intel Graphicsのみ搭載機）ではAndroidエミュレータは極端に動作が遅くなり、実用に耐えられないほど反応が悪くなる。そういうPCでは実質的にAndroidアプリの開発はできないと思った方が良い。
Flutterコマンド
iOS/Androidアプリの開発において、利用する可能性の高いFlutterのコマンドを列記しておく。
プロジェクトの作成
% flutter create PROJECT_NAME
% mkdir FLUTTER_PROJECT_DIR % cd FLUTTER_PROJECT_DIR % flutter create .
プロジェクトのビルド
% flutter build TARGET_ENV
※TARGET_ENV = web | macos | linux | windows | ios | android
プロジェクト・ビルドの削除
% flutter clean
パッケージ（ライブラリ）の更新
% cd FLUTTER_PROJECT_DIR % flutter pub get
pubspec.yamlの編集後、本コマンドを実行することでプロジェクトが利用しているパッケージの更新が行える。
パッケージの追加
% flutter pub add PACKAGE
pubspec.yamlの内容も更新される。
パッケージの削除
% flutter pub remove PACKAGE
pubspec.yamlの内容も更新される。
パッケージ依存関係の表示
% flutter pub deps
ターゲットデバイス一覧の表示
% flutter devices
iOS/Androidエミュレータの場合は、これらが事前に起動している状態でなければデバイス情報は表示されない。
エミュレータ一覧の表示
% flutter emulators
エミュレータの起動
% flutter emulators --launch EMULATOR_NAME
（Xcodeが導入済みで）iOSシュミレータと（Android Studioが導入済みで）Androidエミュレータが存在する状態では、コマンド "flutter emulators" の出力は以下のようになる。
% flutter emulators 3 available emulators: apple_ios_simulator • iOS Simulator • Apple • ios Pixel_Fold_API_35 • Pixel Fold API 35 • Google • android
この場合、下のようなコマンドによってiOSシュミレータを起動できる。
% flutter emulators --launch apple_ios_simulator
また、下のようなコマンドによってAndroidエミュレータを起動できる。
% flutter emulators --launch Pixel_Fold_API_35
アプリの実行
% flutter run
すべてのターゲットデバイス向けにコマンド "flutter pub get" や "flutter pub build" 、アプリのインストールまでの一連の操作処理が実行される。
リリースモードでのアプリの実行
% flutter run --release
デバッグモードでのアプリの実行
% flutter run --debug
ビルド無しでアプリの実行
% flutter run --no-build
ターゲットデバイスを指定してアプリの実行
% flutter run -d DEVICE_ID
※DEVICE_ID = コマンド "flutter devices" で表示されるデバイスIDを指定。
iOSシュミレータとAndoridエミュレータを起動している状態では、コマンド "flutter devices" の出力は以下のようになる。
% flutter devices Found 4 connected devices: sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 15 (API 35) (emulator) iPhone 14 Pro Max (mobile) • 42BB6078-C13C-4A30-A42F-E60DE8CFB18D • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) macOS (desktop) • macos • darwin-x64 • macOS 13.4.1 22F770820d darwin-x64 Chrome (web) • chrome • web-javascript • Google Chrome 126.0.6478.63 No wireless devices were found.
この場合、下のようなコマンドによってプロジェクト・アプリをiOSシュミレータ上で起動できる。
% flutter run -d 42BB6078-C13C-4A30-A42F-E60DE8CFB18D
また、下のようなコマンドによってプロジェクト・アプリをAndroidエミュレータ上で起動できる。
% flutter run -d emulator-5554
起動デバイスのスクリーンショットを取得
% flutter screenshot
コマンド "flutter screenshot --out FILE_PATH" によってスクリーンショット・ファイルの出力先パスを指定できる。
iOSシュミレータとAndroidエミュレータを使うことになるが、アプリ開発はほとんどこの環境で行うことができる。物理デバイス搭載の固有機能を利用するアプリでは実機での動作確認も必要となるが、実機を使った開発方法についてはまた別の記事で書くことになるだろう。
【参照リンク】
https://book-reviews.blog/launch-the-flutter-application-on-iOS-and-Android-emulator/book-reviews.blog
