はじめに
今回は最近話題のクロスプラットフォーム向けフレームワーク「Flutter」を使ってAndroidアプリを作ってみます。
Flutterって何?という方はこちら。
Flutter - Wikipedia
Flutter自体はiOS、Androidの他に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つを有効化しておく
構築手順
各種ソフトウェアの導入
PowerShell
Windows10標準のもので問題ないと思うが、念のためバージョンを確認。
PS C:\Users\admin> $PSVersionTable Name Value ---- ----- PSVersion 5.1.18362.752 : :
PSVersionが5.0以上であればOK。
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だけ入れれば問題ないが、
あれば何かと便利そう(な気がするだけ)なので入れておく。
インストール
ダウンロードサイトから入手して、あとはデフォルトでインストール。
無事にAndroid Studioが起動したら、初期設定を行っていく。
初期設定
「Do not import seddings」を選択して「OK」
「Don't send」を選択して「OK」(Googleの栄養になりたい方はもう片方で)
「Next」を選択
「Standard」を選択して「Next」
好みのモードを選択して「Next」
サマリが表示されるので「Finish」
各コンポーネントのダウンロードが開始される
HAXMがインストールできないとエラーが出るが、今回はVS Emulatorで対応するので問題なし。
仮想マシンのネストはサポートしない、とのことなので物理マシンでやる分には問題ありません。
メニュー画面が出てきたら初期設定完了。
Android SDKのパス確認
右下の「Configure」からSDKマネージャーを起動。
Android SDKのパスを確認しておく。
A ndroid SDKのパス |
---|
C:\Users\admin\AppData\Local\Android\Sdk |
USBドライバのインストール
「SDK Tools」タブの「Google USB Driver」にチェックを入れてドライバをインストール。
VS Emulator for Android
NG項目のうち
[!] Connected device ! No devices available
については、VS Emulator for Androidを導入しエミュレータを起動することで解決。
インストール
ダウンロードサイトから入手して、あとはデフォルトでインストール。
セットアップが完了したら再起動する。
レジストリの追加
Android Studio から VS Emulator が参照できるようにレジストリを追加。
レジストリエディタ(regedit)を起動し、
コンピューター\HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\ に Android SDK Tools というキーを作成。
作成したキーの中に Path を作成し、AndroidStudioインストール後に確認した「Android SDK のパス」を指定。
Path |
---|
C:\Users\admin\AppData\Local\Android\Sdk |
エミュレータの起動
VS Emulatorを開いたら、一覧から起動したいデバイスを選んで起動ボタンをクリック。
デバイスがダウンロードされていない(グレーアウト)の場合はダウンロードボタンを押しダウンロード完了後に起動ボタンをクリック。
Hyper-V有効化後に初めてエミュレータを起動する際は、仮想ネットワークアダプタを裏で自動設定してくれます。
このような警告が出た場合は「再試行」を選択してください。
Hyper-Vが正常に有効化されていない場合はこのようなエラーが出ます。
手順に抜けがないか確認してください。
特に問題なければエミュレータ(という名のAndroid仮想マシン)が起動します。
USBデバッグの有効化
エミュレータのメニュー画面から「Developer options」を選択。
「USB debugging」を有効化。
ここでもう一度「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」の項目が増えている!)
これで、開発環境の構築ができました。