GitHub Pages での静的ホスティングに対応しています。
- レーダーチャート表示: 譜面の傾向(NOTES, PEAK, TECHNICS, BPM, HS, CHORD)を視覚化します。イイネ!!
- ソート機能: 各レーダー要素と、曲名と、総ノーツ数あたりでソートできます。レーダー要素の合計値でのソートもあるので、これで動画でも作ろうかなとか。
- 検索機能: まあ普通に曲名で検索できますよと。
新しい譜面データを追加した場合、以下の手順でWebアプリに反映させます。
-
Pythonスクリプトを実行して、CSVデータをJSONに変換します。
python convert_to_json.py
これにより
static/data.jsonが更新されます。 -
変更をGitHubにプッシュするってわけですわ。
git add . git commit -m "Update song data" git push
このWebアプリはGitHub Pages (Public) で公開されていますが、以下の設定により**「URLを知っている人のみ」**がアクセスできる状態にしています。
- 検索避け (
noindex):index.htmlに検索エンジンによるインデックスを拒否するタグが含まれています。 - 隠ぺい: トップページ以外のリンクからは辿れません。
index.html: エントリーポイント。GitHub Pages用にルートディレクトリに配置されています。static/: CSS, JS, JSONデータなどの静的ファイル。app.py: ローカル開発用のFlaskサーバー(GitHub Pagesでは使用されませんが、動作確認に使えます)。