JavaScriptで作る TVで実際に放送される 字幕自動生成装置 #burikaigi

やってみよう精神！ JavaScriptで作る TVで実際に放送される 字幕自動生成装置 2026.01.10 Kaitou 1

本日は 好き・興味先行 で 作ったものの 行く末について お話します！ 2

自己紹介 フロントエンドエンジニア/UXデザイナー 宇田川 海人（Kaitou） 株式会社マイクロニティ（旧：株式会社メタップスホールディングス）で、 最近は社内ツールを作りつつ、エンジニア採用や採用広報に力を入れている。 休日はキャンプとサバゲーとワカサギ釣りを画策中。 ちょこちょこイベントもやっていますので、ぜひ遊びに来てください󰚦 𝕏やっています！ @Kaitou1192 ぜひ友達になってください 󰚦 https://kaitou.connpass.com/ https://futako-dev.connpass.com/ https://benkyokai.connpass.com/ 3

• https://kaitou.connpass.com/
• https://futako-dev.connpass.com/
• https://benkyokai.connpass.com/

0. はじめに 1. 基本的な仕組み 2. リザルトデータ入手 3. Fill/Key信号 4. 位置情報取得 5. 失敗・苦労もある 6. おわりに 4

0. はじめに 1. 基本的な仕組み 2. リザルトデータ入手 3. Fill/Key信号 4. 位置情報取得 5. 失敗・苦労もある 6. おわりに 5

友人・知人に こんな質問 されませんか？ 6

Kaitouさん こんなものって 作れます？ 7

実際に作ってしまうと、大体の結末はこうなる 8

だから普段はやらない 9

でも 好きなもの の場合 どうする？ 10

今回のご相談はロードレース 11

Kaitouさん サイクルロードレース の速報リザルトの 自動生成できます？ 12

できるかどうかは別 断る理由が「ない」 やるしかないので やってみよう 󰙥 13

0. はじめに 1. 基本的な仕組み 2. リザルトデータ入手 3. Fill/Key信号 4. 位置情報取得 5. 失敗・苦労もある 6. おわりに 14

基本的な仕組み Kaitou→ 何かの線 - HDMI - SDI 放送用 ミキサー Viewer Controlle r 外部 ディスプレイ 扱い 内部 ディスプレイ ←ブラウザ 15

基本的な仕組み（2018年時点のブラウザ上の処理）
何らかのデータ
- JSON
- XML
- CSV
①
<canvas>
+
JavaScrip
t

Viewer

Axios
②
Vue.js
④

③

const data =
[{rank:1},{rank:2},{rank:3}] ;

Window Object

rankObj =
window.open ('rank.html',
'rankObj');

Controlle r

rankObj .setView(data);
16

想定アウトプット（Viewer - 全画面表示） レースの名前 1 2 3 4 5 6 7 8 9 10 11 22 33 44 55 66 71 82 93 104 選手名 選手名 選手名 選手名 選手名 選手名 選手名 選手名 選手名 選手名 JPN IRL AZE AFG ARE DZA ARG ABW ALB ARM チーム名 チーム名 チーム名 チーム名 チーム名 チーム名 チーム名 チーム名 チーム名 チーム名 3h33’33” +4” +15” +20” +31” +42” +53” +1’04” +2’05” +13’06” 実際の画面が気になる方は https://www.youtube.com/live/s_6LRtiMX_g?t=8668s をご確認ください󰢙 17

• https://www.youtube.com/live/s_6LRtiMX_g?t=8668s

想定アウトプット（Controller） [Window Open] あらかじめ window.open するためのボタ ン 種別 ◉男子 ◯女子 地点 ◉Start/Finish ◯Sprint Point ◯KOM ページ ◉1 ◯2 ◯3 ◯4 ◯5 ◯6 ◯7 ◯8 ◯9 ◯10 [Set View] Axiosを走らせ、必要な情報をViewerに送るボタン 18

なぜcanvasを使うのか？ 1/2 canvas vs HTML+CSS canvas HTML+CSS 開発コスト 高い 低い󰗨 アクセシビリティ 低い 高い󰗨 SEO 低い 高い󰗨 処理の負荷 高い 低い󰗨 レイアウト崩れ 強い󰗨 弱い 19

なぜcanvasを使うのか？ 2/2 canvasは入る文字列をよしなにしてくれる canvas HTML+CSS ファビアン・カンチェラーラ ※canvasもHTML+CSSもローカルフォントを読み込める 20

ちなみに僕たちがこれを開発する前はどうだったのか？ 審判 ディレクター リザルト ＋α CGさん CGさん CGさん CGさん 21

開発したらどうなったのか？ 審判 ディレクター リザルト ＋α データがあれば 即時に表示できる！ 󰙥 CGさん 実はリザルト以外の 表示もたくさんある 僕 22

0. はじめに 1. 基本的な仕組み 2. リザルトデータ入手 3. Fill/Key信号 4. 位置情報取得 5. 失敗・苦労もある 6. おわりに 23

データはどこにあるのか？ データはどこにありますか？ APIとかあるんですかね？ 全然わからないけれど 現地の共有フォルダーにはある 事前にその共有フォルダーに アクセスとかできますか？ 別のレースで良ければ 次の週末に新潟で開催される 24

行ってまいりました 日帰りで 片道220kmの車旅 ちなみに本番は 2週間後。 Map data from OpenStreetMap 25

• https://www.openstreetmap.org/copyright

どんなデータだったのか？ うろ覚えですが下記のようなCSVだったはず 93, ……, 10020181007111733245, …… 22, ……, 10020181007111631221, …… 71, ……, 10020181007111534335, …… 44, ……, 10020181007111435784, …… 55, ……, 10020181007111332356, …… 66, ……, 10020181007111244542, …… 33, ……, 10020181007111112245, …… 82, ……, 10020181007111042343, …… 11, ……, 10020181007105936021, …… 26

どんなデータだったのか？ うろ覚えですが下記のようなCSVだったはず 93, ……, 100 20181007111733245 , …… 22, ……, 10020181007111631221, …… 71, ……, 10020181007111534335, …… 44, ……, 10020181007111435784, …… 「2018年10月7日11時17分33秒 55, ……, 10020181007111332356, …… 245」 66, ……, 10020181007111244542, をかろうじて見つけられた …… 33, ……, 10020181007111112245, …… 82, ……, 10020181007111042343, …… 11, ……, 10020181007105936021, …… 27

最初の構成 放送用ミキサー リザルト映像 作成君 ③ ローカルのJSONを読み込み ③HDMIで映像ミキサーに出力 CSVをJSON にする君 ② 計測データ ストレージ ① ①CSVを読み込み ②JSONファイルを作成 28

お褒めの言葉多数いただきました！ 画面に最新の情報が あるので 色々見なくて良い！ こまめに情報が 表示されるので 見やすい！ アナウンサー TV視聴者 29

しかし やってみた裏側は 大変だった…… 🫠 30

このやり方の問題点 直接、生の計測データを読みに行っ ている状態。 つまり、何かしらの理由で センサー を2回またいでしまった （特にス タート前とか）場合や、選手のバイ クトラブルで、チームやニュートラ ルが用意している スペアバイクに乗 り換えた 際の補正がデータだけでは 検出できない。 結果、映像班の無線に加え、審判無線も聞き続けなければならず、情報を漏ら すと放送事故につながる。 31

解決方法 実際に実施したことによって、計測会社さんが、こちらのやりたいことを理解 してくれたため、次回から諸々考慮して補正したデータを取得できる、APIを 用意してくれるようになった。 これは、僕が解決したわけではないけれど、実際に動くものを作って見せた結 果、みんなのイメージが揃い前向きに進められた。 つまり実際にやってみせるということは、小さな一歩に見えても、大きな成果 につながることがある。 32

この時点までの成果 放送に即時でリザルトを出せるようになっ た。 1. 視聴者体験が良くなった 2. 解説者体験が良くなった 3. 人員配置が変わった 33

0. はじめに 1. 基本的な仕組み 2. リザルトデータ入手 3. Fill/Key信号 4. 位置情報取得 5. 失敗・苦労もある 6. おわりに 34

Kaitouさん 画面の一部にだけ 表示すること できます？ 35

細かいお話はQiitaの記事に書いてあります https://qiita.com/Kaitou/items/115dbdd5c76ca7175651 36

• https://qiita.com/Kaitou/items/115dbdd5c76ca7175651

映像ミキサー上で透過させる場合の仕組み 1/3 37

映像ミキサー上で透過させる場合の仕組み 2/3 真ん中の段がKey信号 Key信号の白いところは表 示し、黒いところが透過 上の段がFill信号 透過を踏まえて必要な ところに配置する 38

映像ミキサー上で透過させる場合の仕組み 3/3 リザルト映像 作成君 Fill信号 Key信号 中継映像 ベースになる 映像 39

具体的な接続方法 HDMI Fill HDMI 確認用モニター Converter SDI SDI 放送用ミキサー Converter 確認用モニター HDMI リザルト映像 作成君 Key HDMI 40

リザルト映像作成君上の処理イメージ ①APIで情報取得 ②必要な情報を各Viewerに送信 ③各Viewerで表示 Viewe r Fill ③ ① ② Viewe r Key API ③ Controlle r 41

この時点までの成果 画面の一部のみの表示が可能になった。 1. レイアウトの自由度向上 2. SDIで接続すると先方も楽 ※SDIに変換できるようになった結果、映像のことをわからないと言っても 信じてもらえなくなった。 42

0. はじめに 1. 基本的な仕組み 2. リザルトデータ入手 3. Fill/Key信号 4. 位置情報取得 5. 失敗・苦労もある 6. おわりに 43

Kaitouさん レースの残り距離 表示できます？ 44

こんな画面が作りたい 残り 132.4k m 45

おおよその先頭の位置は取れる 選手や自転車にGPS等を 付けるのは難しい。 大きなレースだと審判車 が4台ぐらい走ってい る。 先頭集団には必ず付いて いるので、審判車に積ん でいれば、おおよその 位置は取得できる。 46

大体の作戦 コースデータは あらかじめGPX経由で DBに点群を格納。 先頭集団に近い審判車 からスマホデータで 座標を送信。 一番近いコース上の ポイントを現在の 先頭位置とする。 47

実は送信側のコードもJSでやっています。 https://qiita.com/Kaitou/items/3504429e60beb07f368f 48

• https://qiita.com/Kaitou/items/3504429e60beb07f368f

実際の構成 放送用 ミキサー リザルト映像 作成君 ③FastAPIから取得した 残り距離を元に画像を作成 し Fill信号とKey信号を 放送用ミキサーに送信 現在位置 計算君 GPSデータ 送信君 ①GPSデータを送信 ②受信したGPSデータから コース上の位置を特定 残り距離を算出 49

現場でテストしてみる ↑コース図は架空ですが、現実でも周回コースで す。 50

近所でのテスト時は 上手く行っていたが 51

現地で動作させると GPSダンスしてるかも？ 🤔 52

GPSダンスとは？ GPSで取得できる位置情報が 飛び飛びになったり 大きく瞬間移動すること 53

GPSダンスの要因 1. 衛星との通信状態が悪い 2. 携帯通信が悪くて送信できない 3. 何かしらの理由で位置がおかしい 54

1. 衛星との通信状態が悪い 木陰や谷間を走るので、 たしかに衛星との通信状態は悪そう とはいえ、都市部の電波の乱反射に 比べるとジャンプしまくる 要因としては弱い 55

都市部で一般的なGPSが弱い理由 間接波 直接波 測定 誤差 GPS衛星に積まれた 原子時計の時刻を基に 三角測量の仕組みを 使っている。 そのため間接波が 入りやすい地域では 誤差が出る可能性が 高くなる。 56

2. 携帯通信が悪くて送信できない 電波状況が悪い場所では止まっていて 電波状況が良い場所になったら動き出す これならば説明が付くけど 微妙にそうでもなさそうな コースをまたぐジャンプが多い 57

3. 何かしらの理由で位置がおかしい おそらくコレ 答えになってないけど 58

携帯電話の位置情報の取得には2方式ある i. GPSで取得する ii. 他の方法で取得する 59

他の方法とは？ ・計測時間短縮のため ・精度を高めるため 基地局の情報や まわりの端末（WiFi機器とか）の情報で 位置情報を取得・補正 している 60

⚡ ④ Wi-Fiの 位置情報DB (WPS) ⚡ ⚡ ① 衛星電波を 使っての 三角測量 (GPS) ⚡ 携帯電話での位置情報取得の図（Kaitou調べ） ③ 複数基地局を 使っての 三角測量 ② A-GPSを使っての 基地局の 位置情報取得 61

おそらくの理由 その1 キャリア①の 移動基地局 キャリア②の 移動基地局 移動基地局の 情報を 使っていそう 62

おそらくの理由 その2 電波状況を 気にして デュアルSIMに した結果 切り替えで ジャンプしてそう 63

おそらくの理由 その3 Geminiの キャプチャーだが、 ChatGPTもClaudeも ほぼ同じ回答。 現場テスト時の体感もほ ぼコレと同じ。 64

つまり…… 65

この現場では、下記のセッティングが一番マシだった GPSの 精度問題 ・端末は iPhone 14 Pro 以降 ・デュアルSIMにはしない ・回線は移動基地局を出していないキャリア③ ・WiFiはOFF 66

無事表示できました 残り 132.4k m 実際の画面が気になる方は https://www.youtube.com/live/GxAUTQEn-5o?t=13239s をご確認ください󰢙 67

• https://www.youtube.com/live/GxAUTQEn-5o?t=13239s

0. はじめに 1. 基本的な仕組み 2. リザルトデータ入手 3. Fill/Key信号 4. 位置情報取得 5. 失敗・苦労もある 6. おわりに 68

今までは 上手くいったお話 上手くいかなかった お話もあります 69

クリテリウムでのタイム差表示 1st 選手名 10’15” 2nd 選手 0” 名 0” 3rd 選手名 クリテリウムとは？ 1周1〜5km程度の 周回コースを走る競技 基本的に集団が 崩れないので タイム差がつかず 微妙な表示になってしまう 70

Webエンジニアは現実の考慮漏れに疎い 71

準備時間がない・作業時間がない ・仕様の最終確定が開催3日前というのはザラ ・複数日に跨る競技は翌日に向けて機能追加もあ る ・レースの合間や周回の合間に調整依頼も来る 心の余裕や作業時間があればできるのに…… というものもたくさん出てくる 72

その中でも調整できるところはする 放送用 ミキサー 放送用映像 作成君 キャッシュ 計測会社 API 選手や監督用 Viewer君 会場ビジョン用 映像作成君 ※赤字のものは 大会開始後に追加 73

選手・スタッフ・観客の方のフィードバックはありがたい ・実際に作ったものをたくさんの人が即観てくれる ・そこで出てくるフィードバックは一理ある ・即調整し満足度が上げられればみんなHappy このフィードバックループはとても貴重 実際の操作や声が直接届くのは、実はなかなかない 74

文化の違う人たちと仕事をする経験も貴重 イベント運営の方や放送の方とのお仕事は…… ・一般のシステム開発とは時間軸が違う ・作ってみたら違ったみたいなことも多発する ・でも、チャレンジしたことは評価される 75

0. はじめに 1. 基本的な仕組み 2. リザルトデータ入手 3. Fill/Key信号 4. 位置情報取得 5. 失敗・苦労もある 6. おわりに 76

おわりに ・なかなか個人に相談が来た開発をするのは難しい ・でもだからこそ得られる経験はたくさんある ・違う文化の人たちと仕事をするのも楽しい ・なかなかチャレンジできないこともできる ・なかなか使えない技術を使ったりもできる 77

おわりに ・なかなか個人に相談が来た開発をするのは難しい ・でもだからこそ得られる経験はたくさんある ・違う文化の人たちと仕事をするのも楽しい ・なかなかチャレンジできないこともできる ・なかなか使えない技術を使ったりもできる ・万が一、やっても良いと思えるものに出会ったら 飛び込んでみるのをおすすめします。 78

ご清聴ありがとうございました！ 毎月渋谷で LT会しています！ https://work.re-shine.jp/lt PHP、Goエンジニア 採用強化中です！ https://www.paymentfor.com/ 79

• https://work.re-shine.jp/lt
• https://www.paymentfor.com/