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

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

Flutterのインストールと開発環境の構築〔基本編〕

近況報告になるが、去年末から本業仕事でIoT系プロジェクトに関わっていたが、最近それが一段落した。この仕事のターゲット機はESP32を搭載しているが、小生はそのファームウェアの開発を行った。また、AWS上で稼働するNestJSベースのWebアプリ・サーバープログラムの改造も手伝ったりした。こちらで得た技術知見もブログ記事に書いていこうと思っている。

本業に復帰する前の一昨年から去年前半まで(コロナ禍の最盛期)はIT開発は副業としてやっていたが、主に関わっていたのはスマホアプリ開発フレームワークプログラミング言語)はFlutter(Dart)を使っていた。Flutterを好んで使っていたのは、一つのプログラムコードでデスクトップ、Web、スマホアプリの全部に対応できるからだ。モダンなオブジェクト指向+宣言型の言語パラダイムも理解し易くて(小生の場合、使いこなしている自信レベルの習得に2ヶ月だった)、いまでもスマホアプリ開発用のフレームワーク・言語としてFlutter/Dartがベストの選択だと思っている。

一年近くブランクができてしまったので、再スタートのつもりで改めてスマホアプリ開発に取り組みたい。クリーンインストール新調したMacUbuntu機にFlutterによるスマホアプリ開発環境を構築したので、その作業内容を記事に書いていく。

小生がFlutterを使い始めたの頃はすでにSDKバージョン3.xはリリースされていたが、まだ2.xが主流だった。いまは3.xが主流になっており、色々と変わってしまっている点があるようだ。

Flutterのインストール

Flutter(Flutter SDK)は素のまま直接インストールすることもできるが、言語バージョン管理ツールを利用した方がプログラム毎のプロジェクト管理がやり易くなる。

Flutter用のバージョン管理ツールとして、FVM(Flutter Version Management)またはasdfが広く使われているようだ。

fvm.app

asdf-vm.com

FVMによるFlutterのインストール

FVMのインストール

% brew tap leoafarias/fvm
% brew install fvm
$ curl -fsSL https://fvm.app/install.sh | bash

Flutterバージョンのインストール

% fvm releases
% fvm install 3.19.6
% fvm list
Cache directory:  /Users/LOGNAME/fvm/versions
Directory Size: 73.02 MB

┌─────────┬─────────┬─────────────────┬──────────────┬──────────────┬────────┐
│ Version │ Channel │ Flutter Version │ Dart Version │ Release Date │ Global │
├─────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┤
│ 3.19.6  │         │ Need setup      │              │              │        │
└─────────┴─────────┴─────────────────┴──────────────┴──────────────┴────────┘


本記事執筆時点のFlutter SDKの最新Stable版は3.19.6-stableなのでこれをインストールしているが、任意のバージョンを指定してインストールすることもできる。

グローバルなFlutterバージョンの設定

プロジェクトディレクトリ外でもFlutter SDKのコマンドが利用できるように、グローバルなFlutterのバージョンを設定しておくことを薦める。

% fvm global 3.19.6
% cd
% fvm flutter --version
Flutter 3.19.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 54e66469a9 (2 weeks ago) • 2024-04-17 13:08:03 -0700
Engine • revision c4cd48e186
Tools • Dart 3.3.4 • DevTools 2.31.1

asdfによるFlutterのインストール

asdfのインストール手順については下の記事を参照してほしい。

blog.ketus-ix.work

Flutterバージョンのインストール

% asdf plugin add flutter
% asdf list all flutter
% asdf install flutter latest
% asdf reshim
% asdf list flutter
  3.19.6-stable

コマンド "asdf install flutter latest" はFluter SDKの最新Stable版をインストールする場合だが、下のようなコマンドによって指定したバージョンをインストールすることもできる。

% asdf install flutter 3.16.8-stable

補足情報

Homebrew環境のasdfでFlutter 3.0以降をインストールしようすると、下のようなエラーになることがある。

% asdf install flutter latest
/Users/LOGNAME/.asdf/plugins/flutter/bin/install: line 25: jq: command not found
/Users/LOGNAME/.asdf/plugins/flutter/bin/install: line 26: jq: command not found
/Users/LOGNAME/.asdf/plugins/flutter/bin/install: line 27: [: -gt: unary operator expected
Cannot find the download url for the version: 3.19.6-stable

この場合は、jqというパッケージをインストールすると解決できる。

% brew install jq

グローバルなFlutterバージョンの設定

プロジェクトディレクトリ外でもFlutter SDKのコマンドが利用できるように、グローバルなFlutterのバージョンを設定しておくことを薦める。

% asdf global flutter 3.19.6-stable
% cd
% flutter --version
Flutter 3.19.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 54e66469a9 (2 weeks ago) • 2024-04-17 13:08:03 -0700
Engine • revision c4cd48e186
Tools • Dart 3.3.4 • DevTools 2.31.1

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

Google Chromeのインストール

FlutterによるWebアプリの動作確認に使われるので、Google Chromeが必要となる。Google Chromeの公式サイトから入手できる。

下のようなコマンドによって、Homebrewを使ってGoogle Chromeをインストールすることもできる。

% brew install --cask google-chrome

なお、Chrome派生の他のWebブラウザVivaldiなど)を使っている場合は、環境変数CHROME_EXECUTABLEにその実行ファイルのパスを指定しておけば、そちらが使われる。

Xcodeのインストール

macOSデスクトップ・アプリの開発はXcodeを使わないとできない。XcodeiOSアプリにも対応しているので、Xcodeをインストールすればこの両方を開発できる。

最新版のXcodeApp Storeから入手できる。ただし、最新版Xcodeはインストール可能なmacOSのバージョンがその時点の最新版に限定されている。

Xcode

Xcode

  • Apple
  • 開発ツール
  • 無料
apps.apple.com

最新版より古いバージョンはApple DeveloperのXcode公式サイトから入手できる。

developer.apple.com

あるいは、Xcodesというユーティリティアプリを使ってXcodeをインストールこともできる。Xcodesについては下の記事を参照してほしい。

blog.ketus-ix.work

XcodesによってXcodeをインストールした場合は、同アプリのファイル名は /Applications/Xcode-VERSION.appになってしまうので、対象バージョンのコンテキストメニューから [Xcode.appとしてシンボリックリンクを作成] を実行しておくと良いだろう。

Xcodeをインストールしたら、下のコマンドを実行しておくこと。

% sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

Flutter開発環境の状態確認

Flutter SDKには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 12.7.4 21H1123 darwin-x64, 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 14.2)
    ✗ 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
[!] Android Studio (not installed)
[✓] VS Code (version 1.89.0)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 3 categories.

ここまでの手順操作が済んでいれば、多分上のような表示になるだろう。

問題として指摘されている "Android toolchain - Unable to locate Android SDK."、"Android Studio (not installed)" はAndroidアプリの開発に必要なコンポーネントなので、FlutterでAndroidアプリの開発を行わない場合は無視しても構わない。"Xcode - CocoaPods not installed." で指摘されているCocoaPodsはiOSアプリの開発に必要なもので、この状態でもmacOSデスクトップ・アプリの開発は行える。FlutterでiOSアプリの開発を行わない場合はこの指摘は無視しても構わない(これらのインストール方法については次の記事で説明する)。

Flutterプロジェクトの環境構築

新規プロジェクトの作成

FVMを使っている場合

% mkdir flutter_project
% cd flutter_project
% fvm use 3.19.6

No pubspec.yaml detected in this directory
✔ Would you like to continue? · yes                                                                                                                                                                                                                 
[WARN] Project is not a git repository. 
 But will set .gitignore as IDEs may use it,to determine what to index and display on searches,
You should add the fvm version directory ".fvm/" to .gitignore.
✔ Would you like to do that now? · yes                                                                                                                                                                                                              
✓ Added .fvm/ to .gitignore

✗ Could not resolve dependencies. (0.9s)

Expected to find project root in current working directory.

The error could indicate incompatible dependencies to the SDK.
✔ Would you like to continue pinning this version anyway? · yes                                                                                                                                                                                     
✓ Project now uses Flutter SDK : SDK Version : 3.19.6

% fvm flutter create .
Recreating project ....
  pubspec.yaml (created)
  README.md (created)
  lib/main.dart (created)
  test/widget_test.dart (created)
  windows/runner/flutter_window.cpp (created)
  windows/runner/utils.h (created)
  windows/runner/utils.cpp (created)
  windows/runner/runner.exe.manifest (created)
  windows/runner/CMakeLists.txt (created)
  windows/runner/win32_window.h (created)
  windows/runner/Runner.rc (created)
  windows/runner/win32_window.cpp (created)
  windows/runner/resources/app_icon.ico (created)
  windows/runner/main.cpp (created)
  windows/runner/resource.h (created)
  windows/runner/flutter_window.h (created)
  windows/flutter/CMakeLists.txt (created)
  windows/.gitignore (created)
  windows/CMakeLists.txt (created)
  ios/Runner.xcworkspace/contents.xcworkspacedata (created)
  ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created)
  ios/Runner/Info.plist (created)
  ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png (created)
  ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md (created)
  ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json (created)
  ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png (created)
  ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png (created)
  ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png (created)
  ios/Runner/Base.lproj/LaunchScreen.storyboard (created)
  ios/Runner/Base.lproj/Main.storyboard (created)
  ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata (created)
  ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created)
  ios/Flutter/Debug.xcconfig (created)
  ios/Flutter/Release.xcconfig (created)
  ios/Flutter/AppFrameworkInfo.plist (created)
  ios/.gitignore (created)
  flutter_project.iml (created)
  web/favicon.png (created)
  web/index.html (created)
  web/manifest.json (created)
  web/icons/Icon-maskable-512.png (created)
  web/icons/Icon-192.png (created)
  web/icons/Icon-maskable-192.png (created)
  web/icons/Icon-512.png (created)
  macos/Runner.xcworkspace/contents.xcworkspacedata (created)
  macos/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  macos/RunnerTests/RunnerTests.swift (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_32.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_16.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_256.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_64.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_512.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_128.png (created)
  macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_1024.png (created)
  macos/Runner/DebugProfile.entitlements (created)
  macos/Runner/Base.lproj/MainMenu.xib (created)
  macos/Runner/MainFlutterWindow.swift (created)
  macos/Runner/Configs/Debug.xcconfig (created)
  macos/Runner/Configs/Release.xcconfig (created)
  macos/Runner/Configs/Warnings.xcconfig (created)
  macos/Runner/Configs/AppInfo.xcconfig (created)
  macos/Runner/AppDelegate.swift (created)
  macos/Runner/Info.plist (created)
  macos/Runner/Release.entitlements (created)
  macos/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  macos/Runner.xcodeproj/project.pbxproj (created)
  macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (created)
  macos/Flutter/Flutter-Debug.xcconfig (created)
  macos/Flutter/Flutter-Release.xcconfig (created)
  macos/.gitignore (created)
  android/app/src/profile/AndroidManifest.xml (created)
  android/app/src/main/res/mipmap-mdpi/ic_launcher.png (created)
  android/app/src/main/res/mipmap-hdpi/ic_launcher.png (created)
  android/app/src/main/res/drawable/launch_background.xml (created)
  android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png (created)
  android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png (created)
  android/app/src/main/res/values-night/styles.xml (created)
  android/app/src/main/res/values/styles.xml (created)
  android/app/src/main/res/drawable-v21/launch_background.xml (created)
  android/app/src/main/res/mipmap-xhdpi/ic_launcher.png (created)
  android/app/src/main/AndroidManifest.xml (created)
  android/app/src/debug/AndroidManifest.xml (created)
  android/settings.gradle (created)
  android/gradle/wrapper/gradle-wrapper.properties (created)
  android/gradle.properties (created)
  android/.gitignore (created)
  android/app/build.gradle (created)
  android/app/src/main/kotlin/com/example/flutter_project/MainActivity.kt (created)
  android/build.gradle (created)
  android/flutter_project_android.iml (created)
  ios/RunnerTests/RunnerTests.swift (created)
  ios/Runner/Runner-Bridging-Header.h (created)
  ios/Runner/AppDelegate.swift (created)
  ios/Runner.xcodeproj/project.pbxproj (created)
  ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (created)
  analysis_options.yaml (created)
  .idea/runConfigurations/main_dart.xml (created)
  .idea/libraries/Dart_SDK.xml (created)
  .idea/libraries/KotlinJavaRuntime.xml (created)
  .idea/modules.xml (created)
  .idea/workspace.xml (created)
  linux/main.cc (created)
  linux/my_application.h (created)
  linux/my_application.cc (created)
  linux/flutter/CMakeLists.txt (created)
  linux/.gitignore (created)
  linux/CMakeLists.txt (created)
Resolving dependencies... (1.4s)
Got dependencies.
Wrote 128 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd .
  $ flutter run

Your application code is in ./lib/main.dart.

コマンド "fvm use 3.19.6" によって、指定バージョンのFlutter SDKがプロジェクトディレクトリ内の.fvmディレクトリへインストールされる。また、コマンド "fvm flutter create ." によってプロジェクトディレクトリ内にpubspec.yamlファイルが作成され、プロジェクトの基本構成ファイル一式(サンプルソースやビルド用ファイルなど)が追加される。

補足情報

FVMでインストールしたFlutterを使用する場合、Flutter SDK側のコマンド実行はすべて "fvm flutter ..." という形式になってしまう。

下のような記述を.bashrc.zshrcに追加しておくと、"fvm" を省略できるので便利だろう。

alias dart='fvm dart'
alias flutter='fvm flutter'

asdfを使っている場合

% mkdir flutter_project
% cd flutter_project
% asdf local flutter 3.19.6-stable
% flutter --version
% flutter create .

既存プロジェクトの使用

既存のFlutterプロジェクトにはpubspec.yamlというファイルが含まれており、これにプロジェクトが利用しているFlutter SDKのパッケージ情報が記載されている。

FVMを使っている場合

% cd FLUTTER_PROJECT_DIR
% fvm use 3.19.6
% fvm flutter --version
% fvm flutter pub get

asdfを使っている場合

% cd FLUTTER_PROJECT_DIR
% asdf local flutter 3.19.6-stable
% flutter --version
% flutter pub get

"flutter pub get" はFlutterの公式パッケージ配布サイトpub.devからパッケージを取得するコマンドで、このコマンドはpubspec.yamlの内容を参照しながらプロジェクトのすべての依存パッケージをインストールする。

pub.dev

Visual Studio CodeのFlutter環境設定

Flutterによるプログラム開発もVisual Studio Codeを使って行っていた。iOS/Androidアプリの開発ではXcodeAndroid Studioも併用していたが、これらはアプリのビルド設定の調整やシュミレータや実機ターゲットでのプログラムのデバッグ・動作確認の目的にしか使っていなかった。

VSCode上でのFlutter開発の準備

VSCodeを使ってFlutterプログラムの開発を行うにあたって、"Dart" と "Flutter" という2つの拡張機能を入れておく。

他にもFlutter開発向けの拡張機能が在るが、最初は最低限この2つを入れておけば良いだろう。

VSCodeでの新規プロジェクトの作成

FVMを使っている場合

VSCodeのメニュー [Manage (管理)](左下の歯車マーク) > [Settings (設定)] によって設定画面を開き、左上の [Open Settings (JSON)](書類マーク)ボタンを押す。

すると、下のような画面が開く。

このファイルの既存の内容に下のような記述を追加して、編集内容を保存する。

  • /Users/LOGNAME/Application Support/Code/User/setttings.json
  {
      "workbench.colorCustomizations": {},
      "telemetry.telemetryLevel": "off",
      "editor.minimap.enabled": false,
-     "workbench.startupEditor": "none"
+     "workbench.startupEditor": "none",
+     "dart.flutterSdkPath": "/Users/LOGNAME/fvm/versions/3.19.6"
  }

※"3.19.6" の部分は作成するプロジェクトで使用予定の(FVMでインストール済みの)Flutter SDKのバージョン、"LOGNAME" はログインユーザ名。

その後、VSCodeを再起動するか、コマンドパレット・メニュー "Developer: Reload Window" を実行する。

VSCodeが再起動したら、コマンドパレットに"Flutter" と入力し、メニューから "Flutter: New Project" を選択すると、さらにメニューが表示されるので、そのメニューから "Application"を選ぶ。

すると、ファイル選択ダイアログが開くので、プロジェクトの保存場所を選んでから、新しいプロジェクトの名前を入力する。

上記の手順に従ってVSCode上でFlutterのプロジェクトを作成すると、プロジェクトディレクトリが作成され、その中にpubspec.yamlとプロジェクトの基本構成ファイル一式が追加される。

続けて、メニュー [Terminal (ターミナル)] > [New Terminal (新しいターミナル)] によってターミナルパネルを開き、下のコマンドを実行する。

% fvm use 3.19.6

※"3.19.6" の部分は最初のsettings.json内で指定したバージョンと同一であること。

これによって、指定バージョンのFlutter SDKがプロジェクトディレクトリ内の.fvmディレクトリへインストールされ、同時に下のような内容の .vscode/settings.json ファイルも作成される。

  • .vscode/setttings.json
{
  "dart.flutterSdkPath": ".fvm/versions/3.19.6"
}

このファイルの内容を下のように編集した上で保存する。

  • .vscode/settings.json
  {
-   "dart.flutterSdkPath": ".fvm/versions/3.19.6"
+   "dart.flutterSdkPath": ".fvm/versions/3.19.6",
+   "search.exclude": {
+     "**/.fvm": true
+   },
+   "files.watcherExclude": {
+     "**/.fvm": true
+   }
  }

エクスプローラパネル内のファイル lib/main.dart を選択している状態で右下ステータスバー上の "{ }"("Dart" の左横)をクリックして、表示されるメニュー項目に "3.19.6 - Flutter SDK"("3.19.6" の部分は上のコマンド "fvm use VERSION" のバージョン文字列と一致)が存在することを確認する。存在している場合は、同項目右横のピン・マークを押す。

すると、ステータスバー上にそのバージョン番号が表示される。

この最後の操作はオプションだが、プロジェクトで使用しているFlutter SDKのバージョンが常に表示されている方が判り易くなる。

asdfを使っている場合

VSCodeのメニュー [Manage (管理)](左下の歯車マーク) > [Settings (設定)] によって設定画面を開き、左上の [Open Settings (JSON)](書類マーク)ボタンを押す。すると、/Users/LOGNAME/Application Support/Code/User/setttings.jsonというファイルが画面に表示される。

このファイルの既存の内容に下のような記述を追加して、編集内容を保存する。

  • /Users/LOGNAME/Application Support/Code/User/setttings.json
  {
      "workbench.colorCustomizations": {},
      "telemetry.telemetryLevel": "off",
      "editor.minimap.enabled": false,
-     "workbench.startupEditor": "none"
+     "workbench.startupEditor": "none",
+     "dart.flutterSdkPath": "/Users/LOGNAME/.asdf/installs/flutter/3.19.6-stable"
  }

※"3.19.6-stable" の部分は作成するプロジェクトで使用予定の(asdfでインストール済みの)Flutter SDKのバージョン、"LOGNAME" はログインユーザ名。

その後、VSCodeを再起動するか、コマンドパレット・メニュー "Developer: Reload Window" を実行する。

VSCodeが再起動したら、コマンドパレットに"Flutter" と入力し、メニューから "Flutter: New Project" を選択すると、さらにメニューが表示されるので、そのメニューから "Application"を選ぶ。

すると、ファイル選択ダイアログが開くので、プロジェクトの保存場所を選んでから、新しいプロジェクトの名前を入力する。

上記の手順に従ってVSCode上でFlutterのプロジェクトを作成すると、プロジェクトディレクトリが作成され、その中にpubspec.yamlとプロジェクトの基本構成ファイル一式が追加される。

続けて、メニュー [Terminal (ターミナル)] > [New Terminal (新しいターミナル)] によってターミナルパネルを開き、下のコマンドを実行する。

% asdf local flutter 3.19.6-stable

※"3.19.6-stable" の部分は最初のsettings.json内で指定したバージョンと同一であること。

さらに、下のような内容の .vscode/settings.json ファイルを作成する(本ファイルが存在しない場合は、コマンドパレット・メニュー "Prefereces: Open Workspace Settings (JSON)" によって作成できる)。

  • .vscode/setttings.json
{
  "dart.flutterSdkPath": "/Users/LOGNAME/.asdf/installs/flutter/3.19.6-stable"
}

※"3.19.6-stable" の部分はプロジェクトで使用するFlutter SDKのバージョン(上のコマンド "asdf local flutter VERSION" で指定したバージョン文字列)と一致していること。"LOGNAME" はログインユーザ名。

エクスプローラパネル内のファイル lib/main.dart を選択している状態で右下ステータスバー上の "{ }"("Dart" の左横)をクリックして、表示されるメニュー項目に "3.19.6 - Flutter SDK" ("3.19.6" の部分は上のコマンド "asdf local flutter VERSION" のバージョン番号と一致)が存在することを確認する。存在している場合は、同項目右横のピン・マークを押す。すると、ステータスバー上にそのバージョン番号が表示される。

この最後の操作はオプションだが、プロジェクトで使用しているFlutter SDKのバージョンが常に表示されている方が判り易くなる。

VSCodeでの既存プロジェクトの使用

FVMを使っている場合

VSCodeを起動して、既存プロジェクトのディレクトリを開く。

メニュー [Terminal (ターミナル)] > [New Terminal (新しいターミナル)] によってターミナルパネルを開き、下のコマンドを実行する。

% fvm use 3.19.6

※"3.19.6" の部分はプロジェクトで使用予定の(FVMでインストール済みの)Flutter SDKのバージョン。

これによって、指定バージョンのFlutter SDKがプロジェクトディレクトリ内の.fvmディレクトリへインストールされ、同時に下のような内容の .vscode/settings.json ファイルも作成される。

  • .vscode/setttings.json
{
  "dart.flutterSdkPath": ".fvm/versions/3.19.6"
}

.vscode/settings.json の内容を下のように編集する。

  • .vscode/settings.json
  {
-   "dart.flutterSdkPath": ".fvm/versions/3.19.6"
+   "dart.flutterSdkPath": ".fvm/versions/3.19.6",
+   "search.exclude": {
+     "**/.fvm": true
+   },
+   "files.watcherExclude": {
+     "**/.fvm": true
+   }
  }

エクスプローラパネル内のファイル lib/main.dart を選択している状態で右下ステータスバー上の "{ }"("Dart" の左横)をクリックして、表示されるメニュー項目に "3.19.6 - Flutter SDK" ("3.19.6" は上のコマンド "flutter use VERSION" のバージョン文字列と一致)が存在することを確認する。存在している場合は、同項目右横のピン・マークを押す。すると、ステータスバー上にそのバージョン番号が表示される。

この操作はオプションだが、プロジェクトで使用しているFlutter SDKのバージョンが常に表示されている方が判り易くなる。

コマンドパレットでメニュー "Flutter: Get Packages" を実行する。これによって、プロジェクトのすべての依存パッケージがインストールされる。

asdfを使っている場合

VSCodeを起動して、既存プロジェクトのディレクトリを開く。

メニュー [Terminal (ターミナル)] > [New Terminal (新しいターミナル)] によってターミナルパネルを開き、下のコマンドを実行する。

% asdf local flutter 3.19.6-stable

※"3.19.6-stable" の部分はプロジェクトで使用予定(asdfでインストール済みの)Flutter SDKのバージョン。

さらに、下のような内容のファイル .vscode/settings.jsonを作成する(本ファイルが存在しない場合は、コマンドパレット・メニュー "Prefereces: Open Workspace Settings (JSON)" によって作成できる)。

  • .vscode/setttings.json
{
  "dart.flutterSdkPath": "/Users/LOGNAME/.asdf/installs/flutter/3.19.6-stable"
}

※"3.19.6-stable" の部分は上のコマンド "asdf local flutter VERSION" で指定したバージョン文字列と一致していること。"LOGNAME" はログインユーザ名。

エクスプローラパネル内のファイル lib/main.dart を選択している状態で右下ステータスバー上の "{ }"("Dart" の左横)をクリックして、表示されるメニュー項目に "3.19.6 - Flutter SDK" ("3.19.6" の部分は上のコマンド "asdf local flutter VERSION" のバージョン番号と一致)が存在することを確認する。存在している場合は、同項目右横のピン・マークを押す。すると、ステータスバー上にそのバージョン番号が表示される。

この操作はオプションだが、プロジェクトで使用しているFlutter SDKのバージョンが常に表示されている方が判り易くなる。

コマンドパレットでメニュー "Flutter: Get Packages" を実行する。これによって、プロジェクトのすべての依存パッケージがインストールされる。

Flutterプロジェクトのビルドと動作確認

VSCodeでのFlutterプロジェクトのビルドと起動実行は簡単だ。

最初に、Flutterプロジェクトのディレクトリを開いている状態でステータスバー上のターゲットデバイス表示を押す。すると、下のようなメニューが開くので、プログラムの実行対象デバイスを選択する。

本記事の内容に従って手順操作を行っていれば、Flutterのターゲットデバイスとして上のように "Chrome" と "macOS" の2つしか表示されないはずだ。

ターゲットデバイスを選択すると、それがステータスバー上に表示される。

この状態でメニュー [Run (実行)] > [Start Debugging (デバッグの開始) F5] または [Run Without Debugging (デバッグなしで実行) ^ F5] を選ぶと、プロジェクトのビルドが行われ、ビルドが成功すれば、プログラムが起動する。

【参照リンク】

zenn.dev     

次の記事で、FlutterによるiOSAndroidアプリ開発環境の追加的な構築手順について書くつもりだ。

XcodesによるXcodeのインストール

Macを使ってmacOSiOS用プログラムを開発するにはXcodeが必要になる。Apple IDアカウントを作成してApple Developerサイトでユーザー登録をすれば、誰でもXcodeを入手することができる。

ただし、Xcodeはバージョン毎に使用可能なmacOSのバージョンが決まっており、最新版を入手すれば良いというものではない。自分が使っているmacOSのバージョンを調べて、それに合ったバージョンのXcodeを入手する必要がある。また、Xcodeはかなり大きなサイズのアプリなので、Apple Developerからダウンロードするのに時間がかかる。MacXcodeを導入する作業は結構面倒だったりする。

じつは、Xcodeのインストールをサクッとやれるアプリが存在する。(紛らわしい名前だが)Xcodesという奴だ。

github.com

Xcodesを見つけてから、小生はXcodeのインストールは常にこれを使って行っている。

本記事では、このXcodesについて紹介する。

コマンド版Xcodesのインストール

XcodesにはCLIコマンド版とGUIアプリ版が存在する。どちらもHomebrewを使ってインストールできる。

コマンド版Xcodesは下のコマンドによってインストールできる。

% brew install xcodes aria2

aria2が存在すると、これが利用されることでXcodesのダウンロード速度が大幅に向上するので、一緒にインストールしておくことを勧める。

コマンド版Xcodesの使用方法

Xcodesを使用するにはApple IDアカウントが必要になる。Xcodesを初めて使うときに、Apple IDアカウントのユーザー名とパスワードの入力を求められる。

コマンド版Xcodesの使い方は簡単で、多分以下の3つのコマンドくらいしか使わないだろう(他のコマンドについてはXcodesのサイトを参照してほしい)。

入手可能なXcodeバージョンの一覧表示

% xcodes list

指定バージョンのXcodeのインストール

% xcodes install VERSION

既存のXcodeバージョンのアンイストール

% xcodes uninstall VERSION

Xcodesによって取得したXcode/Applicationsフォルダ内に "Xcode-VERSION.app" というファイル名で追加される。

アプリ版Xcodesのインストール

アプリ版Xcodesは下のコマンドによってインストールできる。

% brew install --cask xcodes

アプリ版Xcodesの使用方法

/Applications/Xcodes.appを起動すると、下のような画面が表示される。

指定バージョンのXcodeのインストール

アプリ版Xcodesの使い方も簡単だ。取得したいXcodeのバージョンを選んでその右横の[インストール]ボタンを押せば、そのダウンロードとインストールが開始される。

Xcodesが動作中のmacOSバージョンに未対応のバージョンのXcodeをインストールしようとすると、下のような警告が表示されるが、この警告を無視して[インストール]を押せば、入手可能なすべてのバージョンのXcodeをインストールすることができる(Apple Developerから入手したXcodeはそのバージョンが未対応のmacOSバージョンにはインストールできない)。

既存のXcodeバージョンのアンイストール

インストール済みのXcodeを削除したい場合は、そのバージョンのコンテキストメニュー(右クリックが有効なら、右クリックによって表示されるメニュー)から[アンインストール]を選ぶと、それをアンイストールできる。

ls コマンドと vim の表示カラー設定をSolarizedにする

MacLinuxのターミナルでもっとも多く使うコマンドといえば "ls"ではないだろうか。そして、一番良く使うCLIアプリといえば vimだろう。

この2つには表示カラー設定機能が備わっており、これを利用してカラー設定を追加すると作業上の情報視認性が向上する。

こういう目的に使われるカラー・テーマとして有名なSolarizedを利用して、lsコマンドとvimの表示カラー設定を行ってみた。

ls コマンドの表示カラー設定

GNU版 ls と dircolors のインストール〔Macのみ〕

Macに入っているデフォルトのlsコマンドはBSD版であり、同コマンドの表示カラー設定はGNU版のlsdircolorsでないとできない。

これらはcoreutilsというパッケージに収納されているので、Macではこれをインストールしておく。

% brew install coreutils

GNU版のlsglsdircolorsgdircolorsというコマンドでそれぞれ利用できるようになる。

ls コマンド用カラー・テーマの取得

lsコマンド用のカラー設定として、下のサイトで配布されているカラー・テーマを取得する。

github.com

$ git clone https://github.com/seebi/dircolors-solarized.git ~/.dircolors

ls コマンドのカラー設定

~/.bash_profileまたは~/.bashrczshなら、~/.zprofile~/.zshrc)に下のような記述を追加する。

eval $(gdircolors ~/.dircolors/dircolors.256dark)
alias ls='gls --color=auto'

"eval $(gdircolors ...)" でカラー設定の読み込み、"alias ls=" でlsコマンドのglsへの置き換えを行っている。

eval $(dircolors ~/.dircolors/dircolors.256dark)
alias ls='ls --color=auto'

前者によって読み込まれた内容はLS_COLORSという環境変数に設定され、lsMacではgls)コマンドはこの環境変数の値を参照することで表示色の変更を行っている。

ターミナルを再起動するかコマンド "source ~/.bashrc" を実行すれば、上記の設定が有効になる。

その後、コマンド "ls -la"とかを実行すれば、この設定が反映されていることが確認できるだろう。

vim の表示カラー設定

vim 用カラー・テーマの取得

vim用のカラー設定として、下のサイトで配布されているカラー・テーマを取得する。

github.com

$ git clone https://github.com/altercation/vim-colors-solarized.git /tmp/vim-colors-solarized
$ mkdir -p ~/.vim/colors
$ mv /tmp/vim-colors-solarized/colors/solarized.vim ~/.vim/colors

vim のカラー設定

vimのカラー設定はファイル~/.vimrcに以下のような記述を追加することで行える。

$ vi ~/.vimrc
syntax enable
set background=dark
colorscheme solarized
let g:solarized_temcolors=256

コマンドviで適当なファイルを開いてやれば、上記の設定が反映されていることが確認できるだろう。

上ではカラー設定としてSolarized Darkを使っているが、~/.vimrc内の"set background=dark" を "set background=light" に変更すればSolarized Lightを使うこともできる。

【参照リンク】

qiita.com

【Homebrew】アップグレード時に "missing xcrun" エラー

Homebrewをアップグレードしようとしたら、下のようなエラーが起きて、できない現象に遭遇した。

% brew upgrade
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

Homebrewの状態を確認すると、下のようになっていた。

% brew config
HOMEBREW_VERSION: >=2.5.0 (shallow or no git repository)
ORIGIN: (none)
HEAD: (none)
Last commit: never
Core tap ORIGIN: https://github.com/Homebrew/homebrew-core
Core tap HEAD: (none)
Core tap last commit: never
Core tap branch: (none)
HOMEBREW_PREFIX: /Users/LOGNAME/homebrew
HOMEBREW_REPOSITORY: /Users/LOGNAME/homebrew
HOMEBREW_CELLAR: /Users/LOGNAME/homebrew/Cellar
HOMEBREW_CASK_OPTS: []
HOMEBREW_DISPLAY: /private/tmp/com.apple.launchd.1YkqUDCCsg/org.xquartz:0
HOMEBREW_EDITOR: vim
HOMEBREW_MAKE_JOBS: 24
HOMEBREW_NO_AUTO_UPDATE: set
Homebrew Ruby: 2.6.8 => /Users/LOGNAME/homebrew/Library/Homebrew/vendor/portable-ruby/2.6.8_1/bin/ruby
CPU: 24-core 64-bit ivybridge
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
Clang: N/A
Git: N/A
Curl: 8.4.0 => /usr/bin/curl
macOS: 12.7.4-x86_64
CLT: N/A
Xcode: 14.2 => /Applications/Xcode-14.2.0.app/Contents/Developer

Homebrew環境でCommand Line Toolsが見つからなくなっているのが原因のようだ。

下のコマンドによってCommand Line Toolsを再インストールしたら、この問題を解決できた。

% xcode-select --install
% brew config
HOMEBREW_VERSION: 3.6.10
ORIGIN: https://github.com/Homebrew/brew
HEAD: eaf887656ffb8e9e35ccf08081814d4735637564
Last commit: 1 year, 5 months ago
Core tap ORIGIN: https://github.com/Homebrew/homebrew-core
Core tap HEAD: 522d42deab7e61f770e75b03661e53ba08d5aca0
Core tap last commit: 1 year, 5 months ago
Core tap branch: master
HOMEBREW_PREFIX: /Users/LOGNAME/homebrew
HOMEBREW_REPOSITORY: /Users/LOGNAME/homebrew
HOMEBREW_CELLAR: /Users/yuhri/homebrew/Cellar
HOMEBREW_CASK_OPTS: []
HOMEBREW_DISPLAY: /private/tmp/com.apple.launchd.1YkqUDCCsg/org.xquartz:0
HOMEBREW_EDITOR: vim
HOMEBREW_MAKE_JOBS: 24
HOMEBREW_NO_AUTO_UPDATE: set
Homebrew Ruby: 2.6.8 => /Users/LOGNAME/homebrew/Library/Homebrew/vendor/portable-ruby/2.6.8_1/bin/ruby
CPU: 24-core 64-bit ivybridge
Clang: 14.0.0 build 1400
Git: 2.37.1 => /Library/Developer/CommandLineTools/usr/bin/git
Curl: 8.4.0 => /usr/bin/curl
macOS: 12.7.4-x86_64
CLT: 14.2.0.0.1.1668646533
Xcode: 14.2 => /Applications/Xcode-14.2.0.app/Contents/Developer

Mac Pro 2013の内蔵SSDを交換するために、Time Machineバックアップと移行アシスタントを使ってシステム復元を行ったら、このような現象に遭遇してしまった。

Homebrewのアップグレードに限らず、他のコマンドの実行時にも起きることがある現象らしい。また、macOSをアップデートしたりしても起きることがあるそうだ。

【参照リンク】

qiita.com

asdf : 言語バージョン追加時に "No preset version installed for command" エラー

asdfPythonのバージョンを追加インストールしようとしたら、下のようなエラーが起きて、できない状況に遭遇した。

% asdf install python 3.12.3
python-build 3.12.3 /Users/LOGNAME/.asdf/installs/python/3.12.3
python-build: use openssl@3 from homebrew
python-build: use readline from homebrew
Downloading Python-3.12.3.tar.xz...
-> https://www.python.org/ftp/python/3.12.3/Python-3.12.3.tar.xz
Installing Python-3.12.3...
python-build: use tcl-tk from homebrew
python-build: use readline from homebrew
python-build: use ncurses from homebrew
python-build: use zlib from xcode sdk

BUILD FAILED (OS X 13.4.1 using python-build 2.4.0-2-ge1f07da7)

Inspect or clean up the working tree at /var/folders/4c/wcry6r391s5cxyc66bnktgf80000gn/T/python-build.20240412084452.14725
Results logged to /var/folders/4c/wcry6r391s5cxyc66bnktgf80000gn/T/python-build.20240412084452.14725.log

Last 10 log lines:
python anaconda3-2023.09-0
make: *** [Modules/_hacl/libHacl_Hash_SHA2.a] Error 126
No preset version installed for command ar
Please install a version by running one of the following:

asdf install python 3.8.18

or add one of the following versions in your config file at 
python anaconda3-2023.09-0
make: *** [Modules/expat/libexpat.a] Error 126

ちなみに、このときのasdfpythonプラグインの状態は以下のようになっている。

% asdf list python
  3.10.12
  3.10.8
  3.11.4
  3.12.2
  3.6.15
  3.8.10
  3.8.17
 *3.8.18
  3.9.17
  3.9.18
  anaconda3-2023.09-0
  miniconda3-3.11-23.10.0-1
  miniconda3-3.8-23.10.0-1
% cat ~/.tool-versions
python 3.8.18
nodejs 18.18.0
golang 1.20.8

Pythonバージョンの3.8.18anaconda3-2023.09-0もインストール済みなのに、「どちらかをインストールせよ」と矛盾したことを言ってくる。

エラーメッセージ内の "No preset version installed for command" で指摘してされているarコマンドの中身を確認すると、下のようになっていた。

% cat ~/.asdf/shims/ar
#!/usr/bin/env bash
# asdf-plugin: python anaconda3-2023.09-0
exec /usr/local/opt/asdf/libexec/bin/asdf exec "ar" "$@" # asdf_allow: ' asdf '

多分これが下のようになっていないといけないんじゃないかと想像して、arコマンドの内容を変更して、Pythonバージョンの追加を再度試みてみた。

% vi ~/.asdf/shims/ar
-# asdf-plugin: python anaconda3-2023.09-0
+# asdf-plugin: python 3.8.18
% asdf reshim
% asdf install python 3.12.3
python-build 3.12.3 /Users/LOGNAME/.asdf/installs/python/3.12.3
python-build: use openssl@3 from homebrew
python-build: use readline from homebrew
Downloading Python-3.12.3.tar.xz...
-> https://www.python.org/ftp/python/3.12.3/Python-3.12.3.tar.xz
Installing Python-3.12.3...
python-build: use tcl-tk from homebrew
python-build: use readline from homebrew
python-build: use ncurses from homebrew
python-build: use zlib from xcode sdk

BUILD FAILED (OS X 13.4.1 using python-build 2.4.0-2-ge1f07da7)

Inspect or clean up the working tree at /var/folders/4c/wcry6r391s5cxyc66bnktgf80000gn/T/python-build.20240412090619.17267
Results logged to /var/folders/4c/wcry6r391s5cxyc66bnktgf80000gn/T/python-build.20240412090619.17267.log

Last 10 log lines:
ld: warning: directory not found for option '-L/Users/LOGNAME/.asdf/installs/python/3.12.3/lib'
ld: warning: directory not found for option '-L/Users/LOGNAME/.asdf/installs/python/3.12.3/lib'
ld: warning: directory not found for option '-L/Users/LOGNAME/.asdf/installs/python/3.12.3/lib'
ld: warning: directory not found for option '-L/Users/LOGNAME/.asdf/installs/python/3.12.3/lib'
ld: warning: directory not found for option '-L/Users/LOGNAME/.asdf/installs/python/3.12.3/lib'
ld: warning: directory not found for option '-L/Users/LOGNAME/.asdf/installs/python/3.12.3/lib'
ld: warning: directory not found for option '-L/Users/LOGNAME/.asdf/installs/python/3.12.3/lib'
ld: warning: directory not found for option '-L/Users/LOGNAME/.asdf/installs/python/3.12.3/lib'
ld: warning: directory not found for option '-L/Users/LOGNAME/.asdf/installs/python/3.12.3/lib'
ld: warning: directory not found for option '-L/Users/LOGNAME/.asdf/installs/python/3.12.3/lib'

エラーメッセージの内容は変わったが、やはりダメだ。

それなら、最初のエラーメッセージで指摘されているanaconda3-2023.09-0が存在すること自体が悪いのかもしれないと思ったので、これを削除した上で、再度試みてみたら上手く行った。

% asdf uninstall python anaconda3-2023.09-0
% asdf reshim
% asdf install python 3.12.3
python-build 3.12.3 /Users/LOGNAME/.asdf/installs/python/3.12.3
python-build: use openssl@3 from homebrew
python-build: use readline from homebrew
Downloading Python-3.12.3.tar.xz...
-> https://www.python.org/ftp/python/3.12.3/Python-3.12.3.tar.xz
Installing Python-3.12.3...
python-build: use tcl-tk from homebrew
python-build: use readline from homebrew
python-build: use ncurses from homebrew
python-build: use zlib from xcode sdk
Installed Python-3.12.3 to /Users/LOGNAME/.asdf/installs/python/3.12.3
asdf: Warn: You have configured asdf to preserve downloaded files (with always_keep_download=yes or --keep-download). But
asdf: Warn: the current plugin (python) does not support that. Downloaded files will not be preserved.

ちなみに、ググって調べてみると、この障害現象はasdfの他の言語プラグインでも発生するらしい。

上のような現象が起きた場合は、エラーメッセージ内で指摘されたプラグインの特定のバージョンを一旦アンインストールすれば解決できるんじゃないだろうか。

なお、anaconda3-2023.09-0が存在しており上のような障害現象が起きている状態で、asdfのflutterプラグインでも下のような不可解な現象に遭遇した。

% asdf plugin add flutter
% asdf list all flutter
No compatible versions available (flutter )

これもanaconda3-2023.09-0をアンインストールしたら解決することができた。

asdfではpythonプラグインのanacondaは使わない方が無難だということを思い知らされた。

【参照リンク】

github.com

【Windows】Visual Studio CodeでのMinGW-W64 GCC環境設定

前記事でMinGW-W64によるWindows上でのGCC開発環境の構築方法について書いたが、小生はほぼすべてのプログラミング言語開発をVisual Studio Codeを使って行っているので、GCCによるC/C++プログラム開発もVSCodeを使いたい。

blog.ketus-ix.work

自分の備忘録として、MinGW-W64のGCCを使ったC/C++プログラム開発をVSCode上で行うための環境設定方法を書いておくことにする。

以降の内容は、前記事の内容にしたがって、MingW-W64およびGCCのインストールと環境設定がすべて完了していることを前提としている。

MinGW-W64 GCCVisual Studio Codeの準備

MinGW-W64 GCCのインストールと確認

MinGW-W64のインストール方法については前記事を参照のこと。

GCCを利用するので、当然ながら、これもインストールしておく必要がある。前記事にも書いたが、MSYS2 MINGW64シェルから以下のコマンドを実行すれば、GCCを含む開発パッケージ一式をインストールできる。

$ pacman -S --needed base-devel mingw-w64-x86_64-toolchain

MinGW-W64とGCCのインストールが終わったら、PowerShellを開いて、以下のコマンドがすべて実行できることを確認しておく。

> gcc --version
> g++ --version
> gdb --version

拡張機能 C/C++ のインストール

VSCodeC/C++プログラムの開発を行う場合、拡張機能 "C/C++" を入れておく。

GCCC++プロジェクト作成と環境設定

GCCC++プロジェクトの作成

VSCodeGCCを使用するための設定は、C++プログラムのプロジェクト毎に行う必要がある。

まず、GCCを使うC++プログラムのプロジェクトディレクトリを作成する。そして、VSCodeからそのディレクトリを開く。

> mkdir helloworld
> cd helloworld
> code .

VSCodeでプロジェクトディレクトリを開いたら、その中に拡張子.cppの適当な名前のソースファイルを一つ作成しておく。

GCCC++プロジェクトのビルド手順設定

エクスプローラ・パネル内のいずれかのC++ソースファイルを選択している状態で、メニュー[View (表示)] > [Command Palette (コマンド パレット)]を実行して(または、Ctrl+Shift+Pをタイプして)、コマンドパレットに "Tasks" と入力する。すると、メニューが表示されるので、その中から "Tasks: Configure Default Build Task" を選び、さらに表示されたメニューから "C/C++: g++.exe build active file" を選択する。

すると、下のような内容のtasks.jsonというファイルが作成される。

  • .vscode/tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "cppbuild",
            "label": "C/C++: g++.exe build active file",
            "command": "C:\\msys64\\mingw64\\bin\\g++.exe",
            "args": [
                "-fdiagnostics-color=always",
                "-g",
                "${file}",
                "-o",
                "${fileDirname}\\${fileBasenameNoExtension}.exe"
            ],
            "options": {
                "cwd": "${fileDirname}"
            },
            "problemMatcher": [
                "$gcc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "detail": "compiler: C:\\msys64\\mingw64\\bin\\g++.exe"
        }
    ]
}

これが、VSCode上でGCCC++プログラムのビルドを行う際の手順設定ファイルとなる。

プログラムのソースファイルが一つだけならtasks.jsonはこの内容で問題ないが、ソースファイルが複数だったりコンパイルオプションを変える場合は、この内容を変更する必要がある。tasks.jsonの設定項目の詳細は下のリンクページに掲載されている。

https://code.visualstudio.com/docs/cpp/config-mingw#_understanding-tasksjson

試しに、上のtasks.jsonの内容によってプログラムがビルドできるか確認してみよう。

最初に作成した(拡張子cppの)ソースファイルに適当なC++コードを入力して保存する。そして、エクスプローラ・パネル内でそのファイルを選択している状態で、メイン画面右上のプレイ/デバッグ(虫付き▷)ボタンのメニューから[Run C/C++ File]を実行する。

すると、そのソースファイルがビルドされて、ソースファイルと同名の拡張子.exeの実行ファイルが生成されるだろう。

GCCC++プロジェクトのデバッグ手順設定

エクスプローラ・パネル内のいずれかのC++ソースファイルを選択している状態で、メニュー[View (表示)] > [Command Palette (コマンド パレット)]を実行して(または、Ctrl+Shift+Pをタイプして)、コマンドパレットに "C/C++" と入力する。すると、メニューが表示されるので、その中から "C/C++: Add Debug Configuration" を選び、さらに表示されたメニューから "C/C++: g++.exe build and debug active file" を選択する。

すると、下のような内容のlaunch.jsonというファイルが作成される。

  • .vscode/launch.json
{
    "configurations": [
        {
            "name": "C/C++: g++.exe build and debug active file",
            "type": "cppdbg",
            "request": "launch",
            "program": "${fileDirname}\\${fileBasenameNoExtension}.exe",
            "args": [],
            "stopAtEntry": false,
            "cwd": "${fileDirname}",
            "environment": [],
            "externalConsole": false,
            "MIMode": "gdb",
            "miDebuggerPath": "C:\\msys64\\mingw64\\bin\\gdb.exe",
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                },
                {
                    "description": "Set Disassembly Flavor to Intel",
                    "text": "-gdb-set disassembly-flavor intel",
                    "ignoreFailures": true
                }
            ],
            "preLaunchTask": "C/C++: g++.exe build active file"
        }
    ],
    "version": "2.0.0"
}

これが、VSCode上でGCCC++プログラムのデバッグを行う際の手順設定ファイルとなる。

launch.jsonの設定項目の詳細は下のリンクページに掲載されている。

https://code.visualstudio.com/docs/cpp/config-mingw#_customize-debugging-with-launchjson

試しに、上のlaunch.jsonの内容によってプログラムがデバッグできるか確認してみよう。

エクスプローラ・パネル内のいずれかのC++ソースファイルを選択している状態で、ソースコードの適当な場所にブレークポイントを設定し、メイン画面右上のプレイ/デバッグ(虫付き▷)ボタンのメニューから[Debug C/C++ File]を実行する。

すると、そのソースファイルがデバッグ実行されて、設定したブレークポイントの箇所でプログラムが停止するだろう。

GCCC++プロジェクトの追加設定

メニュー[View (表示)] > [Command Palette (コマンド パレット)]を実行して(または、Ctrl+Shift+Pをタイプして)、コマンドパレットに "C/C++" と入力する。すると、メニューが表示されるので、その中から "C/C++ : Edit Configurations (UI)" を選択する。

すると、下のような "IntelliSense Configurations" という名前の画面が表示される。

この画面内の[Add Configuration]ボタンを押して、新しい設定の名前として"GCC"と入力し、さらに、"Compiler path" というドロップダウンメニューから "C:/msys64/mingw64/bin/g++.exe" を選択する。さらに、同画面の下方の "IntelliSense mode" のドロップダウンメニューが "windows-gcc-x64" になっていることを確認する(この選択になっていない場合は、同メニューから "windows-gcc-x64" を選択する)。

上記の変更内容は下のようなc_cpp_properties.jsonというファイルとして保存される。

  • .vscode/c_cpp_properties.json
{
    "configurations": [
        {
            "name": "Win32",
            "includePath": [
                "${workspaceFolder}/**"
            ],
            "defines": [
                "_DEBUG",
                "UNICODE",
                "_UNICODE"
            ],
            "compilerPath": "C:\\msys64\\mingw64\\bin\\gcc.exe",
            "cStandard": "c17",
            "cppStandard": "gnu++17",
            "intelliSenseMode": "windows-gcc-x64"
        },
        {
            "name": "GCC",
            "includePath": [
                "${workspaceFolder}/**"
            ],
            "defines": [
                "_DEBUG",
                "UNICODE",
                "_UNICODE"
            ],
            "compilerPath": "C:/msys64/mingw64/bin/g++.exe",
            "cStandard": "c17",
            "cppStandard": "gnu++17",
            "intelliSenseMode": "windows-gcc-x64"
        }
    ],
    "version": 4
}

 

Windows上での開発環境について立て続けに記事を書いてきたが、本記事をもってそれは一旦終了する。

Windowsを使わざるをえない仕事が終わったこともあるが、やはり開発環境としてのWindowsはすごく使い勝手が悪い。長年そうしていたように、今後はWindowsの常用は止めて、プログラムの開発や動作確認などで必要な場合のみを使うことにする。

ほとんどのソフトウェア開発はMacでやるのが一番楽だし、組み込み系開発やプログラム・テストもUbuntu Linuxがあれば大抵は用が足りる。10年位前までWindows用アプリやドライバ開発も仕事としてやっていたので、開発環境として常用していたこともあるが、いまではそういう仕事をするつもりはもうない。現代の開発優先はWeb/モバイル/IoTファーストなので、あえてWindows開発機を使う必要性もない。Windows関連開発技術などのフォローは必要な状況が出てきた場合に試してみるだけで十分だと思う。

【参照リンク】

code.visualstudio.com

qiita.com

【Windows】MinGW-W64によるGCC開発環境の構築

Windows上でのC/C++プログラムの開発にはVisual C++(in Visual Studio)を使うのが一般的だが、これはあくまでWindows完全依存のネイティブ・プログラムを開発するための環境だ。

昔からWindows上にUnix互換環境を構築する試みが行われていて、その集大成的なプロジェクトとして1995年に登場したCygwinというものがある。小生は10年前まで組み込み開発が専門分野だったので、Windows上にCygwin導入してクロスGCCコンパイラをよく使っていたものだ。組み込み屋にとってのCygwinの利用価値はこの一点だけだったので、仮想マシン・ツールの普及、DockerやWSLの登場によって、いまではCygwinを使うことはなくなってしまった。

GCCを使ってWindows用プログラムを開発したい、あるいはUnix/LinuxプログラムをWindowsへ移植したいという要望は昔からあって、それに応える開発環境プロジェクトとしてMinGW-W64(32ビット版MinGWプロジェクトからフォークした64ビット対応版)というのがある。

www.mingw-w64.org

MinGWCygwinからフォークしたプロジェクトだが、Cygwinの成果も吸収して発展し、いまではUnix互換開発環境としてはMinGWの方がメジャーになっている。

開発ブラットホームとしてMacLinuxWindowsを併用するようになり、Linux用プログラムをWindowsへ移植しなければならないケースも出てくるので、Windows機にMinGW-W64を導入した。

ググると同様の記事は多くあるが、自分の備忘録として、MinGW-w64のインストールと環境構築方法を書いておく。

MSYS2のインストール

MinGWプロジェクトの成果物としてMSYS(MSYS2)というのがある。これはBashシェル環境とコマンド群をまとめたもので、MinGW-w64とは別のプロジェクトだが、MinGW-W64とMSYS2を一緒に使うことで、Unixライクな64ビット版Windows用プログラムの開発環境を構築できる。

MSYS2のサイトから、この2つを統合した環境のインストーラを入手することができる(本記事執筆時点での最新版インストーラmsys2-x86_64-20240113.exe)。

www.msys2.org

じつは、MinGW-W64 + MSYS2を導入するのは、むしろこのMSYS2のBashターミナル環境を利用することが優先目的だったりする(MacLinuxのターミナル環境に慣れていると、PowerShellコマンドプロンプトを使うのは苦痛なので。YouTube上でのプログラミング・開発系話題の動画内でWindows環境を利用している場面で、このMinGW-w64 + MSYS2が使われているのを多く観られる。Visual Studio Codeと同様に、いまはこれがWindows利用開発での定番環境となっているようだ)。

インストーラのガイド表示に従って操作すると、MSYS2のデフォルトのインストール先ディレクトリはC:\msys64になる。

また、下の6つのアプリ・アイコンがスタートメニュー内に作成される。

これらのアイコンによって起動する各環境では、その中で使用されるコンパイラ・ツールチェイン、ターゲット・アーキテクチャ、ランタイム・ライブラリの種類が以下のように異なっている。

アブリ・アイコン ツールチェイン格納場所 コンパイラ ターゲットアーキテクチャ ランタイムライブラリ
MSYS2 MSYS /usr gcc x86_64 (Intel 64ビット) cygwin
MSYS2 UCRT64 /ucrt64 gcc x86_64 (Intel 64ビット) ucrt
MSYS2 CLANG64 /clang64 llvm x86_64 (Intel 64ビット) ucrt
MSYS2 CLANGARM64 /clangarm64 llvm aarch64 (ARM 64ビット) ucrt
MSYS2 MINGW32 /mingw32 gcc i686 (Intel 32ビット) msvcrt
MSYS2 MINGW64 /mingw64 gcc x86_64 (Intel 64ビット) msvcrt

LinuxC/C++プログラムはほとんどGCCを使って作成されているので、Linuxプログラムの64ビット版Windowsへの移植に利用するのはMSYS2 MINGW64になる(GCCベースのIntel 64ビット版Windowsプログラムの開発・移植しかやらないなら、これ以外は利用することはないかもしれない)。

MinGW-w64の初期設定

環境変数の設定

MSYS2のインストールが終わったら、システム環境変数に"MSYSTEM"="MINGW64"という設定を作成しておく。

管理者権限でPowerShellを開いて、下のコマンドを実行することで、その設定操作が行える。

> [System.Environment]::SetEnvironmentVariable("MSYSTEM", "MINGW64", "Machine")

さらに、ユーザー環境変数Pathに以下のパスを追加する。

  • C:\msys64\mingw64\bin
  • C:\msys64\usr\local\bin
  • C:\msys64\usr\bin
  • C:\msys64\bin
  • C:\msys64\opt\bin

PowerShellを開いて、以下のコマンドを実行することで、その設定操作が行える。

> $oldpath = [System.Environment]::GetEnvironmentVariable("Path", "User"); $oldpath += ";C:\msys64\mingw64\bin"; [System.Environment]::SetEnvironmentVariable("Path", $oldpath, "User")
> $oldpath = [System.Environment]::GetEnvironmentVariable("Path", "User"); $oldpath += ";C:\msys64\usr\local\bin"; [System.Environment]::SetEnvironmentVariable("Path", $oldpath, "User")
> $oldpath = [System.Environment]::GetEnvironmentVariable("Path", "User"); $oldpath += ";C:\msys64\usr\bin"; [System.Environment]::SetEnvironmentVariable("Path", $oldpath, "User")
> $oldpath = [System.Environment]::GetEnvironmentVariable("Path", "User"); $oldpath += ";C:\msys64\bin"; [System.Environment]::SetEnvironmentVariable("Path", $oldpath, "User")
> $oldpath = [System.Environment]::GetEnvironmentVariable("Path", "User"); $oldpath += ";C:\msys64\opt\bin"; [System.Environment]::SetEnvironmentVariable("Path", $oldpath, "User")

これらの環境変数は、コマンドプロンプトPowerShellなどのMSYS2シェル以外のターミナル環境からMinGW-w64のコマンド群を参照可能にするための設定だ。

パッケージの更新

アプリMSYS2 MINGW64を起動して、開いたシェル画面から下のコマンドを実行する。

$ pacman -Syu

これによって、パッケージデータベース情報、pacmanコマンド、コアパッケージが更新される。

もう一度MSYS2 MINGW64を開いて、下のコマンドを実行する。

$ pacman -Su

これによって、既存の全パッケージが更新される。

ユーザー・ホームディレクトリの変更

MSYS2シェル内でのユーザー・ホームディレクト/home/USERNAMEはパスC:\msys64\home\USERNAMEに割り当てられている。

これはユーザーの好み次第だが、以下のファイルを編集することで、このパスをC:\Users\USERNAMEに変更することができる。

  • C:\msys64\etc\nsswitch.conf(MSYS2シェル内パス/etc/nsswitch.conf
-db_home: cygwin desc
+#db_home: cygwin desc
+db_home: windows

この変更を行った場合は、MSYS2シェルから下のようなコマンドを実行して、すべての設定スクリプトファイルをC:\msys64\home\USERNAMEからC:\Users\USERNAMEへコピーしておくべきだ。

$ cd
$ cp -p /c/msys64/home/USERNAME/.profile /c/msys64/home/USERNAME/.bash_profile /c/msys64/home/USERNAME/.bash_logout /c/msys64/home/USERNAME/.bashrc .

GCCのインストールと動作確認

GCCパッケージのインストール

MSYS2 MINGW64シェルから以下のコマンドを実行すれば、GCCコンパイラおよびその関連パッケージ群をインストールできる。

$ pacman -S base-devel
$ pacman -S mingw-w64-x86_64-toolchain

インストール後、以下の3つのコマンドを実行して、GCCコンパイラが利用できることを確認しておく。

$ gcc --version
$ g++ --version
$ cpp --version

GCCによるコンパイル確認

適当なエディタを使って、以下のようなソース・ファイルを作成する。

#include <stdio.h>
int main() {
    printf("Hello, world!\n");
    printf("sizeof(size_t) = %ld\n", sizeof(size_t));
    return 0;
}

MSYS2 MINGW64シェルを開き、下のコマンドを実行すれば、本ソースがコンパイルされる。

$ gcc hello.c

続いて、下のコマンドを実行すれば、コンパイル生成されたプログラムを実行することができる。

$ ./a.exe
Hello, world!
sizeof(size_t) = 8

【参照リンク】

qiita.com

www.kkaneko.jp

qiita.com