【Mac不要】開発中のFlutter製アプリをiOSとAndroidに実機配備する手順 - Codemagic編


# はじめに

Flutterはクロスプラットフォーム対応ですので、作成したアプリはiOS, Android両方にリリースすることができます。ところが、WindowsではiOS向けのビルドができません。Macを持っていない人にはつらい事実ですね。そこで、この記事ではCodemagicというサービスを利用してiOS, Android両方にリリースする手順を紹介します。

## 前提

この記事は、以下に当てはまる人向けの iOS/Android 対応アプリを開発する手順を紹介します。

* 開発機はWindowsだ
* **Macを持っていない**
* Flutterで開発したい
* Apple Developer Programに既に登録している、または年間で約12,000円を支払えるクレジットカードまたはデビットカードを持っていて、支払い後に最大48時間待ってやるのも悪くない。※1

※1: 2020/03/25現在。

## 開発環境の前提

* AndroidStudioがインストールされていること（まだの方は、インストールをお願いします）
* Git for windowsがインストールされていること（まだの方は、インストールをお願いします）
* openSSL for windowsがインストールされていること（いかに手順のヒントを掲載しておきました）

## 補足:Windows用OpenSSLのインストールについて

OpenSSLは、オープンソースですが、公式ではソースコードのみが公開されています。
従って、Windows用のバイナリは、公式サイト以外から入手する必要があります。

入手にあたり、以下の記事が参考になりましたので紹介します。
[WindowsにOpenSSLをインストールして証明書を取り扱う（基本編） - @IT](https://www.atmarkit.co.jp/ait/articles/1601/29/news043.html)


## ソースコードの公開

この記事の手順で作成したソースコードはGithubで公開しています。併せてご参照ください。
https://github.com/atsuteru/flutter_firebase_0507/tree/Qiita-FlutterStartup-v1.0

# 本文

## 開発環境の準備

### flutter開発用のディレクトリを作成する

私は以下のディレクトリを好んで使用します。

```powershell:powershell
cd $Env:userprofile
mkdir source
mkdir source\repos
```

※上記ディレクトリは、以下の手順でエクスプローラーで開けます。
「Windows+R」(ファイル名を指定して実行)で以下を入力しOK。

```
%userprofile%\source\repos
```

### flutterSDKを入手する

Githubから入手します。

```powershell:powershell
cd $Env:userprofile\source\repos
git clone https://github.com/flutter/flutter.git
```

## Flutterアプリを新規作成し、Githubにプッシュする

### 1) AndroidStudioで新規 Flutter プロジェクトを作成

1. Start a new Flutter project を選択
![Welcome to Android Studio 2020_05_03 14_29_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/7119ba8f-bab6-0d1e-12ca-9739b4e1ae67.png)
1. Flutter Application を選択
![Welcome to Android Studio 2020_05_03 14_30_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/4a52bff7-0104-c718-01af-5218e99eabf9.png)
1. Projectの情報と、Flutter sdkのチェックアウトディレクトリを指定する
![Welcome to Android Studio 2020_05_03 14_30_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/f02cdbee-098a-5078-c1bf-8f991ac4267b.png)
1. パッケージ名を指定する。AndroidXは有効にしておく
![Welcome to Android Studio 2020_05_03 14_30_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/0828e4d4-2bc0-c507-0dd1-ede0cb097d7c.png)
1. すると次のようなワークスペースが作成されます
![flutter_firebase_0503 [C__Users_kami_teru_source_repos_flutter_firebase_flutter_firebase_0503] - ..._lib_main.dart [flutterfirebase0503] - Android Studio 2020_05_03 14_32_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/f2545680-1dc2-de3b-8027-2603b927c240.png)

### 2) Flutter プロジェクトの```.gitignore```を調整

* ルートディレクトリの```.gitignore```に以下を追加 - 参考: [What not to commit - Dart](https://dart.dev/guides/libraries/private-files)

```text:/.gitignore
pubspec.lock
```

### 3) Githubリポジトリを作成し、pushする

Githubアカウントを持っていない人は、作成しましょう。（無料で作れます）
※Github以外でも、Codemagicが連携できるリポジトリならOKですが、その説明はこの記事では割愛します。

Githubリポジトリの作成手順は、ここでは割愛します。
Githubリポジトリの作成後、プッシュまでの流れは、コマンドだと次のような感じです。

```powershell:powershell
cd $Env:userprofile\source\repos\flutter_firebase\flutter_firebase_0503
git init
git add .
git commit -m "New flutter project generated by AndroidStudio"
git remote add origin https://github.com/atsuteru/flutter_firebase_0503.git
git push -u origin master
```

## FlutterアプリをCodemagicでビルドする

### 1) CodemagicでGithubリポジトリを初回ビルドする

Codemagicのアカウントがない場合は、Githubアカウントと連携させる形で作成します。（無料で作れます）
Codemagicのアカウントがある場合は、Githubアカウントの連携を追加してください。
その手順は、ここでは割愛します。

Githubアカウントの連携ができたら、[Appsページ](https://codemagic.io/apps)に、作成したGithubリポジトリが表示されます。

![Applications overview - Codemagic - Mozilla Firefox 2020_05_07 19_33_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/881d5fab-7667-94ff-658f-5e70820ee885.png)

そのリポジトリの```Start your first build```ボタンを押下しましょう。すると、Codemagicでのビルド設定が自動的に作成され、初回ビルドが始まります。

ここでビルドの結果がエラーになる場合は、バージョン、環境、サービスのいずれかに問題が起こっています。
私は、以下の問題にあたったことがあります。

* サービス: iOSビルドが、関連ライブラリ(dependency)のダウンロードに失敗したことが原因で失敗。時間を空けて再実行することで解消した。

### 2) 端末にリリースするために必要な、署名用のあれこれを行う

#### 2-1) Android向け

初回ビルドの結果を待っている間に、アプリを署名するためのキーストアを作成しましょう。

* Androidアプリを実機で動作させるためには、署名されたアプリケーションパッケージが必要です。
* その署名には秘密鍵が必要です。
* また実機にインストールするためには公開鍵の配付が必要です。
* 公開鍵の作成には、証明書が必要です。
* キーストアとは、上記に登場した「秘密鍵」「公開鍵」「証明書」を格納できる『ハコ』だと思ってください。

作成するためには、コマンドラインを使用します。
以下の手順で作成することができます。

```powershell:powershell
# インストールしたOpenSSLのbinフォルダにパスを通す
# 実際にインストールしたパスを指定すること。先頭の";"を忘れないこと！
$Env:Path += ";C:\Program Files\OpenSSL-Win64\bin\"

# Java KeyStore(jks)形式のキーストアを作成する
# この例では、次のように設定しています。※実際は安全なパスワードを使用しましょう！
# キーストアファイル名: flutter_firebase_0503.jks, キーストアパスワード: kami_teru, キー名: flutter_firebase_0503_key, キーパスワード: kaim_teru, 有効期間: 365日
keytool -genkey -v -keystore flutter_firebase_0503.jks -storepass kami_teru -alias flutter_firebase_0503_key -keypass kami_teru -keyalg RSA -validity 365
姓名は何ですか。
  ［Unknown］:  kami_teru
組織単位名は何ですか。
  ［Unknown］:
組織名は何ですか。
  ［Unknown］:  kami_teru
都市名または地域名は何ですか。
  ［Unknown］:
都道府県名または州名は何ですか。
  ［Unknown］:
この単位に該当する2文字の国コードは何ですか。
  ［Unknown］:  JP
CN=kami_teru, OU=Unknown, O=kami_teru, L=Unknown, ST=Unknown, C=JPでよろしいですか。
  ［いいえ］:  Y
365日間有効な2,048ビットのRSAのキー・ペアと自己署名型証明書(SHA256withRSA)を生成しています
        ディレクトリ名: CN=kami_teru, OU=Unknown, O=kami_teru, L=Unknown, ST=Unknown, C=JP
［flutter_firebase_0503.jksを格納中］

# キーストアから、キーに対する証明書を取り出す。
keytool -export -alias flutter_firebase_0503_key -file flutter_firebase_0503_key.cer -keystore flutter_firebase_0503.jks
キーストアのパスワードを入力してください:
証明書がファイル<flutter_firebase_0503_key.cer>に保存されました

# キーストアを、テキスト形式に変換しておく（後で使います）
openssl enc -base64 -in flutter_firebase_0503.jks -out flutter_firebase_0503.base64
```

#### 2-2) iOS向け

iOS向けの署名に必要な一式は、Codemagic と Apple Developer Program のアカウントを連携させることで自動的に作成してもらえます。但しその前に、リリースするiOSの実機を、Apple Developer Programに登録しておく必要があります。

[Deviceのページ](https://developer.apple.com/account/resources/devices/list)から、実機のUUIDを登録しておきましょう。

※UUIDは、iPhoneの場合はiTunesに接続すると調べることができます。その他の方法もいくつかあるようです。参考：[iPhone XSシリーズからのUDID・識別子の確認方法 - @takashings](https://qiita.com/takashings/items/f4f96d8f948e14cd98d9)

### 3) Codemagicでリリースビルドする

さて、もうCodemagicの初回ビルドは終わった頃でしょうか。

![Applications overview - Codemagic - Mozilla Firefox 2020_05_07 20_03_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/33cd4269-62d8-ea9f-3091-3f7dd688fd3d.png)

終わったみたいですね！各ビルドのStepとも、成功しているようです。しかし、このビルドの結果は、実機にインストールすることができません。アプリに署名をしていないからですね。

では、リリースビルドを行い、アプリに署名を行うための設定をしていきましょう。

* iOS向けには、Apple Developer Programのアカウントが必要です
* Android向けには、先ほどの手順で作成したキーストアファイルが必要です。

なお、ここで紹介する手順は以下の記事を参考にさせていただきました。ありがとうございます。

* [Codemagicの設定手順＆ハマりそうなところをまとめてみた - @yukitaka13-1110](https://qiita.com/yukitaka13-1110/items/2b4fb8a25c1559f3e278)

以下、Codemagicのアプリの設定ページ（歯車のアイコンで飛べる）で、各セクションを設定します。こんなページです。
![App settings - Google Chrome 2020_05_09 16_51_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/cd5166eb-f152-5330-3045-e1e80465290d.png)

先に、注意点をまとめておきます。

* 注意１）各セクションの編集後、必ず「Save」ボタンを押しましょう。
* 注意２）入力がうまくできないときは、セクションを閉じたり開いたりしなおしてみましょう。

では以下、各セクションを設定しましょう。記載のない箇所は、デフォルトのままで構いません。

#### Build triggers

* ```Trigger on push```にチェックを付ける

#### Environment variables

以下の環境変数を追加する。
一つ入力するごとに、「Add」ボタンを押し忘れないようにしましょう。

* FCI_KEYSTORE_FILE = ```flutter_firebase_0503.base64ファイルの内容``` ※全選択＆コピー＆貼り付けを実行。改行も含めること
* FCI_KEYSTORE_PASSWORD = ```kami_teru``` ※キーストアに設定したパスワード
* FCI_KEY_ALIAS = ```flutter_firebase_0503_key``` ※キーストアの作成時に指定した秘密鍵の別名
* FCI_KEY_PASSWORD = ```kami_teru``` ※キーストアの作成時に指定した秘密鍵のパスワード

#### Post-clone script

```Dependency caching```の下の「＋」をクリックすると出現します。
以下のスクリプトをそのままコピペしてください。

```sh
#!/usr/bin/env sh
set -e # exit on first failed commandset
echo $FCI_KEYSTORE_FILE | base64 --decode > $FCI_BUILD_DIR/keystore.jks
```

#### Build

* Build for platforms : Android, iOSを選択する
* Mode: Releaseを選択する

#### Publish

1) Android code signing

* Keystore: ```flutter_firebase_0503.jks``` ※ファイルをアップロード。
* Keystore password: ```kami_teru``` ※キーストアに設定したパスワード
* Key alias: ```flutter_firebase_0503_key``` ※キーストアの作成時に指定した秘密鍵の別名
* Key password: ```kami_teru``` ※キーストアの作成時に指定した秘密鍵のパスワード
* Enable Android code signing: チェックを付ける

2) iOS code signing

* Select code signing method: ```Automatic```を選択
* Apple Developer Programのアカウントを設定
* Provisioning profile type: ```Development```を選択
* Bundle identifier (optional): ```test.kamiteru.flutterfirebase0503``` ※1

※1 android\app\src\profile\AndroidManifest.xml ファイルの packageに設定されているものを入力する

最後に、設定ページの最上部にある「Start new Build」ボタンを押し、ビルドを行いましょう。
この設定以降のビルドはすべて、リリースビルドになります。

※この時、以下のページが表示されたら、```Start new build```を選択しましょう。
※Mac Proを使えばビルドはもっと早いよ！という紹介のページです。アカウント作成後は数回、Mac Proでビルドすることもできます。

![Applications overview - Codemagic - Mozilla Firefox 2020_05_07 20_19_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/dc5706e5-8829-cc7f-3da6-06b1a95af3e8.png)

## Flutterアプリを端末にインストールする

リリースビルドが行われているうちに、端末に証明書の取り込みをやっておきましょう。

* この作業は Android端末 のみ必要です。
* iOS端末は、Apple Developer Programに自端末を登録してある仕掛けにより、アプリ側に「どの端末にインストールできるか」が埋め込まれているため、この作業は不要です。

### Android端末への証明書のインストール

先の手順で作成した```flutter_firebase_0503_key.cer```を、メール等を経由してAndroid端末に送りましょう。
メールの場合、受信したメールに添付された```flutter_firebase_0503_key.cer```をタップして開き、証明書名にアプリ名を入力してOKしましょう。

<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/aa0305a3-3006-8f3d-28a7-8519e0e71e00.jpeg">

さて、そうこうしているうちに、Codemagicでのリリースビルドが完了しているのではないでしょうか。

### Codemagicからのメールをチェック

ビルドが成功/失敗すると、Codemagicから次のようなメールが届きます。
※もし届かない場合は、Codemagicのメールの設定を確認しましょう。

<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/d67b6bc5-ce2c-392c-73c3-1084576d2812.jpeg">

### Androidへのインストール

Androidへのインストールは、次の手順で行います。

1. ```app-release.apk```のInstallボタンをタップ<br/>→ダウンロード<br/>
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/c8aa4a84-3cc2-050a-e2e6-bdee3bd10aed.jpeg">
1. ダウンロードした```app-release.apk```を実行<br/>※内部ストレージのDownloadフォルダに保存されています<br/>
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/484193d7-70d6-74e7-118c-d17ea567bf95.jpeg">
1. 内部ストレージアプリによる「提供元不明なアプリ」のインストール許可の確認が出るので、許可するよう設定します。<br/>
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/6cc7ea4b-28e4-d29b-53e4-ae4dca2521b4.jpeg">
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/e5378b85-cb28-3d29-504f-3ffa3a9e4f10.jpeg">
1. 確認画面でインストールを選択<br/>
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/c8feba9e-a50d-a504-daf7-a9f86dfbbc45.jpeg">
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/a1116340-62c8-b68b-44f0-2ff98f585e9f.jpeg">
1. もしGoogle Playの警告が出た場合は、アプリ名が自作のものであることを確認し、```INSTALL ANYWAY```を選択しましょう<br/>
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/4d35d0a2-895c-cd3d-3771-7bd2291be8a5.png">
1. Androidで動作することが確認できました<br/>
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/b54f7aad-3ac3-849e-37eb-48658c09725f.jpeg">

### iOSへのインストール

iOSへのインストールは、次の手順で行います。

1. ```flutterfirebase0503.ipa```のInstallボタンをタップ<br/>→確認画面でインストールを選択<br/>
<img width="320" alt="unnamed.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/aad389cf-b203-d3e9-c6d3-2534ce7c9800.jpeg">
1. iOSで動作することが確認できました<br/>
<img width="320" alt="unnamed (1).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109362/60fcfe6a-38e3-0856-46c4-736eb1d5ecdc.jpeg">

# おわりに

以上で、開発中のFlutter製アプリをiOSとAndroidに実機配備できましたね！

もし良ければ、以下の続編記事も参考に開発を進められてください。

* [【Mac不要】開発中のFlutter製アプリを仲間のiOS端末に実機配備する手順 - Codemagic&TestFlight編](https://qiita.com/kami_teru/items/6d5c9b24f711f1270697)
* [【Mac不要】FlutterアプリにFirebase SDKを組み込んでiOSとAndroidに実機配備する手順 - Codemagic編](https://qiita.com/kami_teru/items/d3b72f5c0aa97e6c1c08)


この記事が、一人でも多くの方がFlutterを始めてみるきっかけになると幸いです。