YOASOBIくらいの最小構成でスマホアプリを開発する with Flutter
Macbookとヘッドホンだけで紅白に出場したYOASOBI
2020年、紅白歌合戦に初出場し、代表曲「夜にかける」の再生回数は1.8億回越えのYOASOBIをご存じですか？
ものすごい実績ですが、
作曲者のAyaseさんの開発環境は、MacBookとヘッドフォンのみ!!!
めっちゃくちゃ身軽ですよね！！！
クリエイターのフットワークがどんどん軽くなっていく中、
デベロッパーだってフッ軽が良いじゃん！
ということで今回は、
「アプリ開発の最小環境」 をFlutterで構築していきたいと思います！
こんなものを自分のスマホに表示します。
なぜ、Flutterなのか？
Flutterは、「いま世界で最もアツいクロスプラットフォームフレームワーク！」
iOS、Androidなどのスマホアプリのほか、
Web / Windows / Mac / Linux / etc...
要するに、1つの開発環境でなんでも作れて超便利！
ナイスでベリーグッドなフレームワークってことです。
学習量に対するアウトプット量がめちゃくちゃ大きいのが特徴。
個人開発なら、第一選択にすべきフレームワークだと思います。
最近、Flutter2.0にアップグレードされて機能がさらに強化。
トヨタの組み込み開発や、ルンバ（iRobot)の教育アプリなどにもFlutterが採用されているとのこと。
いま、世界で最も熱いクロスプラットフォームフレームワークはダテじゃない！
ということで、今回はFlutterを使って環境を構築していきます。
今回使うのはSurface go と VSCode
我が家にある一番性能の低いPC、Surface goにFlutterをインストールしていきます。
エミュレーターとか動かすと重くなっちゃうので、実機でデバッグしていきましょう😉
こんな感じで構成していきます！
- Surface go
- Flutter
- Visual Studio Code
- 実機 (Google Pixel 3)
Gitのインストール
開発の中でGitを使うので、Gitをインストールしたことがない場合は↓からインストールします。
今回は、Surface goを使うので64-bit Git for Windows Setupを選択してダウンロード。
基本はNextを選択していけばインストールは終了です。
しかし、以下の選択だけは変えておくのを個人的にオススメします。
今後の推奨がmasterからmainに代わるらしいので、
override the default branch name for new repositoriesを選択しておきましょう。
あとはNextでOKです。
Finishまでできたら、次に進みましょう！
Flutterのインストール
↑の青いボタンをクリックして、Flutter SDKをダウンロードします。
これがFlutterの本体です。
flutter_windows_2.0.3-stable.zipというファイルが生成されます。
2.0.3 より上のバージョンになっているかもしれませんが問題ありません。
このファイルをCドライブに解凍します。
Cドライブ
└ Flutterフォルダ
■次にPATHを通します
ここまでの手順でFlutterは配置されているのですが、それをうまいこと利用するためにはPATHを通す必要があります。Just do it！
- Windowsキー
- 「環境変数」と入力
- システム環境変数を編集をクリック
- 環境変数をクリック
- PATHを選び、編集をクリック
- 新規をクリック
-
C:\flutter\binと入力 - OKをクリック
ここまでの手順でFlutterのインストールは終了です。
一応確認の為に、Flutterのバージョンチェックを行ってみましょう。
-
winキーを押して、cmdと入力しコマンドプロンプトを起動 -
flutter --versionと入力 -
flutter 2.0.3～～と出力されたら、FlutterのインストールはOK。PATHも通っています。 - *パスが通っていないときは再起動してみてください
次は、コードを書くためのエディタの準備をしましょう！
VSCodeのインストール
-
Download for Windowsからインストーラをダウンロード -
同意する,次へをクリックしインストールを完了します。
さらに、FlutterをVSCodeで使うための拡張機能を入手します。
- VSCode(Visual Studio Code)を起動
- 画面左のカラムから、ブロックのようなアイコンをクリック
- 検索窓に
flutterと入力 - Flutterという拡張機能をインストール
- 同じく
Dartという拡張機能もインストールしましょう
ここまで来たら、VSCodeを再起動することを推奨します。
VSCodeを再起動したら、
-
CTRL+SHIFT+PでVSCodeのコマンドパレットを起動 -
flutterと入力 -
Flutter: New Aplication Projectを選択 - プロジェクトを保存したい場所をどこか選んで、
Select a folder to create the project in - コマンドパレットにプロジェクト名を入力できるようになるので、
test（適当な名前）を入力
しばらく待つと、新しいプロジェクトが生成されます。
まだスマホに画面を移すことはできませんが、ここまででブラウザ上にテストアプリを表示することはできます。
VSCode上で Run → Start Debuggingを押すと、アプリが起動します。
ただし、スマホでアプリ開発するためにはAndroid SDKを入手する必要があります。
次のステップで入手しましょう！
Android Studioのインストール
-
DOWNLOAD ANDROID STUDIOからインストーラをダウンロード -
Nextでインストールを進めていきます - インストールが終わったら、Android studioを起動しましょう
- nextで進めていくと、Android SDKがインストールされます
- ちょいと時間がかかるので、コーヒーでも飲みながら待ちましょう
- インストールが完了したらAndroid Studioを起動します
ここまででAndroid SDKはインストール完了です。
今回は実機でデバッグしたいので、Google USB Driverも入手します。
- 画面下
ConfigureからSDK Managerをクリック
-
Android SDK→Google USB Driverに✅ →Apply -
Acceptと進んでインストールします
ここまできたら、Google USB Driverのインストールが完了！
つまり、スマホでデバッグ可能です！
スマホでデバッグ！
- VSCodeを開く
- 特に何もいじっていなければ、先ほど作成したプロジェクトが開かれています
- 何も開かれていないときは
File→Open Folderからプロジェクトを開きます - スマホとPixel3（お持ちのスマホ)をUSBで接続します
- VSCode画面右下に
Pixel3 (android-arm64)となっていることを確認 -
Run→Start Debuggingでデバッグを開始 - 初回のみ時間がかかります。YOASOBIを聞きながらテンションを上げましょう
その後ごにゃごにゃとコードを書いて実行すると冒頭のアプリになります。
コードはこちら。
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.pink,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 120),
child: ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.white),
onPressed: () async {
await _launchURL(
'https://www.youtube.com/watch?v=x8VYWazR5mE');
},
child: Text(
'夜に駆ける',
style: TextStyle(color: Colors.pink),
),
),
),
],
),
),
),
);
}
}
Future<void> _launchURL(String url) async {
await launch(url);
}
url_launcherを使いました。
YOASOBI並みの最小構成でスマホアプリをつくれた！
Surface go + Flutter + VSCodeだけでスマホアプリを実際に動かせました。
素晴らしいですね！
ビルド時間が結構長くて大変ですが、Flutterにはホットリロードもついているので、一度起動してしまえばそこまでストレスなく開発を進められるかもしれません。
よかったら友達になってね！
✅：Twitter https://twitter.com/hagakun_yakuzai
Discussion
私もFlutterでの開発を最小構成で始めようと思っており大変参考になりました。
質問があるのですが、Android SDKを使用するのにAndroid Studioをインストールしたのは何か理由があるのですか？
VScodeを使用するのでAndroid Studioを入れると容量が無駄になるのではないかと思っており、SDKだけ用いるともっと最小構成になるのではと考えています。
もし何かしらの理由やSDKだけでは不都合なことがあるのでしたらご教授お願いします。
これは去年書いた記事なのですが、去年の時点でFlutterの開発はVSCodeではなくAndroid Studioでの開発が一般的だったので、流行りに合わせて書いてあります。
今はVSCodeでの開発がかなり一般的になってきて情報量も増えましたし、Android Studioよりも軽快に動くのでそちらがオススメです。