Visual Config EditorからYAMLを作成

## はじめに
こんにちは！CircleCIカスタマーサクセスのチヨです。
紅葉が進み肌寒い日が多くなってきましたが、皆さんはいかがお過ごしですか。私は衣替えのタイミングを完全に逃し常に会社のパーカーを着用しています。
今回は先日リリースされた[Visual Config Editor](https://circleci.com/ja/blog/config-sdk/)(VCE)をデモと合わせて紹介いたします。
VCEは[Webブラウザ](https://circleci-public.github.io/visual-config-editor/)から利用可能です。画面左上のエリアに画面右から必要なアイコンをドラッグ＆ドロップして接続することでフローチャートを描くようにCI/CDパイプラインを設定できます。


## VCEメリット
筆者もエンジニアではないため、スペースの入れ忘れなどによりエラーが出るなんてことはよくあります。慣れないYAMLの作成をスムーズにできるのが今回GAになったVCEです。

YAML初心者以外にも他に以下のメリットがあります:crown:
ワンクリックでCircleCI Orbsにアクセスし、人気のあるサービスとすばやく統合
タグとブランチフィルタの視覚的な管理をする
リアルタイムでの入力の検証
設定構築のエクスペリエンスを合理化し、自信を持ってパイプラインのオーケストレーションを行う

またBitriseなどでモバイルアプリ開発に慣れている方も、直感的な操作を行えます。

## VCE構成
画面は３つに分かれています：左上はビジュアルボードになりwroflowの構成が表示されます。右上はorbs、ジョブ、ステップなどを選択できるコントロールパネル。左下が作成したYAMLのアウトプット画面になります。

![Screen Shot 2022-10-23 at 20.18.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277768/e64adab9-bf47-c6b5-59cb-c3357595f3b3.png)

## Androidプロジェクトをセットアップ
今回は弊社チュートリアルブログで紹介されている[Androidプロジェクトの持続的インテグレーション](https://circleci.com/ja/blog/building-android-on-circleci/)を拝借して設定を行います。サンプルプロジェクトは[こちら](https://github.com/CircleCI-Public/android-testing-circleci-examples)に格納されております。
### Orbs
VCEでは[Orbs](https://circleci.com/ja/orbs/)パッケージ化されたコンフィグをサポートしているのでこちらを使用します。Orbsを選択することでいくつかのステップがすでに設定されており、後のCI設定が楽になります。右側のコントロールパネルから＋を選択し使用するOrbsを選択します。今回はAndroid2.1.2を選択しました。
![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277768/c48857ef-954a-3118-7f7a-c42fd01d53bc.gif)

VCEを使い以下のジョブを作成していきます：
`unit-test`仮想マシン内で単体テストを実行する
`android-test`エミュレーター上でテストを実行する
`release-build`アプリのリリース バージョンをビルドする
### 単体テスト
`unit-test`の設定ではAndroid Orbsの`android/android-machine`を設定しサイズを選択します。
![ezgif.com-gif-maker (9).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277768/aaa620ed-adb1-f8e4-a127-6b5089f5f6bc.gif)
ステップを作成しAndroid Orbsの`android/restore-gradle-cache` と 
`android/restore-build-cache`など必要なステップを選択します。
ステップ作成後は右下の`create`しビジュアルボードにドラッグします。
![ezgif.com-gif-maker (10).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277768/f436a841-3fc1-9abf-2bf8-07bab8e92b0f.gif)
### エミューレーター
`android-test`では`android/start-emulator-and-run-tests`を選択し、
指定されたエミュレータを起動しテストを実行します。ステップの完了後、同じぐドラッグします。
![ezgif.com-gif-maker (18).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277768/f11fe2ff-9abb-b328-1eea-f96378574bd6.gif)
### リリース
このプロジェクトではビルド中にアプリケーションを保存しているため、
runステップにてgradleを使用しビルド依存関係を呼び出します。
また`restore-arfifacts`にビルドされたAPKの保存を参照します。
![ezgif.com-gif-maker (17).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277768/c3992df2-69a6-7996-396a-17541e2c1946.gif)

### 優先順位
２つのジョブを完了した際にリリースを実行したいため、
ジョブの間を結びジョブの実行優先順位をつけます。
![ezgif.com-gif-maker (14).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277768/fc88efda-6042-8224-af7c-925359a98982.gif)

### フィルター機能
フィルターを設置していない場合、全てのブランチにコミットしたタイミングでリリースされます。
今回mainブランチに変更があった時のリリースしたいので、リリースビルドを選択しフィルターを設置します。
設定後右上のファネルから各ブランチの動作を確認できます。
![ezgif.com-gif-maker (16).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277768/55868f3c-e30d-19c0-78ec-ebac8772196e.gif)

### output作成後
設定により一連の流れができたため、Outputに表示されたコンフィグをコピーし、自分のYAMLファイルにコピペすることで完了いたします。ヘッダーに書かれている文言はCircleCIからチケットを上げていただいた際に、VCEのバージョンを確認するのに役立ちます。
![Screen Shot 2022-10-23 at 22.55.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277768/414c1bc4-77ef-6fb8-a42f-eeabf423be5b.png)

## 最後に
CircleCIは常にユーザーの使いやすさを考え機能のリリースや改善を行っております。
ページよりissueを発見した場合は•••から連絡ください。
![Screen Shot 2022-10-24 at 23.13.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1277768/1d46cb4e-9877-51d6-9bc5-583b2066030a.png)
また使用感などの感想がありましたら、ぜひこちらの[Discussion page](https://discuss.circleci.com/t/visual-config-editor-for-circleci-is-now-ga/45126)から投稿ください。