はじめに
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
- Android Studio
Flutter SDKのセットアップ
- Flutter SDKをダウンロードし任意のフォルダ(ex. d:\flutter)に解凍してください
- 環境変数のpathに追加してください
- envを起動してください
* 下記手順に従い、[インストールフォルダ]\bin (ex. d:\flutter\bin) をpathに追加してください  
Android Studioのセットアップ
- Android Studioをダウンロードし、.exeを起動してインストールを完了させてください。
- Android Studioを起動し、__SDK Manager__を開いてください。
- __SDK Toolタブ__を開き、__Hide Obsolete Packages__のチェックを外し、__Android SDK Tools (Obsolete)__にチェックを入れて__OK__を押下しインストールしてください。
- __Plugins__を開いてください。
- Fluuterのpluginをインストールします。Installを選択するとdartのpluginも同時にインストールする旨のメッセージが表示されるのでOKを押下して進めてください。
- __AVD Manager__を開いてください。
7.__Create Virtual Device__でAndroid emulatorをセットアップしていきます。
- 今回はデフォルトで選択されていたPixel2をそのまま選んで進めます。。
- システムイメージをダウンロードします。今回はAndroid 10.0のイメージをダウンロードしました。
- __Download__選択するとダウンロード画面になります。
- ダウンロードが完了したらイメージを選択して__Next__を選択して次に進んでください。
- 次の画面では各種設定を変更できますが今回は特にいじらずデフォルトのまま__Finish__を押下し作成を完了しました。
- emulatorを起動して問題なく動作するか確認をしましょう。
Visual Studio Codeの設定
Visual Studio Codeは事前にインストールをしておいてください。
1.FluuterのPluginをインストールします。拡張機能で__flutter__で検索をし、インストールを実行します。
インストール結果の確認
- Visiual Studio Codeのターミナルを開き、下記を入力し実行します。
> flutter doctor
2.上記のように分析結果が表示されます。ライセンス関連のエラーが出ているので、画面のメッセージに従い以下のコマンドを実行し、未同意のライセンスに対してyを選択し同意していきます。
> flutter doctor --android-licenses
まとめ
以上で最低限の開発環境が構築できたと思います。実際にはEmulatorではなく実機を利用したりとあるとは思いますが、まずはWindows PCのみで始められるところを狙って環境を構築しました。
次回「(2)Flutterのテンプレートアプリを作ってみる」では、Flutterのプロジェクトを作成し、テンプレートアプリを動かして中身を見ていきたいと思います。