KANAF Works
English

Windows 11 で動かなくなった Modern Flyouts の代わりに「FlexFlyout」を作ってみた話

約 8 分で読めます Tech, Tools

この記事にはEnglish版もあります。

目次

音量を変えたときや曲が変わったときに、再生中の曲のジャケット・曲名・再生の操作ボタン・音量をまとめて表示する「FlexFlyout（フレックスフライアウト）」を作ったので紹介します。 Windows 11 と Linux（KDE Plasma）で動いていて、表示の大きさ・位置・出すモニター・表示時間・不透明度を細かく調整できるのが売りです。

音量を上げると Flyout がすべり込み、音量バーの上のホイールでさらに上げ、プレーヤーの一覧から選ぶ。新しい曲では小さな表示が出て、クリックすると Flyout 全体になる

なんで作ったのか

  • Windows 10 の頃は Modern Flyouts を愛用していました
    • 音量キーを押すと、Spotify や YouTube で再生中の曲が、ジャケットと操作ボタン付きでふわっと出てくるやつです。見た目も大きさも気に入っていました
  • ところが Windows 11 に上げてから、まともに動かなくなりました。調べてみると、ちゃんと理由がありました
    • 22H2 で Windows 標準の音量表示が作り直され、標準の表示を隠せなくなった（#920）
    • 24H2 では、安定版では何も表示されなくなった（#1381）
    • 2025-11 にリポジトリがアーカイブされた（なので、もう直らない模様）
  • 代わりを探して、Microsoft Store にある Flyout 系のアプリをいくつか試してみましたが、まともに動いて、ちゃんと機能してくれたのは FluentFlyout くらいでした
    • FluentFlyout は活発に開発されている良いソフトなのですが、機能面では、自分の使い方にはちょっと物足りないところがありました
      • 表示の大きさを変える設定が無い（要望は #33 に出ています）。大きめのモニターだと、かなり小さく見えます
      • 位置は、上下 × 左・中央・右の 6 か所から選ぶだけ
  • モニターの数や大きさは人によって違うので、「どのモニターの、どこに、どの大きさで出すか」を細かく決められることが一番大事だと思っています
    • 自分の場合、デスクトップでは 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 にすぐ反映される

  • 設定ウィンドウで変えると、その場で Flyout が見本として出るので、位置を合わせながら決められます
    • 数値の横の −／＋ を押し続けると、続けて変わります（細かい位置合わせ用）
  • 中身は TOML の設定ファイルなので、手で書き換えても大丈夫です（保存して 1 秒以内に反映されます）
    • Windows は %APPDATA%\flexflyout\config.toml、Linux は ~/.config/flexflyout/config.toml
[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 は日本語で書いて頂いても大丈夫です

  • 翻訳してくれる方: 今は英語と日本語だけです

  • GitHub: https://github.com/akivajp/flexflyout