Glanceで個人向けポータルサイト

source: https://codeberg.org/matoken/kagolug-2025.02/src/branch/main/slide/slide.adoc
発表: 鹿児島Linux勉強会 2025.02(オンライン開催) https://kagolug.connpass.com/event/343318/

Transcript

1. Glance で個人向けポータル サイト Kenichiro Matohara(matoken) <matoken@kagolug.org> 1
2. matoken @ 鹿児島の右下の山奥から参加 好きなLinuxディストリビューションはDebian GNU/Linux map: © OpenStreetMap contributors Kenichiro Matohara(matoken) https://matoken.org matoken@inari.opencocon.org 2
3. Glance で個人向けポータルサイト/ ダッシュボ ード 3
4. 過去にあった個人向けポータルサイト/ ダッ シュボード iGoogle Ajaxで作られていた Googleに用意されたもしくは自作，公開されたGadgetでカスタマイズ可能だった https://web.archive.org/web/20131031040929/http://www.google.com/ig 4
5. Glance YAMLでカスタマイズ可能な様々なウィジェットを配置可能 RSS, Reddit, Hacker News, Lobsters, 天気予報，YouTube, Twitch Live, Market prices, Docker status, Server status…… 軽量，Go製シングルバイナリ カスタマイズ可能なレイアウト，必要なだけのページ，タブ，カスタムcss モバイルデバイスにも対応 JavaScript必須，NetSurfのJSでは不可 😔 glanceapp/glance: A self-hosted dashboard that puts all your feeds in one place 6
6. Glance Desktop 7
7. Glace Mobile 8
8. 導入 Docker Binary Linux, Windows and macOS (x86, x86_64, ARM and ARM64 architectures). build  go >= v1.23 $ go install github.com/glanceapp/glance@latest https://github.com/glanceapp/glance#installation 10
9. help $ ./glance -h Usage: -check-config Check whether the config is valid -config string Set config path (default "glance.yml") 11
10. 設定 YAMLで設定を書く必要がある とりあえずexampleを試す これをベースにカスタマイズしていくと良さそう もあっ た https://github.com/glanceapp/glance? tab=readme-ov-file#configuration https://github.com/glanceapp/glance/blob/main/docs/glance.yml 13
11. example setting http://localhost:8080/ 14
12. いくつかの設定 docs/configuration.md にドキュメントがある glance/docs/configuration.md at main · glanceapp/glance https://github.com/glanceapp/glance/blob/main/docs/configuration.md 16
13. server server: port: 8080 base-url: assets-path: /home/user/glance-assets base-url: http://192.168.0.23:8080/ 17
14. 環境変数 ${ENV_VAR} の形式でYAML設定ファイル内に環境変数を書ける サーバ情報での例 存在しない環境変数を使うとエラーとなる server: host: ${HOST} port: ${PORT} ./glance failed parsing config file: yaml: unmarshal errors: line 2: cannot unmarshal !!str `${PORT}` into uint16 18
15. include !include で他のファイルを読み込める pages: !include: home.yml !include: videos.yml !include: homelab.yml 19
16. テーマ 形式で細かく記述可能 プリセットがある カスタムCSSファイルも利用可能 HSL theme: background-color: 100 20 10 primary-color: 40 90 40 contrast-multiplier: 1.1 https://github.com/glanceapp/glance/blob/main/docs/themes.md 20
17. ウィジェット いくつかのウィジットを試す 21
18. RSS 複数のRSSフィードを登録して記事リストを表示 Nitterを使うとold TwitterをRSS購読できるので便利 OPMLからの変換scriptとか作ると便利かも - type: rss limit: 20 collapse-after: 10 cache: 1h style: vertical-list feeds: - url: https://ciechanow.ski/atom.xml - url: https://www.joshwcomeau.com/rss.xml title: Josh Comeau - url: https://samwho.dev/rss.xml - url: https://awesomekling.github.io/feed.xml - url: https://ishadeed.com/feed.xml title: Ahmad Shadeed - url: http://192.168.0.27:8080/search/rss?f=tweets&q=matoken.org+-from%3Amatoken1 title: x.com 22
19. Nitter 独自tips 複数人をカンマ区切りで繋いで1つのfeedで購読 /ユーザ1,ユーザ2,ユーザ3,…… RSSを使う アカウントや検索結果をRSSで購読できる右上のRSSアイコン /matoken1 → /matoken1/rss /matoken,matoken1,matokenfeed → /matoken,matoken1,matokenfeed/rss /search?f=tweets&q=matoken.org+-from%3Amatoken1 → /search/rss?f=tweets&q=matoken.org+-from%3Amatoken1 24
20. YouTube チャンネル チャネルIDを書く必要がある(RSSと同じ) - type: videos channels: - UCEPkrGMghsXnoG1LffgjMJg # OSPNjp - UC7F_CXjcRxJcR0bkT8NDvTA # JUS - UClSHUuEMnuYf1Yjmub0VrFA # KOF - UC7SbfAPZf8SMvAxp8t51qtQ # Debconf - UC9NuJImUbaSNKiwF2bdSfAw # FOSDEM - UCR-DXc1voovS8nhAvccRZhg # Jeff Geerling - UCv6J_jJa8GJqFwQNgNrMuww # ServeTheHome - UCOk-gHyjcWZNj3Br4oxwh0A # Techno Tim 25
21. Hacker News/Lobsters - type: hacker-news limit: 100 collapse-after: 5 sort-by: new - type: lobsters sort-by: hot limit: 15 collapse-after: 5 26
22. Reddit - type: reddit subreddit: selfhosted show-thumbnails: true - type: reddit subreddit: commandline show-thumbnails: true - type: reddit subreddit: terminal_porn show-thumbnails: true 27
23. 検索ウィジット キーボードショートカット( s )が利用可能  Googleも利用可能 - type: search search-engine: duckduckgo 28
24. 天気 を利用した天気ウィジット https://open-meteo.com/ - type: weather location: Kagoshima, Japan units: metric hour-format: 24h 29
25. モニター サイトに到達できたかを表示 - type: monitor cache: 10m title: Services sites: - title: www.kagolug.org url: https://www.kagolug.org/ - title: kagolug-galene url: https://www.kagolug.org:8443/ - title: kagolug-etherpad url: https://www.kagolug.org:9001/ - title: matoken.org/blog url: https://matoken.org/blog/ - title: スラド url: https://srad.jp/ 30
26. リリース Github, GitLab, Codeberg, Docker Hubの各種リポジトリの 最新リリースを表示(デバッグで何度も再読み込みしてるとrate limitになりがち) - type: releases show-source-icon: true repositories: - glanceapp/glance - tmux/tmux - schachmat/wego - jaspervdj/patat - VSCodium/vscodium - laurent22/joplin - MisterTea/EternalTerminal - diamondburned/dissent - jitsi/jitsi-meet-electron - jitsi/jitsi-meet 31
27. リポジトリ リポジトリの情報とPR, issuesを表示 - type: repository repository: jech/galene pull-requests-limit: 3 issues-limit: 3 commits-limit: 3 - type: repository repository: isaki68k/sayaka pull-requests-limit: 3 issues-limit: 3 commits-limit: 3 32
28. Docker コンテナ 対象コンテナのdocker.sockにアクセスできる必要がある．glanceと同じ端末で動いていな いと駄目そう? services: glance: image: glanceapp/glance volumes: - /var/run/docker.sock:/var/run/docker.sock 33
29. DNS 統計 AdGuard HomeやPi Holeなどのセルフホスト広告ブロッカーの統計 - type: dns-stats service: adguard url: https://adguard.domain.com/ username: admin password: ${ADGUARD_PASSWORD} 34
30. ブックマーク - type: bookmarks groups: - links: - title: Gmail0 url: https://mail.google.com/mail/u/0/ - title: Proton Mail url: https://mail.proton.me/ - title: Social links: - title: inacon url: https://inari.opencocon.org/deck/ - title: misskey.io url: https://misskey.io/ - title: bsky url: https://bsky.app/ 35
31. グループ 複数のウィジットを1つにグループ化する - type: group widgets: - type: reddit subreddit: gamingnews show-thumbnails: true collapse-after: 6 - type: reddit subreddit: games - type: reddit subreddit: pcgaming show-thumbnails: true 36
32. ChangeDetection.io 日本でのはてなアンテナ的な? - type: change-detection instance-url: https://changedetection.mydomain.com/ token: ${CHANGE_DETECTION_TOKEN} 37
33. 時計 timezoneはこちらで確認 - type: clock hour-format: 24h timezones: - timezone: Asia/Tokyo label: Tokyo - timezone: GMT label: GMT https://en.wikipedia.org/wiki/List_of_tz_database_time_zones 38
34. カレンダー 表示するだけでiCal購読などの機能はない - type: calendar first-day-of-week: monday 39
35. マーケット - type: markets markets: - symbol: SPY name: S&P 500 - symbol: BTC-USD name: Bitcoin chart-link: https://www.tradingview.com/chart/?symbol=INDEX:BTCUSD - symbol: NVDA name: NVIDIA - symbol: AAPL symbol-link: https://www.google.com/search?tbm=nws&q=apple name: Apple 40
36. Twitch チャンネル チャンネルリストとLiveの確認ができる  YouTube Liveの確認もできたらと思って少し調べたけどAPIは無さそう - type: twitch-channels channels: - jembawls - giantwaffle - asmongold - cohhcarnage - j_blow - xQc 41
37. iframe NextcloudのCalender表示例 - type: iframe source: https://files.matoken.org/index.php/apps/calendar/embed/YW5gc6gMG8tC63AH/listWeek/now height: 400 42
39. HTML 任意のHTML - type: html source: | <p>Hello, <span class="color-primary">World</span>\!</p> Line2 44
40. glance メモリ消費量 exampleのままだと9MB程 構成を増やして利用しいるとメモリ消費量がだんだん増えていく 45
41. まとめ iGoogleを思い出す個人向けダッシュボードアプリのglance カスタマイズ性が高いがiGoogleと違いYAMLファイルを編集する必要がある typeで指定できるウィジット群が便利 とはいえRSS/iframe/HTMLあたりで色々なことが出来る 自作はまだAPIが固まっていないので作り直しになる覚悟が要る docs/extensions.md JavaScript必須&回線によりコンテンツ読み込みに失敗しがちなのでリモートで取得して静的 にできると良さそうだけど (Lightpanda Browser?) 秘伝のタレ的に?カスタマイズしていくと便利になりそう 46
42. 奥付 発表 2025-02-16(sun) 発表者 利用ソフトウェア + ライセンス 鹿児島Linux勉強会 2025.02(オンライン開催) Kenichiro Matohara(matoken) Neovim Asciidoctor Reveal.js CC BY 4.0 47