1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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

ruby: 3.2.2
rails: 7.2.2
flipper: 1.3.4

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

Gemfile
gem "flipper"
gem 'flipper-active_record' # ActiveRecordをadapterとして使用する為
gem 'flipper-ui' # UI画面を提供
config/routes.rb
Rails.application.routes.draw do
  mount Flipper::UI.app(Flipper) => '/flipper'
end
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
スクリーンショット 2025-03-09 23.59.49.png

  • descriptions_source
    フラグの詳細画面に説明文を追加出来ます。
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

  • banner_text, banner_class
    各画面のトップにバナー表示をする事が出来ます。
    banner_textへバナー文言を設定出来ます。
    banner_classはdanger,dark,info,light,primary,secondary,success,warningから指定が出来ます。
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

  • navitems
    features, settings,のタブに別ページへのリンクを設定する事が出来ます。
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

  • application_href
    戻り先のリンクをタブに追加する事が出来ます。表示名はAppで固定。
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

  • readonly
    画面上で何も編集せず、閲覧専用モードに設定することができます。
config/initializer/flipper.rb
Flipper::UI.configure do |config|
  # 閲覧専用
  config.read_only = true
end
  • feature_creation_enabled
    デフォルトではflagの追加を画面上から出来ますが、falseを指定するとAdd Featureのリンクが消えて作成出来ないようになります。
config/initializer/flipper.rb
Flipper::UI.configure do |config|
  config.feature_creation_enabled = false
end
  • feature_removal_enabled
    デフォルトではflag詳細画面からflagを削除する事が出来ますが、falseにするとflagを削除する画面が非表示になり削除出来なくなります。
config/initializer/flipper.rb
Flipper::UI.configure do |config|
  config.feature_removal_enabled = false
end
  • show_feature_description_in_list
    flag一覧画面にdescriptions_sourceで設定した説明文を表示する事が出来ます
config/initializer/flipper.rb
Flipper::UI.configure do |config|
  config.show_feature_description_in_list = true
end

スクリーンショット 2025-03-10 0.44.14.png

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

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

1
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?