codemagicでFirebaseと連携したFlutterアプリをデプロイしてみる

※この記事は「[Flutter Advent Calendar 2018](https://qiita.com/advent-calendar/2018/flutter)」の８日目の記事になります。

#はじめに

先日の開催された、「Flutter Live」にて発表された、Flutter用CIツール「codemagic」を触ってみよう、といった趣旨の記事になります。

# CodeMagicとは
Webから使用できるFlutter用のCIツールになります。リンクは[こちら](https://codemagic.io/)。
<img width="1280" alt="スクリーンショット 2018-12-07 午後8.32.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/122004/fd1e4f9e-3eca-2eef-5c0a-24e37f4711ab.png">
Flutter専用のCiツールです。
今のところはGithubとの連携のみ対応しています。

ざっくりと特徴を記載すると
　* Android,iOSのbuildが可能
　* CodeMagicから直接Appstore,Playストアにアプリを登録可能
などがあります。

※ちなみに、トップページの下にcodemagicのslack招待ボタンがあるので興味のある方は参加してみましょう

# 使い方（簡易版）

1. トップページから「Join using Github」を選択して、ログインします。ログイン時にはGithubアカウントを使用します。
2. ログインすると、Githubアカウントに紐づいたリポジトリが表示されます。各リポジトリに表示されている「歯車マーク」を選択すると、buildの設定やbuild前後で実施したい処理をシェルスクリプト形式で記述ができます。
3. 設定後、画面上部の「Start new build」を選択すると、buildが始まります。
4. buildが成功すると、登録してあるメールアドレスにapkのダウンロードリンクが送付されます。


# 本題：Firebaeと連携するアプリのbuild方法について
Firebaseとアプリを連携させる場合、「＜projectroot＞/android/app」の直下に
「google-service.json」という設定ファイルを設置する必要があるのですが、これには鍵情報が含まれているため、通常Githubにはアップロードしません。
そのため、このファイルに記載されている情報を、codemagic上でbuild前に、jsonファイルとして仕込ませる必要があります。

流れとしては次の通りになります。
1. 「google-service.json」の中身をBase64形式に変換。
2.  変換したものをcodemagic上で元の形式に戻す。
3.  元の形式にしたファイルを「/android/app」に格納する。
4.  buildする。

##前提
[このサイト](http://www.convertstring.com/ja/EncodeDecode/Base64Decode?fbclid=IwAR3YVFy6ajYm0Jigl2Ep03C6uGzIFbWmIHfVusPiAUDF3bToBP2uRLtSoKI)を利用し、「google-service.json」の中身をBase64形式に変換します。

出力される文字列に改行が含まれているので、[このサイト](https://html-css-javascript.com/n-space-tab/?fbclid=IwAR3YVFy6ajYm0Jigl2Ep03C6uGzIFbWmIHfVusPiAUDF3bToBP2uRLtSoKI)を利用し、改行を取り除きます。

## 手順

CodeMagic上でbuild対象のリポジトリにある歯車マークを選択します。
<img width="1056" alt="スクリーンショット 2018-12-07 午後11.23.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/122004/e1410d8a-737e-cad8-6a39-eca1fdac685d.png">

buildの上にある「＋」を選択。
<img width="1059" alt="スクリーンショット 2018-12-07 午後11.20.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/122004/56c86182-e4e1-d8ba-5cea-4c8ada0ac8fb.png">

Pre build scriptに以下のコードを記述します。
<img width="949" alt="スクリーンショット 2018-12-07 午後10.28.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/122004/10ed85c7-74c5-9127-e7b0-671c5a1bc9e2.png">

```
#!/bin/sh
echo
<変換後のファイルの中身> | base64 -D -o android/app/google-services.json

```
具体的には次の様になります。

```

#!/bin/sh
echo ewogICJwcm9qZWN0X2luZm8iOiB7CiAgICAicHJvamVjdF9udW1iZXIiOiAiMjA3OTk1MDQwNDAiLAogICAgImZpcmViYXNlX3VybCI6
... | base64 -D -o android/app/google-services.json

```

変換後の中身は、そのまま貼り付けると改行が含まれてしまうので、改行を削除してください。

先ほど選択した、「＋」の下にある「Build」を選択し、「Build for platforms」にあるラジオボタンを「Android」に設定します。

<img width="477" alt="スクリーンショット 2018-12-07 午後10.39.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/122004/aa4ddc60-d42d-e3ab-534d-7fd6291a2059.png">

ここまで設定ができたら、画面上部にある「Start new build」を選択します。
すると、画面が遷移し、buildが始まるので、ログ等を見ながら待ちます。
無事に成功すると、登録してあるメールアドレスにメールが飛んでくるので、確認しましょう。

#終わりに
すごく簡単にbuildができるので、今後、積極的に使っていきたいな、という感じでした。使いやすいので、Flutter界隈で結構流行りそうな予感。今のうちに慣れておいた方がいいな、と思います。

この記事を読んで**「Flutterを使ってアプリを作ってみたい」と思った方**,
先日FlutterとFirebaseを使ったアプリ作成の入門書を作成しました！
興味がありましたら、ぜひBoothにてお買い求めください。
Firebaseとの連携や多言語化対応など取り扱っています。

<img width="1019" alt="スクリーンショット 2018-12-07 午後10.49.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/122004/af16bf52-3a4d-1d77-50d8-ac0413848d15.png">
https://booth.pm/ja/items/1040806