2
0

More than 1 year has passed since last update.

Visual Config EditorからYAMLを作成

Last updated at Posted at 2022-10-26

はじめに

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

VCEメリット

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

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

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

VCE構成

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

Screen Shot 2022-10-23 at 20.18.23.png

Androidプロジェクトをセットアップ

今回は弊社チュートリアルブログで紹介されているAndroidプロジェクトの持続的インテグレーションを拝借して設定を行います。サンプルプロジェクトはこちらに格納されております。

Orbs

VCEではOrbsパッケージ化されたコンフィグをサポートしているのでこちらを使用します。Orbsを選択することでいくつかのステップがすでに設定されており、後のCI設定が楽になります。右側のコントロールパネルから+を選択し使用するOrbsを選択します。今回はAndroid2.1.2を選択しました。
ezgif.com-gif-maker (1).gif

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

単体テスト

unit-testの設定ではAndroid Orbsのandroid/android-machineを設定しサイズを選択します。
ezgif.com-gif-maker (9).gif
ステップを作成しAndroid Orbsのandroid/restore-gradle-cache
android/restore-build-cacheなど必要なステップを選択します。
ステップ作成後は右下のcreateしビジュアルボードにドラッグします。
ezgif.com-gif-maker (10).gif

エミューレーター

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

リリース

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

優先順位

2つのジョブを完了した際にリリースを実行したいため、
ジョブの間を結びジョブの実行優先順位をつけます。
ezgif.com-gif-maker (14).gif

フィルター機能

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

output作成後

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

最後に

CircleCIは常にユーザーの使いやすさを考え機能のリリースや改善を行っております。
ページよりissueを発見した場合は•••から連絡ください。
Screen Shot 2022-10-24 at 23.13.32.png
また使用感などの感想がありましたら、ぜひこちらのDiscussion pageから投稿ください。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0