「ツール・ド・おきなわ 2025」用のリザルト等システム(csvから)について
準備したシステムのリンク一覧
UCI
- csvアップロード
- こちら
- リザルト表示
- 操作用 / 表示用
- 逃げメンバー表示
- 操作用 / 表示用
- スプリントポイント通過順表示
- 操作用 / 表示用
- KOMポイント通過順表示
- 操作用 / 表示用
- チームごとメンバー表示
- 操作用 / 表示用
市民200km
UCI・市民200km 共通
設定の流れ
- UCI用、市民用のスタートリストをcsvにして、項目名を確認。
-
uci/config/upload_race.php と citizen/config/upload_race.php のソース内の項目名を1のcsvと一致させる。
(一致していないと情報が取得できない) - uci/config/upload.html と citizen/config/upload.html で、「レースタイトル」(これがリザルト表示の見出しになる)を入力し、 スタートリストのcsvファイルを選択、さらに、UCI用では、チームごとにメンバー表示する際の絞り込み列となるcsvの項目名を選択し、アップロードする。
「ツール・ド・おきなわ 2025」用の仕様、その他備考
- アップロードしたcsvの項目名に合わせて、upload_race.phpのソース内の項目名指定部分を変更すれば、それに合わせてrace.jsonとall.jsonが自動作成されるので、 そのrace.jsonから各htmlが項目を拾う、race.jsonに完全依存した仕組み。なので、upload_race.phpの設定を変更した場合は、新たにcsvをアップロードしなければ 正しく動作しない。
-
csvファイルの中身は要確認。Excelを使ってcsvを作成しても、「,」が大量に入っていたり、変なスペースが入っていたりと、変なことになってる場合がある。
Excelファイルからcsvを作成するなら、Googleスプレッドシートでファイルをインポートし、csvに書き出した方がうまくいく場合がある。
あと、csvはBOMナシのUTF-8にすること。テキストエディタでBOMナシにする。
(BOMアリ・ナシ両方で使用できるようにカスタムした方がいいかも) -
現在のupload_race.php内で指定している項目名は、日本語名、国略称、チーム名、チーム略称、ゼッケン。
なんなら、今後もらうcsvの項目名を、今のupload_race.php内で指定している項目名に書き換える方が簡単かも。
(とにかくcsvとupload_race.phpの双方の項目名を一致させる必要がある) - HPの色にあわせて、 UCIは黄色系 (#fddd35、#fffdcc、#fff769)、 市民は赤系 (#d11122、#fcbdbf、#f7686a) を使用した表示にした。
-
UCIでは、機会があればチーム毎のメンバーリスト表示を使用するが、市民では、チーム毎のメンバーリスト表示は基本的には使用しない。
(念の為設定はしている) -
市民のいろいろにチーム名を入れると、表示が折り返しがち。スプリント、KOMは件数が少ないから2行になってもまぁいいかと思うが、逃げメンバーが2行になるとちょっと鬱陶しいかも。
可能であれば、事前にcsvを見て、最長の選手名とチーム名を見つけて、可能な限り幅の調整をやりたいところ。
現在の市民の設定は以下のとおり。- リザルト表示・・・選手名=全角26文字、チーム名=全角24文字
- 逃げメンバー表示・・・選手名=全角15文字、チーム名=全角21文字
- スプリント、KOM・・・選手名=全角16文字、チーム名=全角17文字
-
どの表示用HTMLも、そのままサイズ調整・位置調整なしで、OBSに読み込めるように作成している。
OBSのソースの設定は横1920px、縦1080pxにするとバッチリ。
ただし、画面下部にスポンサーロゴ等を常時表示するような場合には、各システムの.cssファイルを変更する必要がある。
全体の構成
- okinawa2025
- ───index.html← このページ
- ───index.css
- ───sw← ストップウォッチ
- ───index.html← 操作用
- ───display.html← 表示用
- ───data
- └──sw.json← ストップウォッチのカウント
- └──php
- ├──sw_get.php
- └──sw_set.php
- ───uci← チャンピオンレース200km
- ───config
- ├──upload.html← csvアップ/ダウンロード・レースタイトル設定・チーム絞り込み用設定
- ├──upload.css
- └──upload_race.php← CSV受信+race.json、all.json作成
- ───results← リザルト表示用
- ├──index.html← 操作用
- ├──display.html← 表示用
- └──results.css
- ───escape← 逃げメンバー表示用
- ├──index.html← 操作用
- ├──display.html← 表示用
- └──escape.css
- ───teams← チーム毎メンバーリスト表示用
- ├──index.html← 操作用
- ├──display.html← 表示用
- └──teams.css
- ───kom← KOM通過順表示用
- ├──index.html← 操作用
- ├──display.html← 表示用
- └──kom.css
- ───sprint← スプリントポイント通過時表示用
- ├──index.html← 操作用
- ├──display.html← 表示用
- └──sprint.css
- ───php
- ├──download_csv.php← 読み込んでいるcsvをダウンロード
- ├──search_results.php
- ├──set_results.php
- ├──search_escape.php
- ├──set_escape.php
- ├──search_teams.php
- ├──set_teams.php
- ├──search_kom.php
- ├──set_kom.php
- ├──search_sprint.php
- └──set_sprints.php
- └──data
- ├──race.json← 表示に必要な項目等の情報を保存
- ├──all.json← 表示に必要なデータ等を保存
- └──uploads
- └──xxxxxx.csv← アップロードしたcsvを格納
- └──citizen← 市民200km
- ───config
- ├──upload.html← csvアップ/ダウンロード・レースタイトル設定・チーム絞り込み用設定
- ├──upload.css
- └──upload_race.php← CSV受信+race.json、all.json作成
- ───results← リザルト表示用
- ├──index.html← 操作用
- ├──display.html← 表示用
- └──results.css
- ───escape← 逃げメンバー表示用
- ├──index.html← 操作用
- ├──display.html← 表示用
- └──escape.css
- ───kom ← KOM通過順表示用
- ├──index.html← 操作用
- ├──display.html← 表示用
- └──kom.css
- ───sprint← スプリントポイント通過時表示用
- ├──index.html← 操作用
- ├──display.html← 表示用
- └──sprint.css
- ───php
- ├──download_csv.php←読み込んでいるcsvをダウンロード
- ├──search_results.php
- ├──set_results.php
- ├──search_escape.php
- ├──set_escape.php
- ├──search_teams.php
- ├──set_teams.php
- ├──search_kom.php
- ├──set_kom.php
- ├──search_sprint.php
- └──set_sprints.php
- └──data
- ├──race.json← 表示に必要な項目等の情報を保存
- ├──all.json← 表示に必要なデータ等を保存
- └──uploads
- └──xxxxxx.csv← アップロードしたcsvを格納