音量を変えたときや曲が変わったときに、再生中の曲のジャケット・曲名・再生の操作ボタン・音量をまとめて表示する「FlexFlyout（フレックスフライアウト）」を作ったので紹介します。
Windows 11 と Linux（KDE Plasma）で動いていて、表示の大きさ・位置・出すモニター・表示時間・不透明度を細かく調整できるのが売りです。
なんで作ったのか
- Windows 10 の頃は Modern Flyouts を愛用していました
- 音量キーを押すと、Spotify や YouTube で再生中の曲が、ジャケットと操作ボタン付きでふわっと出てくるやつです。見た目も大きさも気に入っていました
- ところが Windows 11 に上げてから、まともに動かなくなりました。調べてみると、ちゃんと理由がありました
- 代わりを探して、Microsoft Store にある Flyout 系のアプリをいくつか試してみましたが、まともに動いて、ちゃんと機能してくれたのは FluentFlyout くらいでした
- FluentFlyout は活発に開発されている良いソフトなのですが、機能面では、自分の使い方にはちょっと物足りないところがありました
- 表示の大きさを変える設定が無い（要望は #33 に出ています）。大きめのモニターだと、かなり小さく見えます
- 位置は、上下 × 左・中央・右の 6 か所から選ぶだけ
- FluentFlyout は活発に開発されている良いソフトなのですが、機能面では、自分の使い方にはちょっと物足りないところがありました
- モニターの数や大きさは人によって違うので、「どのモニターの、どこに、どの大きさで出すか」を細かく決められることが一番大事だと思っています
- 自分の場合、デスクトップでは 34 インチのウルトラワイド（UWQHD）を縦に 2 枚並べているので、画面の大きさに対して Flyout が小さいのと、どちらの画面のどこに出るかが気になっていました
- 大きさ・位置・モニター・表示時間・不透明度を全部調整できて、音量を変えると曲の情報が出るものは、ほかにも見つかりませんでした。Linux（KDE・GNOME）に至っては、音量を変えると曲の情報が出るもの自体がありませんでした
- それならと、欲しい機能を要件として並べて、自分で作ってみることにしました。開発には AI のコーディング支援（Claude Code）を使っています
どんなツール？
- 次のときに表示して、しばらくすると消えます
- 音量キー・メディアキーを押したとき、音量が変わったとき
- 新しい曲が始まったとき（ジャケット・曲名・アーティストだけの小さな表示。クリックすると全体を表示）
- 表示するもの
- ジャケット・曲名・アーティスト
- 再生位置（シークバー）、前へ・再生/一時停止・次へ、シャッフル・リピート
- 音量バー（クリック・ドラッグ・ホイールで変えられる）とミュート
- 調整できるもの
- 出すモニター: メインのモニター、マウスのある画面、番号で指定
- 位置: 9 か所の基準点＋ピクセル単位のずらし幅
- 大きさ（拡大率）、表示時間、不透明度、すべり込みのアニメーション
- 見た目: 明るい・暗い（OS に合わせることも）、アクセントの色、角の丸み、出す部品（ジャケット・シークバーなどを外すと小さくなる）
- ほかにも、地味に便利な機能を足しています
- ピン留めすると表示したままになり、ドラッグで好きな場所に動かせます（その位置を次からの位置として覚えさせることも）
- 追いかけるプレーヤーを選べる: Spotify だけ、のように決めておけば、ブラウザーで動画を見ても切り替わりません
- 全画面のゲームの上には出さない設定もできます（出す先のモニターで全画面のアプリが動いているときだけ止めるので、2 画面ならもう一方には出せます）
- Windows 標準の音量表示は、残したまま重ならない位置に出すか、消すかを選べます（KDE Plasma の音量表示も同じ）
- 曲の情報は、Windows では SMTC（Spotify・ブラウザー・メディアプレーヤーなどが対応）、Linux では MPRIS から取っています
使ってみる
インストール（Windows 11）
- Scoop で入れるのが楽です。スタートメニューにも追加されます
> scoop bucket add akivajp https://github.com/akivajp/scoop-bucket
> scoop install akivajp/flexflyout
-
Releases の zip を展開して、
flexflyout.exeを起動するだけでも動きます- まだコード署名をしていないので、初回は SmartScreen の警告が出ることがあります（「詳細情報」→「実行」）
- タスクトレイに常駐します。メニューから設定ウィンドウを開いたり、「Windows の起動時に開始」を切り替えたりできます
- 起動中は 1 日ごとに新しい版が出ていないか確かめ、出ていれば通知します
インストール（Linux）
- layer-shell に対応した Wayland のデスクトップ（KDE Plasma・sway・Hyprland など）で動きます。GNOME と X11 ではまだ動きません
- Arch 系（CachyOS など）では、リポジトリ内の PKGBUILD から入れられます
$ git clone https://github.com/akivajp/flexflyout.git
$ cd flexflyout/packaging/aur/flexflyout-bin && makepkg -si
- ほかのディストリビューション（glibc 2.35 以降）では、Releases の tar.gz の
flexflyoutをPATHの通った場所に置けば動きます
設定する
- 設定ウィンドウで変えると、その場で Flyout が見本として出るので、位置を合わせながら決められます
- 数値の横の −／＋ を押し続けると、続けて変わります（細かい位置合わせ用）
- 中身は TOML の設定ファイルなので、手で書き換えても大丈夫です（保存して 1 秒以内に反映されます）
- Windows は
%APPDATA%\flexflyout\config.toml、Linux は~/.config/flexflyout/config.toml
- Windows は
[display]
monitor = "primary" # "cursor"（マウスのある画面）や 2（番号）も
anchor = "top-right" # 9 か所: top-left, top, top-right, left, center, ...
offset_x = 24 # 基準点からのずらし幅（ピクセル）
offset_y = 24
scale = 1.5 # 1.5 倍の大きさ
opacity = 0.92
[timing]
hold_ms = 3000 # 表示しておく時間
どうやって確かめながら作ったか
- 実装はほとんど Claude Code に任せ、自分は要件を決めることと、判断（対応する OS の順番、ネットワークにつなぐか、リリースするか）と、実機での確認を受け持ちました
- AI に GUI のアプリを書かせると、「書いたけど、動くかは分からない」で止まりがちです。そこで、Claude Code が自分で動かして画面を見られる環境を先に用意しました
- Windows: Linux のサーバーでクロスビルドし（cargo-xwin）、同じサーバーの Windows 11 の仮想マシンで動かします。キー入力・クリック・スクリーンショットはスクリプトから送り、スクリーンショットは Claude Code が見て判断します
- Linux: Docker の中で画面の無い sway（Wayland）を動かし、スクリーンショットを撮ります。クリックやドラッグは、仮想のポインターを送る小さな道具で
- これで「直す → ビルド → 仮想マシンで動かす → 画面を見る → また直す」を、自分が手を出さなくても回せるようになりました
- それでも、仮想マシンやコンテナでは分からないことがあります（複数のモニター、手元のキーボードの特殊なキー、Bluetooth のヘッドホンなど）
- 実際、コンテナの sway では正常なのに、KDE の実機では「拡大率を変えると落ちる」「中央に置くと部品が重なる」という不具合が出ました。どちらも KWin と sway で解釈が違うところでした
- 自分が実機で見つけて伝え、Claude Code が sway で再現できる形にして直す、という分担がうまく回ったと思います
作るときに詰まったところ
- 細かい話は別の記事にまとめる予定です。さわりだけ
- Windows 11 の音量表示を消す公式の方法は無い: 標準の表示は Explorer の中の 1 つのウィンドウで、明るさや機内モードの表示と共有しています。外から隠すと全部消えますし、Windows の更新でウィンドウの構成も変わります（手元の 26H2 では、また変わっていました）。Modern Flyouts が動かなくなったのもこれが原因なので、FlexFlyout の既定は「消さずに、重ならない位置に出す」にしています
- egui で透明・最前面・フォーカスを奪わないウィンドウを作る: 背景の透明には設定が 3 つ要り、winit がウィンドウのスタイルを勝手に書き直してフォーカスを奪うようになる、など
- Wayland（KDE）では普通のウィンドウで最前面に出せない: layer-shell という仕組みで描いています。GNOME はこれに対応していないので、GNOME 版は Shell 拡張として別に作る予定です
協力してくれる方を募集しています
いまのところ、自分の手元の次の環境で動いています（FlexFlyout v0.9.0）。
- Windows 11 のデスクトップ PC（34 インチ UWQHD のウルトラワイドを縦に 2 枚。メイン・サブのどちらに出すかの設定も確認）
- CachyOS（KDE Plasma 6.8）の ThinkPad（本体の画面だけのときと、外部ディスプレイを 1 台つないだ 2 画面のとき）
ただ、一人では確かめきれないところがたくさんあります。
-
いろいろなモニターの構成で使ってくれる方: 3 画面以上や、Windows で拡大率（DPI）の違うモニターを並べたときの位置は、まだ確かめきれていません
-
Bluetooth のヘッドホンで使ってくれる方: 接続・切断のあとに音量の表示が新しい機器のものになるか、ヘッドホンのボタンで出るか
-
sway・Hyprland などで使ってくれる方: layer-shell があれば動くはずですが、自分の実機は KDE だけです
-
Issue を書いてくれる方: 出ない・位置がおかしい・曲の情報が出ないプレーヤーがある、など何でも歓迎です。ログ（Windows は
%LOCALAPPDATA%\flexflyout\、Linux は~/.local/state/flexflyout/）を添えてもらえると原因を追いやすいです- Issue は日本語で書いて頂いても大丈夫です
-
翻訳してくれる方: 今は英語と日本語だけです
この記事は個人ブログ（KANAF Works）にも掲載しています。