Profile Picture
ちもなき庫 By Chimonakiko
2026

（WIP）広島商船高専 学内電光掲示板システム

学内システム
Next.js
Auth.js
React
Vite
hono
p5.js
TypeScript
Docker
Prometheus
Grafana

ギャラリー

ロゴサイネージ画面イメージ（通常時）サイネージ画面イメージ（イベント時）CMS画面イメージ

現在の進捗

  • システム開発…ほぼほぼ完了
  • 学内ネットワーク使用申請…通過
  • プレリリースのためのシステム構築中…

概要

広島商船のあちこちにある、現在は使用されていないサイネージ端末を再利用して、学内イベントやフェリー時刻表などの情報を表示するシステムです。

主に、管理者やデータの変更権限のあるユーザが使用し、サイネージ端末へデータを提供するCMSアプリと、 サイネージ端末で表示するコンテンツを表示するサイネージアプリの2つから構成されており、CMSでコンテンツを登録・編集すると、サイネージに自動で反映される仕組みになっています。

CMSアプリは、サイネージに表示する情報を管理するための中心システムで、Next.jsとPostgreSQLをメインに使用しています。管理者や教員などの公開権限のあるユーザ（以下、公開者）は、 このCMSアプリからフェリー時刻表、学内イベント、電子ポスターなどを登録・編集・削除できます。また、サイネージ端末が情報を取得するための表示用APIも このアプリが提供しており、サイネージ端末の登録・トークン発行、オンライン状態の確認もこのアプリ上で行うことができます。

サイネージアプリは、実際のディスプレイに情報を表示するためのサイネージ表示クライアントで、Viteを用いて生成された静的なHTML、JSファイルを Kioskモードのブラウザで表示しています。CMSの表示用APIから、フェリーの時刻表、学内イベント、電子ポスター、天気予報などを取得し、 その情報を画面レイアウトとして整えて表示します。

このシステムは学内ローカルネットワーク内に構築されており、外部からはアクセスできません。 CMSもサイネージも、校内のネットワークに接続された端末からのみアクセス可能です。

システム構成図

flowchart LR
    subgraph campus["学内ローカルネットワーク"]
        operator["管理者・公開者<br/>ブラウザ"]
        display["サイネージ端末<br/>ブラウザ<br/>p5.js / hls.js"]

        subgraph cms["digivision-cms（Docker Compose）"]
            app["app :3000<br/>Next.js<br/>管理・公開者画面 / 表示API / アップロードAPI"]
            db[("db<br/>PostgreSQL 16")]
            uploads[("uploads_data<br/>eポスター画像・動画")]
            migration["db-migrate<br/>必要時のみ実行"]
            prometheus["Prometheus"]
            grafana["Grafana :9091"]
        end

        subgraph signage["digivision-signage（Docker Compose）"]
            nginx["signage :3001<br/>Nginx<br/>Vite静的ファイル"]
        end
    end

    weather["外部天気予報API<br/>weather.tsukumijima.net"]
    hls["HLS配信元<br/>イベント時・配置は環境依存"]

    operator -->|"ログイン・コンテンツ管理<br/>/admin・/publisher"| app
    display -->|"GET /signage/?token=..."| nginx
    nginx -->|"HTML・JavaScript・静的アセット"| display
    display -->|"トークン認証 /api/display/*<br/>定期取得・POST /ping・HLS再生"| app
    display -->|"GET /api/uploads/e-poster/*"| app

    app -->|"Drizzle ORM"| db
    app -->|"保存・配信"| uploads
    migration -.->|"DBマイグレーション"| db
    prometheus -->|"Bearer認証 /api/metrics"| app
    grafana -->|"メトリクス参照"| prometheus

    app -->|"天気予報を取得"| weather
    app -->|"HLSを取得・署名URLへ書換え"| hls

使用技術

  • CMSアプリ
    • Next.js 16.2
    • React / TypeScript
    • TailwindCSS
    • UIライブラリ：DaisyUI
    • 認証・認可：Auth.js（旧NextAuth）
    • WebAPI：hono 4.12
  • サイネージアプリ
    • Vite 8
    • TypeScript
    • 描画：p5.js
  • メトリクス監視：Prometheus、Grafana

こだわりポイント

  • 特にCMSアプリでは認証・認可機能に力を入れており、Auth.js（旧NextAuth）を使用した、ロールベースのJWT認証を実装しています。
    また、サイネージへのデータ提供に使用するWebAPIではTokenベースの認証を行っており、学内ネットワーク内においても不正なアクセスを防ぐためのセキュリティ対策を施しています。
    • このサービスは外部ネットワークには公開していませんが、高専ではハッカー気質の学生による不正アクセスのリスクが高いため、セキュリティ対策を徹底しています。
  • サイネージ画面の表示内容は遠くからでも容易に内容を確認できるように、情報に優先順位をつけてテキストサイズなどを決定しています。
  • CI／学内サーバへのデプロイ・更新作業は、Github Actionsを用いることで自動化しています。
目次
© 2026 Chimonakiko