Flipper UI画面をカスタマイズする

Flipperはfeature flagを簡単に導入出来るgemで比較的使われている事も多いと思います。
フラグが今どんな状態か確認したり追加する事が出来る画面を追加するflipper-uiというgemがありますが、単に画面を追加しただけだと色々情報が不便だったりするので、カスタムする方法を紹介します。
導入方法等は割愛します。

ruby: 3.2.2
rails: 7.2.2
flipper: 1.3.4

ざっくりと構成を下記に記載します。

```ruby:Gemfile
gem "flipper"
gem 'flipper-active_record' # ActiveRecordをadapterとして使用する為
gem 'flipper-ui' # UI画面を提供
```

```ruby:config/routes.rb
Rails.application.routes.draw do
  mount Flipper::UI.app(Flipper) => '/flipper'
end
```

```ruby:config/initializer/flipper.rb
require 'flipper'
require 'flipper/adapters/active_record'

if ActiveRecord::Base.connection.data_source_exists? 'flipper_features'
  # 追加するflagを指定
  feature_toggles = %i[
    sample_flag_1
    sample_flag_2
  ]
  # 既にflagを追加済であればそのまま, 無ければtrueで新規に追加する
  # 同じflagが重複して追加されるのを避ける為
  feature_toggles.each do |feature|
    next if Flipper[feature].exist?

    Flipper.enable(feature)
  end
end

Flipper::UI.configure do |config|
  # flag未設定時に出る動画広告を非表示にする
  config.fun = false
end
```

何も設定していない状態でのデフォルト画面

![スクリーンショット 2025-03-09 23.42.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24985/77aa0c13-b044-47c4-b409-11914d802b50.png)
![スクリーンショット 2025-03-09 23.59.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24985/eccfec27-c8cb-4fb2-8e07-04bddf0f3ffe.png)

- descriptions_source
フラグの詳細画面に説明文を追加出来ます。

```ruby:config/initializer/flipper.rb
Flipper::UI.configure do |config|
  # 説明文を追加
  config.descriptions_source = ->(keys) do
    {
      "sample_flag_1" => "サンプルフラグ1",
      "sample_flag_2" => "サンプルフラグ2"
    }
  end
end
```
![スクリーンショット 2025-03-10 0.01.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24985/b0243783-8039-46da-a4ce-5eaaecbf4519.png)

- banner_text, banner_class
各画面のトップにバナー表示をする事が出来ます。
banner_textへバナー文言を設定出来ます。
banner_classはdanger,dark,info,light,primary,secondary,success,warningから指定が出来ます。
```ruby:config/initializer/flipper.rb
Flipper::UI.configure do |config|
  # バナー表示を追加
  config.banner_text = "#{Rails.env}画面です"
  config.banner_class = 'info'
end
```
![スクリーンショット 2025-03-10 0.06.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24985/a4ffa445-1ffd-46d1-8930-cb055273f7f4.png)

- navitems
features, settings,のタブに別ページへのリンクを設定する事が出来ます。
```ruby:config/initializer/flipper.rb
Flipper::UI.configure do |config|
  # features, settings,のタブに別ページへのリンクを設定
  config.nav_items << { title: "top", href: "/" }
end
```
![スクリーンショット 2025-03-10 0.29.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24985/6ba2cd7a-2a97-4623-b560-16dc77fe9db2.png)

- application_href
戻り先のリンクをタブに追加する事が出来ます。表示名はAppで固定。
```ruby:config/initializer/flipper.rb
Flipper::UI.configure do |config|
  # 戻り先のリンクを設定
  config.application_href = "https://www.google.co.jp/"
end
```
![スクリーンショット 2025-03-10 0.32.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24985/fb46bf9d-9470-4d25-bcf2-9c32d34d66f4.png)


- readonly
画面上で何も編集せず、閲覧専用モードに設定することができます。
```ruby:config/initializer/flipper.rb
Flipper::UI.configure do |config|
  # 閲覧専用
  config.read_only = true
end
```

- feature_creation_enabled
デフォルトではflagの追加を画面上から出来ますが、falseを指定するとAdd Featureのリンクが消えて作成出来ないようになります。
```ruby:config/initializer/flipper.rb
Flipper::UI.configure do |config|
  config.feature_creation_enabled = false
end
```

- feature_removal_enabled
デフォルトではflag詳細画面からflagを削除する事が出来ますが、falseにするとflagを削除する画面が非表示になり削除出来なくなります。

```ruby:config/initializer/flipper.rb
Flipper::UI.configure do |config|
  config.feature_removal_enabled = false
end
```

- show_feature_description_in_list
flag一覧画面にdescriptions_sourceで設定した説明文を表示する事が出来ます
```ruby:config/initializer/flipper.rb
Flipper::UI.configure do |config|
  config.show_feature_description_in_list = true
end
```
![スクリーンショット 2025-03-10 0.44.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24985/6ea83eb3-683f-4730-8238-0d14ae4d6886.png)

- confirm_fully_enable, confirm_disable
それぞれflagをオン, オフにする際の確認ダイアログを表示するかどうか変更できます。falseだとダイアログを表示せず即切り替え, trueだと確認のダイアログが表示されます。
```ruby:config/initializer/flipper.rb
Flipper::UI.configure do |config|
  config.confirm_fully_enable = false
  config.confirm_disable = false
end
```

Dockerfileやrails等の具体的なコードgithubに公開しているので, を確認したい場合はこちらをご確認ください。

https://github.com/naokami3/qiita_flipper_sample

- 参考リンク
https://github.com/flippercloud/flipper
https://www.flippercloud.io/