自分オリジナルのBMS難易度表を作って公開しよう【無料・Webブラウザ上で完結】

はじめに

自分の好きな譜面や自作譜面をまとめた難易度表を作成・公開したいと思ったことはありませんか？この記事ではGoogle スプレッドシートとGitHub Pagesを利用したBMS難易度表の簡単な作成・公開方法を紹介します。

当記事作成にあたりHex様の記事を参考にさせて頂きました。

bms.hexlataia.xyz

Google スプレッドシートの作業

難易度表の作成

Google スプレッドシートで新しいスプレッドシートを作成し、以下の表を1行目にコピペしてください。このような形式で譜面を記述し難易度表を作成します。

lr2irの列は必須ではありませんが、=HYPERLINK("http://www.dream-pro.info/~lavalse/LR2IR/search.cgi?mode=ranking&bmsmd5="&D2)などのように入力しておくとスプレッドシートからLR2IRに簡単に飛べて便利です。

docs.google.com

level	title	artist	md5	comment	lr2ir
12	G e n g a o z o _ G O D	455 / rio / black train	5110b92d997eabc3d2322556617632ad	拷問
20	Air -GOD-	SHIKI / black train	751738dea1169c5c39db935adfc9e85f	180 乱打
24	Love & Justice [GOD]	フロン / ラズベリル / obj: black train	39d0732ef7fee9ad0c8b044ccbe8a396	أحد مؤسسي نهضة اليابان الحديثة، فقد كان
危険!!	運命論	ルゼ ☆ えみゅう。 ☆ 石王マサト ★ UnK-now/37X	188a99f74ab71804f2e360dcf484545c	levelは文字列なので数字じゃなくてもOK
論外!!!!	戦歌「オルグラリヤ」	ルゼ / Unk-now / 37E	ec1598e752ce393aa8dced158bf6e39c	The judgement day is coming...

フィルタの作成や書式設定などで体裁を整えておきましょう。levelのソートは必ず行ってください。

譜面の入力が終わったら、スプレッドシートのID(URLのhttps://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxx/のxxxxxxxxxxxxxxxxxxxxxの部分)を記録しておきます。

Apps Scriptの作成

ツールタブからスクリプト エディタを選択しApps Scriptの編集画面を開きます。

以下のソースコードをコピペし、xxxxxxxxxxxxxxxxxxxxxの部分を先ほど記録したスプレッドシートのIDに書き換えて保存します。

function getSheetAsObj(id, sheet_name) {
  var sheet = SpreadsheetApp.openById(id).getSheetByName(sheet_name);
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {}
    row.map(function(item, index) {
      if (keys[index] != "lr2ir") {
        obj[keys[index]] = String(item);
      }
    });
    return obj;
  });
}

function doGet() {
  var obj = getSheetAsObj('xxxxxxxxxxxxxxxxxxxxx', 'シート1');  // ここにスプレッドシートのID
  return ContentService.createTextOutput(JSON.stringify(obj, null, 2)).setMimeType(ContentService.MimeType.JSON);
}

画面右上のデプロイから新しいデプロイを選択し、種類の選択をウェブアプリに、次のユーザーとして実行を自分に、アクセスできるユーザーを全員にしてデプロイします。データへのアクセスを許可を求められた場合はアクセスを承認してください。

デプロイが完了したらURLを記録しておきます。URLを踏んだ際に次期難易度表フォーマットのJSONが表示されればデプロイは成功です。(Stellaの例 このようなテキストが表示されれば正常です。)

スプレッドシートを更新した場合はJSONも勝手に最新の状態になります。(ただしソースコードを更新した場合は再びデプロイする必要があるため注意してください。)

GitHub Pagesの作業

Fork

GitHub Pagesを利用するためにGitHubのアカウントが必要です。持っていない方は作成してください。

HTMLを書きたくない方向けにテンプレートを用意しました。以下のリポジトリを開き、画面右上のForkを選択してください。リポジトリが自分のアカウントにコピーされ自由に編集できるようになります。

github.com

header.jsonの編集

header.jsonを選択すると以下のようなJSONファイルがプレビューされます。

{
"name" : "ここに難易度表の名前",
"symbol" : "ここにシンボル",
"data_url" : "ここにJSONのURL"
}

鉛筆のようなアイコン(マウスカーソルをかざすとEdit this fileと出てきます。)を選択し、header.jsonに難易度表の名前、シンボル(★とか★★とか◆とかstみたいなやつ)、先ほどデプロイしたURLを記述します。

index.htmlの編集

index.htmlをheader.jsonと同様に編集します。ここに難易度表の名前の部分とここに難易度表の説明文の部分を書き換えてください。

GitHub Pagesの設定

まずリポジトリの名前がBMS-Table-Templateのままなので変更しましょう。リポジトリの名前はSettingsタブのRepository nameで変更することができ、難易度表のURLはhttps://{あなたのID}.github.io/{変更したリポジトリの名前}/になります。

SettingsタブからPagesを選択しSourceのNoneをmasterに変更し保存します。

Your site is ready to be published at https://{あなたのID}.github.io/{変更したリポジトリの名前}/と出てくるので、このURLを記録しておきます。これが公開された難易度表のURLになります。

LR2の場合はBeMusicSeekerなどで難易度表を読み込むことができます。

これ以降難易度表に譜面を追加したり削除する場合はスプレッドシートを更新するだけで作業が完了します。(Apps ScriptやGitHubは触る必要ありません。)

おわりに

Google スプレッドシートとGitHub Pagesを利用したBMS難易度表の作成・公開の方法を紹介しました。皆さんも是非オリジナルの難易度表を作成してみてください。

テンプレートを改変する場合は次期難易度表フォーマットの詳細が以下のリンク先に載っているので参考にしてください。

github.com