Parse‘s Library

DTMとゲームについての備忘録と記録。

GoogleスプレッドシートとGitHubPagesでBMS難易度表作ってみた

こんばんはParseです。

今回はBMSプレイヤーならおなじみの難易度表を作ってみた話です。

最終の情報が2年前とかだったのでブログに残そうと思います。

 

目次

それではよろしくお願いいたします。

Cinnamon User Table VS Webページ(既存)

最近Cinnamonという新規BMSシステムが出ておりかなり高機能です。

その中で知識0で難易度表を作れるCinnamon User Tableがあります。

これも使ってみたのでメリットデメリットを紹介します。

 

メリット

とにかく事前知識は必要なく難しい部分は全部カット

1つのシステムですべて完結できる

 

デメリット

Cinnamon IR上で登録がないとそもそも楽曲検索できない

→10曲追加してみて4曲の一部譜面がデータになかった

同名譜面が存在すると手間がそれなりに増えてしまう

→10曲中3曲は同名譜面が10譜面が検索に出てくる状態に...

 

という話から条件追加などで使いやすくならないと運用が厳しいと判断。

そんなことで旧式の方法で難易度表を作っていきます。

準備

まず必要事項ですがGoogleアカウントGitアカウントが必要です。

これさえあればとりあえず製作準備OKです。

Google Spread Sheetで難易度表を作る

まず難易度表の元データを作っていきます。

1行目には目次を書いておきます。

2行目から1行目の内容に従って難易度表を作ります。

 

ここは外部サイトに大変お世話になりました。

参照元を記載させていただきます。

上記サイトの「Googleスプレッドシートでテーブル情報作成」を参照。

 

1行目に書くこと

必須事項: level / md5

levelは難易度表のlevel表記になります。

md5BMS譜面の管理用の固有アドレスのようなもので、

BMSファイルを特定の方法で変換して得られる英数字の文字列です。

 

他記載事項: lr2_bmsid / title / artist / url / url_diff / comment

こちらに関しては補足情報や修正情報を入れるための部分です。

lr2_bmsidはIRランキングIDを入れておくとそこにジャンプできます。

titleはタイトルの修正が可能です。

artistもアーティスト名の修正が可能です。

urlは楽曲ダウンロード用のURLリンクを記載するとジャンプできます。

url_diffは譜面ダウンロード用になります。差分譜面とかに使えます。

commentは自由記載が可能です。

 

md5値の取得方法について

上記のサイトでbmsの譜面ファイルからmd5値を取得できます。

ImportにBMSファイルをドラッグ&ドロップすると写真のように英数字が出ます。

これがmd5値となります。必須事項なので記載してください。

また他の方法でも取得可能ですので他手段でも大丈夫です。

他事項は各種それぞれに従って設定をしてください。

ということでこれで難易度表の元データが完成しました。

公開設定の準備(スプレッドシート&Apps Script)

次にこの難易度表を公開するための準備になります。

主に難易度表はURLリンク先のデータを参照するので個人用でも必要です。

 

1.Googleスプレッドシートの設定

まずこのスプレッドシートをWeb上に公開します。

とはいっても検索にかかるわけではありません

URLを知っている人間のみがアクセスできる環境にするというものです。

ファイル>共有>ウェブに公開」と進めます。

すると上記のような画面が開きます。

確認部分は「リンク設定」のタブになっているか。

設定範囲が「ドキュメント全体」かつ「ウェブページ」となっているか。

「変更が加えられたときに自動的に再公開する」にチェックが入っているか。

この点に注意して公開ボタンを押しましょう。

上に「このドキュメントはウェブ上に公開されています。」と出たらOK。

 

2.Apps Scriptを設定する

一番難関であると言える部分です。

まずは拡張機能>Apps Scriptと選択してApps Scriptの画面に入りましょう。

ここでプログラミングの画面になりますが拒否反応を頑張って抑えてください。

 

次に下記のサイトのApps Scriptの作成からサンプルコードを拝借します。

こちらのサイトも大変わかりやすいためご参照ください。

まずApps Scriptに最初から記述されている部分はすべて削除します。

次にサンプルコードをコピペします。

 

そしてGoogleスプレッドシートのタブに行きましてURLを確認します。

恐らくダブルクリックして全部表示すると下記の形式になっていると思います。

https:// ~ spreadsheets/d/"識別ID部分" /"色々書いてる部分"」

ここで大事なのは識別ID部分の英数字をコピーすることです。

最後の部分まで必要ありません。/d/から/までの間だけです。(3敗)

そしてApps Scriptに戻り15行目のxxxxxxxxxxxと記載の部分を消します

この時「'」を消さないようにお願い致します。コードの一部分です。

そして消した部分に先ほどのIDを貼り付けます。

次にその横のシート1の部分ですが、

こちらはシートの名前に変更がある方は同じようにシート名を貼り付けます。

これでプログラムの編集は完了です。

 

※お願い

この部分の資料ですがIDが予期せず公開されるのを防ぐため写真資料少な目です。

もしわかりづらい場合はID部に関しては雑雑氏のブログをご参照ください。

・項目 : Googleスプレッドシートの公開

(スプレッドシートの書き方の時にご紹介したブログになります)

Apps Scriptの編集に関してはladymade-star氏のブログをご参照ください。

・項目 : Apps Scriptの作成

(Apps Scriptのサンプルコードを拝借させていただいたブログになります)

 

後はApps Scriptでデプロイという作業を行えばApps Script側も完了です。

左上のデプロイの下ボタンを選択して新しいデプロイを選択。

設定画面が出ます。(写真はイメージ用に設定を変えています)

種類の選択は「ウェブアプリ

説明はデプロイの名前なのでなんか付けておくといいでしょう。

次のユーザーとして実行は「自分を選択します。

(メールアドレスが乗るため写真では設定を変えています)

最後にアクセスできるユーザーを「全員にしておきます。

これでデプロイしましょう。

 

テスト作業

ここで一度正確に設定できたかを確認できます。

先ほどのデプロイの下ボタンからデプロイの管理に入ります。

アクティブのタブ内の先ほど付けたデプロイの名前のプロジェクトを選択

その中のウェブアプリ欄のURLがクリック出来ますのでクリックします。

すると自分の設定した楽曲の情報が出てきたら成功です。

 

エラー例

・コードgsのエラーが出る

→おそらく何かが間違っていますので本ブログや参照先を読み直してください。

・同じ曲の同じ難易度が出現する

→サンプルコードを変えてみてください。(細部が違うみたいです)

 

比較対象としてStellaの難易度表データを置いておきます。

https://stellabms.xyz/st/score.json

これでApps Scriptの設定は完了です。後程確認することがあるのでタブはそのまま。

 

GitHub Pagesを設定して公開

まずは上記リンクのladymade-star氏が作ったプログラムを参照しましょう。

次に手軽に作成するならフォークを押して自分のリポジトリにコピーを作ります

 

自分のリポジトリにコピーができたらファイルを書き換えていきましょう。

 

header.jsonの編集

name : 難易度表の名前

symbol : 難易度シンボルを入力します

※シンボルとは難易度表の左にあるやつです。

(stellaならsl、New Generation通常なら▽となります。)

data_url : jsonファイルのURLを入力します

※ここにはApps ScriptのウェブアプリURLを入力しておきます

 

index.htmlの編集

まず5行目のtitleの横の部分に難易度表の名前を入力します。

次に22行目の</span>の左の部分にも難易度表の名前を入力します。

次に30行目ですがここが1行目の入力部分です。自分は難易度表名を入れてます。

次に31行目ですがここはデフォルトで2行目のメッセージが設定されています。

そして33行目は3行目の部分なので説明文を入力しました

これでindex.htmlの編集は完了になります。

 

GitHubの詳細設定と公開について

まずGitHub上のタブの「Settings」タブに入ります。

左の目次から「General」を選択

そのページのRepository Name」がプロジェクト名です。

ここを好きな名前に変えておきましょう

 

最後に公開ですがSettings」タブ内の「Pages」設定に入ります。

その中のBranch」の「None」を「Master」にして「Saveします。

これで上部に「Your site is live at 'URL'」と出てきたら公開完了です。

URLに飛んでみるとこんな感じで難易度表が出てきます。

このURLをBMSプレイヤーに読み込ませることで難易度表として機能します。

以上で作業の方終了になります。お疲れ様でした。

楽曲追加などはスプレッドシートを編集すればすべて自動反映されます。

実際作ってみて...

実は初期はCinnamon User Tableを使っていたのですがIRの登録譜面になくてきれいな難易度表ができないという状態になることが多々ありました。

そんな中この方法でなら簡単管理かつ本格的ということで採用しました。

md5値だけちょっと面倒ですが最終的には利便性「良」という感じです。

これを機に皆さんも難易度表を作ってみてはいかがでしょうか。

 

コピーライト

今回この記事を書くにあたって参考にさせていただいた方々です。

ladymade-star氏 - 難易度表・サンプルコード参考元

雑雑氏 - 難易度表記事参考元