snovaのブログ

主にプログラミングやデジタルコンテンツについて書きます。最近はPython, Flutter, VRに興味があります。

Flutterの開発環境をmacに導入

Flutter

イントロダクション

アプリやwebサービスを作るためには多くの方法があります。なかでも、Flutterは最近非常に盛り上がりを見せています。私自身、モバイルアプリ開発やwebアプリにはほとんど携わったことがないのですが、この機に勉強を兼ねてFlutterで遊んでみました。

目次

なぜFlutter？

Googleが開発しているのでAndroidはもちろん、iOS、webアプリを同時に作ることができます。 そして、マテリアルデザインにも対応しています。 Flutterで使われているDart言語はJavaに近いので、Javaを知っている人には覚えやすいかもしれません。

環境

公式によると、必要な要件は以下の通りです。

  • OS : macOS (64-bit)
  • ディスク容量 : 700MB
  • ツール(git以外はデフォルトで入っているはず) : bash, curl, git 2.x, mkdir, rm, unzip, which

インストール

公式サイトにしたがって、導入していきます。

Flutter SDKのダウンロード

  1. 公式サイトからzipファイルをダウンロード
  2. 適当な場所で解凍し、置きたい場所に移動
  3. PATHを通す(ex. $ export PATH="$PATH:/Applications/flutter/bin")
  4. (オプション)開発バイナリをプレダウンロードしたいときは$ flutter precashe
  5. $ flutter doctorでPCの環境をチェック(ログは以下参照)

flutter doctorで未インストールのツールを表示した結果。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your
        plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[!] Android Studio (not installed)
[!] VS Code (version 1.34.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

セットアップ

flutter doctorの結果を受けて、必要なツールのインストールをします。

iOSセットアップ

  1. App StoreからXcodeのインストール
  2. $ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developerをターミナルで実行
  3. $ sudo xcodebuild -license → agreeでライセンス
  4. $ open -a Simulatorでシミュレータを起動
  5. Hardware > DeviceでiPhone 5S以上の端末になっているか確認、画面のサイズを変更するときはWindow > Scale
  6. 初期化されたアプリを生成するため、以下のコマンド6でflutter起動
flutter create my_app
cd my_app
flutter run

もしiOSデバイスでテストするなら以下の手順を踏みます。

  1. 準備をするため、以下のコマンドを実行
  2. $ open ios/Runner.xcworkspace → Runnerタブ → signingのteamで自分のApple IDを認証
  3. Runnerタブ → Bundle Indentifierでオリジナルなものに変更(com.[my team name].testApp等、ここで少し詰まった)
  4. iOSデバイスをmacと接続(初めて接続するときは信頼をタップ)
  5. 設定 → 一般 → デバイス管理→[自分のアカウント名] → このアカウトを信頼
  6. flutter runでiOSデバイス上で起動

1でインストールするツールは以下。

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

3がうまくできていないときは以下のようなエラーメッセージが出ます。Teamの設定を確認し、Bundle Identifierは適当なものに変えてください。

...

Could not build the precompiled application for the device.

It appears that your application still contains the default signing identifier.
Try replacing 'com.example' with your signing id in Xcode:
  open ios/Runner.xcworkspace

Error launching application on your iPad Pro.

すべてインストールが終了し、もう一度$ flutter doctorをして、以下の結果が出ればOK。

[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)

Androidセットアップ

  1. Android Studioをインストール
  2. $ flutter doctor --android-licensesでライセンスを確認
  3. Android Studioを起動して、configure → pluginでflutterと検索、インストール
  4. (実機で動かすとき)AndroidデバイスをUSBでmacと接続して、設定 → 開発者向けオプションで開発者向けオプションとUSBデバックを有効にする
  5. (エミュレータを使うとき)Android Studioを起動し、configure → AVD manager → Create Virtual Deviceで画面の指示に従いエミュレータを作成、起動

2でライセンスを確認しないと、$ flutter doctorで以下のようなエラーが出ます。

 [!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

3でプラグインを導入しないと、$ flutter doctorで以下のようなエラーが出ます。

[!] Android Studio (version 3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

VScodeプラグイン

$ flutter doctorを起動すると、以下のようなエラーメッセージが出ます。これはVScodeのプラグインが入っていないためですので、VScodeでflutterと検索、インストールします。

[!] VS Code (version 1.34.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

実行

上記すべて完了したら、$ flutter doctorで状態を確認します。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale ja-JP)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[✓] Android Studio (version 3.4)
[✓] VS Code (version 1.34.0)
[!] Connected device
    ! No devices available

試しにiPadを繋いで$ flutter runしてみたら、問題なくテストアプリ(ボタンを押してカウントするアプリ)を起動できました。

まとめ

macOSにFlutterの開発環境を導入しました。導入は基本的にflutter doctorの指示に従えば問題なくできるはずです。今後は簡単なアプリを作って練習していきたいと思います。

参考サイト

snova301.hatenablog.com

Google Play and the Google Play logo are trademarks of Google LLC.