Flutterの開発環境を構築する for Windows10/VSCode/Android

f:id:fclout:20200528085140p:plain

はじめに

今回は最近話題のクロスプラットフォーム向けフレームワーク「Flutter」を使ってAndroidアプリを作ってみます。

Flutterって何?という方はこちら。
Flutter - Wikipedia

Flutter自体はiOSAndroidの他にWebやデスクトップ向けのアプリ開発もできるそうな。
ただ今回はAndroidに絞って挑戦しようと思います。

前提

今回使用する環境

項目 備考
OS Windows 10 Hyper-Vゲスト
CPU 4vCPU
メモリ 8GB
HDD 120GB C:80GB , D:40GB
PowerShell 5.1.18362.752
Git for Windows 2.26.2 https://git-scm.com/download/win
Flutter 1.17.1 https://flutter.dev/docs/get-started/install/windows
Android Studio( SDK ) 3.6.3 https://developer.android.com/studio/?hl=ja
VS Emulator for Android 1.1.622 https://visualstudio.microsoft.com/ja/vs/msft-android-emulator/
VS Code 1.45.1 https://code.visualstudio.com/
Android API Level 18(KitKat 4.4)

Hyper-V機能の有効化
今回のようにインストール先が仮想マシンHyper-Vゲスト)の場合は、
あらかじめホスト側でハードウェア仮想化拡張を有効にしておくこと。

Set-VMProcessor -VMName <VMName> -ExposeVirtualizationExtensions $true

またWindows標準機能で以下の2つを有効化しておく

f:id:fclout:20200528152046p:plain

構築手順

各種ソフトウェアの導入

PowerShell

Windows10標準のもので問題ないと思うが、念のためバージョンを確認。

PS C:\Users\admin> $PSVersionTable

Name                           Value
----                           -----
PSVersion                      5.1.18362.752
:
:

PSVersionが5.0以上であればOK。



Git for Windows

ダウンロードサイトから入手して、あとはデフォルトでインストール。



Flutter

SDKの入手
ダウンロードサイトからSDKを入手して好きな場所に解凍。
ver.1.17.1の場合はzipファイルが600MB程、解凍して1.3GB程。

解凍先
D:\development\flutter\


PATHを通す
解凍先のbinフォルダのパスをPath環境変数に登録。

$env:Path += ";D:\development\flutter\bin"
[Environment]::SetEnvironmentVariable('PATH', $Env:Path, 'Machine')


疎通確認
Flutterが正常に解凍されているか確認するためにflutter doctorを実行する。

PS D:\> flutter doctor                                                                                                  
         ╔════════════════════════════════════════════════════════════════════════════╗
         ║                 Welcome to Flutter! - https://flutter.dev                  ║
         ║                                                                            ║
         ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
         ║ statistics and basic crash reports. This data is used to help improve      ║
         ║ Flutter tools over time.                                                   ║
         ║                                                                            ║
         ║ Flutter tool analytics are not sent on the very first run. To disable      ║
         ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
         ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
         ║ event will be sent, and then no further information will be sent by the    ║
         ║ Flutter tool.                                                              ║
         ║                                                                            ║
         ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
         ║ Note: The Google Privacy Policy describes how data is handled in this      ║
         ║ service.                                                                   ║
         ║                                                                            ║
         ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
         ║ crash reports to Google.                                                   ║
         ║                                                                            ║
         ║ Read about data we send with crash reports:                                ║
         ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
         ║                                                                            ║
         ║ See Google's privacy policy:                                               ║
         ║ https://www.google.com/intl/en/policies/privacy/                           ║
         ╚════════════════════════════════════════════════════════════════════════════╝

       Doctor summary (to see all details, run flutter doctor -v):
       [√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.18363.535], locale ja-JP)
       [X] Android toolchain - develop for Android devices
           X ANDROID_HOME = D:\Develop\Android\Sdk
             but Android SDK not found at this location.
       [!] Android Studio (not installed)
       [!] Connected device
           ! No devices available

今はとりあえず上記「Welcome to Flutter!」の画面が出てくればOK。
次にその下に出力されているサマリーでNGとなっている項目を解消していく。

       [X] Android toolchain - develop for Android devices
           X ANDROID_HOME = D:\Develop\Android\Sdk
             but Android SDK not found at this location.
       [!] Android Studio (not installed)
       [!] Connected device
           ! No devices available
Android Studio( SDK )

NG項目のうち

       [X] Android toolchain - develop for Android devices
           X ANDROID_HOME = D:\Develop\Android\Sdk
             but Android SDK not found at this location.
       [!] Android Studio (not installed)

については、AndroidStudioを導入することで解決。
ただ今回のようにVSCodeを使用する場合はAndroidSDKだけ入れれば問題ないが、
あれば何かと便利そう(な気がするだけ)なので入れておく。


インストール
ダウンロードサイトから入手して、あとはデフォルトでインストール。

f:id:fclout:20200528145632p:plain
無事にAndroid Studioが起動したら、初期設定を行っていく。

初期設定
f:id:fclout:20200528145716p:plain
「Do not import seddings」を選択して「OK」

f:id:fclout:20200528145751p:plain
「Don't send」を選択して「OK」(Googleの栄養になりたい方はもう片方で)

f:id:fclout:20200528145827p:plain
「Next」を選択

f:id:fclout:20200528145848p:plain
「Standard」を選択して「Next」

f:id:fclout:20200528150028p:plain
好みのモードを選択して「Next」

f:id:fclout:20200528150058p:plain
サマリが表示されるので「Finish」

f:id:fclout:20200528150118p:plain
コンポーネントのダウンロードが開始される

f:id:fclout:20200528150149p:plain
HAXMがインストールできないとエラーが出るが、今回はVS Emulatorで対応するので問題なし。
仮想マシンのネストはサポートしない、とのことなので物理マシンでやる分には問題ありません。

f:id:fclout:20200528152824p:plain
メニュー画面が出てきたら初期設定完了。


Android SDKのパス確認
f:id:fclout:20200528152948p:plain
右下の「Configure」からSDKマネージャーを起動。
Android SDKのパスを確認しておく。

A ndroid SDKのパス
C:\Users\admin\AppData\Local\Android\Sdk


USBドライバのインストール
f:id:fclout:20200528171559p:plain
SDK Tools」タブの「Google USB Driver」にチェックを入れてドライバをインストール。


VS Emulator for Android

NG項目のうち

       [!] Connected device
           ! No devices available

については、VS Emulator for Androidを導入しエミュレータを起動することで解決。


インストール
ダウンロードサイトから入手して、あとはデフォルトでインストール。

f:id:fclout:20200528151527p:plain
セットアップが完了したら再起動する。


レジストリの追加
Android Studio から VS Emulator が参照できるようにレジストリを追加。

f:id:fclout:20200528153147p:plain
レジストリエディタ(regedit)を起動し、
コンピューター\HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\ に Android SDK Tools というキーを作成。
作成したキーの中に Path を作成し、AndroidStudioインストール後に確認した「Android SDK のパス」を指定。

Path
C:\Users\admin\AppData\Local\Android\Sdk


エミュレータの起動
f:id:fclout:20200528171829p:plain
VS Emulatorを開いたら、一覧から起動したいデバイスを選んで起動ボタンをクリック。
バイスがダウンロードされていない(グレーアウト)の場合はダウンロードボタンを押しダウンロード完了後に起動ボタンをクリック。

f:id:fclout:20200528172140p:plain
Hyper-V有効化後に初めてエミュレータを起動する際は、仮想ネットワークアダプタを裏で自動設定してくれます。
このような警告が出た場合は「再試行」を選択してください。

f:id:fclout:20200528172341p:plain
Hyper-Vが正常に有効化されていない場合はこのようなエラーが出ます。
手順に抜けがないか確認してください。

f:id:fclout:20200528172439p:plain
特に問題なければエミュレータ(という名のAndroid仮想マシン)が起動します。


USBデバッグの有効化
f:id:fclout:20200528172644p:plain
エミュレータのメニュー画面から「Developer options」を選択。
「USB debugging」を有効化。



VSCode

インストール
ダウンロードサイトから入手して、あとはデフォルトでインストール。


拡張機能の追加
flutter拡張機能を追加します。
検索ボックスに「flutter」と入力すると一番先頭に出てきます。
f:id:fclout:20200528173235p:plain

そのままInstallボタンをクリック。




ここでもう一度「flutter doctor」

再度flutter doctorを実行してみます。

PS C:\Users\admin> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.17.1, on Microsoft Windows [Version 10.0.18363.836], locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] Android Studio (version 3.6)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.45.1)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

Android Studio (version 3.6)」の項目が残ってしまってますが、
今回はエディタとしてVSCodeを使用するため無視して問題ありません。
VSCodeではなくAndroid Studioを使いたいという方は上記の内容に沿ってプラグインを入れてください。
(いつのまにか「VS Code」の項目が増えている!)

これで、開発環境の構築ができました。

いよいよ開発

環境が整ったので、次はいよいよ開発作業に入りたいと思います。
まずはプロジェクトの作成やらエミュレータを使ったデバッグやらですね。
それらについてはまた次の機会に。

さいごに

フレームワークを使った環境構築は比較的簡単なイメージがありましたが、
今回のFlutterはさらに簡単にできた気がします。

どっちかというと、仮想マシン入れ子状態でのVSEmulatorの導入のほうが苦労しました・・・

flutter doctorがあると便利ですよね。
他にもいろんなコマンドがありそうなので、どんどん勉強していきたいと思います。