HTMLを知らない人にも分かる、オーバーレイの改造の仕方を説明してみる
こんにちは！ リュナンです。
皆さんはBeatSaberの配信や投稿動画を見ていて、下の画像みたいに譜面の情報やスコアが表示されているのを、よく見かけませんか？
これはmod(ゲームを改造するソフト)を利用した、オーバーレイと呼ばれるツールになります。
BeatSaberはVRゲームなので、スコアなどはプレイしている本人には見やすくても、視聴者から見ると見づらい画面になってしまいます。
オーバーレイを使うとスコア表示が見やすくなったり、譜面の情報が表示されるので、視聴者が譜面を探す手助けにもなります。
今日はこのオーバーレイについて話したいと思います。
あっ！最初に断っておきますが、この記事は改造の仕方を一通り説明しているので、すごく長いです。もし興味があれば、時間のある時にでも読んで頂ければ幸いです。
この記事はBeat Saber Advent Calendar 2020の10日目の記事です。
オーバーレイを探してみる
さて、このオーバーレイと呼ばれるツールですが、ざっと見ると以下の物が公開されています。
■HTTP Statusを使ったもの
①Beat Saber Overlay （Beat Saber Overlay 改良版)
②Saber Stars HTTP Status Tournament Overlay
③Beat Saber Stream Overlay
④Hit Overlay ※ノーツのヒット表示用
⑤bsdp-like-overlay
■DataPullerを使ったもの
⑥BSDP-Overlay
⑦Freakylay
日本の動画投稿や配信を見ていると、①を使用されている方が多いですね。ちなみに、①の改良版と⑤は私が作成したものになります、もしよかったら使ってみてください。
自分用に改造してみる
BeatSaberにはCameraPlusなどの優れたmodが多数ありますので、自由なゲーム画面を構成できます。かなり凝った画面を作ってる方もいますね。
そのため、画面上で目立つ存在でもあるオーバーレイも、自分なりに改造してみたい人がいるんじゃないかな？と思います。
しかし、このオーバーレイの改造は、ちょっと敷居が高いです。
HTMLと呼ばれる謎のコマンドが並んだファイルを編集しないといけませんし。JavaScript(ジャバ スクリプト)と呼ばれる、modと通信してオーバーレイの表示を書き換えるプログラムを修正する必要があります。
あっ！ちょっと待ってください、自分には無理だ～なんて、諦めて帰る前に、もうちょっとだけお付き合いください。
JavaScriptはれっきとしたプログラム言語なので、プログラミング経験がないと難しいです。プログラムは「動作の手順を順番に書いて、処理が枝分かれするルールを決める」と言う部分がキモです。間違った手順やルールを書くと、コンピュータがそこで迷ってエラーで止まったり、永遠に同じ処理を繰り返したりします。組み立て家具の説明書が１ページ抜けてたら、完成しませんよね？怒ってお店に連絡すると思います。なので、コンピュータが怒って問い合わせてきたら、一つ一つ解決しないと先に進めません。
経験豊富な人なら家具も想像で組み立てられるかもしれませんが、コンピュータはそこまで賢くないです。
でも、HTMLはプログラムとは違います。ブラウザに表示するための色々な設定が書かれた、ただの設定ファイルです。設定なので、少し間違ってても正しい部分は正しく表示されます。余程ひどくなければ、とりあえず、なんか表示はされるでしょう。
あの難解なUnityやBlenderを駆使して、アバターを改変されている方が多数いらっしゃるBeatSaberのユーザなら、問題なくできます。やってることは同じで、ソフトの設定に適切な属性や値を入れるのか、テキスト上で適切な属性や値を書いていくかの違いだけです。
実は先程紹介したオーバーレイの中で①の改良版については、HTMLの修正だけで改造ができるように細工がしてあります。もちろん、高度な改造をするにはJavaScriptの修正が必要ですが、表示内容の追加や削除、表示サイズや位置などの装飾にかかわる部分はHTMLの修正だけで可能です。
HTMLを編集してみる
さて、HTMLを編集するにはツールが必要ですが何が良いでしょう？
実はPCでこの記事を見ている人ならば、かなりの人が今まさに使っているChromeブラウザが便利です。今回はChromeを使って説明します。
では実際に改造に取り掛かります。まず以下のインストール方法に従って、OBSでオーバーレイが動くようにしてください。
※記事はRelease v2020/11/08を元に記載しています。記事通りに試したい方は、同じバージョンでテストして下さい。
既に使用中の方は、「3.zipを適当なフォルダに解凍します。」の部分で、インストールしたフォルダを、編集用に適当にコピーしてOBSのブラウザソースに追加してください。
それではChromeを使って編集していきます。まず、オーバーレイをインストールしたフォルダのindex.htmlをChromeで開いてください。Chromeがデフォルトであればダブルクリックで開くと思います。もしくは、右クリックの「プログラムから開く」から「Goolge Chrome」で開いてください。
そうすると真っ白なChromeが開きますので、F12キーを押してください。なんか、右側に色々出てきたと思います。これを、デベロッパーツールと呼びます。
もし、右側に出ない場合は上の画像のように、右側に表示させると使いやすいと思います。
まずはSourcesタブを開きます。次に、Filesystemタブを開いて、＋マークをクリックします。フォルダの選択画面が開きますので、オーバーレイのインストールフォルダを選択します。デベロッパーツールのアクセス許可の確認が出ますので、許可ボタンを押します。
次に、左のファイルのツリーから、index.htmlとstyle.cssを選択すると、ファイルが開いた状態になりますので、index.htmlのタブを選択して、HTMLのコードを表示します。HTMLのコードが表示されない場合は、中央部分の分割位置を下げると出てくると思います。
さて、HTMLのコードをよく見ると、色分けされて表示されていると思います。この中で、紫色の<>で囲まれた部分がHTMLタグと呼ばれているものです。HTMLタグは<div ＊＊＊> ～</div>の様に同じ種類のタグで囲まれた部分がブラウザに表示される一つの領域のような役割を持ちます。
タグの中には橙色のidやclassなどの属性が設定されていて、それぞれ藍色の属性値が設定されています。黒色の文字は実際にブラウザに表示される文字になります。
タグとか属性の説明をすると、記事がくっそ長くなりますので気になる方は、下記などを参考にしてください。
こうして見てみると黒色の文字の内容から、なんとなくどこを編集すれば良いか見えてくると思います。でも、ちょっと分かりづらいですよね。
大丈夫です！もっとわかりやすく見る方法があります。
まずは、下準備として11行目に
<div id="overlay" class="hidden">
上記の様な文字があると思います、ここのhiddenを適当にhidden1とかに変更して、Ctrl + Sで上書き保存します。
保存したら、F5キーでブラウザを再読み込みします。
そうすると、なんかこんな画面が表示されると思います。
真っ白ですね～、カバーイラストが表示される部分と、EASYって文字だけなんか見えます。オーバーレイはOBS上で重ねて表示するために、単独で開くとこんな感じになってしまいますので、ちょっと確認しづらいです。
なので、ブラウザのURLの部分のindex.htmlの末尾に
?modifiers=test
と言う文字列を追加してください。
背景が黒くなって文字が見えるようになりました。
次にElementsタブを開いてください。ここで表示されるHTMLコードは、先程のSourcesタブで表示したものと同じものです。
▶マークでタグごとにまとめられていますので、全て開いていくと全く同じ内容になっていることがわかります。そして、タグにマウスカーソルを合わせると、ブラウザ上で対応する箇所が分かるようになっています。
また、上の画像のアイコンをクリックして、
ブラウザの画面上で選択すると、選択した部分がHTMLのどこのタグに当たるのか、▶が自動展開されて判るようになっています。
また、このHTMLコードは内容を変更することもできます。試しに、
<span class="text" id="rank">E</span>
の行で、E の部分をダブルクリックして下さい。
なんか、編集できるようになりました。試しに S に変更してみます。
そうすると・・・・
ブラウザ上のEのランク文字がSになりました。実は、HTMLの内容はブラウザのこの機能で自由に編集できるようになっています。なので、表示を確認しながら表示内容や属性値を変更するのに、とっても便利です。
この機能はブラウザで表示されるものなら、基本的に全て変更可能です。
例えば、今読んでるこの記事もF12を押せば記事内容を好き放題変更できます。もちろん、サーバ上の記事は変更できないので一時的なものです。
でも悪用すると、表示内容の偽装とか簡単にできちゃいます。よくツイッターとかでスクショ画面がありますが、疑わしい場合は必ず元のソースを確認しましょう。
不要な表示を消してみる
こうしてみると、不要な表示を消すのは簡単にできそうです。
試しに、スコアのランク表示を消してみましょう。HTMLの
<span class="text" id="rank">E</span>
の部分にカーソルを持っていって右クリックのメニューからDelete elementを選択します。（さっきSに書き換えた人は>S<になってます）
ブラウザの画面からEのランク表示が消えたと思います。
でも、本当に消えたんでしょうか？BeatSaberを起動して確認してみましょう。なお、確認はこのままChrome上で行いますので、OBSは起動しなくてもOKです。HMDをかぶると確認できないので、適当にHMDをプレイ正面に向くように置いて、BeatSaberのウィンドウ画面を見ながらコントローラで操作して確認します。
ランクの表示が消えて精度の%表示だけで動いていますね。
あと、HTMLのコードが部分的に反転して次々と書き換わってると思います。これは、JavaScriptがHTTPStatusから受け取った情報でHTMLのコードを書き換えているためです。
通常のオーバーレイは、HTMLを編集して今回みたいにタグを削除すると、JavaScriptが書き換える対象を見失って、エラーで止まってしまいます。
そのため、削除した部分に該当するJavaScriptの動作を修正する必要があるのです。改良版では起動時にHTMLをチェックするためエラーが起きないように考慮されています。
さて、Elementsタブで編集したHTMLコードですが、実はこのまま保存することができません。それに、JavaScriptによってコードの中身が変更されていますので、このまま保存するのは都合が悪いです。そのため、Elementsタブで編集した内容は、SourcesタブのオリジナルのHTMLコードに反映させる必要があります。今回は14行目のランク表示の<span>タグの行を削除して、保存してください。保存したらF5で更新して確認してください。
ちょっと面倒ですが、ElementsタブのHTMLコードは、右クリックのCopyからタグ単位でコピーは可能なので、コピーで問題なければ、Sourcesタブに貼り付けることで、多少修正が楽になります。
Elementsタブでチェックしたら、こまめにSourcesタブに戻って元のHTMLコードを修正・保存してF5で更新の流れを癖にして下さい。
文字の位置とサイズを変えてみる
オーバーレイの点数表示って、結構主張が激しいと思いませんか？
BeatSaberの点数って、譜面ごとに大きく変わるので、ランキングや大会で僅差を争う時ぐらいしか、あまり見ないと思います。
その代わり、精度を表す％表示は皆さん良く見ています。なので、精度の文字を大きくして、点数の文字を小さくしてみます。ただ、バランス的に上から下に大きくなったほうが良さそうなので、精度と点数の位置と文字サイズを入れ替えるイメージで改造してみましょう。
まず、位置を入れ替えます。これは結構簡単で
<span id="score">0</span>
の行を選択した状態で、
<div id="performance">
の直下にドラッグします。
同様に精度表示のタグが含まれる
<div class="performance-group">
の行を選択した状態で、次のコンボ数表示の<div class="performance-group">タグを閉じた後、つまり</div>の次の行にドラッグします。
そうすると
スコアと精度の位置が入れ替わっています。
次は文字サイズの変更です。文字サイズはスタイルシート(CSS)と呼ばれるファイルで設定されています。CSSについての詳しいことは以下を参考にしてみてください。
さて、CSSについてもデベロッパーツールで確認と編集ができます。ツール画面を左に広げるとHTMLと並べて表示できるので見やすくなります。CSSの内容はElementsタブのStylesをクリックすると出てきます。
まずは、点数表示の<span>タグの行を選択します。
すると、右側にいくつか表示された項目の中で、
font-size: 34px;(文字の大きさ)
font-weight: 700;(文字の太さ)
と言った設定があります。早速変更してみましょう。
font-size: 14px;
font-weight: 600;
に変更してみます。
点数表示の文字サイズが小さくなりました。でもなんか、精度表示よりも文字の明るさが違うみたいです。精度表示の<span>タグの行を選択して確認してみます。
opacity: 0.75;と言う設定があります。opacityとは、なんぞやってことで、先程のCSSの説明サイトで検索してみます。
どうも透明度の設定みたいですね。点数表示の行に戻って下の画像の赤丸部分をクリックすると属性が追加できますので opacity: 0.75; と追加してみます。
精度と同じ明るさになりました！
次は、精度の文字サイズを大きくします。精度の<span>タグの行を選択して、同様にfont-sizeなどの設定値を修正すればよさそうですが・・・ちょっと待って下さい！
実は、このまま修正すると COMBO の文字も一緒に変更されます。
どう言うことかと言うと、CSSの{ } で囲まれた属性値の先頭に
.performance-group .subtext {
とありますよね、実はこの部分はセレクタと呼ばれる物で、CSSの設定を適用する対象のHTMLタグを指定するためのものです。
.performance-group の .(ピリオド)はclass属性を示します。つまり、HTMLの
class="performance-group"
と属性が書かれたタグが対象です。そして、半角のスペースを挟んで .subtextとありますのが、これはclass属性がperformance-groupのタグに囲まれた中にある、class属性がsubtextのタグが対象と言う意味です。つまり精度を示すタグの他に、COMBOの文字を表示しているタグも該当することがわかります。
あと、先程の点数表示では #score とセレクタが指定されていました。
#はid属性を示すセレクタになります。つまり、
<span id="score">0</span>
と指定があった、点数表示のタグが対象になっています。
id属性とclass属性の2種類あるのは、それぞれ役割が違うからです。
idの属性値は1箇所のみ使用可能です（ズバリ指定したい）
classの属性値は複数箇所で使用可能です（設定を共用したい）
また、id属性のCSSの設定はclass属性よりも優先されます。
と、言うことは精度を示すタグ
<span class="subtext" id="percentage">0%</span>
のid属性がpercentageに対して、文字サイズなどの設定を追加すればよさそうです。
精度の<span>タグを選択した状態で、CSSの項目（どこでも良い）の右下辺りにマウスを持っていくと＋表示でInsert Style Rule Belowと表示が出ますので押してみます。
もし表示されない場合はChromeを更新して下さい[Ver: 87.0.4280.88で確認]
すると、span#percentageとセレクタが付いた項目が追加されました。spanは<span>タグを示します。#はid属性を示すので、<span>タグでid属性がpercentageのタグと言う意味になります。それでは、属性を追加していきます。元の点数表示の属性値を参考に
font-size: 34px;
font-weight: 700;
opacity: 1;
と追加してみましょう。
opacityは透明度の設定を1のデフォルト値に戻します。
id属性のセレクタを追加したため、class属性の同じ設定は取り消され、追加した設定が優先されました。ブラウザの表示も望んだ物になっています。
こんな感じで、HTMLでは表示される文字や画像などの、位置関係（順序）が決まりますが、文字サイズや画面上の表示位置など、スタイル（装飾）に関することは全てCSSで設定されています。
CSSの保存ですが、こちらはHTMLと違ってElementsタブで編集した内容は自動的に保存されます。なので、F5で更新しても変更した内容は維持されていると思います。
あっ、HTMLコードの移動した点数の<span>タグと精度の<div>タグはSourcesタブで修正して保存するのを忘れない様に、戻っちゃいますよ～
フォントを変更してみる
さて、結構長文になってきました。既に7000文字を超えています。ここまで読んで頂ける方は、たぶん興味がある方だと思いますので、もうちょっとだけお付き合いください。
オーバーレイのOBS上ので表示位置は、HTMLやCSSを修正することで、自由に変えられますが、OBS上でも結構自由に編集できます。OBSを駆使して、かなり自由なレイアウトにしている方もいらっしゃいますね。
でも、OBSだけではどうしてもできないことがあります、フォントそのものを変更することです。
オーバーレイで使われているフォントはGoogleFontsを使用しています。
以下のサイトを開いてみてください。
なんか、いっぱいフォントがありますね。この中で"Montserrat"と言う種類のフォントをデフォルトでは使用しています。なので、設定を変更するだけで、この多数のフォントから好きな物に変更することが可能です。
また、現在は全て同じ"Montserrat"フォント（文字の太さのみ違う）を使用していますが、部分的にスコアだけ変更とかも可能です。
サイトの詳しい使い方は、ちょっと古い説明で微妙に画面構成が違いますが、下記が参考になりそうです。
では、早速変更してみましょう。
変更するフォントは丸みがある、"Comfortaa" を使用することにします。まずサイトでComfortaaのフォントを開いて
文字の太さが400,600,700の３種類の「+ Select this style」を押します。
そうすると、右側にフォントを使用するためのコードが表示されます。
表示されない場合は、上の■で囲まれた＋マークを押すと開きます。
次に、◎<link>を選択してフォントを読み込むためのHTMLコードを表示させます。
HTMLコードのうち、<link href= で始まるタグをコピーして、Sourcesタブのindex.htmlの<head>タグの中に追加して、上書き保存します。
Montserratフォントの読み込みは残しても消しても、どちらでも良いです。
最終的に完成した時に不要でしたら消してください。
コピーしなかった<link ref="preconnect"～ のタグは、フォントの読み込みを早くするための機能ですが、オーバーレイはOBSの起動時に読み込んだあとは更新しないので無くても構いません。
次に「CSS rules ～」のコードをコピーして、style.cssの2行目の内容と差し替え、上書き保存します。
修正したらF5でブラウザを更新してください。
フォントが変わって印象がかわりましたね。
文字サイズや幅はフォントごとに違うため、フォントを変更すると微調整が必要な場合もあります。ちょっと文字間隔が詰まって見えるので広げてみましょう。style.cssの3行目に
letter-spacing: 2px;
と追加して上書き保存します。
文字同士の間隔が少し広がりました。
letter-spacingは、文字の間隔を指定する設定です。
今回設定したfont-familyやletter-spacingは<body>タグと言う、全ての大元になるタグに設定しているため、全体のフォントが変更されています。
個別に変更したい場合、そのタグを示すセレクタに追加すれば、例えばタイトルだけとかフォントの種類を変更することが可能です。
枠を追加してみる
さて最後にCSS設定では、こんなこともできるんだよってことで、譜面情報の領域に枠を追加して終わりたい思います。追加する枠のデザインは下記を参考にコピペと修正で行います。
いろんな種類の枠がありますね。どれでも良いのですが、複雑な枠だと修正や説明が大変なのでシンプルな「2.角丸」の枠を使用してみます。
「コードを表示」を開いてCSSのコードをコピーしてSourcesタブのstyle.cssの一番最後の行（たぶん234行目)に貼り付けて上書き保存します。
次にHTMLの枠を追加する領域のタグのclass属性にbox2を追加します。
Elementsタブで譜面情報の領域を確認すると <div id="beatmap">のタグが該当しそうです。このまま、Elementsタブで修正しても良いのですが、どうせSourcesタブでも修正保存が必要なので、Sourcesタブに戻ってindex.htmlの26行目を
<div id="beatmap" class="box2">
と修正して保存します。
保存したらF5で更新して、Elementsタブに移動します。
なんか、思ってたよりも違います。これは余計なCSS設定があるからです。
<div id="beatmap" class="box2">
の行を選択して、CSSの.boxセレクタのチェックボックスを一つずつON/OFFして確認してみます。
確認すると、margin, font-weight, color, backgroundは不要なのでOFFにします。
paddingは0.7em 0.7em ぐらいが良さそうです。最後に枠の色を変更します。
borderの■の部分をクリックすると色が選べるので適当に選びます。
これで完了です！ えっ、なんかセンスが悪い？😅
自分のデザインセンスが壊滅的なのは自覚があるので、許してください🙏
最後にOBSで確認ですが、その前にやることがあります。
一番最初に修正した
<div id="overlay" class="hidden1">
のclass属性のhidden1をhiddenに戻す必要があります。
これは、何をやっていたかと言うと、Beat Saber Overlay 改良版のページのオーバーレイの改造の項目を見ると、何やら表があります。
これは、id属性がoverlayのタグに対して、JavaScriptが譜面のプレイ開始時にclass属性のhiddenを削除して、プレイが終了するとhiddenを付与しますよって説明になります。
CSSの#overlay.hiddenのセレクタを見るとわかりますが、opacity: 0;で100%透明にして文字を消す設定と、Transitionと言うアニメーション処理で枠外に移動させる設定がされています。
オーバーレイの起動時は非表示にしたいため、HTMLではhiddenの設定をしてありますが、改造時は邪魔なためhidden1にして表示させていたのです。
他にも、この表にはJavaScriptがHTMLに対してどの様な処理をするのか記載がありますので、オーバーレイの改造の参考にしてください。ミス数の表示などデフォルトのオーバーレイでは無い項目を表示したりできます。
さて、class属性をhiddenに直したら保存して、OBSで確認してみましょう。
上手く動いてますね！デフォルトの物と比較してみましょう。
結構違って見えますね！
まとめてみる
さて、ここまでやってみてHTMLやCSSの改造は難しかったでしょうか？
コードを直接触るのではなく、マウスを使って画面上でデザインするツールも無いことはないです。例えば、Wixと言ったオンラインのホームページ作成ツールもあります。ただ、これらは通常のWebサイトを作るのに特化しているため、オーバーレイの作成には向きません。また、HTMLやCSSをファイルとして出力できないため、通常のやり方では使用できません。
また、CSSによる枠や文字装飾（影やグラデーションを付けたり)などのデザインサンプルは、検索すると大量に出てきます。これらはコードで書かれているため、結局コードを触ることになるため、直接HTMLやCSSのコードを触ったほうがわかりやすいと思います。
今回の説明で、デベロッパーツールがかなり良くできていると感じた方もいらっしゃると思います。ぱっと見わからないHTMLやCSSのコードもブラウザ画面と比較しながら修正できるし、試せるのでわかりやすいです。
HTMLやCSSについては、他にも色々な機能があります。私も、WebサイトはCSSが無い時代にしか作ったことが無いため、今のHTMLの仕様はよくわかっていません。今回の記事も調べながら書いています。でも、ネット上には非常に多くの解説サイトがありますので、調べるのに困ることは無いと思います。本文中に掲載にしたサイトは、比較的わかりやすい説明だったので紹介しました。人それぞれレベルが違うので、自分にわかりやすい説明のサイトを参考にすれば良いと思います。
おわってみる
ここまで読んで頂いた方、お疲れ様でした！
たぶん、あなたはオーバーレイの改造に興味がある方だと思いますので、是非ご自分でも試してみて下さい。
途中から読み飛ばしてしまった方、申し訳ありません🙏
今回のアドベントカレンダーのイベント記事としては、色んな人に見て頂けるであろうことを想定すると、やりすぎだったと反省しています。
でも、知識がない人にも（むしろ知識がない人向けに）それなりに格好が付くところまで説明するには、やっぱり結構長くなってしまうんですよね。
次回、また機会があれば、もう少しまとまった記事を書きたいと思います。
今回の記事が、オーバーレイのちょっと気に入らない部分を直す程度でも、役に立てば幸いです。さらに、これをきっかけに改造したり、新しく作ってみたりする人が出てきてくれたら嬉しいですね。もし、良いデザインの物ができて、公開したりする人が出てくれば、オーバーレイの選択筋が増えて、BeatSaberユーザの表現の幅が広がると思います。
そんなわけで、長文にお付き合い頂きありがとうございました。
ちなみに、今日は私の誕生日です。それもあって10日を選んだのですが、こんなに長文になるとは思いませんでした。なんとか記事の作成が間に合ってよかったです。
それでは、よきBeatSaberライフをお楽しみ下さい！
追伸してみる
BeatSaberに関係する、ちょっとしたお助けツールを作っています。
下記のモーメントにまとめてるので、良ければご覧下さい。
https://twitter.com/rynan4818/moments