FlutterとAWSで始めるサービス開発 (1)Windowsでの開発環境構築


# はじめに

Google謹製のクロスプラットフォームなアプリ構築フレームワークであるFlutterをクライアントサイドとし、サーバーサイドにAWSを利用しサービス開発してみたいと考えています。
サーバーサイドにAWSを使う場合、クロスプラットフォームなクライアントの開発にはReact Native + AWS Amplifyを使うというのが鉄板かなとも思いますが、JavaScriptとReactを使ったWebフロントエンドの開発をやってきていない人が、わざわざReact Nativeでアプリ開発を始める必要はないかなというのが筆者の考えです。React + Reduxの世界は初期の学習コストが割とかかり始めの一歩が大変ですし、正直コードも直感的ではなく読みにくいなと感じます。

ということで、王道ではないかもしれませんが、クラウドプラットフォームとしてはNo.1のAWSと、クロスプラットフォームのモバイル開発で注目されているGoogleのFlutterを使ったサービス開発のノウハウを学んでいきたいと思います。

# 開発環境

筆者はWindows PCしか持っていないので、Windows 10で開発環境を構築していきます。以下のバージョンを使ったインストール手順になります。

- Flutter SDK Windows 1.17.0
- Android Studio 3.6.3 for Windows 64-bit
- Visual Studio Code 1.44.2 (※インストール手順は省略します)

# 参考文献

* Flutter SDK

https://flutter.dev/docs/get-started/install/windows

* Android Studio

https://developer.android.com/studio/install


#  Flutter SDKのセットアップ

1. Flutter SDKをダウンロードし任意のフォルダ(ex. d:\flutter)に解凍してください
2. 環境変数のpathに追加してください
 * envを起動してください<br> 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/c9dad010-b21f-aa18-0441-4e27fbb28592.png" width="75%">
 * 下記手順に従い、[インストールフォルダ]\bin (ex. d:\flutter\bin) をpathに追加してください<br>
![環境変数1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/da4f5784-6959-4f01-a3c9-5ef339cb12a5.png)
![環境変数2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/0182f960-9682-6817-a19c-08c671d88064.png)
![環境変数3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/39243d12-931f-89cf-cbdb-82c54aefbb49.png)

# Android Studioのセットアップ

1. Android Studioをダウンロードし、.exeを起動してインストールを完了させてください。
2. Android Studioを起動し、__SDK Manager__を開いてください。
![Android Studio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/2bba4949-39b2-82ad-5741-a8f1b3f7f97f.png)
3. __SDK Toolタブ__を開き、__Hide Obsolete Packages__のチェックを外し、__Android SDK Tools (Obsolete)__にチェックを入れて__OK__を押下しインストールしてください。
![Android Studio2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/e8ec8ffc-c050-20ba-1fae-53552818dee1.png)
4. __Plugins__を開いてください。
![Android Studio_Plugin1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/a5815380-cee4-5834-b461-5762197573c2.png)
5. Fluuterのpluginをインストールします。Installを選択するとdartのpluginも同時にインストールする旨のメッセージが表示されるのでOKを押下して進めてください。<br>
![Android Studio_Plugin2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/aa6421f1-4e86-5701-029f-de4856dd5c42.png)
6. __AVD Manager__を開いてください。
![Android Studio_AVD1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/fd183d56-c4d7-30c7-77c1-314d7d15a9cb.png)
7.__Create Virtual Device__でAndroid emulatorをセットアップしていきます。
![Android Studio_AVD2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/64ea3c80-3627-0e47-6311-3e05c5dc3305.png)
8. 今回はデフォルトで選択されていたPixel2をそのまま選んで進めます。。
![Android Studio_AVD3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/00e61ca2-1db0-6eef-8ec7-c02733dd62d9.png)
9. システムイメージをダウンロードします。今回はAndroid 10.0のイメージをダウンロードしました。
![Android Studio_AVD4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/56370577-15a5-1881-5562-afd128ce5353.png)
10. __Download__選択するとダウンロード画面になります。
![Android Studio_AVD5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/d961a652-722f-f1f1-9827-3ef351751573.png)
11. ダウンロードが完了したらイメージを選択して__Next__を選択して次に進んでください。
![Android Studio_AVD6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/cbd1c97c-b3e0-56df-ab1c-21fdebfb99e9.png)
12. 次の画面では各種設定を変更できますが今回は特にいじらずデフォルトのまま__Finish__を押下し作成を完了しました。
![Android Studio_AVD7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/e5c9d26a-a55e-dd0c-e0a6-84dd00bf60de.png)
13. emulatorを起動して問題なく動作するか確認をしましょう。
![Android Studio_AVD8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/88293df6-5e07-e78c-9e21-50c135aa12a5.png)
![Android Studio_AVD9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/022f9258-1768-149f-0927-20aae12480fa.png)


# Visual Studio Codeの設定

Visual Studio Codeは事前にインストールをしておいてください。

1.FluuterのPluginをインストールします。拡張機能で__flutter__で検索をし、インストールを実行します。
![VSCode_Plugin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/974f4d0a-2c46-2b9e-4629-6085a15452ce.png)

# インストール結果の確認

1. Visiual Studio Codeのターミナルを開き、下記を入力し実行します。

`````
> flutter doctor
`````
![VSCode_Result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273926/506c336e-4855-a658-871c-9062fd6a40ab.png)

2.上記のように分析結果が表示されます。ライセンス関連のエラーが出ているので、画面のメッセージに従い以下のコマンドを実行し、未同意のライセンスに対して`y`を選択し同意していきます。

`````
> flutter doctor --android-licenses
`````

# まとめ

以上で最低限の開発環境が構築できたと思います。実際にはEmulatorではなく実機を利用したりとあるとは思いますが、まずはWindows PCのみで始められるところを狙って環境を構築しました。
次回[「(2)Flutterのテンプレートアプリを作ってみる」](https://qiita.com/makotomi/items/6669970d5a22019e2fbe)では、Flutterのプロジェクトを作成し、テンプレートアプリを動かして中身を見ていきたいと思います。