はじめに
こんにちは!CircleCIカスタマーサクセスのチヨです。
紅葉が進み肌寒い日が多くなってきましたが、皆さんはいかがお過ごしですか。私は衣替えのタイミングを完全に逃し常に会社のパーカーを着用しています。
今回は先日リリースされたVisual Config Editor(VCE)をデモと合わせて紹介いたします。
VCEはWebブラウザから利用可能です。画面左上のエリアに画面右から必要なアイコンをドラッグ&ドロップして接続することでフローチャートを描くようにCI/CDパイプラインを設定できます。
VCEメリット
筆者もエンジニアではないため、スペースの入れ忘れなどによりエラーが出るなんてことはよくあります。慣れないYAMLの作成をスムーズにできるのが今回GAになったVCEです。
YAML初心者以外にも他に以下のメリットがあります![]()
ワンクリックでCircleCI Orbsにアクセスし、人気のあるサービスとすばやく統合
タグとブランチフィルタの視覚的な管理をする
リアルタイムでの入力の検証
設定構築のエクスペリエンスを合理化し、自信を持ってパイプラインのオーケストレーションを行う
またBitriseなどでモバイルアプリ開発に慣れている方も、直感的な操作を行えます。
VCE構成
画面は3つに分かれています:左上はビジュアルボードになりwroflowの構成が表示されます。右上はorbs、ジョブ、ステップなどを選択できるコントロールパネル。左下が作成したYAMLのアウトプット画面になります。
Androidプロジェクトをセットアップ
今回は弊社チュートリアルブログで紹介されているAndroidプロジェクトの持続的インテグレーションを拝借して設定を行います。サンプルプロジェクトはこちらに格納されております。
Orbs
VCEではOrbsパッケージ化されたコンフィグをサポートしているのでこちらを使用します。Orbsを選択することでいくつかのステップがすでに設定されており、後のCI設定が楽になります。右側のコントロールパネルから+を選択し使用するOrbsを選択します。今回はAndroid2.1.2を選択しました。

VCEを使い以下のジョブを作成していきます:
unit-test仮想マシン内で単体テストを実行する
android-testエミュレーター上でテストを実行する
release-buildアプリのリリース バージョンをビルドする
単体テスト
unit-testの設定ではAndroid Orbsのandroid/android-machineを設定しサイズを選択します。

ステップを作成しAndroid Orbsのandroid/restore-gradle-cache と
android/restore-build-cacheなど必要なステップを選択します。
ステップ作成後は右下のcreateしビジュアルボードにドラッグします。

エミューレーター
android-testではandroid/start-emulator-and-run-testsを選択し、
指定されたエミュレータを起動しテストを実行します。ステップの完了後、同じぐドラッグします。

リリース
このプロジェクトではビルド中にアプリケーションを保存しているため、
runステップにてgradleを使用しビルド依存関係を呼び出します。
またrestore-arfifactsにビルドされたAPKの保存を参照します。

優先順位
2つのジョブを完了した際にリリースを実行したいため、
ジョブの間を結びジョブの実行優先順位をつけます。

フィルター機能
フィルターを設置していない場合、全てのブランチにコミットしたタイミングでリリースされます。
今回mainブランチに変更があった時のリリースしたいので、リリースビルドを選択しフィルターを設置します。
設定後右上のファネルから各ブランチの動作を確認できます。

output作成後
設定により一連の流れができたため、Outputに表示されたコンフィグをコピーし、自分のYAMLファイルにコピペすることで完了いたします。ヘッダーに書かれている文言はCircleCIからチケットを上げていただいた際に、VCEのバージョンを確認するのに役立ちます。

最後に
CircleCIは常にユーザーの使いやすさを考え機能のリリースや改善を行っております。
ページよりissueを発見した場合は•••から連絡ください。

また使用感などの感想がありましたら、ぜひこちらのDiscussion pageから投稿ください。
