この記事について
アプリエンジニアの @anabebe です。
私事ですが、M1チップのMacBookを購入しました。
「M1に買い替えたら○○が動かねえ!」
的な断末魔をTwitterでよく見かけたので、環境構築の記録を残します。
これからM1 MacでFlutterの環境構築する人は参考になるかもです。
動作環境
マシン | OS |
---|---|
MacBook Air (M1, 2020) | macOS Monterey v12.1 |
構築内容
- zshrc ••• zshの設定
- vimrc ••• vimの設定
- Homebrew ••• Macのパッケージ管理ツール
- git ••• 定番のバージョン管理ツール
- Flutter(asdf) ••• Flutterのパッケージ管理ツール
- Android Studio ••• Androidアプリ開発用のIDE
- Xcode ••• iOSアプリ開発用のIDE
- Flutter(2回目) ••• 環境の整備
- Visual Studio Code ••• 高機能エディタ
やっていく
zshrc
vimrc
CLIではちょいちょい使うvimを自分好みにカスタマイズします。 これもユーザーディレクトリに.vimrcを作成し、自分の使いやすいような設定を書いていきます。 保存してvimで開き直してみると軽く感動する。
vimのカスタマイズ
この記事を参考にしました。
.vimrcの作成
" == 操作 ==
" ファイルを上書きする前にバックアップを作ることを無効化
set nowritebackup
set nobackup
" vim の矩形選択で文字が無くても右へ進める
set virtualedit=block
" == 検索 ==
" 検索するときに大文字小文字を区別しない
set ignorecase
" 小文字で検索すると大文字と小文字を無視して検索
set smartcase
" 検索がファイル末尾まで進んだら、ファイル先頭から再び検索
set wrapscan
" インクリメンタル検索 (検索ワードの最初の文字を入力した時点で検索が開始)
set incsearch
" 検索結果をハイライト表示
set hlsearch
" == 表示 ==
" 行番号を表示
set number
" 対応する括弧やブレースを表示
set showmatch matchtime=1
" インデント方法の変更
set cinoptions+=:0
" メッセージ表示欄を2行確保
set cmdheight=2
" ステータス行を常に表示
set laststatus=2
" ウィンドウの右下にまだ実行していない入力中のコマンドを表示
set showcmd
" 省略されずに表示
set display=lastline
" 行末のスペースを可視化
set listchars=tab:^\ ,trail:~
" コマンドラインの履歴を10000件保存する
set history=10000
" コメントの色を水色
hi Comment ctermfg=3
" 入力モードでTabキー押下時に半角スペースを挿入
set expandtab
" インデント幅
set shiftwidth=2
" タブキー押下時に挿入される文字幅を指定
set softtabstop=2
" ファイル内にあるタブ文字の表示幅
set tabstop=2
" yでコピーした時にクリップボードに入る
set guioptions+=a
" 対応する括弧を強調表示
set showmatch
" 改行時に入力された行の末尾に合わせて次の行のインデントを増減する
set smartindent
" スワップファイルを作成しない
set noswapfile
" タイトルを表示
set title
" シンタックスハイライト
syntax on
HomeBrew
こいつがなかったら何も始まらねえ。 HomebrewがないのでcURLを使ってHomebrewをインストールします。 M1ではなぜかHomeBrewのインストール先が 試してみる。Homebrewのバージョンが表示されてればOK。
インストール
M1ではなぜか最初にHomeBrewがインストールされていないので、インストールします。
インストール
% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
/opt/homebrew
で、パスが通っていないので、ログイン時に自動でパスを通すように.zshrcに以下を追記。typeset -U path PATH
path=(
/opt/homebrew/bin(N-/)
/opt/homebrew/sbin(N-/)
/usr/bin
/usr/sbin
/bin
/sbin
/usr/local/bin(N-/)
/usr/local/sbin(N-/)
/Library/Apple/usr/bin
)
% brew -v
Homebrew 3.3.12
Homebrew/homebrew-core (git revision 24f814395d7; last commit 2022-01-25)
git
Flutter(asdf)
ようやくFlutter。 Homebrewを使ってasdfをインストールします。 試してみる。asdfのバージョンが表示されてればOK。 asdfにFlutterのプラグインを入れます。 Flutterの使用可能なバージョンのリストを取得します。 現時点の安定版の最新は asdfでFlutterを使うためにzshrcに以下の内容を追記します。 flutterコマンドが効いているか確認します。バージョンが表示されてればOK。 プロジェクト外でFlutterコマンドを使う場合(新しいプロジェクトを作成する場合など)はグローバルに設定します。 せっかくなんで新しいプロジェクトを作成してみましょう。
バージョン管理ツールでFlutterのインストール
asdfというFlutterのバージョン管理ツールを使います。
似たようなものにfvmというものがあり、そっちを使ってましたが、
fvmはコマンドの頭にfvm flutter ~~~
と付けなきゃいけないんです。
どうやらasdfはそうではないみたいなので使ってみました。
インストール
% brew install asdf
% asdf version
v0.9.0
% asdf plugin add flutter
% asdf list all flutter
~~ 省略 ~~
2.8.0-stable
2.9.0-0.1.pre-beta
2.9.0-0.1.pre-dev
2.8.1-stable
2.10.0-0.1.pre-beta
2.10.0-0.1.pre-dev
2.10.0-0.2.pre-beta
2.10.0-0.2.pre-dev
2.8.1-stable
みたいですね。
プロジェクトのルート直下に.tool-versions
を作り、以下の内容を記載します。flutter 2.8.1-stable
. /opt/homebrew/opt/asdf/asdf.sh
% flutter --version
Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (6 weeks ago) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1
% asdf global flutter 2.8.1-stable
% flutter create sample_flutter
Android Studio
ダウンロードページの「Download options」から 仮想デバイスを選択し、 無事に起動しました。
インストールからAndroidビルドまで
インストール
android-studio-xxxxxxxx-mac_arm.dmg
をクリックし、インストーラーをダウンロードします。
インストーラー起動後は画面に従ってインストールしてください。
大体承認しとけばオッケーです。
プラグインの追加
Preferences
> Plugins
> Type / to see options
から以下のプラグインを検索したりして見つけ、Installします。
ビルド
▶︎(Run)
をクリックします。
初回は色々やるので少し時間がかかります。
Xcode
Flutter(2回目)
Android StudioとXcodeをインストールしたら、Flutter周りの環境を整えておきます。 環境設定の状況をチェックを以下のコマンドで行います。 お、いくつか出てますね。Chromeは無視して、AndroidとiOSを解決していきましょう。 「Android SDKが見つからないよ!」って言ってます。んなわけねえだろ。 「だからAndroid SDKがねえよ!」って怒られてます。怒らないで。 僕が悪かったです。大人しくチェック入れて ライセンスについて、クソほど英語を畳み掛けてきますが、脳死で iOSの方は指示が出てるので、指示通りコマンドを実行します。 「Cocoa Podsがねえよ!」ってブチ切れてるので、これも優しく入れておきます。 チェックしてみましょう。 Chrome以外はOKになりましたね。
環境の整備
チェック
% flutter doctor
Running "flutter pub get" in flutter_tools... 10.7s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, 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/docs/get-started/install/macos#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[✗] Xcode - develop for iOS and macOS
✗ 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
sudo xcodebuild -runFirstLaunch
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.63.2)
[!] Connected device
! No devices available
! Doctor found issues in 4 categories.
Android
ライセンスに同意するコマンドをやってないからかな?% flutter doctor --android-licenses
Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to resolve this.
Android Studioを確認します。Preferences
> Appearance & Behavior
> System Settings
> Android SDK
> SDK Tools
を開きます。
OK
します。
インストールが完了したら、再度ライセンスの同意をします。% flutter doctor --android-licenses
y
しましょう。
これでAndroidの方はOKです。
iOS
% sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
% sudo xcodebuild -runFirstLaunch
% brew install cocoapods
% pod setup
% flutter doctor
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.63.2)
[✓] Connected device (1 available)
! Doctor found issues in 1 category.
Visual Studio Code
Homebrewからインストールします。付けなくても問題なさそうだけど一応 起動したら拡張機能を入れていきます。 Flutter SDKのパスを通します。 以下の内容を追記します。 ここまでの手順で一通り設定したので、もうAndroid/iOS共にビルドできるはずです。 左カラム
インストールからビルドまで
M1は軽量だからAndroidStudioメインでもいいんですが、せっかくなんでVSCodeも入れましょう。
インストール
--cask
も付けときましょう。% brew install --cask visual-studio-code
Code
> 基本設定
> 設定
> 拡張機能
> Dart
> SDK
> setting.json で編集
をクリック。
上の行末尾に,
を入れ忘れないよう注意。{
"dart.flutterSdkPath": "/Users/USER NAME/.asdf/installs/flutter/2.8.1-stable",
}
ビルド
実行とデバッグ
> 上部にある▷
ボタンをクリックし、デバイスを選択します。
(iOSはシミュレーターを起動しておかないとビルドできないので、シミュレーターをドックに入れておくと便利です。)
おわり
全く苦労せず構築できました。そもそもM1ならではの部分が少なかったですね。
しかしこれでFlutterでアプリ開発する上で問題ないくらいは揃ったと思います。
お役に立って気が向いたらLGTMしてくれたら嬉しいです。
これから僕は新しいマシンでFlutter_HooksとRiverpodを勉強していく予定なので、気が向いたらまた記事書きます。
それでは。