nanovation-session-manager — マニュアル / ヘルプ

0このアプリの全体像

イベントのセッション（プログラム）・スポンサー・参加者一覧を管理し、イベントサイトへ配信するアプリです。登壇者・参加者の人物データは人物 DB（nanovation-personal-database）が持ち、このアプリは表示・配信を担います。

運用者（イベント担当）

管理画面 /admin で、セッション・枠・登壇者区分・スポンサー・参加者スナップショットなどを編集します。→ 第1部

フロントエンド実装スタッフ（制作会社）

イベントサイトに配信 API / Web Component を組み込み、CSS で見た目を作ります。→ 第2部

💡

用語: DAY=開催日の区切り／枠(スロット)=同じ時刻に並ぶセッションの集まり／スナップショット=ある時点の写し（アーカイブ配信用）。公開状態は 下書き / STG公開 / 全公開 の3段階です。

📋 第1部 — 管理画面の操作（運用者向け）各画面のスクリーンショットと操作手順

1ログインとイベント選択

管理画面は 1 つ（/admin）。共有パスワードでログインします（ID なし）。

**ログイン画面。**管理パスワードを入れて「ログイン」。パスワードは運用担当から受け取ります。

ログインするとイベント一覧が出ます。イベントの定義（slug・名称・開催日）は人物 DB が持ち、ここには各イベントの DAY 数・セッション数・スポンサー数・保存済みスナップショット版数が集計表示されます。行の「開く」で、そのイベントの編集に入ります。

🔗

各画面は URL を持ちます（例 /admin/MA26/sessions）。リロードや「戻る」が効き、リンク共有もできます。

2セッション一覧の見方

「A — セッション管理 → セッション一覧」。上部の DAY タブで日を切り替え、その日のセッションが時間枠ごとに、左に時刻・右にカードで並びます。同じ時刻に複数あれば横に並びます（並列トラック）。

右上「＋セッション追加」で、その DAY に新規セッションを作成（作成後すぐ編集モーダルが開く）。
カードの登壇者チップの SPK/MOD/MC は区分。スポンサーはロゴ（無ければ社名）で出ます。

3セッションを作る・編集する

セッション編集は大きなモーダルで、上のタブで 基本情報 / 登壇者 / スポンサー / 追加項目 / 公開制御 を切り替えます。最後に右下「保存」で確定します（保存するまで反映されません）。

基本情報タブ

開始時刻… この時刻が「枠」になります。同じ時刻のセッションは同じ枠に並びます。
並び順… 同一時間枠内の左→右の順。10 刻み推奨。
表示タイプ… 構造が違う特殊枠（ナイトアジェンダ等）は「自由 HTML 枠」にすると、中身を丸ごと HTML で組めます。

登壇者タブ

＋人物 DB から追加… 検索付きの一覧から選びます（下の「登壇者ピッカー」）。
＋自由入力で追加… 人物 DB に無い人を氏名直接入力で追加。
区分… Speaker / Moderator / MC など（イベントごとに定義可能・§6）。並びは行の ▲ で入れ替え。

**登壇者ピッカー。**氏名・会社・役職・ID のどれでも絞り込めます。複数選んでまとめて追加。登録済みは薄く表示。

スポンサータブ

追加項目タブ

公開制御タブ

公開状態	配信
全公開 (published)	本番サイト（指定なし）に出る。
STG 公開 (staging)	`?stage=staging`（要キー）でのみ出る。本番には出ない。
下書き (draft)	どこにも配信されない。

🕘

モーダル下の「更新履歴」から、保存のたびの版に戻せます（最新 100 版）。削除したセッションも履歴から戻せます。

4枠管理（時刻・トラック名）

「枠管理」は、枠（＝同じ時刻のセッションの集まり）を一画面でまとめて操作します。時刻変更が多い時に便利です。

時刻を変えると、その枠の全セッションの開始時刻がまとめて変わります（各セッションの更新履歴にも残る）。変更後が既存の枠と同じ時刻なら、その枠に統合されます。
左側の時刻表示 → 非表示… その枠だけ配信で時刻を隠します（NPU/AIMC のようにトラック表示に寄せたい時）。
トラック名… 「Track 1」等。配信でレールに出ます。

5DAY 定義

「DAY 定義」で開催日の区切りを作ります。ラベルは自由文字列（「DAY1」「After」等）、日付は任意。

6登壇者区分

Speaker / Moderator / MC などの区分をイベントごとに定義できます。定義が無いイベントは既定 3 区分で動きます。

ラベル表示… 出す/出さない。既定は Speaker=なし、Moderator/MC=あり。ラベルは氏名の上に出ます。
配信の有無… 「出さない」にすると、その区分の登壇者はサイトに表示されません（管理画面には残ります）。

7追加項目の定義

セッション／スポンサーごとに、任意の項目（カスタムフィールド）を足せます。項目は固定しません。

📐

キー layout_class はレイアウト用の予約項目です（§15）。型を select、選択肢に cont_big,cont_ssn_col2,cont_ssn_col3 等を入れると、セッション編集で選べます。

8表示スタイル設定

配信される見た目（Web Component の描画モード・CSS・テンプレート・外部 CSS）を設定します。制作会社が触る想定の画面です。

9スポンサー一覧・グレード定義

スポンサーはイベントごとに登録します。グレード（見出し）× 表示ランク（特大/大/通常）で並びます。

**グレード定義。**グレード名（表示見出し）・slug・既定の表示ランク・表示順。使用中のグレードは削除できません。

10スポンサー DB（使い回し）

一度登録したスポンサーを別イベントでも使い回すための、全イベント共通の企業台帳です。

取り込むとイベント側に別レコードが作られ、以後のイベント側編集は DB に波及しません（開催年ごとの掲載差を許すため）。
既に取り込み済みの企業はスキップされます。

11スナップショット（保存・編集）

開催後のアーカイブはスナップショット（ある時点の写し）で固定します。ライブを止めるわけではないので「凍結」ではありません。写真・ロゴも自己完結で複製されます。

**スナップショット管理。**「📸 スナップショットを保存」で今の全公開データを 1 版として保存（何度でも可・保存しても配信は変わらない）。各版に「この版を配信する URL（`?snapshot=N`）」が出ます。

撮った版は「スナップショット編集」で直せます。ライブデータは一切参照しません（土台にした版だけを編集して新しい版を作ります）。

⚠️

編集で件数（セッション数・登壇者数・参加者数）は変わりません。掲載を止めたい登壇者スポンサー・参加者は「掲載取り下げ（非表示）」にします。取り下げた対象はその版の配信から落ちます。

12配信エンドポイント画面

「参考 — 閲覧のみ」の画面。サイトのどの画面が何を叩くのかを一覧できます。制作会社に渡す URL はここからコピーします。

🧩 第2部 — サイトへの組み込み（フロントエンド実装向け）配信の叩き方・DOM/class 設計

13配信エンドポイント一覧

イベントサイトが叩く先。認証不要（公開・読み取り専用）。event にイベント slug（例 MA26）。

GET/api/schedule?event=MA26

スケジュール一括（DAY → 枠 → セッション → 登壇者・スポンサー）。

GET/api/sessions/{session_id}?event=MA26

セッション 1 件（詳細ページ用）。

GET/api/sponsors?event=MA26

スポンサー一覧（グレード × 表示ランク）。

GET/api/attendees?event=MA26

参加者一覧（区分ごと）。このアプリの口のみ使用。

GET/wc/schedule.js

Web Component 本体（<ma-schedule> / <ma-session>）。

GET/img/photo/{person_id}　/img/sponsor/{sponsor_id}

顔写真・ロゴ。配信 JSON にこの URL が入っているのでそのまま <img> に使えます。

配信内容の切り替え（呼び出し側が URL で指定）

付ける指定	返るもの
（なし）	ライブ・全公開のみ。本番サイトはこれ。
?snapshot=3	スナップショット v3（アーカイブ）。immutable キャッシュ可
?stage=staging&key=…	STG 公開まで含む（確認用・キー必須）。

14Web Component / JSON

最小は script 1 行とタグ 1 個。

<script src="https://nanovation-session-manager.web-agent.io/wc/schedule.js"></script>
<ma-schedule event="MA26"></ma-schedule>

⚠️

版・段階（?snapshot= / ?stage=）は必ず <script> の URL に付けます（<ma-schedule> の属性ではない）。CSS・テンプレートがこの JS に焼き込まれるためです。

属性	意味
event	イベント slug（必須）。
day	特定 DAY だけ描く。
shadow="on"/"off"	Shadow DOM を個別に強制/解除。
session-url	セッション名のリンク先テンプレ（`{id}` 置換）。

詳細ページは <ma-session session="ses_00119"></ma-session>。JSON 自前描画は同じ ma-* class を使えば同じ CSS が効きます。

🧪

参照実装（そのままコピーできる実物）: /demo/
配信テストのハブです。イベントを切り替えつつ、JSON 方式 / Web Component / データ同梱 / 2 方式の実測比較 / セッション詳細 / スポンサー一覧 / 参加者一覧をタブで確認できます。各ページのソースを見れば class の付け方がそのまま分かります。

15セッションのレイアウト（人数による可変表示）

従来の session_class（cont_col / cont_big …）を、2 階建てに置き換えました。

自動人数で決まる組み分け

各カードに登壇者数・スポンサー数の class が自動で付きます。CSS だけで書け、カードごとの設定は不要。

手動人数では決まらない演出

「大きく表示」「2列/3列」は、セッション編集の追加項目 layout_class で個別指定（§7）。値がそのまま class に。

<!-- 登壇者4名・スポンサー1社 -->
<li class="ma-session ma-session--normal ma-session--sp4 ma-session--spo1">

分類	従来 class	今回の対応
① ノーマル横3人	（なし）	既定。何もしない
② 人1・スポンサー1	cont_col	自動 `.ma-session--sp1.ma-session--spo1` を CSS で狙う
③ 人1・その他1	cont_col	「その他」がスポンサーなら②と同じ
④ 大きく表示（横2人）	cont_big	手動 layout_class = `cont_big`
⑤ 2列横並び	cont_ssn_col2	手動 layout_class = `cont_ssn_col2`
⑥ 3列横並び	cont_ssn_col3	手動 layout_class = `cont_ssn_col3`

自動 class の名前は ma-session--sp1 等で、従来の cont_col とは別名です。既存 CSS を流用するなら次のどちらか。

/* 方法A（推奨・完全自動）: 自動class を狙って cont_col 相当を当てる */
.ma-session--sp1.ma-session--spo1 .prg_att_cont.prg_speaker { width:32%; margin-right:1%; }
.ma-session--sp1.ma-session--spo1 .prg_att_cont.prg_sponsor { width:21%; }

方法B（手動）: layout_class の選択肢に cont_col を足し、②③のセッションに設定 → カードに cont_col が付き既存 CSS がそのまま効きます。

16DOM・class リファレンス

既定テンプレートが出す構造。class 名と part 名は同じなので Shadow DOM でも ::part() で狙えます。

<section class="ma-day"><h2 class="ma-day-label">DAY1</h2>
  <div class="ma-slot">            // 並列 .ma-slot--parallel / 時刻非表示 .ma-slot--hide-time
    <div class="ma-slot-rail"><time class="ma-slot-time">13:30</time>
      <span class="ma-slot-track">Track 1</span></div>
    <ul class="ma-slot-body"><li class="ma-session ma-session--sp4 ma-session--spo1">
      <ul class="ma-speakers"><li class="ma-speaker ma-speaker--moderator" data-role="moderator">
        <span class="ma-speaker-role">Moderator</span>   // ラベルは氏名の上
        <span class="ma-speaker-name">…</span>…</li></ul></li></ul></div></section>

class（= part）	意味
ma-day / ma-day-label	DAY と見出し
ma-slot / -rail / -time / -track	枠（時刻・トラック名）
ma-slot--parallel / --hide-time	並列 / 時刻非表示
ma-session / --sp{N} / --spo{N}	セッションと人数クラス（§15）
ma-session-kind / -title / -summary	種別・タイトル・概要
ma-speaker / --{role} / [data-role]	登壇者と区分
ma-speaker-role / -name / -company / -position / -photo	区分ラベル（上）・氏名・会社・役職・写真
ma-sponsors / ma-sponsor / ma-sponsor-logo	セッションスポンサー

17スナップショット / STG の配信

アーカイブは ?snapshot=N を付けるだけ。版が URL に入り内容は変わらないので immutable で長期キャッシュできます。

fetch('/api/schedule?event=MA26&snapshot=3')
<script src="…/wc/schedule.js?event=MA26&snapshot=3"></script>

STG（確認用）は ?stage=staging&key=＜配信キー＞。キーは運用者から受け取ります。本番サイトには付けません。

fetch('/api/schedule?event=MA26&stage=staging&key=＜配信キー＞')