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

11792 ワード
iOS Flutter codemagic Andorid iOS テキストリンク

0. はじめに

勉強不足なもので、スマホアプリの開発は最近全然やっていませんでした
私の自宅には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をダウンロード＋解凍します。

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」を解消できます

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.

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

4. プロジェクト作成

環境が整った所で、Android StudioにてFlutterプロジェクトを作成していきます。
※作成したプロジェクトはGitHubに登録してください。(すみません、手順は割愛で・・・)

①「新規 Flutter プロジェクトの開始」を選択します。

② 「Flutterアプリケーション」を選択します。

③ プロジェクト名等を入力し、「次へ」を押下します。

④ パッケージ名を入力し、「完了」を押下します。

⑤ 完了！

これでFlutterの空プロジェクトを作成できました

5. Codemagicの設定

続いてCodemagicの設定を行っていきます。

上記にアクセスし、以下の手順で進めます。
(黒背景に黄色の蛍光ペンは非常に見づらかった・・・)

① 「Sine up」を押下します。

② 「Join using GitHub」を押下します。

③ GitHub上のFlutterプロジェクトの「Set up build」を押下します。

④ 「Start your first build」を押下します。

⑤ 「Start new build」を押下します。

⑥ ビルド中の画面になります。完了するまで待ちましょう

⑦ 完了！

なんとこれだけでアプリケーションファイルが出来上がりましたすごい！！

6. 動作確認

apkファイルをダウンロードしてエミュレータにインストールしてみた所、うまく動きました

7. おわりに

環境構築にしろCodemagicの設定にしろ、かなり簡単に行えましたね！
環境によってはflutter doctorで他にもissueが出るかもしれませんので、メッセージでググってみてください
次回はDartに踏み込んでアプリを開発していきたいと思います。

↑な感じでmicroCMSとも組み合わせたいなー。
何よりAndroidの実機がほしい

8. 参考

今回は以下の記事を参考にさせて頂きました。ありがとうございます！