コラム -難易度表の作成方法について-
当サイト立ち上げの際に行った、新フォーマット(JSON)に対応したBMS難易度表の作成・公開方法をご紹介します。
当コラムを利用して難易度表を制作された / される予定の方へ
こちらのコラムは執筆から時間が経過し、情報が古くなっています。改訂には時間がかかりそうなので、ひとまず重要な最新情報についてメモしておきます。
■ GASを使用した難易度表の更新方法について
スプレッドシートを使った難易度表の管理 | Hex bms にて、曲データをシートに記入すると Google Apps Script (GAS) によって難易度表に自動同期してくれる手法が紹介されています。
当サイト (3) score.json の編集 で使っている手動更新より高効率でオススメです。
■ 難易度表の設置先サーバーについて
(5) ホームページの立ち上げ 先は GitHub Pages が主流になりつつあるようです。FTP要らずでブラウザから更新可能。
初回公開時に正しい手順を踏んでいても 404 を返される場合、readme.md を作成すると良いかもしれません(未検証) *ファイルの中身は適当でも恐らく大丈夫
当サイトの手法で作成した難易度表から GitHub やスプレッドシート(+GAS) を利用した更新に乗り換える場合、
「header.json」「score.json」の指定先URLを置換すれば、難易度表のURLを変更する必要はありません。(この時、URLはフルパス https://～ で指定してください)
更新情報
(2024/04) 譜面画像リンクを 黒皇帝さんの BMS Score Viewer に差し替えました。
既に当コラムの雛形を導入済の方は、再ダウンロード または「table.html」内の譜面画像記述部を次のように書き換えてください。
... ＜a href='http://www.ribbit.xyz/bms/score/view?p=1&md5=" + info[i].md5 + "' target='_blank'＞♪＜/a＞ ...
... ＜a href='https://bms-score-viewer.pages.dev/view?md5=" + info[i].md5 + "' target='_blank'＞♪＜/a＞ ...
(2023/04) Mocha-Repository / MinIR へのリンクを追加しました。Khibine さんのご厚意でロゴを提供頂きました。(二次利用、再配布可 単体ダウンロードは こちら)
(2022/04) sha256 カラムを追加しました。既に当コラムの雛形を導入済の方は 必要に応じて再ダウンロードし、「table.html」をコピペ等で書き替えてください。
難易度表の作成方法 (本編)
専門的な知識の無い方や、とりあえず難易度表を作成したい方向けの説明となります。(専門的な説明は筆者自身もできません)
サンプル難易度表 by schlucht2 および 第2通常難易度表のサンプル を参考にさせていただきました。一部の解説が重複することをご了承ください。
サンプルページを作成してみました
■ 【Download】PDB式サンプル難易度表セット (table_sample.zip)
■ 上記のサンプルを反映したホームページ (index.html)
また、JSONファイルの中身の作成方法の一例として、PDB式難易度表作成例 作業用 Google スプレッドシート を使用しています。
こちらのシートに関しては下記(3)で改めて紹介します。
公開までの手順
(1) htmlファイルの編集
まず、難易度表を表示するホームページの体裁を整えましょう。
上記のzipファイルを展開すると「index.html」「table.html」というファイルが入っています。
「index.html」はTOPページにあたります。ファイル名は変更しないでください。
「table.html」は GLAssist / BeMusicSeeker / beatoraja で読み込ませる難易度表のページです。このファイル名を変更する場合は難易度表の公開までに行いましょう。
公開後にファイル名を変更すると難易度表のURLが変更されることになり、読み込みエラーの原因になってしまいます。
次にそれぞれのhtmlファイルをメモ帳などで開いて、説明文の追加等を行ってください。(HTMLの詳しい書き方については割愛します)
「table.html」のファイル名を変更した場合は、「index.html」内のリンク ＜a href="table.html"＞難易度表はこちら＜/a＞ の部分も更新してください。
以降、ファイル名を書き換えた場合やディレクトリを移動させた場合はその都度対応するリンクを書き換えてください。
(2) header.json の編集
難易度表全般のプロパティが格納されているのが「header.json」ファイルです。
メモ帳で「header.json」を開き、次の項目を更新してください。(これらの項目ははじめにきっちり決めておくべきですが、公開後に変更しても大丈夫です)
■ "name" : "難易度表の名前を記入"
■ "symbol" : "シンボルを記入" *★とか◆とかのアレ。難易度表データベースへの登録等を考えている場合は、他の表とシンボルが重ならないようにした方が良い。
■ "data_url" : "score.jsonのあるURL" *特に知識がなければ、初期状態の ./score.json のままで編集不要
■ "level_order" : [難易度を記入] *カッコ内に使用する難易度をカンマ区切りで全て記入。数字以外は""で囲む。
(3) score.json の編集
難易度表に登録する譜面の情報が格納されているのが「score.json」ファイルです。
この中身を記述する方法は複数ありますが、ここではPMSデータベースで利用している Google スプレッドシートを利用した方法をご紹介します。
(2024/04) スプレッドシートを使った難易度表の管理 | Hex bms (GASを利用した方法・現在の主流) を利用される場合は、この解説は飛ばして (4) に進んでください。
■ PDB式難易度表作成例 作業用 Google スプレッドシート
上記 Google スプレッドシートの「シート例」を開いてください。ここに楽曲情報を入力すると、M列にコードが表示されます。これがJSONファイルの中身になります。
初期状態で「score.json」の中身はこのコードを列全体コピペし、末尾の }, を }] に変更したものです。
「シート例」と「score.json」の中身を照らし合わせて確認してください。
恐らくここで説明するよりも実際に書き込んで色々試されたほうが理解しやすいと思います。「シート雛形」をコピーしてご自由にお試しください。
難易度表作成の上で最低限必要なものは以下のとおりです。
■ 難易度 … 「header.json」で指定した数字と記号に対応させる。記号の半角/全角入力ミスが起こりやすいので注意。
■ 曲名
■ hash (bmsmd5) …譜面の識別番号のようなもので、複数の取得方法があります。一例として、LR2で選曲カーソルを合わせてF5を押すと表示されるIRページのURL を記入すればOK
(2022/04 sha256 カラムの追加に伴う追記)
■ sha256 … BMSONファイルを登録する場合のみ必須です。Mocha-Repository に接続した beatoraja で選曲カーソルを合わせて F11を押すと表示されるIRのURLを記入すればOK
----------
ミス防止のため、hash(bmsmd5) または sha256 を入力しないとM列は空欄となる仕様です。M列の出力数が足りなければドラッグフィルで増やせます。
セル内改行と切り取りはエラーが起こるので使わないでください。また、末尾の }, を }] に書き換えるところだけは手動で、忘れずに行ってください。
編集が終わったらM列を手元の「score.json」に上書きコピペしましょう。
(*難易度表を表示して内容をチェック出来るのは 下記(5) 工程を行ってからになります。)
(4)「style」フォルダ内について
このフォルダの中身で難易度表のレイアウトを指定しています。
第2通常難易度表様で配布されているものとほぼ同一です。特に知識がなければ触る必要はありません。
(5) ホームページの立ち上げ
大抵のレンタルサーバーで難易度表の開設は可能ですが、このコラムではPMSデータベースがお世話になっている忍者ホームページに登録します(ダイマ)
ドメイン名は難易度表のURLの一部になるので考えて決めましょう。登録が終わるとホームページの管理ページが開きます。
次に 忍者ホームページのFTP設定マニュアルを読んで FFFTP をインストールし、管理ページ内にあるFTP設定を入力して接続します。
接続できたら、FFFTPの画面右側に編集してきた「index.html」「table.html」「header.json」「score.json」「style(フォルダ)」をD＆Dで投入します。
これで難易度表が公開されているはずです。管理ページの右上「サイトを開く」を押すと「index.html」が開きます。難易度表ツールにURLを読み込ませて表示されるか確認しましょう。
なお、初期設定のまま公開した場合、URLは以下のようになっています。
■ TOPページ … http://(設定したドメイン名)
■ 難易度表 … http://(設定したドメイン名)/table.html *難易度表ツールに読み込ませるURLです
■ JSON … http://(設定したドメイン名)/header.json および /score.json
(6) 公開してからのこと
手順 (3) score.json を当コラムの紹介しているスプレッドシートの手法で作成した場合、難易度表を更新する都度 スプレッドシートで「score.json」の情報を作成・コピペし、手順 (5) FFFTPを使って最新の情報に上書きします。コードの不備で表示エラーが起こりがちなので、慣れないうちは バックアップを作成してから更新することをオススメします。
難易度表の公開後は、Ribbit!さんの難易度表まとめ (2024年現在リンク切れ) DARKSABUN さんの難易度表まとめ に登録してもらうと良いかもしれません。
PMS難易度表の場合 Links の難易度表にも掲載しますのでご連絡ください。
更に細かい情報に関しては コラム -難易度表の作成方法について (Tips/ Q&A/ カスタマイズ編)- をご確認ください。
その他、分からない事があれば直接ご連絡いただければと思います。