ヴェズルフェルニルの研究ノート

座右の銘「ただ一人犀の角のように歩め」的な研究活動ノート

Flutterのインストールと開発環境の構築〔iOS/Androidアプリ編〕

前記事にFlutterのインストールと開発環境構築方法について書いたが、これに続いて、FlutterによるiOSおよびAndroidアプリ開発用の追加的な環境構築手順を書いていく。

blog.ketus-ix.work

スマホアプリ開発を再開するにあたって、当面の目標として、ONVIF仕様IPカメラ(監視・防犯カメラ)とMatter規格スマートデバイス用のアプリを作りたいと考えている。

www.onvif.org csa-iot.org

元組み込み屋だったこともあって、小生はやはりハードウェア/デバイス絡みの開発に興味を惹かれてしまう。スマホと連携できるデバイスやガジェットが増えているので、そういうものを利用するモバイルアプリを作りたい。

技術スキル維持と開発トレンド追随のためにも、今後もスマホアプリ開発は続けていくつもりだ。いままでは主にFlutterを使ってきたが、(フレームワーク設計思想がFlutterと似ている)React Nativeも使ってみたいと思っている。

必要なツールのインストール

CocoaPodsのインストール

前記事のコマンド "flutter doctor" の出力情報で指摘されていたとおり、Xcodeとの連携のためにCocoaPodsも必要になる。

CocoaPodsの公式サイトによると、下のコマンドによってインストールできる。

% sudo gem install cocoapods

このコマンドはMacにデフォルトで入っているRubygemRubyのパッケージ管理コマンド)を使って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上でのmacOSiOSアプリ開発に必要なものだ。これらのアプリはXcodeが使えるMacでしか開発することはできない。

Android Studioのインストール

Android StudioAndroid 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アプリの開発に使用されるので、JavaJava JRE)もインストールする必要がある。

本記事執筆時点の最新Stable版Flutter SDKでは、Javaバージョン11以上20未満の使用が推薦されているようだ。

下のようなコマンドによって、Homebrewを使ってJavaをインストールできる。

% brew install openjdk@17

SDKMANを使ってJavaをインストールする方法もある。この方法については下の記事を参照してほしい。

blog.ketus-ix.work

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によるiOSAndroidアプリの開発環境はすべて整った。

VSCodeでいずれかのFlutterプロジェクト・ディレクトリを開くと、ターゲットデバイスとしてiOSAndroidの選択肢が増えていることが確認できるだろう。

なお、本記事執筆時点では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)] )を選択する。

すると、Androidエミュレータが起動する。

この状態で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エミュレータを使うことになるが、アプリ開発はほとんどこの環境で行うことができる。物理デバイス搭載の固有機能を利用するアプリでは実機での動作確認も必要となるが、実機を使った開発方法についてはまた別の記事で書くことになるだろう。

【参照リンク】

zenn.dev

book-reviews.blog