https://github.com/Aylur/ags
MiniBook X のArch Linux / Hyprland 環境にAgs を導入してみました。
Ags はJavaScript でGTK ウィジェットを定義できます。

2023-09-18 更新

  • Arch Linux, Hyprland, ags, VSCode, Google Chrome, Cava, fastfetch, bashtop, nginx, Three.js, ammo.js
  • MiniBook X N100 -> Type-C to HDMI -> HDMI Capture -> Hi10 Go N5100 -> OBS Studio
  • 音無しMP4 16MB 1分35秒

環境

  • MiniBook X N100
  • Arch Linux
  • Hyprland
  • Ags

構築

📖手順

💿インストール

  1. Ags のインストール
    https://github.com/Aylur/ags/wiki/installation
    ⚠️リポジトリのagsパッケージではないので注意

💻環境設定

  1. https://github.com/Aylur/dotfiles を利用
    Hyprland とAgsの 設定が含まれている
    git clone https://github.com/Aylur/dotfiles.git
    cd dotfiles
    cp -r .config/ags $HOME/.config/ags
    cp -r .config/hypr $HOME/.config/hypr
  2. Hyprland のカスタマイズ
    ~/.config/hypr/配下のファイルをカスタマイズ
    • binds.conf
      キーバインドの指定 (確認必須)
    • monitors.conf
      モニタの指定 (修正必須)
    • rules.conf
      ウィンドウルールの指定
    • settings.conf
      各種設定(レイアウト、キーボード、等)の指定 (修正必須)
    • startup.conf
      自動起動の指定 (確認必須)
    • theme.conf
      テーマの指定
  3. Args のカスタマイズ
    ~/.config/ags/配下のファイルを更新する
    • layouts/widgets/dock.jspinned にお気に入りアプリを設定する。
    • modules/clock.jsで日時の書式を変更する。
      export const Clock = ({
      format = '%m/%d (%a) %H:%M',
  4. Hyprland の更新とAgs の有効化
    • 既存の設定をバックアップ
      cp ~/.config/hypr/hyperland.conf ~/.config/hypr/__hyperland.conf
    • 設定を差し替え
      cp -r ~/.config/hypr/_hyperland.conf ~/.config/hypr/hyperland.conf
  5. テーマ等設定
    1. ステータスバー右上のバッテリー等のボタンをクリック
    2. ポップアップ上のギアアイコンをクリック
    3. 設定変更
    4. ダイアログはタイルなのでタイルを閉じるコマンドを実行
  6. Amazon Music アプリ(Firefox PWA)を登録
    • PWA を利用するためのパッケージの導入
      yay -S firefox-pwa-bin
    • Firefox で拡張機能を導入
      https://addons.mozilla.org/en-US/firefox/addon/pwas-for-firefox/
    • Firefox でhttps://music.amazon.co.jp を参照
    • 拡張機能でPWAに登録
    • 再ログオンするとアプリケーションの一覧に表示される
    • 自動起動に設定する場合は~/.local/share/applications/FFPWA*.desktopExec行のコマンドを参考に~/.config/hypr/startup.confexec-onceに設定する。
  7. デスクトップ時計の削除
    ~/.config/ags/layouts/widgets/desktop.js
        onMiddleClick: print,
    /*
    child: Box({
    vertical: true,

    ...

    ],
    }),
    */
    });
  8. FPS の向上
    drop_shadow を無効化することによりFPS が向上する!
    ~/.conf/hypr/theme.conf
    decoration {
    drop_shadow = false

利用

  • 操作は~/.config/hypr/binds.confを参照する
    私の主なキーバインド設定
    キー 処理
    SUPER + R アプリケーションの検索と起動
    SUPER + E Nautilus を起動
    SUPER + W Web ブラウザを起動
    SUPER + Q Terminal を起動
    SUPER + X 電源メニュー
    SUPER + C アクティブなタイルを終了
    SUPER + F アクティブなタイルのフローティングモードを切り替え
    SUPER + G アクティブなタイルを最大表示切り替え
    SUPER + Tab ワークスペースの一覧
    SUPER + Left 左のワークスペースを表示
    SUPER + Right 右のワークスペースを表示
    SUPER + Number 指定したワークスペースを表示
    SUPER + Shift + Number アクティブなタイルを指定したワークスペースへ移動
    Ctrl + Shift + R Ags を再起動
  • MPRIS 対応のプレイヤー、ブラウザの動画等、曲名表示に反映される
  • 複数ディスプレイにも対応している