Zenn
🤩

自己ホスト型のダッシュボードアプリGlanceを試す

に公開
Docker
docker-compose
dashboard
tech

概要

セルフホスト型のダッシュボードアプリのGlanceを試した際の記事になります。Glanceが一般的なダッシュボードのWidgetの他に Twitch top games, Custom API, iframe, html, … などなど面白いWidgetをサポートしているので、色々試してみました。

Glanceとは?

https://github.com/glanceapp/glance

Glanceは高速かつ軽量で、様々なウィジェットとカスタマイズ可能なレイアウトを備えており、モバイルデバイスにも最適化されています

  • 自己ホスト型情報ダッシュボード ― RSS・Reddit・Hacker News・天気・株価など多数のフィードを1画面に集約できるホームページアプリです
  • Go 製・超軽量 ― 依存が少なく、単体 < 20 MB のスタンドアロン実行ファイルまたは極小 Docker イメージで動作し、メモリ消費も控えめ
  • 豊富なウィジェット + カスタム拡張 ― 公式で十数種のウィジェットを提供し、iframe・HTML・API などで独自ウィジェットも追加可能
  • YAML でフルカスタマイズ ― ページ／列レイアウトや各ウィジェット設定、テーマ・CSS まで YAML ファイルで柔軟に定義
  • モバイル最適化 & テーマ切替 ― レスポンシブ UI とテーマ機能で、スマホ閲覧や外観変更も簡単
  • 導入が簡単 ― Docker Compose テンプレート、公式コンテナ、Linux/Windows/macOS 向けバイナリが用意され、即デプロイ可能

docker composeでサクッと動作させてみる

まずは以下の内容で docker-compose.yml を作成します。

services:
  glance:
    container_name: glance
    image: glanceapp/glance
    restart: unless-stopped
    volumes:
      - ./config:/app/config
    ports:
      - 8080:8080

次に以下を実施します。

mkdir config && curl -o config/glance.yml https://raw.githubusercontent.com/glanceapp/glance/refs/heads/main/docs/glance.yml

あとは docker compose up -d で起動し、http://localhost:8080/ にアクセスすると、うまくいってれば以下の様なダッシュボードが表示されます。

image1.png

config/glance.yml の中身は以下の様になっており、大体雰囲気がわかります。

pages:
  - name: Home
    # Optionally, if you only have a single page you can hide the desktop navigation for a cleaner look
    # hide-desktop-navigation: true
    columns:
      - size: small
        widgets:
          - type: calendar
            first-day-of-week: monday

          - type: rss
            limit: 10
            collapse-after: 3
            cache: 12h
            feeds:
              - url: https://selfh.st/rss/
                title: selfh.st
                limit: 4
              - url: https://ciechanow.ski/atom.xml
              - url: https://www.joshwcomeau.com/rss.xml
                title: Josh Comeau
              - url: https://samwho.dev/rss.xml
              - url: https://ishadeed.com/feed.xml
                title: Ahmad Shadeed

          - type: twitch-channels
            channels:
              - theprimeagen
              - j_blow
              - piratesoftware
              - cohhcarnage
              - christitustech
              - EJ_SA

      - size: full
        widgets:
          - type: group
            widgets:
              - type: hacker-news
              - type: lobsters

          - type: videos
            channels:
              - UCXuqSBlHAE6Xw-yeJA0Tunw # Linus Tech Tips
              - UCR-DXc1voovS8nhAvccRZhg # Jeff Geerling
              - UCsBjURrPoezykLs9EqgamOA # Fireship
              - UCBJycsmduvYEL83R_U4JriQ # Marques Brownlee
              - UCHnyfMqiRRG1u-2MsSQLbXA # Veritasium

          - type: group
            widgets:
              - type: reddit
                subreddit: technology
                show-thumbnails: true
              - type: reddit
                subreddit: selfhosted
                show-thumbnails: true

      - size: small
        widgets:
          - type: weather
            location: London, United Kingdom
            units: metric # alternatively "imperial"
            hour-format: 12h # alternatively "24h"
            # Optionally hide the location from being displayed in the widget
            # hide-location: true

          - type: markets
            markets:
              - symbol: SPY
                name: S&P 500
              - symbol: BTC-USD
                name: Bitcoin
              - symbol: NVDA
                name: NVIDIA
              - symbol: AAPL
                name: Apple
              - symbol: MSFT
                name: Microsoft

          - type: releases
            cache: 1d
            # Without authentication the Github API allows for up to 60 requests per hour. You can create a
            # read-only token from your Github account settings and use it here to increase the limit.
            # token: ...
            repositories:
              - glanceapp/glance
              - go-gitea/gitea
              - immich-app/immich
              - syncthing/syncthing

  # Add more pages here:
  # - name: Your page name
  #   columns:
  #     - size: small
  #       widgets:
  #         # Add widgets here

  #     - size: full
  #       widgets:
  #         # Add widgets here

  #     - size: small
  #       widgets:
  #         # Add widgets here

テーマを変更させてみる

こちらのドキュメントにもある通り、HSLで設定する様です。

試しに用意されているテーマを反映させてみます。config/glance.yml の一番上に以下を追加します。

# ↓追加
theme:
  background-color: 186 21 20
  contrast-multiplier: 1.2
  primary-color: 97 13 80
# ここまで
pages:
  - name: Home
  # ....

画面をリロードすると以下の様にテーマが変更されます ✨

image2.png

よく使いそうなWidgetを試す

こちらで用意されているWidgetが確認できます。設定できるプロパティ内で cache があり、これで更新タイミングをある程度設定できる様です。

cache: 30s # 30 seconds
cache: 5m  # 5 minutes
cache: 2h  # 2 hours
cache: 1d  # 1 day

Calendar

早速Calendar Widgetを試してみます。config/glance.yml を以下に変更します。

(分かりやすくする為、1つのWidgetのみ表示する様にしてます)

pages:
  - name: Home
    columns:
      - size: full
        widgets:
         - type: calendar
           first-day-of-week: monday

image3.png

  • first-day-of-week

    • カレンダーの開始曜日。すべての曜日を指定できます

    • friday にした様子👇

      image4.png

Weather

次に、特定の場所の天気情報を表示するWidgetで こちら のデータを使っている様です。

例) 東京の天気

pages:
  - name: Home
    columns:
      - size: full
        widgets:
         - type: weather
           location: Tokyo, Japan
           units: metric
           hour-format: 24h

image5.png

Clock

現在の日付と時刻を表示するWidgetになります。 timezones で複数のタイムゾーンを設定できる様です。

例) Europe/Paris と America/New_York のタイムゾーンも表示

pages:
  - name: Home
    columns:
      - size: full
        widgets:
          - type: clock
            hour-format: 24h
            timezones:
              - timezone: Europe/Paris
                label: Paris
              - timezone: America/New_York
                label: New York

image6.png

RSS

複数のRSSフィードの記事一覧を表示できるWidgetになります。

例) Github Trending Daily

pages:
  - name: Home
    columns:
      - size: full
        widgets:
         - type: rss
           title: RSS
           feeds:
             - url: https://mshibanami.github.io/GitHubTrendingRSS/daily/all.xml
               title: Github Trending Daily

image7.png

style

style に以下の値を設定する事ができ、好みに応じて表示できる様です。

レイアウト名 適したカラムサイズ
vertical-list フルカラムおよびスモールカラムに適している (デフォルト)
detailed-list フルカラムに適している
horizontal-cards フルカラムに適している
horizontal-cards-2 フルカラムに適している

  • detailed-list
    image8.png

  • horizontal-cards
    image9.png

  • horizontal-cards-2
    image10.png

Hacker News

Hacker News の投稿一覧を表示します。

例) デフォルトの設定で一覧表示

pages:
  - name: Home
    columns:
      - size: full
        widgets:
          - type: hacker-news

image11.png

  • sort-by
    • 指定可能な値は top, new, bes
  • comments-url-template
    • リンク先を別のページにする
    • 例) comments-url-template: https://www.hckrnws.com/stories/{POST-ID}

面白そうなWidgetを試す

ここからは他になさそうな面白そうなWidgetを試していこうと思います。

Twitch top games

Twitchで最も視聴者の多いゲームのリストを表示します。他に Twitch Channels というのもあります。

例)

pages:
  - name: Home
    columns:
      - size: full
        widgets:
          - type: twitch-top-games
            exclude:
              - just-chatting
              - pools-hot-tubs-and-beaches
              - music
              - art
              - asmr
  • exclude
    • カテゴリーのURLを見てslugを指定する必要があります

image12.png

Custom API

カスタムテンプレートを使用して、JSON APIからのデータを表示することができます。

例)

pages:
  - name: Home
    columns:
      - size: full
        widgets:
          - type: custom-api
            title: Users
            cache: 6h
            url: https://jsonplaceholder.typicode.com/users
            template: |
              <ul class="list list-gap-10 collapsible-container" data-collapse-after="5">
              {{ range .JSON.Array "" }}
                <li>{{ .String "name" }}</li>
              {{ end }}
              </ul>

  • headers

    • ヘッダの指定ができる

      headers:
  x-api-key: your-api-key
  Accept: application/json

  • template

image15.png

iframe

iframeをウィジェットとして埋め込むことができます。

例) Google Maps 埋め込み

pages:
  - name: Home
    columns:
      - size: full
        widgets:
          - type: iframe
            source: https://www.google.com/maps/embed?pb=....
            height: 400

image13.png

HTML

簡単なhtmlを埋め込むことができます。

例)

pages:
  - name: Home
    columns:
      - size: full
        widgets:
          - type: html
            source: |
              <video width="400" controls>
                <source src="xxxxx.mp4" type="video/mp4">
              </video>

image14.png

他にも色々Widgetがあるので、こちらから是非面白そうなのを探してみて下さい。

https://github.com/glanceapp/glance/blob/main/docs/configuration.md

参考URL

https://medium.com/@yusuke_h/ターミナルがダサいとモテない-glanceでpersonal-dashboard-a402f94490ae

Discussion