【Windows編】FlutterとCodemagicを使ってAndroidiOSアプリを生成するまで

Flutter

0. はじめに

勉強不足なもので、スマホアプリの開発は最近全然やっていませんでした:rolling_eyes: 私の自宅にはWindows1台、Mac1台あるのですが、性能的にも新しさ的にもWindowsの方が上ですので、開発は主にWindowsで行っております。でも、iOSアプリも作りたいなーと思い(スマホはiPhoneなので)、最近流行っているFlutterを使ってみることに。せっかくなのでアウトプットとして、環境構築手順やらCodemagicについて当記事にまとめました。

1. Flutterとは

Googleによって開発されたクロスプラットフォームの開発技術。
つまりはReact NativeやXamarinのライバル。
Android Studio or XCode or VSCodeにFlutter SDKをぶち込んで開発する。
Dart言語を使って実装する。

2. Codemagicとは

Flutter専用のCI / CDサービス。
ソースをPushすることで、自動でビルドやテストを行ってくれる。
iOSのビルドは基本Macでしかできないが、なんとCodemagicが代わりにビルドしてくれるらしい。
GitHub or GitLab or Bitbucketを連携して利用する。

3. 環境構築

今回はAndroid Studioを使って環境構築していきます。 ※Android Studioの環境構築手順については割愛します。私はVer4.0.1を日本語化したものを利用しました。

3-1. Flutterのダウンロード

以下の公式サイトにアクセスし、最新VerのFlutterをダウンロード＋解凍します。

Flutter SDK releases

3-2. パスを通す

解凍したFlutterを任意のフォルダに配置し、flutter\binまでのパスを通します。

C:\Users\xxx\flutter\bin

3-3. 環境診断コマンドの実行

コマンドプロンプトでflutter doctorを実行することで、Flutterを作成するための環境が整っているかチェックをしてくれるようです。ここで一度コマンドを実行してみましょう。

PS C:\Users\xxx> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, v1.17.5, on Microsoft Windows [Version 10.0.18363.959], locale ja-JP)

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Android Studio (version 3.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code, 64-bit edition (version 1.47.3)
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

3-4. issueの解消

**! (issue)**が出たようなので解消してきます。 ※「! No devices available」については、実機 or エミュレータを起動していないため表示されているだけです。現状は無視でOKです。

3-4-1. [!] Android toolchain...

X Android licenses not accepted.

Androidのライセンス確認ができないとのことなので、エラーにもある通り、以下のコマンドを実行すればOKです。

flutter doctor --android-licenses

3-4-2. [!] Android Studio...

X Flutter plugin not installed; this adds Flutter specific functionality. X Dart plugin not installed; this adds Dart specific functionality.

FlutterとDartのプラグインがないとのことなので、以下の手順でインストールすればOKです。 ① Android Studioを起動。 ② [構成] > [プラグイン]を選択。 ③ Flutterをインストール。 　※FlutterをインストールすればDartも一緒に入ってきますので、一気に2つ「X」を解消できます:innocent:

3-4-3. [!] VS Code...

X Flutter extension not installed; install from xxx

VSCodeにFlutterがないとのことです。今回はAndroid Studioを使うので関係ないですが、「X」なしの方がかっこいいので一応解消しておきましょう。以下の手順でインストールすればOKです。 ① VSCodeを起動し、[拡張機能]を選択。 ② Flutterをインストール。

3-5. 環境診断コマンドの再実行

ここでもう一度flutter doctorを実行してみましょう。

PS C:\Users\ikuya> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, v1.17.5, on Microsoft Windows [Version 10.0.18363.959], locale ja-JP)

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 4.0)
[√] VS Code, 64-bit edition (version 1.47.3)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

やった！解消されました:clap:これで環境はOKです:relaxed: