glanceで自分好みのダッシュボードをセルフホストする

明けましておめでとうございます。今年もどうぞよろしくお願いします。

最近自宅に色々なサービスを飼っていまして。その中の1つにglanceというダッシュボードを作るアプリ？があります。

これが結構便利なので紹介します。

glance

glanceはセルフホストするタイプのダッシュボードアプリです。feedやyoutube、githubのreleases情報をダッシュボードに集めて俯瞰できます。

ダッシュボードは複数のタブを持てるので、例えば1タブ目にはよく見るfeedやsubreddit、カレンダーや天気など配置し、2タブ目にはyoutubeでウォッチしたいチャンネルを、3タブ目にはコンテナ情報やgithubのreleasesの情報を配置するなど、自分のセンスを信じて好きなようにカスタムするのがいいでしょう。

わたくしの設定

glanceはdocker/docker-compose/バイナリ設置で設定できます。今回は簡単にdocker-composeを使って設定してみたいと思います。

インストール方法は公式リポジトリのInstallationに詳しく記載されています。

構成はこんな感じです。

.
├── compose.yaml
└── config
    ├── glance.yml
    ├── home.yml
    ├── homelab.yml
    └── videos.yml

設定方法は公式ドキュメントが存在しますので、詳しくはそちらをご覧ください。

compose.yaml

services:
  glance:
    container_name: glance
    image: glanceapp/glance
    restart: unless-stopped
    volumes:
      - ./config:/app/config
      - /var/run/docker.sock:/var/run/docker.sock:ro
    ports:
      - 8080:8080

config/glance.yml

pages:
  - $include: home.yml
  - $include: videos.yml
  - $include: homelab.yml

拡張子は.ymlです。.yamlにするとglance.ymlがないというエラーが出力されます。

- $include: xxx.ymlの部分で外部ファイルを読み込んでいます。このファイルの中にwidgetを追加していきます。

実は外部ファイルで読み込まず、pages内に直接widgetを記述することもできます。しかし、タブが増えたりwidgetが増えるとglance.ymlの行数がとんでもないことになるので、今回は分けて管理します。

config/home.yml

- name: Home
  columns:
    - size: small
      widgets:
        - type: calendar
          first-day-of-week: sunday
          
        - type: weather
          units: metric
          hour-format: 24h
          location: kuriyama, hokkaido, japan

        - type: to-do

    - size: full
      widgets:
        - type: group
          widgets:
            - type: rss
              title: GIZMODO
              style: detailed-list
              feeds:
                - url: https://www.gizmodo.jp/index.xml
            - type: rss
              title: GIGAZINE
              style: detailed-list
              feeds:
                - url: https://gigazine.net/news/rss_2.0/
            - type: rss
              title: KURIYAMA
              feeds:
                - url: https://www.town.kuriyama.hokkaido.jp/rss/10/list1.xml
                  title: 新着更新情報
                - url: https://www.town.kuriyama.hokkaido.jp/rss/10/list6.xml
                  title: まちのニュース
                - url: https://www.town.kuriyama.hokkaido.jp/rss/10/list8.xml
                  title: 採用情報・募集

        - type: group
          widgets:
            - type: reddit
              subreddit: commandline
              show-thumbnails: true
            - type: reddit
              subreddit: tui
              show-thumbnails: true
            - type: reddit
              subreddit: unixporn
              show-thumbnails: true
            - type: reddit
              subreddit: selfhosted
              show-thumbnails: true

    - size: small
      widgets:
        - type: hacker-news
        - type: lobsters
          tags:
            - linux
            - security

columnsには3つのカラムを指定しています。最初の- size: smallは左側カラム、次の- size: fullが中央のカラム、最後の-size: smallが右側カラムです。

左側にはカレンダーと天気、ToDoを設置してみました。

中央にはRSSフィードとSubredditをいくつか追加してあります。- type: groupでグループわけをすることで、widgetにタブが追加されます。RSS上のGIGAZINEやKURIYAMAをクリックすることで、別のフィードリストに切り替えられます。

右側にはHacker NewsとRobstersを追加しました。

公式ドキュメントのWidgetsを確認しながら追加するのがいいでしょう。それぞれのwidgetによって設定項目が色々あります。

設定変更を保存することでglanceは設定を自動で読み込みます。ただし、Webページは自動でリロードされないので、画面を確認する時は再読み込みを行なってください。

config/videos.yml

- name: Videos
  columns:
    - size: full
      widgets:
        - type: group
          widgets:
            - type: videos
              style: grid-cards
              channels:
                - UCZ2bu0qutTOM0tHYa_jkIwg  # Kubernetes
                - UCvqbFHwN-nwalWPjPUKpvTA  # CNCF
            - type: videos
              style: grid-cards
              channels:
                - UCHTfaTOEYhzQ8JskjJWZGcA  # とことんDevOps

youtubeチャンネルのカテゴリー別にgroupでまとめてみたんですが、groupに名前をつけることができないっぽい？ので、VIDEOSというタブ名になってしまいました。ここ変えられるといいですね。

config/homelab.yml

- name: Homelab
  columns:
    - size: small
      widgets:
        - type: releases
          show-source-icon: true
          repositories:
            - glanceapp/glance
            - codeberg:forgejo/forgejo
            - kubernetes-sigs/kueue

        - type: monitor
          cache: 1m
          title: Services
          sites:
            - title: Forgejo
              url: http://localhost:3000/

    - size: full
      widgets:
        - type: server-stats
          servers:
            - type: local
              name: macmini
              hide-mountpoints-by-default: true
              mountpoints:
                "/":
                  hide: false
        - type: docker-containers
          hide-by-default: false